/* Wisdom Capsules Challenge — frontend-only visual system */
:root {
  --wc-navy: hsl(215, 46%, 14%);
  --wc-navy-2: hsl(216, 43%, 20%);
  --wc-gold: hsl(38, 70%, 50%);
  --wc-gold-soft: hsl(39, 68%, 92%);
  --wc-ink: hsl(28, 18%, 16%);
  --wc-paper: hsl(42, 44%, 96%);
  --wc-success: hsl(142, 28%, 36%);
  --wc-danger: hsl(5, 58%, 45%);
  --wc-warning: hsl(34, 78%, 45%);
  --wc-radius: 18px;
  --wc-shadow: 0 18px 50px hsla(25, 24%, 10%, 0.09);
}

.wc-page { overflow: hidden; }
.wc-page [hidden], .wc-exam-app [hidden] { display: none !important; }
.wc-shell { width: min(1180px, calc(100% - 3rem)); margin: 0 auto; }
.wc-kicker { margin: 0 0 .7rem; font-family: var(--font-ui); font-size: .76rem; line-height: 1.2; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--accent-gold-dim); }
.wc-muted { color: var(--text-secondary); }
.wc-tiny { font-family: var(--font-ui); color: var(--text-secondary); font-size: .76rem; line-height: 1.55; margin: .75rem 0 0; }
.wc-lead { max-width: 700px; font-size: 1.14rem; line-height: 1.75; color: hsla(0,0%,100%,.82); }
.wc-lead-small { max-width: 680px; font-size: 1.08rem; color: var(--text-secondary); }
.wc-body-copy { max-width: 650px; color: var(--text-secondary); }
.wc-card-label { display: block; margin-bottom: .35rem; font-family: var(--font-ui); font-size: .73rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-secondary); }
.wc-actions { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }

.wc-btn { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: .72rem 1.35rem; font-family: var(--font-ui); font-size: .85rem; line-height: 1; font-weight: 700; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.wc-btn:hover { transform: translateY(-1px); }
.wc-btn:focus-visible, .wc-provider-btn:focus-visible, .wc-option:focus-visible, .wc-palette-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-gold) 55%, transparent); outline-offset: 3px; }
.wc-btn[disabled] { opacity: .48; cursor: not-allowed; transform: none; }
.wc-btn-gold { background: linear-gradient(135deg, hsl(41,78%,58%), hsl(35,66%,46%)); color: #fff; box-shadow: 0 10px 28px hsla(37,70%,34%,.24); }
.wc-btn-gold:hover { color: #fff; box-shadow: 0 13px 34px hsla(37,70%,34%,.30); }
.wc-btn-dark { background: var(--wc-navy); color: #fff; }
.wc-btn-dark:hover { background: var(--wc-navy-2); color: #fff; }
.wc-btn-facebook { gap: .45rem; background: #1877f2; color: #fff; box-shadow: 0 8px 20px rgb(24 119 242 / .22); }
.wc-btn-facebook:hover { color: #fff; background: #1265d2; }
.wc-btn-facebook > span { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: #fff; color: #1877f2; font-family: Arial, sans-serif; font-size: .85rem; font-weight: 700; line-height: 1; }
.wc-btn-ghost { background: transparent; color: inherit; border-color: currentColor; opacity: .88; }
.wc-btn-ghost-dark { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); }
.wc-btn-block { width: 100%; }
.wc-text-link, .wc-back-link { font-family: var(--font-ui); font-size: .86rem; font-weight: 700; color: var(--accent-gold-dim); }
.wc-back-link { display: inline-block; margin-bottom: 2rem; color: var(--text-secondary); }
.wc-text-button { padding: .35rem 0; border: 0; background: transparent; color: var(--accent-gold-dim); font-family: var(--font-ui); font-weight: 700; cursor: pointer; }

/* Landing */
.wc-hero { position: relative; isolation: isolate; background: radial-gradient(circle at 74% 40%, hsl(214,44%,24%) 0, hsl(215,48%,13%) 38%, hsl(215,54%,10%) 100%); color: #fff; min-height: 620px; display: grid; align-items: center; }
.wc-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .24; background-image: radial-gradient(circle at center, hsla(39,78%,63%,.7) 1px, transparent 1.5px); background-size: 80px 80px; mask-image: linear-gradient(90deg, transparent, #000 45%, #000 100%); }
.wc-hero-glow { position: absolute; z-index: -1; width: 480px; height: 480px; right: 7%; top: 9%; border-radius: 50%; background: radial-gradient(circle, hsla(39,78%,58%,.17), transparent 68%); filter: blur(2px); }
.wc-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 4rem; align-items: center; padding: 6.5rem 0; }
.wc-hero h1 { margin: 0 0 1.2rem; font-size: clamp(3rem, 6vw, 5.6rem); line-height: .97; color: hsl(42,50%,95%); letter-spacing: -.025em; }
.wc-hero .wc-kicker { color: hsl(39,76%,63%); }
.wc-hero .wc-actions { margin-top: 2rem; }
.wc-hero .wc-btn-ghost { color: hsl(42,30%,92%); border-color: hsla(42,30%,92%,.28); }
.wc-honor-note { margin: 1.4rem 0 0; font-family: var(--font-ui); font-size: .78rem; color: hsla(0,0%,100%,.58); }
.wc-hero-emblem { position: relative; min-height: 410px; display: grid; place-items: center; }
.wc-orbit { position: absolute; border: 1px solid hsla(39,75%,62%,.22); border-radius: 50%; }
.wc-orbit-one { width: 360px; height: 360px; }
.wc-orbit-two { width: 265px; height: 265px; }
.wc-seal { width: 172px; height: 172px; display: grid; place-items: center; border-radius: 50%; position: relative; background: linear-gradient(145deg, hsl(39,73%,62%), hsl(34,58%,35%)); box-shadow: 0 24px 60px hsla(0,0%,0%,.34), inset 0 0 0 7px hsla(0,0%,100%,.12); }
.wc-seal::before, .wc-seal::after { content: ''; position: absolute; border: 1px solid hsla(0,0%,100%,.36); border-radius: 50%; }
.wc-seal::before { inset: 14px; } .wc-seal::after { inset: 31px; }
.wc-seal-mark { width: 42%; height: 42%; color: hsl(43,52%,95%); }
.wc-achievement-card { position: absolute; right: 0; bottom: 18px; width: 270px; padding: 1rem 1.1rem; border: 1px solid hsla(42,35%,90%,.18); background: hsla(214,47%,12%,.82); backdrop-filter: blur(10px); border-radius: 14px; box-shadow: 0 12px 34px hsla(0,0%,0%,.26); }
.wc-achievement-card span, .wc-achievement-card strong { display: block; }
.wc-achievement-card strong { font-family: var(--font-heading); font-size: 1.12rem; color: #fff; margin: .25rem 0; }
.wc-achievement-card span { font-family: var(--font-ui); font-size: .72rem; color: hsla(0,0%,100%,.62); }
.wc-achievement-card .wc-achievement-eyebrow { color: hsl(39,76%,63%); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.wc-metric-strip { background: var(--bg-elevated); border-bottom: 1px solid var(--border); }
.wc-metrics { display: grid; grid-template-columns: repeat(4, 1fr); }
.wc-metrics div { padding: 1.65rem 1rem; text-align: center; border-right: 1px solid var(--border); }
.wc-metrics div:last-child { border-right: 0; }
.wc-metrics strong { display: block; font-family: var(--font-heading); color: var(--text-heading); font-size: 1.65rem; line-height: 1.1; }
.wc-metrics span { font-family: var(--font-ui); color: var(--text-secondary); font-size: .75rem; }
.wc-section { padding: 6rem 0; }
.wc-section-soft { background: var(--bg-secondary); }
.wc-section-heading { max-width: 700px; margin: 0 auto 3rem; text-align: center; }
.wc-section-heading-left { margin-left: 0; text-align: left; }
.wc-section-heading h2 { margin: .2rem 0 .8rem; font-size: clamp(2.1rem,4vw,3.2rem); }
.wc-section-heading p:last-child { color: var(--text-secondary); }
.wc-principle-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.wc-principle-card { position: relative; min-height: 275px; padding: 1.6rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--wc-radius); box-shadow: 0 8px 24px var(--shadow); }
.wc-principle-card h3 { margin: 3.5rem 0 .7rem; }
.wc-principle-card p { margin: 0; color: var(--text-secondary); font-size: .95rem; }
.wc-step { position: absolute; top: 1.25rem; right: 1.35rem; font-family: var(--font-ui); font-size: .75rem; color: var(--accent-gold-dim); }
.wc-two-col { display: grid; grid-template-columns: 1.15fr .85fr; gap: 4rem; align-items: center; }
.wc-inline-flow { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; font-family: var(--font-ui); font-size: .82rem; font-weight: 700; color: var(--text-secondary); }
.wc-inline-flow span { padding: .38rem .7rem; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--border); }
.wc-inline-flow b { color: var(--accent-gold-dim); }
.wc-rules-card { padding: 2rem; border-radius: var(--wc-radius); border: 1px solid var(--border); background: var(--bg-elevated); box-shadow: var(--wc-shadow); }
.wc-rules-card h3 { margin-top: 0; }
.wc-check-list { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.wc-check-list li { position: relative; padding-left: 1.55rem; color: var(--text-secondary); font-size: .92rem; }
.wc-check-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--wc-success); font-family: var(--font-ui); font-weight: 800; }
.wc-check-list-compact li { margin-bottom: .9rem; }
.wc-float-cta { position: fixed; right: max(1.25rem, calc((100vw - 1360px) / 2)); bottom: 1.25rem; z-index: 45; width: min(360px, calc(100vw - 2.5rem)); }
.wc-float-cta-link { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: .85rem; align-items: center; padding: .9rem 1rem .9rem 1.15rem; border: 1px solid hsla(39, 76%, 63%, .46); border-radius: 18px; color: hsl(42, 50%, 95%); background: linear-gradient(135deg, hsla(215, 49%, 15%, .97), hsla(216, 44%, 22%, .97)); box-shadow: 0 16px 38px hsla(215, 48%, 8%, .28); backdrop-filter: blur(12px); font-family: var(--font-ui); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.wc-float-cta-link:hover { color: #fff; transform: translateY(-2px); border-color: hsl(39, 76%, 63%); box-shadow: 0 20px 42px hsla(215, 48%, 8%, .36); }
.wc-float-cta-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-gold) 58%, transparent); outline-offset: 4px; }
.wc-float-cta-mark { width: 34px; height: 34px; border: 1px solid hsla(39, 76%, 63%, .75); border-radius: 50%; color: hsl(39, 76%, 68%); }
.wc-float-cta-question { font-size: .84rem; font-weight: 700; line-height: 1.35; }
.wc-float-cta-action { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; color: hsl(39, 76%, 68%); font-size: .78rem; font-weight: 800; animation: wc-float-cta-pulse 1.8s ease-in-out infinite; }
.wc-float-cta-arrow { display: inline-block; font-size: 1.12rem; line-height: .8; animation: wc-float-cta-arrow 1s ease-in-out infinite; }
@keyframes wc-float-cta-pulse { 0%, 100% { opacity: .68; } 50% { opacity: 1; } }
@keyframes wc-float-cta-arrow { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* Authentication */
.wc-auth-section { min-height: calc(100vh - 4.5rem); display: grid; align-items: center; padding: 5rem 0; background: linear-gradient(120deg, var(--bg-primary), var(--bg-secondary)); }
.wc-auth-grid { display: grid; grid-template-columns: 1fr 480px; gap: 6rem; align-items: center; }
.wc-auth-context h1 { font-size: clamp(2.8rem,5vw,4.6rem); margin: 0 0 1.25rem; }
.wc-auth-card { position: relative; padding: 2.4rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--wc-shadow); }
.wc-auth-card h2 { text-align: center; margin-top: .4rem; }
.wc-auth-card > .wc-muted { text-align: center; font-size: .9rem; }
.wc-card-seal { width: 54px; height: 54px; margin: -4rem auto 1rem; display: block; border-radius: 50%; background: var(--wc-navy); color: hsl(39,75%,63%); box-shadow: 0 9px 24px hsla(215,45%,10%,.22); }
.wc-provider-list { display: grid; gap: .7rem; margin-top: 1.5rem; }
.wc-provider-btn { min-height: 50px; display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; border: 1px solid var(--border); border-radius: 12px; color: var(--text-primary); font-family: var(--font-ui); font-size: .86rem; font-weight: 600; background: var(--bg-primary); }
.wc-provider-btn::after { content: '→'; color: var(--text-secondary); }
.wc-provider-btn:hover { border-color: var(--accent-gold); color: var(--text-primary); }
.wc-provider-monogram { width: 28px; height: 28px; display: grid; place-items: center; justify-self: center; border-radius: 8px; background: var(--bg-elevated); font-size: .7rem; font-weight: 800; }
.wc-auth-loading, .wc-auth-unavailable { margin: 1.25rem 0 0; text-align: center; font-family: var(--font-ui); font-size: .8rem; color: var(--text-secondary); }
.wc-auth-unavailable { padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-primary); }
.wc-auth-unavailable p { margin: 0; }
.wc-divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; font-family: var(--font-ui); font-size: .7rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .08em; }
.wc-divider::before, .wc-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.wc-email-form label, .wc-start-card label:not(.wc-honor-check) { display: block; margin-bottom: .45rem; font-family: var(--font-ui); font-size: .76rem; font-weight: 700; color: var(--text-secondary); }
.wc-field-row { display: grid; grid-template-columns: 1fr auto; gap: .65rem; }
.wc-email-form input, .wc-start-card input[type="text"] { width: 100%; min-height: 46px; padding: .7rem .85rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-ui); font-size: .86rem; }
.wc-email-form input:focus { outline: 2px solid var(--accent-gold); border-color: var(--accent-gold); }
.wc-code-form .wc-field-row { display: grid; grid-template-columns: 1fr; gap: .85rem; margin-top: .6rem; }
.wc-code-input { text-align: center !important; font-family: 'DM Sans', monospace !important; font-size: 1.5rem !important; font-weight: 700 !important; letter-spacing: .35em !important; height: 52px !important; border-radius: 12px !important; border: 1.5px solid var(--border) !important; background: var(--bg-primary) !important; }
.wc-code-input:focus { outline: 2px solid var(--accent-gold) !important; border-color: var(--accent-gold) !important; }
.wc-code-btn { width: 100%; min-height: 48px; font-size: .92rem; font-weight: 700; border-radius: 12px; }
.wc-code-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); font-family: var(--font-ui); font-size: .82rem; }
.wc-link-btn { background: none; border: none; padding: .25rem 0; font-family: inherit; font-size: inherit; color: var(--text-secondary); cursor: pointer; text-decoration: none; transition: color .15s ease; }
.wc-link-btn:hover { color: var(--text-primary); text-decoration: underline; }
.wc-link-btn[data-resend-code] { color: var(--accent-gold-dim); font-weight: 700; }
.wc-link-btn[data-resend-code]:hover { color: var(--accent-gold); }
.wc-form-help, .wc-privacy-note { margin: .55rem 0 0; font-family: var(--font-ui); font-size: .72rem; line-height: 1.5; color: var(--text-secondary); }
.wc-privacy-note { margin-top: 1.4rem; text-align: center; }
.wc-form-status { min-height: 1.2rem; margin-top: .55rem; font-family: var(--font-ui); font-size: .76rem; color: var(--text-secondary); text-align: center; }
.wc-form-status.is-error { color: var(--wc-danger); }
.wc-form-status.is-success { color: var(--wc-success); }

/* Dashboard */
.wc-dashboard-section, .wc-result-section, .wc-certificate-page { padding: 5rem 0 7rem; min-height: 70vh; }
.wc-loading { display: grid; place-items: center; gap: .8rem; min-height: 320px; color: var(--text-secondary); }
.wc-loading p { margin: 0; font-family: var(--font-ui); font-size: .85rem; }
.wc-spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--accent-gold); border-radius: 50%; animation: wc-spin .8s linear infinite; }
@keyframes wc-spin { to { transform: rotate(360deg); } }
.wc-signed-out-panel { max-width: 650px; margin: 4rem auto; text-align: center; padding: 3rem; border: 1px solid var(--border); border-radius: var(--wc-radius); background: var(--bg-elevated); }
.wc-dashboard-header { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; }
.wc-dashboard-header h1 { margin: .2rem 0 .4rem; }
.wc-dashboard-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 1rem; }
.wc-best-card, .wc-stat-card { min-height: 150px; padding: 1.4rem; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-elevated); box-shadow: 0 7px 22px var(--shadow); }
.wc-best-card { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(140deg, var(--wc-navy), var(--wc-navy-2)); color: #fff; }
.wc-best-card .wc-card-label, .wc-best-card .wc-muted { color: hsla(0,0%,100%,.62); }
.wc-best-score { display: block; margin: .25rem 0; font-family: var(--font-heading); font-size: 3.3rem; line-height: 1; color: hsl(39,75%,63%); }
.wc-mini-trophy { font-size: 3.5rem; color: hsl(39,72%,61%); opacity: .75; }
.wc-stat-card strong { display: block; margin: .8rem 0 .2rem; font-family: var(--font-heading); font-size: 2.2rem; line-height: 1; color: var(--text-heading); }
.wc-stat-card .wc-stat-text { font-family: var(--font-ui); font-size: 1rem; line-height: 1.3; }
.wc-stat-card span:last-child { font-family: var(--font-ui); font-size: .72rem; color: var(--text-secondary); }
.wc-dashboard-lower { display: grid; grid-template-columns: 1.55fr .65fr; gap: 1rem; margin-top: 1rem; }
.wc-panel { padding: 1.6rem; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-elevated); }
.wc-panel h2 { margin: .15rem 0 1rem; font-size: 1.55rem; }
.wc-table-wrap { overflow-x: auto; }
.wc-attempt-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-size: .78rem; }
.wc-attempt-table th, .wc-attempt-table td { padding: .9rem .65rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.wc-attempt-table th { color: var(--text-secondary); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }
.wc-criso { max-width: 920px; margin: 0 auto; }
.wc-criso-header { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 1.5rem; }
.wc-criso-header h1 { margin: .2rem 0 0; }
.wc-criso-header p { margin-bottom: .25rem; }
.wc-criso-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated); }
.wc-criso-table { width: 100%; border-collapse: collapse; font-family: var(--font-ui); font-variant-numeric: tabular-nums; }
.wc-criso-table th, .wc-criso-table td { padding: .9rem 1rem; border-bottom: 1px solid var(--border); }
.wc-criso-table tbody tr:last-child > * { border-bottom: 0; }
.wc-criso-table thead th { color: var(--text-secondary); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; text-align: right; white-space: nowrap; }
.wc-criso-table thead th:first-child, .wc-criso-table tbody th { text-align: left; }
.wc-criso-table tbody th { font-family: var(--font-body); font-weight: 500; }
.wc-criso-table tbody td { text-align: right; }
.wc-result-pill { display: inline-flex; align-items: center; min-height: 24px; padding: .2rem .55rem; border-radius: 999px; font-size: .66rem; font-weight: 700; }
.wc-result-pill.pass { background: color-mix(in srgb, var(--wc-success) 13%, transparent); color: var(--wc-success); }
.wc-result-pill.fail { background: color-mix(in srgb, var(--wc-danger) 11%, transparent); color: var(--wc-danger); }
.wc-empty { margin: 1rem 0 0; font-family: var(--font-ui); color: var(--text-secondary); font-size: .82rem; }
.wc-certificate-panel { position: relative; overflow: hidden; }
.wc-certificate-panel::after { content: ''; position: absolute; width: 180px; height: 180px; right: -70px; top: -70px; border: 1px solid color-mix(in srgb,var(--accent-gold) 35%,transparent); border-radius: 50%; }
.wc-certificate-mini-seal { width: 64px; height: 64px; display: block; margin: .6rem 0 1.2rem; border-radius: 50%; background: var(--wc-gold-soft); color: var(--accent-gold-dim); border: 1px solid color-mix(in srgb,var(--accent-gold) 40%,transparent); }
.wc-cert-score { display: flex; align-items: baseline; gap: .5rem; margin: 1.2rem 0; }
.wc-cert-score strong { font-family: var(--font-heading); font-size: 2.4rem; color: var(--accent-gold-dim); }
.wc-cert-score span { font-family: var(--font-ui); font-size: .7rem; color: var(--text-secondary); }

/* Prepare */
.wc-prepare-section { padding: 5rem 0 7rem; }
.wc-prepare-grid { display: grid; grid-template-columns: 1fr 390px; gap: 4rem; align-items: start; }
.wc-prepare-grid main > h1 { margin: .2rem 0 1rem; font-size: clamp(2.7rem,5vw,4.2rem); }
.wc-rule-list { margin-top: 2.5rem; display: grid; gap: .85rem; }
.wc-rule-list article { display: grid; grid-template-columns: 46px 1fr; gap: 1rem; padding: 1.2rem 0; border-top: 1px solid var(--border); }
.wc-rule-list article > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--wc-gold-soft); color: var(--accent-gold-dim); font-family: var(--font-ui); font-size: .7rem; font-weight: 800; }
.wc-rule-list h3 { margin: 0 0 .3rem; font-size: 1.15rem; }
.wc-rule-list p { margin: 0; color: var(--text-secondary); font-size: .9rem; }
.wc-start-card { position: sticky; top: 6.5rem; padding: 2rem; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-elevated); box-shadow: var(--wc-shadow); }
.wc-start-card h2 { margin: .2rem 0 .5rem; }
.wc-start-card form { padding-bottom: 1.3rem; border-bottom: 1px solid var(--border); }
.wc-inline-status { margin-left: .5rem; font-family: var(--font-ui); font-size: .72rem; color: var(--wc-success); }
.wc-start-summary { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.3rem 0; }
.wc-start-summary div { padding: .75rem; border-radius: 10px; background: var(--bg-secondary); }
.wc-start-summary span, .wc-start-summary strong { display: block; }
.wc-start-summary span { font-family: var(--font-ui); font-size: .66rem; color: var(--text-secondary); }
.wc-start-summary strong { font-family: var(--font-heading); font-size: 1.25rem; }
.wc-honor-check { display: grid; grid-template-columns: auto 1fr; gap: .7rem; margin: 1rem 0 1.2rem; align-items: start; font-family: var(--font-ui); font-size: .78rem; color: var(--text-secondary); cursor: pointer; }
.wc-honor-check input { margin-top: .25rem; }

/* Exam */
.wc-exam-body { min-height: 100vh; background: hsl(42,36%,96%); font-size: 1rem; line-height: 1.6; }
.wc-exam-body.dark-theme { background: hsl(216,24%,10%); }
.wc-exam-header { min-height: 74px; display: flex; justify-content: space-between; align-items: center; gap: 2rem; padding: .8rem max(2rem, calc((100vw - 1180px)/2)); border-bottom: 1px solid var(--border); background: var(--bg-elevated); position: sticky; top: 0; z-index: 20; }
.wc-exam-brand { display: flex; align-items: center; gap: .7rem; color: var(--text-primary); }
.wc-exam-brand:hover { color: var(--text-primary); }
.wc-exam-brand-mark { width: 38px; height: 38px; display: block; border-radius: 50%; background: var(--wc-navy); color: hsl(39,74%,62%); }
.wc-exam-brand strong, .wc-exam-brand small { display: block; }
.wc-exam-brand strong { font-family: var(--font-heading); font-size: .95rem; }
.wc-exam-brand small { font-family: var(--font-ui); font-size: .64rem; color: var(--text-secondary); }
.wc-exam-meta { display: flex; gap: 1.8rem; align-items: start; }
.wc-exam-meta > div { min-width: 86px; }
/* Scope the label styling to the direct child span. The hints block nests a span
   inside its <strong> to hold the count, and a bare `.wc-exam-meta span` selector
   turned that count into a block-level uppercase label, pushing "left" onto a
   third line and making the three blocks different heights. */
.wc-exam-meta > div > span, .wc-exam-meta strong { display: block; font-family: var(--font-ui); }
.wc-exam-meta > div > span { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-secondary); line-height: 1.1rem; }
.wc-exam-meta strong { font-size: .86rem; color: var(--text-primary); line-height: 1.5rem; white-space: nowrap; }
.wc-exam-meta strong span { display: inline; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
.wc-exam-meta > div:first-child strong { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
/* Equal label and value line heights keep all three blocks exactly two rows tall,
   so their labels and values stay on a shared baseline despite the larger timer. */
.wc-exam-meta .wc-timer strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; line-height: 1.5rem; }
.wc-timer.is-low strong { color: var(--wc-danger); }
.wc-exam-main { width: min(1180px, calc(100% - 3rem)); margin: 0 auto; padding: 2.2rem 0 3rem; }
.wc-exam-loading { min-height: 60vh; display: grid; place-items: center; align-content: center; gap: 1rem; color: var(--text-secondary); }
.wc-exam-error { max-width: 650px; margin: 8vh auto; text-align: center; padding: 3rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--wc-radius); }
.wc-exam-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "chrome ." "question palette"; column-gap: 1rem; row-gap: 0; align-items: start; }
.wc-question-chrome { grid-area: chrome; min-width: 0; }
.wc-question-area { grid-area: question; min-width: 0; }
.wc-question-topline { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .55rem; font-family: var(--font-ui); font-size: .76rem; color: var(--text-secondary); }
.wc-flag-btn { border: 0; background: transparent; font: inherit; color: var(--text-secondary); cursor: pointer; }
.wc-flag-btn[aria-pressed="true"] { color: var(--wc-warning); font-weight: 700; }
.wc-progress-track { height: 3px; border-radius: 999px; background: var(--border); overflow: hidden; margin-bottom: .8rem; }
.wc-progress-track span { display: block; height: 100%; width: 4%; background: var(--accent-gold); transition: width .2s ease; }
.wc-question-card { min-height: 500px; padding: 2.25rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 8px 24px var(--shadow); }
.wc-question-card h1 { margin: 0 0 2rem; font-family: var(--font-body); font-size: clamp(1.35rem,2.3vw,1.9rem); line-height: 1.55; }
.wc-option-list { display: grid; gap: .75rem; }
.wc-option { width: 100%; display: grid; grid-template-columns: 34px 1fr; gap: .9rem; text-align: left; align-items: start; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-primary); color: var(--text-primary); cursor: pointer; font-family: var(--font-ui); font-size: .88rem; line-height: 1.55; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.wc-option:hover { border-color: color-mix(in srgb,var(--accent-gold) 62%,var(--border)); transform: translateY(-1px); }
.wc-option[aria-checked="true"] { border-color: var(--wc-navy); background: color-mix(in srgb, var(--wc-navy) 7%, var(--bg-elevated)); }
.wc-option-key { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border); font-weight: 700; font-size: .72rem; }
.wc-option[aria-checked="true"] .wc-option-key { background: var(--wc-navy); color: #fff; border-color: var(--wc-navy); }
.wc-hint-panel { margin-top: 1.2rem; padding: 1rem 1.1rem; border-radius: 12px; background: color-mix(in srgb,var(--accent-gold) 9%,var(--bg-primary)); border: 1px solid color-mix(in srgb,var(--accent-gold) 35%,var(--border)); }
.wc-hint-label { font-family: var(--font-ui); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--accent-gold-dim); }
.wc-hint-panel p { margin: .3rem 0 0; font-size: .9rem; }
.wc-exam-actions { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: center; margin-top: .85rem; }
.wc-hint-btn { justify-self: center; border: 0; background: transparent; color: var(--accent-gold-dim); font-family: var(--font-ui); font-weight: 700; font-size: .8rem; cursor: pointer; }
.wc-hint-btn[disabled] { opacity: .4; cursor: not-allowed; }
.wc-palette-panel { grid-area: palette; align-self: start; position: sticky; top: 92px; padding: 1.3rem; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-elevated); }
.wc-palette-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.wc-palette-heading h2 { margin: .1rem 0 .8rem; font-size: 1.25rem; }
.wc-submit-link { border: 0; background: transparent; color: var(--accent-gold-dim); font-family: var(--font-ui); font-size: .75rem; font-weight: 800; cursor: pointer; }
.wc-palette-legend { display: flex; flex-wrap: wrap; gap: .45rem .8rem; margin-bottom: 1rem; font-family: var(--font-ui); font-size: .62rem; color: var(--text-secondary); }
.wc-palette-legend span { display: flex; gap: .3rem; align-items: center; }
.wc-palette-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.wc-palette-legend i.answered { background: var(--wc-success); } .wc-palette-legend i.flagged { background: var(--wc-warning); }
.wc-question-palette { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; }
.wc-palette-btn { aspect-ratio: 1; min-width: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-primary); color: var(--text-secondary); font-family: var(--font-ui); font-size: .68rem; cursor: pointer; position: relative; }
.wc-palette-btn.current { border-color: var(--wc-navy); box-shadow: inset 0 0 0 2px var(--wc-navy); color: var(--text-primary); font-weight: 800; }
.wc-palette-btn.answered { background: color-mix(in srgb,var(--wc-success) 14%,var(--bg-primary)); border-color: color-mix(in srgb,var(--wc-success) 45%,var(--border)); color: var(--wc-success); }
.wc-palette-btn.flagged::after { content: ''; position: absolute; width: 6px; height: 6px; top: 1px; right: 1px; border-radius: 50%; background: var(--wc-warning); }
.wc-exam-save-state { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); font-family: var(--font-ui); font-size: .68rem; color: var(--text-secondary); }
.wc-submit-dialog { width: min(520px, calc(100% - 2rem)); border: 0; padding: 0; border-radius: 18px; background: var(--bg-elevated); color: var(--text-primary); box-shadow: 0 30px 90px hsla(0,0%,0%,.3); }
.wc-submit-dialog[open] { position: fixed; top: 50%; left: 50%; margin: 0; max-height: calc(100dvh - 2rem); overflow: auto; transform: translate(-50%, -50%); }
.wc-submit-dialog::backdrop { background: hsla(215,45%,8%,.64); backdrop-filter: blur(3px); }
.wc-submit-dialog form { position: relative; padding: 2rem; }
.wc-submit-dialog h2 { margin: .2rem 0 .6rem; }
.wc-dialog-close { position: absolute; right: 1rem; top: .8rem; border: 0; background: transparent; color: var(--text-secondary); font-size: 1.5rem; cursor: pointer; }
.wc-dialog-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.5rem; }

/* Result */
.wc-result-hero { display: grid; grid-template-columns: 190px 1fr; gap: 2.4rem; align-items: center; padding: 2.2rem; border: 1px solid var(--border); border-radius: 22px; background: var(--bg-elevated); box-shadow: var(--wc-shadow); }
.wc-score-ring { width: 168px; height: 168px; display: grid; place-items: center; align-content: center; border-radius: 50%; background: radial-gradient(circle, var(--bg-elevated) 59%, transparent 60%), conic-gradient(var(--accent-gold) var(--score-angle, 0deg), var(--border) 0); }
.wc-score-ring strong { font-family: var(--font-heading); font-size: 2.3rem; line-height: 1; }
.wc-score-ring span { font-family: var(--font-ui); font-size: .78rem; color: var(--text-secondary); }
.wc-result-hero h1 { margin: .2rem 0 .7rem; font-size: clamp(2.4rem,5vw,4rem); }
.wc-result-summary-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; margin-top: 1rem; }
.wc-result-summary-grid article { padding: 1.2rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-elevated); }
.wc-result-summary-grid strong { display: block; margin: .45rem 0 .2rem; font-family: var(--font-heading); font-size: 1.6rem; }
.wc-result-summary-grid .wc-stat-text { font-family: var(--font-ui); font-size: .9rem; }
.wc-result-summary-grid article > span:last-child { font-family: var(--font-ui); font-size: .68rem; color: var(--text-secondary); }
.wc-review-section { margin-top: 5rem; }
.wc-book-link-section { padding-top: 0; }
.wc-result-section .book-link-block { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.wc-review-list { display: grid; gap: .8rem; }
.wc-review-card { padding: 1.4rem 1.5rem; border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 14px; background: var(--bg-elevated); }
.wc-review-card.correct { border-left-color: var(--wc-success); }
.wc-review-card.wrong { border-left-color: var(--wc-warning); }
.wc-review-top { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.wc-review-top h3 { margin: .2rem 0 .8rem; font-size: 1.05rem; }
.wc-review-state { flex: 0 0 auto; font-family: var(--font-ui); font-size: .7rem; font-weight: 800; }
.wc-review-card.correct .wc-review-state { color: var(--wc-success); }
.wc-review-card.wrong .wc-review-state { color: var(--wc-warning); }
.wc-review-label { display: block; margin: .8rem 0 .2rem; font-family: var(--font-ui); font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; color: var(--text-secondary); }
.wc-review-card p { margin: 0; font-size: .9rem; color: var(--text-secondary); }
.wc-source-links { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .8rem; }
.wc-source-links a { padding: .3rem .55rem; border: 1px solid var(--border); border-radius: 999px; font-family: var(--font-ui); font-size: .68rem; color: var(--accent-gold-dim); background: var(--bg-primary); }

/* Certificate */
.wc-certificate-page-head { margin-bottom: 2rem; }
.wc-certificate-page-head h1 { margin: .2rem 0 .4rem; }
.wc-certificate-sheet { width: min(100%, 980px); aspect-ratio: 1.414/1; margin: 0 auto; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6% 9%; background: hsl(44,58%,95%); color: hsl(30,24%,17%); box-shadow: 0 22px 60px hsla(30,25%,10%,.14); }
.wc-certificate-border { position: absolute; inset: 2.2%; border: 1px solid hsl(38,58%,48%); }
.wc-certificate-border::after { content: ''; position: absolute; inset: 7px; border: 1px solid hsla(38,58%,48%,.45); }
.wc-certificate-watermark { position: absolute; inset: 4%; display: grid; align-content: center; justify-items: center; gap: .02em; pointer-events: none; color: hsl(38,58%,38%); opacity: .045; transform: rotate(-8deg); transform-origin: center; }
.wc-certificate-watermark span { display: block; font-family: var(--font-heading); font-size: clamp(4rem,12.5vw,8.6rem); font-weight: 600; letter-spacing: .035em; line-height: .84; white-space: nowrap; }
.wc-certificate-brand { position: absolute; top: 8%; display: flex; align-items: center; gap: .55rem; font-family: var(--font-heading); font-size: 1.05rem; }
.wc-certificate-brand-mark { width: 30px; height: 30px; display: block; border: 1px solid hsl(38,58%,48%); color: hsl(38,58%,42%); border-radius: 50%; }
.wc-certificate-kicker { margin: 0 0 .4rem; font-family: var(--font-ui); font-size: clamp(.65rem,1.2vw,.85rem); letter-spacing: .17em; text-transform: uppercase; color: hsl(38,58%,40%); }
.wc-certificate-sheet h2 { margin: 0 0 1rem; font-size: clamp(1.5rem,3.3vw,2.8rem); color: hsl(30,24%,17%); }
.wc-certificate-intro, .wc-certificate-copy { margin: .3rem 0; max-width: 600px; font-size: clamp(.72rem,1.4vw,1rem); color: hsl(30,12%,35%); }
.wc-certificate-sheet h3 { margin: .6rem 0; font-size: clamp(1.6rem,4.4vw,3.6rem); line-height: 1.15; max-width: 100%; overflow-wrap: break-word; color: hsl(29,31%,17%); font-weight: 600; }
.wc-certificate-score-emblem { position: relative; display: inline-flex; align-items: center; justify-content: center; width: clamp(84px, 13vw, 120px); height: clamp(84px, 13vw, 120px); margin: .4rem 0; border-radius: 50%; background: hsla(44, 58%, 95%, .9); border: 1.5px solid hsl(38, 58%, 48%); box-shadow: inset 0 0 0 4px hsla(38, 58%, 48%, .22); }
.wc-certificate-score-mark { position: absolute; width: 72%; height: 72%; color: hsla(38, 58%, 48%, .20); pointer-events: none; }
.wc-certificate-score { position: relative; z-index: 1; margin: 0; font-family: var(--font-heading); font-size: clamp(1.8rem, 4.2vw, 3.2rem); line-height: 1; color: hsl(38, 62%, 40%); font-weight: 700; }
.wc-certificate-footer { position: absolute; bottom: 8%; left: 9%; right: 9%; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1rem; }
.wc-certificate-footer div:first-child { text-align: left; } .wc-certificate-footer div:last-child { text-align: right; }
.wc-certificate-footer span, .wc-certificate-footer strong { display: block; font-family: var(--font-ui); }
.wc-certificate-footer span { font-size: clamp(.5rem,1vw,.65rem); color: hsl(30,12%,45%); text-transform: uppercase; letter-spacing: .08em; }
.wc-certificate-footer strong { font-size: clamp(.55rem,1.1vw,.72rem); }
.wc-qr-slot { position: absolute; right: 5%; bottom: 16%; width: 92px; min-height: 108px; display: grid; grid-template-rows: 78px auto; gap: .25rem; place-items: center; padding: .4rem; border: 1px solid hsla(30,20%,20%,.25); background: hsla(0,0%,100%,.82); font-family: var(--font-ui); font-size: .52rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: hsl(30,12%,34%); }
.wc-qr-slot img { width: 78px; height: 78px; object-fit: contain; }
.wc-certificate-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; justify-content: center; margin: 1.5rem 0 2rem; }
.wc-share-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin: -1rem auto 2rem; font-family: var(--font-ui); font-size: .72rem; color: var(--text-secondary); }
.wc-share-links button { padding: .42rem .65rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-elevated); color: var(--text-primary); font: inherit; cursor: pointer; }
.wc-share-links button:hover, .wc-share-links button:focus-visible { border-color: var(--accent-gold); }
.wc-verification-facts { width: min(100%,980px); margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.wc-verification-facts div { padding: 1rem; border-right: 1px solid var(--border); background: var(--bg-elevated); }
.wc-verification-facts div:last-child { border-right: 0; }
.wc-verification-facts span, .wc-verification-facts strong { display: block; font-family: var(--font-ui); }
.wc-verification-facts span { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-secondary); }
.wc-verification-facts strong { margin-top: .25rem; font-size: .78rem; }

body.dark-theme .wc-hero { background: radial-gradient(circle at 74% 40%, hsl(214,36%,22%) 0, hsl(215,46%,11%) 42%, hsl(215,50%,8%) 100%); }
body.dark-theme .wc-gold-soft { background: hsla(38,70%,55%,.12); }
body.dark-theme .wc-option[aria-checked="true"] { background: color-mix(in srgb,var(--accent-gold) 10%,var(--bg-elevated)); border-color: var(--accent-gold-dim); }

@media (max-width: 1000px) {
  .wc-hero-grid, .wc-two-col, .wc-auth-grid, .wc-prepare-grid { grid-template-columns: 1fr; }
  .wc-hero-emblem { min-height: 320px; }
  .wc-auth-grid { gap: 4rem; }
  .wc-auth-card { max-width: 560px; width: 100%; margin: 0 auto; }
  .wc-principle-grid { grid-template-columns: 1fr 1fr; }
  .wc-dashboard-grid { grid-template-columns: 1fr 1fr; }
  .wc-dashboard-lower { grid-template-columns: 1fr; }
  .wc-start-card { position: static; }
  .wc-exam-layout { grid-template-columns: 1fr; grid-template-areas: "chrome" "question" "palette"; row-gap: 1rem; }
  .wc-palette-panel { position: static; }
  .wc-question-palette { grid-template-columns: repeat(10, 1fr); }
  .wc-result-summary-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
  .wc-shell, .wc-exam-main { width: min(100% - 1.4rem, 1180px); }
  .wc-hero { min-height: auto; }
  .wc-hero-grid { padding: 4.5rem 0; gap: 2rem; }
  .wc-hero h1 { font-size: clamp(2.7rem,14vw,4.2rem); }
  .wc-hero-emblem { min-height: 280px; transform: scale(.86); }
  .wc-achievement-card { right: 50%; transform: translateX(50%); bottom: -8px; }
  .wc-metrics { grid-template-columns: 1fr 1fr; }
  .wc-metrics div:nth-child(2) { border-right: 0; }
  .wc-metrics div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .wc-section { padding: 4rem 0; }
  .wc-principle-grid, .wc-dashboard-grid, .wc-result-summary-grid { grid-template-columns: 1fr; }
  .wc-dashboard-header { align-items: stretch; flex-direction: column; }
  .wc-criso-header { align-items: start; flex-direction: column; gap: .3rem; }
  .wc-criso-table th, .wc-criso-table td { padding: .75rem .65rem; }
  .wc-float-cta { right: .7rem; bottom: max(.7rem, env(safe-area-inset-bottom)); width: calc(100vw - 1.4rem); }
  .wc-float-cta-link { grid-template-columns: 32px minmax(0, 1fr) auto; gap: .65rem; padding: .82rem .9rem calc(.82rem + env(safe-area-inset-bottom)); }
  .wc-float-cta-mark { width: 32px; }
  .wc-field-row { grid-template-columns: 1fr; }
  .wc-auth-card { padding: 1.4rem; }
  .wc-card-seal { margin-top: -3rem; }
  .wc-exam-header { position: static; display: block; padding: .8rem 1rem; }
  .wc-exam-meta { margin-top: .7rem; justify-content: space-between; gap: .5rem; }
  .wc-exam-meta > div { min-width: 0; }
  .wc-exam-meta > div:first-child { display: none; }
  .wc-question-card { min-height: 0; padding: 1.25rem; }
  .wc-question-card h1 { font-size: 1.2rem; }
  .wc-exam-actions { grid-template-columns: 1fr 1fr; }
  .wc-hint-btn { grid-column: 1 / -1; grid-row: 1; }
  .wc-question-palette { grid-template-columns: repeat(5, 1fr); }
  .wc-result-hero { grid-template-columns: 1fr; text-align: center; }
  .wc-score-ring { margin: 0 auto; }
  .wc-result-hero .wc-actions { justify-content: center; }
  .wc-review-top { display: block; }
  .wc-certificate-sheet { aspect-ratio: auto; min-height: 620px; padding: 5rem 1.25rem 9rem; }
  .wc-certificate-footer { bottom: 3%; left: 5%; right: 5%; }
  .wc-qr-slot { right: 7%; bottom: 9.5%; width: 82px; min-height: 96px; grid-template-rows: 68px auto; }
  .wc-qr-slot img { width: 68px; height: 68px; }
  .wc-verification-facts { grid-template-columns: 1fr 1fr; }
  .wc-verification-facts div:nth-child(2) { border-right: 0; }
  .wc-verification-facts div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

@media (prefers-reduced-motion: reduce) {
  .wc-float-cta-action, .wc-float-cta-arrow { animation: none; }
  .wc-float-cta-link { transition: none; }
}

@media print {
  body * { visibility: hidden !important; }
  #certificate-print-area, #certificate-print-area * { visibility: visible !important; }
  #certificate-print-area { position: fixed; inset: 0; width: 100%; height: 100%; box-shadow: none; }
}

/* Signed-in account control in the site header. */
.wc-user-menu { position: relative; }
.wc-user-trigger { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.wc-user-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--wc-navy); color: #fff; font-family: var(--font-ui); font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
.wc-user-trigger:hover .wc-user-avatar, .wc-user-trigger:focus-visible .wc-user-avatar { box-shadow: 0 0 0 2px var(--accent-gold); }
.wc-user-dropdown { position: absolute; top: calc(100% + .55rem); right: 0; min-width: 224px; padding: .45rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 34px var(--shadow); z-index: 80; }
.wc-user-identity { display: grid; gap: .12rem; padding: .55rem .6rem .65rem; margin-bottom: .35rem; border-bottom: 1px solid var(--border); }
.wc-user-identity strong { font-family: var(--font-ui); font-size: .85rem; color: var(--text-primary); overflow-wrap: anywhere; }
.wc-user-identity span { font-family: var(--font-ui); font-size: .72rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.wc-user-signout { width: 100%; text-align: left; padding: .55rem .6rem; border: 0; border-radius: 8px; background: transparent; font-family: var(--font-ui); font-size: .84rem; color: var(--text-primary); cursor: pointer; }
.wc-user-signout:hover:not([disabled]), .wc-user-signout:focus-visible { background: color-mix(in srgb, var(--wc-navy) 9%, transparent); }
.wc-user-signout[disabled] { opacity: .6; cursor: default; }