.ccd-section, .ccp-hero, .ccp-flow, .ccp-feature-grid {
  --cc-primary: #6D28D9; --cc-hover: #5B21B6; --cc-soft: #F5F3FF; --cc-soft-2: #E9D5FF;
  --cc-bg: #F8FAFC; --cc-card: #FFFFFF; --cc-ink: #0F172A; --cc-text: #334155; --cc-muted: #64748B; --cc-line: #E2E8F0;
  --cc-ok: #047857; --cc-ok-bg: #ECFDF5; --cc-warn: #B45309; --cc-warn-bg: #FFFBEB; --cc-bad: #B91C1C; --cc-bad-bg: #FEF2F2;
  --cc-info: #5B21B6; --cc-info-bg: #F5F3FF; --cc-revoked: #9F1239; --cc-revoked-bg: #FFF1F2;
  --cc-radius: 18px; --cc-btn-radius: 11px; --cc-font: "Inter", "Manrope", "Plus Jakarta Sans", system-ui, sans-serif;
}

.ccd-tgallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
.ccd-tcard { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 1px solid var(--cc-line); border-radius: 14px; background: var(--cc-card); overflow: hidden; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ccd-tcard:hover, .ccd-tcard:focus-visible { border-color: var(--cc-soft-2); box-shadow: 0 26px 50px -30px rgba(20, 24, 60, .45); transform: translateY(-4px); }
.ccd-tcard-shot { display: flex; flex-direction: column; justify-content: center; min-height: 230px; padding: 24px 22px; border: 0; border-bottom: 1px solid var(--cc-line); border-radius: 0; }
.ccd-tcard-shot .ccd-cert { transition: transform .3s ease; }
.ccd-tcard:hover .ccd-tcard-shot .ccd-cert { transform: scale(1.03); }
.ccd-tcard-open { position: absolute; left: 50%; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; background: var(--cc-ink); color: #fff; font-size: 12.5px; font-weight: 700; opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s ease, transform .2s ease; }
.ccd-tcard-open svg { width: 13px; height: 13px; }
.ccd-tcard:hover .ccd-tcard-open, .ccd-tcard:focus-visible .ccd-tcard-open { opacity: 1; transform: translate(-50%, 0); }
.ccd-tcard-body { display: grid; gap: 8px; padding: 18px 20px 20px; flex: 1; align-content: start; }
.ccd-tcard-title { display: flex; align-items: center; gap: 10px; }
.ccd-tcard-title b { color: var(--cc-ink); font-size: 16px; font-weight: 800; line-height: 1.3; }
.ccd-tcard-body small { font-size: 13px; line-height: 1.5; color: var(--cc-text); }
.ccd-tcard-body .ccd-used { margin-top: 0; }
.ccd-tcard-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13.5px; font-weight: 800; color: var(--cc-primary); }
.ccd-tcard-link svg { width: 15px; height: 15px; transition: transform .18s ease; }
.ccd-tcard:hover .ccd-tcard-link svg { transform: translateX(4px); }
.ccd {
  --cc-bg: #F5F7FA; --cc-ink: #141824; --cc-text: #525B75; --cc-muted: #6E7891; --cc-line: #E3E6ED; --cc-input: #CBD0DD; --cc-label: #31374A; --cc-hl: #EFF2F6;
  --cc-ok: #1C6C09; --cc-ok-bg: #D9FBD0; --cc-ok-bd: #BEE8B4; --cc-warn: #BC3803; --cc-warn-bg: #FFEFCA; --cc-warn-bd: #FFCC85;
  --cc-bad: #B81800; --cc-bad-bg: #FFE0DB; --cc-bad-bd: #FABCB3; --cc-info-bd: #DDD0FE; --cc-revoked-bd: #FECDD3;
  --cc-primary: #6D28D9; --cc-hover: #5B21B6; --cc-soft: #EDE9FE; --cc-soft-2: #C4B5FD; --cc-info: #5B21B6; --cc-info-bg: #EDE9FE; --cc-info-bd: #C4B5FD;
  --cc-radius: 8px; --cc-btn-radius: 6px; --cc-font: "Nunito Sans", "Inter", system-ui, sans-serif;
}
.ccd { position: relative; margin-top: 8px; background: var(--cc-bg); border: 1px solid var(--cc-line); border-radius: 8px; box-shadow: 0 24px 60px -48px rgba(20, 24, 36, .45); font-family: var(--cc-font); color: var(--cc-text); font-size: 14px; line-height: 1.5; overflow: hidden; }
.ccd *, .ccd *::before, .ccd *::after { box-sizing: border-box; }
.ccd-gate { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(82, 91, 117, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.ccd-gate[hidden] { display: none; }
.ccd.is-gated { max-height: 720px; }
.ccd.is-gated > :not(.ccd-gate) { filter: blur(2px); user-select: none; }
.ccd-gate-btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; padding: 14px 28px; border: 1px solid var(--cc-line); border-radius: 6px; background: var(--cc-card); color: var(--cc-ink); font: 600 18px var(--cc-font); cursor: pointer; box-shadow: 0 10px 30px -12px rgba(20, 24, 36, .45); transition: transform .18s ease, box-shadow .18s ease, color .18s ease; }
.ccd-gate-btn:hover { color: var(--cc-primary); transform: translateY(-1px); box-shadow: 0 14px 36px -12px rgba(20, 24, 36, .55); }
.ccd-gate-btn svg { width: 16px; height: 16px; }
body.ccd-live .sl-nav, body.ccd-live .sl-mobile, body.ccd-live .sl-foot, body.ccd-live #global-nav, body.ccd-live #global-footer, body.ccd-live .sl-annc { display: none; }
body.ccd-live .ccd-section { padding: 0; background: #F5F7FA; }
body.ccd-live .ccd-section > .container { max-width: none; width: 100%; padding: 0; }
body.ccd-live .ccd { --ccd-pad: 28px; flex: 1; min-height: 0; width: 100%; margin: var(--ccs-inset, 16px) 0 0; border: 1px solid #DDD9EA; border-radius: 12px; box-shadow: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.ccs-page { --ccs-frame: 4px; --ccs-gap: 12px; --ccs-inset: calc(var(--ccs-frame) + var(--ccs-gap)); padding: var(--ccs-inset); background: #FAF9FD; }
.ccs-page::after { content: ""; position: fixed; inset: 0; z-index: 1000; border: var(--ccs-frame) solid #C026D3; border-image: linear-gradient(135deg, #7C3AED, #C026D3 50%, #EC4899) 1; box-shadow: inset 0 0 0 var(--ccs-gap) #FAF9FD; pointer-events: none; }
.ccs-page .ccs-top { top: var(--ccs-inset); }
.ccs { --cc-primary: #6D28D9; --cc-hover: #5B21B6; --cc-soft: #EDE9FE; --cc-soft-2: #C4B5FD; --cc-ink: #141824; --cc-text: #525B75; --cc-muted: #6E7891; --cc-line: #E3E6ED; --cc-card: #FFFFFF; --cc-bg: #F5F7FA; --cc-violet: #8B5CF6; --cc-navy: #081220;
  background: var(--cc-bg); font-family: "Nunito Sans", "Inter", system-ui, sans-serif; color: var(--cc-text); font-size: 15px; line-height: 1.5; }
.ccs *, .ccs *::before, .ccs *::after { box-sizing: border-box; }
.ccs svg { width: 16px; height: 16px; flex: none; }
.ccs h1, .ccs h2 { font-family: inherit; letter-spacing: -.02em; margin: 0; }
.ccs p { margin: 0; }
.ccs :focus-visible { outline: 3px solid rgba(109, 40, 217, .5); outline-offset: 2px; }
.ccs-wrap { width: min(1600px, 100% - 64px); margin: 0 auto; }

.ccs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 18px; border-radius: 8px; border: 1px solid transparent; font-family: inherit; font-size: 13.5px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease; }
.ccs-btn-lg { min-height: 48px; padding: 12px 22px; font-size: 15px; border-radius: 10px; }
.ccs-btn-primary { background: var(--cc-primary); color: #fff; box-shadow: 0 8px 18px -10px rgba(109, 40, 217, .8); }
.ccs-btn-primary:hover { background: var(--cc-hover); transform: translateY(-1px); }
.ccs-btn-ghost { background: none; color: var(--cc-ink); border-color: var(--cc-line); }
.ccs-btn-ghost:hover { background: var(--cc-card); border-color: var(--cc-soft-2); color: var(--cc-primary); }
.ccs-btn-light { background: #fff; color: var(--cc-navy); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .6); }
.ccs-btn-light:hover { transform: translateY(-1px); color: var(--cc-primary); }
.ccs-btn-outline { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .32); }
.ccs-btn-outline:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .6); }

.ccs-top { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .97); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid var(--cc-line); }
.ccs-top-row { display: flex; align-items: center; gap: 24px; height: 64px; }
.ccs-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--cc-ink); text-decoration: none; }
.ccs-brand b { display: block; font-size: 15px; font-weight: 800; line-height: 1.2; }
.ccs-brand small { display: block; font-size: 12px; color: var(--cc-muted); font-weight: 600; }
.ccs-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--cc-primary), var(--cc-violet)); color: #fff; box-shadow: 0 8px 18px -10px rgba(109, 40, 217, .9); }
.ccs-logo svg { width: 18px; height: 18px; }
.ccs-top-links { display: flex; gap: 4px; margin: 0 auto; }
.ccs-top-links a { padding: 8px 14px; border-radius: 8px; color: var(--cc-text); font-weight: 700; font-size: 14px; text-decoration: none; }
.ccs-top-links a:hover { background: var(--cc-soft); color: var(--cc-primary); }
.ccs-top-actions { display: flex; gap: 8px; }
.ccs-top { background: linear-gradient(90deg, #081220 0%, #2E1065 60%, #4C1D95 100%); border-bottom-color: rgba(255, 255, 255, .08); box-shadow: 0 10px 24px -18px rgba(46, 16, 101, .8); }
.ccs-top .ccs-brand { color: #fff; }
.ccs-top .ccs-brand small { color: #C4B5FD; }
.ccs-top-links a { color: #DDD6FE; }
.ccs-top-links a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.ccs-top .ccs-btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .28); background: rgba(255, 255, 255, .04); }
.ccs-top .ccs-btn-ghost:hover { color: #fff; border-color: rgba(255, 255, 255, .6); background: rgba(255, 255, 255, .12); }
.ccs-top .ccs-btn-ghost::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .25), transparent); }
.ccs-top :focus-visible { outline-color: rgba(255, 255, 255, .8); }
.ccs-top-actions { align-items: center; }
.ccs-top .ccd-roles { margin-left: 0; background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); border-radius: 8px; }
.ccs-top .ccd-role { min-height: 30px; color: #DDD6FE; font-family: inherit; }
.ccs-top .ccd-role:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.ccs-top .ccd-role.is-on { background: #fff; color: var(--cc-primary); }
.ccs-top .ccd-role svg { width: 15px; height: 15px; }

.ccs-hero { position: relative; overflow: hidden; padding: 44px 0 40px; color: #fff; background: radial-gradient(900px 480px at 85% 10%, rgba(110, 75, 247, .55), transparent 60%), radial-gradient(700px 420px at 0% 100%, rgba(109, 40, 217, .45), transparent 60%), linear-gradient(160deg, #081220 0%, #2E1065 55%, #4C1D95 100%); }
.ccs-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 85%); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 85%); pointer-events: none; }
.ccs-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.ccs-hero h1 { margin: 0 0 12px; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.05; font-weight: 800; color: #fff; }
.ccs-hero h1 span { background: linear-gradient(90deg, #C4B5FD, #C4B5FD); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ccs-hero-copy > p { max-width: 540px; font-size: 17px; color: #DDD6FE; }
.ccs-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.ccs-stats { list-style: none; margin: 26px 0 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
.ccs-stats b { display: block; font-size: 30px; font-weight: 800; color: #fff; line-height: 1.1; }
.ccs-stats span { font-size: 13px; color: #C4B5FD; font-weight: 600; }
.ccs-hero-art { position: relative; height: 300px; }
.ccs-fan { position: absolute; width: 66%; padding: 0; border: 0; background: none; font: inherit; text-align: center; cursor: pointer; border-radius: 16px; transition: left .75s cubic-bezier(.22, .9, .25, 1), top .75s cubic-bezier(.22, .9, .25, 1), transform .75s cubic-bezier(.22, .9, .25, 1), filter .5s ease; }
.ccs-fan .ccd-cert { display: block; box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .75); transition: box-shadow .5s ease; }
.ccs-fan:focus-visible { outline: 3px solid rgba(255, 255, 255, .8); outline-offset: 4px; }
.ccs-fan[data-ccs-pos="left"] { left: 0; top: 70px; z-index: 1; transform: rotate(-9deg); filter: brightness(.92); }
.ccs-fan[data-ccs-pos="right"] { left: 34%; top: 48px; z-index: 1; transform: rotate(8deg); filter: brightness(.92); }
.ccs-fan[data-ccs-pos="center"] { left: 17%; top: 0; z-index: 3; transform: translateY(14px); }
.ccs-fan[data-ccs-pos="center"] .ccd-cert { box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); }
.ccs-hero-art:hover .ccs-fan[data-ccs-pos="left"] { transform: rotate(-12deg) translateX(-10px); }
.ccs-hero-art:hover .ccs-fan[data-ccs-pos="right"] { transform: rotate(11deg) translateX(10px); }
.ccs-hero-art:hover .ccs-fan[data-ccs-pos="center"] { transform: translateY(6px); }
.ccs-fan[data-ccs-pos="left"]:hover, .ccs-fan[data-ccs-pos="right"]:hover { filter: brightness(1.05); }
.ccs-fan.is-rising { z-index: 4; }
.ccs-fan.is-bump .ccd-cert { animation: ccs-bump .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes ccs-bump { 0% { scale: 1; } 40% { scale: 1.06; } 100% { scale: 1; } }
.ccs-chip { position: absolute; z-index: 3; left: 6%; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 14px; background: #fff; color: var(--cc-ink); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .55); }
.ccs-chip b { display: block; font-size: 14px; font-weight: 800; color: #1C6C09; }
.ccs-chip small { display: block; font-size: 12px; color: var(--cc-muted); }
.ccs-chip-ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #D9FBD0; color: #1C6C09; }

.ccs-hero-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.ccs-hero-orbs span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: ccs-drift 18s ease-in-out infinite alternate; }
.ccs-hero-orbs span:nth-child(1) { width: 420px; height: 420px; left: -80px; top: 40%; background: #6D28D9; }
.ccs-hero-orbs span:nth-child(2) { width: 360px; height: 360px; right: 8%; top: -120px; background: #8B5CF6; animation-duration: 22s; animation-delay: -6s; }
.ccs-hero-orbs span:nth-child(3) { width: 260px; height: 260px; left: 45%; bottom: -140px; background: #22D3EE; opacity: .3; animation-duration: 26s; animation-delay: -12s; }
@keyframes ccs-drift { 0% { translate: 0 0; scale: 1; } 50% { translate: 60px -40px; scale: 1.12; } 100% { translate: -40px 30px; scale: .95; } }
.ccs-hero::before { animation: ccs-dots 40s linear infinite; }
@keyframes ccs-dots { to { background-position: 220px 220px; } }

.ccs-hero-copy > * { animation: ccs-rise .8s cubic-bezier(.2, .8, .2, 1) both; }
.ccs-hero-copy > :nth-child(1) { animation-delay: .05s; }
.ccs-hero-copy > :nth-child(2) { animation-delay: .15s; }
.ccs-hero-copy > :nth-child(3) { animation-delay: .28s; }
.ccs-hero-copy > :nth-child(4) { animation-delay: .4s; }
.ccs-hero-copy > :nth-child(5) { animation-delay: .52s; }
@keyframes ccs-rise { from { opacity: 0; translate: 0 26px; filter: blur(6px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.ccs-hero h1 span { background-image: linear-gradient(90deg, #C4B5FD 0%, #C4B5FD 30%, #ffffff 50%, #C4B5FD 70%, #C4B5FD 100%); background-size: 250% 100%; animation: ccs-shimmer 6s ease-in-out infinite; }
@keyframes ccs-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.ccs-stats b { font-variant-numeric: tabular-nums; }

.ccs-fan { animation: ccs-deal 1s cubic-bezier(.2, .9, .25, 1.15) both; }
.ccs-fan-gold { animation-delay: .35s; --ccs-from: -120px 60px; }
.ccs-fan-dark { animation-delay: .5s; --ccs-from: 120px 60px; }
.ccs-fan-violet { animation-delay: .2s; --ccs-from: 0 90px; }
@keyframes ccs-deal { from { opacity: 0; translate: var(--ccs-from, 0 80px); } to { opacity: 1; translate: 0 0; } }
.ccs-fan .ccd-cert { animation: ccs-float 6s ease-in-out infinite; }
.ccs-fan-gold .ccd-cert { animation-delay: -2s; animation-duration: 7s; }
.ccs-fan-dark .ccd-cert { animation-delay: -4s; animation-duration: 8s; }
@keyframes ccs-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.ccs-fan[data-ccs-pos="center"] .ccd-cert::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%); background-size: 250% 100%; background-position: 150% 0; mix-blend-mode: soft-light; animation: ccs-gloss 5s ease-in-out 1.4s infinite; pointer-events: none; }
@keyframes ccs-gloss { 0%, 60% { background-position: 150% 0; } 100% { background-position: -50% 0; } }

.ccs-chip { animation: ccs-pop .7s cubic-bezier(.2, 1.4, .4, 1) 1.1s both, ccs-float 5s ease-in-out 2s infinite; }
@keyframes ccs-pop { from { opacity: 0; scale: .6; translate: 0 20px; } to { opacity: 1; scale: 1; translate: 0 0; } }
.ccs-chip-ico { position: relative; }
.ccs-chip-ico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #25B003; opacity: 0; animation: ccs-ring 2.4s ease-out 1.8s infinite; }
@keyframes ccs-ring { 0% { opacity: .8; scale: 1; } 100% { opacity: 0; scale: 1.7; } }

.ccs-spark { position: absolute; z-index: 4; width: 18px; height: 18px; background: #fff; clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); opacity: 0; animation: ccs-twinkle 3.2s ease-in-out infinite; filter: drop-shadow(0 0 6px rgba(196, 181, 253, .9)); }
.ccs-spark-1 { left: 14%; top: 4%; animation-delay: 1.2s; }
.ccs-spark-2 { right: 6%; top: 10%; width: 12px; height: 12px; animation-delay: 2s; background: #C4B5FD; }
.ccs-spark-3 { right: 22%; bottom: 14%; width: 14px; height: 14px; animation-delay: 2.7s; background: #C4B5FD; }
.ccs-spark-4 { left: 2%; bottom: 34%; width: 10px; height: 10px; animation-delay: 3.4s; }
@keyframes ccs-twinkle { 0%, 100% { opacity: 0; scale: .3; rotate: 0deg; } 50% { opacity: 1; scale: 1; rotate: 90deg; } }

.ccs-btn { position: relative; overflow: hidden; }
.ccs-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; }
.ccs-btn:hover::after { left: 130%; }
.ccs-btn-light::after, .ccs-btn-ghost::after { background: linear-gradient(100deg, transparent, rgba(109, 40, 217, .18), transparent); }

.ccs-zoom-veil { position: fixed; inset: 0; z-index: 2000; background: rgba(46, 16, 101, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: background .55s ease, backdrop-filter .55s ease, -webkit-backdrop-filter .55s ease; }
.ccs-zoom-veil.is-on { background: rgba(46, 16, 101, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ccs-zoom-cert { position: fixed; z-index: 2001; margin: 0; transform-origin: center center; transition: transform .65s cubic-bezier(.2, .85, .25, 1), box-shadow .65s ease; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .7); font-family: "Nunito Sans", "Inter", system-ui, sans-serif; pointer-events: none; }
.ccs-zoom-cert, .ccs-zoom-cert .ccd-cert-body, .ccs-zoom-cert .ccd-cert-org, .ccs-zoom-cert .ccd-cert-title, .ccs-zoom-cert .ccd-cert-presented, .ccs-zoom-cert .ccd-cert-name, .ccs-zoom-cert .ccd-cert-desc, .ccs-zoom-cert .ccd-cert-course { display: block; }
.ccs-zoom-cert .ccd-cert-desc { font-size: 10.5px; margin: 0 auto 4px !important; }
.ccs-zoom-label { position: fixed; z-index: 2002; left: 50%; bottom: 12vh; display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: 999px; background: #fff; color: #141824; font: 700 14px "Nunito Sans", system-ui, sans-serif; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .6); opacity: 0; transform: translate(-50%, 16px); transition: opacity .4s ease .2s, transform .4s ease .2s; }
.ccs-zoom-label.is-on { opacity: 1; transform: translate(-50%, 0); }
.ccs-zoom-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #EDE9FE; border-top-color: #6D28D9; animation: ccs-spin .7s linear infinite; }
@keyframes ccs-spin { to { rotate: 360deg; } }
.ccs-card.is-opening .ccs-shot .ccd-cert { opacity: 0; }
.ccd-arrive .ccd-stage > .ccd-cert { animation: ccd-arrive .7s cubic-bezier(.2, .85, .25, 1) both; }
.ccd-arrive .ccd-tpl-form { animation: ccd-arrive-side .6s ease .15s both; }
@keyframes ccd-arrive { from { opacity: 0; scale: .82; translate: 0 30px; filter: blur(4px); } to { opacity: 1; scale: 1; translate: 0 0; filter: blur(0); } }
@keyframes ccd-arrive-side { from { opacity: 0; translate: -24px 0; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .ccs *, .ccs *::before, .ccs *::after { animation: none !important; transition: none !important; }
}
.ccs-section { padding: 36px 0 0; }
.ccs-section-alt { margin-top: 36px; padding: 36px 0; background: #fff; border-block: 1px solid var(--cc-line); }
.ccs-section-alt + .ccs-section { padding-top: 36px; }
.ccs-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.ccs-eyebrow { display: inline-block; margin-bottom: 8px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-primary); }
.ccs-head h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; color: var(--cc-ink); line-height: 1.15; }
.ccs-head p { max-width: 520px; text-align: right; font-size: 14.5px; color: var(--cc-muted); }

.ccs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ccs-grid-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (min-width: 1400px) { .ccs-grid-templates { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } .ccs-grid-templates .ccs-shot { padding: 20px 16px; } .ccs-grid-templates .ccs-body { padding: 18px; } }
.ccs-card, .ccs-view { position: relative; display: flex; flex-direction: column; background: var(--cc-card); border: 1px solid var(--cc-line); border-radius: 14px; overflow: hidden; color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(20, 24, 36, .04); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.ccs-card:hover, .ccs-view:hover { border-color: var(--cc-soft-2); box-shadow: 0 26px 50px -30px rgba(20, 24, 60, .45); transform: translateY(-4px); }
.ccs-shot { position: relative; display: block; padding: 26px 24px; background: radial-gradient(120% 90% at 50% 0%, #fff 0%, #EEF2FF 100%); border-bottom: 1px solid var(--cc-line); overflow: hidden; }
.ccs-shot::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(109, 40, 217, .12) 1px, transparent 1px); background-size: 16px 16px; pointer-events: none; }
.ccs-shot-gold { background: radial-gradient(120% 90% at 50% 0%, #FFFDF5 0%, #FBF3D6 100%); }
.ccs-shot-slate { background: radial-gradient(120% 90% at 50% 0%, #fff 0%, #EEF2F7 100%); }
.ccs-shot-dark { background: radial-gradient(120% 90% at 50% 0%, #2A2160 0%, #120E33 100%); }
.ccs-grid-templates .ccs-shot { display: flex; flex-direction: column; justify-content: center; min-height: 272px; }
.ccs-shot .ccd-cert { position: relative; display: block; pointer-events: none; transition: transform .3s ease; box-shadow: 0 18px 30px -24px rgba(20, 24, 60, .55); }
.ccs-card:hover .ccs-shot .ccd-cert { transform: scale(1.03); }
.ccs-shot .ccd-cert-body { display: block; }
.ccs-shot .ccd-cert-org, .ccs-shot .ccd-cert-title, .ccs-shot .ccd-cert-presented, .ccs-shot .ccd-cert-name, .ccs-shot .ccd-cert-desc, .ccs-shot .ccd-cert-course { display: block; }
.ccs-shot .ccd-cert-desc { font-size: 10.5px; margin: 0 auto 4px !important; }
.ccs-fan .ccd-cert-body, .ccs-fan .ccd-cert-org, .ccs-fan .ccd-cert-title, .ccs-fan .ccd-cert-presented, .ccs-fan .ccd-cert-name, .ccs-fan .ccd-cert-course { display: block; }
.ccs-shot-cta { position: absolute; left: 50%; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--cc-ink); color: #fff; font-size: 12.5px; font-weight: 700; opacity: 0; transform: translate(-50%, 8px); transition: opacity .2s ease, transform .2s ease; }
.ccs-card:hover .ccs-shot-cta, .ccs-card:focus-visible .ccs-shot-cta { opacity: 1; transform: translate(-50%, 0); }
.ccs-body { display: grid; gap: 8px; padding: 20px 22px 22px; flex: 1; align-content: start; }
.ccs-body-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; }
.ccs-body b { display: flex; align-items: center; gap: 8px; color: var(--cc-ink); font-size: 17px; font-weight: 800; }
.ccs-body b .ccd-tpl-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.ccs-body small { display: block; color: var(--cc-text); font-size: 14px; line-height: 1.55; }
.ccs-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ccs-tags span { padding: 3px 9px; border-radius: 999px; background: var(--cc-soft); color: var(--cc-hover); font-size: 11.5px; font-weight: 700; }
.ccs-tags span.is-muted { background: var(--cc-bg); color: var(--cc-muted); border: 1px solid var(--cc-line); }
.ccs-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 14px; font-weight: 800; color: var(--cc-primary); }
.ccs-body-row .ccs-link { margin: 0; font-size: 13px; }
.ccs-link svg { width: 15px; height: 15px; transition: transform .18s ease; }
.ccs-card:hover .ccs-link svg, .ccs-view:hover .ccs-link svg { transform: translateX(4px); }

.ccs-view { flex-direction: row; align-items: flex-start; padding: 22px 0 0 22px; }
.ccs-view::after { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--ccs-tone, var(--cc-primary)); opacity: 0; transition: opacity .2s ease; }
.ccs-view:hover::after { opacity: 1; }
.ccs-view .ccs-body { padding-top: 0; }
.ccs-view-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--ccs-tone-bg, var(--cc-soft)); color: var(--ccs-tone, var(--cc-primary)); flex: none; }
.ccs-view-ico svg { width: 22px; height: 22px; }
.ccs-view.is-admin { --ccs-tone: #6D28D9; --ccs-tone-bg: #EDE9FE; }
.ccs-view.is-employee { --ccs-tone: #1C6C09; --ccs-tone-bg: #D9FBD0; }
.ccs-view.is-verifier { --ccs-tone: #BC3803; --ccs-tone-bg: #FFEFCA; }
.ccs-role { justify-self: start; padding: 2px 8px; border-radius: 4px; background: var(--ccs-tone-bg); color: var(--ccs-tone); font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

.ccs-section-cta { padding: 36px 0 32px; }
.ccs-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 40px 44px; border-radius: 20px; color: #fff; background: radial-gradient(600px 300px at 100% 0%, rgba(110, 75, 247, .6), transparent 60%), linear-gradient(135deg, #081220, #4C1D95); box-shadow: 0 30px 60px -40px rgba(46, 16, 101, .8); }
.ccs-band h2 { font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; color: #fff; }
.ccs-band p { margin-top: 6px; max-width: 520px; color: #DDD6FE; }
.ccs-band-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.ccs-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px !important; font-size: 12.5px; color: var(--cc-muted); }
.ccd-gate-btn:focus-visible { outline: 3px solid rgba(255, 255, 255, .8); outline-offset: 3px; }
.ccd h3, .ccd h4 { color: var(--cc-ink); font-family: var(--cc-font); margin: 0; letter-spacing: -.01em; }
.ccd h3 { font-size: 20px; font-weight: 800; }
.ccd h4 { font-size: 15px; font-weight: 700; }
.ccd p { margin: 0; }
.ccd small { display: block; color: var(--cc-muted); font-size: 12.5px; }
.ccd svg { width: 16px; height: 16px; flex: none; }
.ccd :focus-visible, .ccp-flow :focus-visible { outline: 3px solid rgba(109, 40, 217, .45); outline-offset: 2px; }
.ccd .ccd-main:focus, .ccd [data-ccd-focus]:focus, #ccd-title:focus { outline: none; }
.ccd-mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; letter-spacing: .01em; }
.ccd-muted { color: var(--cc-muted); font-size: 13px; display: flex; gap: 6px; align-items: flex-start; }
.ccd-muted-text { color: var(--cc-muted); font-weight: 600; }
.ccd-hint { margin: -6px 0 0 46px; }
.ccd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ccd-loading { padding: 48px 24px; text-align: center; color: var(--cc-muted); }

.ccd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 9px 24px; border-radius: var(--cc-btn-radius); border: 1px solid transparent; font: 700 12.8px/1.2 var(--cc-font); cursor: pointer; transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; white-space: nowrap; text-decoration: none; }
.ccd-btn-sm { min-height: 32px; padding: 6px 14px; font-size: 12.8px; }
.ccd-btn-primary { background: var(--cc-primary); color: #fff; border-color: var(--cc-primary); }
.ccd-btn-primary:hover { background: var(--cc-hover); border-color: var(--cc-hover); }
.ccd-btn-soft { background: var(--cc-soft); color: var(--cc-hover); border-color: var(--cc-soft-2); }
.ccd-btn-soft:hover { background: var(--cc-soft-2); }
.ccd-btn-ghost { background: var(--cc-bg); color: var(--cc-label); border-color: var(--cc-line); }
.ccd-btn-ghost:hover { border-color: var(--cc-input); background: var(--cc-line); }
.ccd-btn-danger { background: var(--cc-bg); color: var(--cc-revoked); border-color: var(--cc-line); }
.ccd-btn-danger:hover { background: var(--cc-revoked-bg); }
.ccd-modal-foot .ccd-btn-danger { background: var(--cc-revoked); color: #fff; border-color: var(--cc-revoked); }
.ccd-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.ccd-btn-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.ccd-btn-row.ccd-left { justify-content: flex-start; }
.ccd-icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--cc-line); background: var(--cc-bg); color: var(--cc-text); cursor: pointer; }
.ccd-icon-btn:hover { color: var(--cc-primary); border-color: var(--cc-soft-2); background: var(--cc-soft); }
.ccd-linkish { background: none; border: 0; padding: 0; color: var(--cc-primary); cursor: pointer; font: inherit; font-weight: 700; text-align: left; text-decoration: underline; text-underline-offset: 2px; }

.ccd-bar { display: flex; align-items: center; gap: 20px; min-height: 65px; padding: 10px 24px; background: var(--cc-card); border-bottom: 1px solid var(--cc-input); flex-wrap: wrap; }
.ccd-brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; min-width: 206px; }
.ccd-brand small { white-space: nowrap; }
.ccd-brand b { color: var(--cc-ink); font-size: 15px; font-weight: 800; }
.ccd-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--cc-primary); color: #fff; }
.ccd-topsearch { position: relative; flex: 0 1 400px; margin: 0 auto; }
.ccd-topsearch svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--cc-muted); }
.ccd-topsearch input { width: 100%; height: 34px; padding: 6px 16px 6px 42px; border: 1px solid var(--cc-input); border-radius: 800px; background: var(--cc-card); color: var(--cc-label); font: 600 12.8px var(--cc-font); }
.ccd-topsearch input::placeholder { color: #9FA6BC; }
.ccd-topsearch input:focus { outline: 0; border-color: var(--cc-primary); box-shadow: 0 0 0 4px rgba(109, 40, 217, .16); }
.ccd-roles { display: inline-flex; padding: 3px; background: var(--cc-bg); border: 1px solid var(--cc-line); border-radius: 6px; gap: 2px; margin-left: auto; }
.ccd-role { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 14px; border: 0; border-radius: 6px; background: transparent; color: var(--cc-text); font: 700 13px var(--cc-font); cursor: pointer; transition: background .18s ease, color .18s ease; }
.ccd-role.is-on { background: var(--cc-card); color: var(--cc-primary); box-shadow: 0 1px 2px rgba(20, 24, 36, .1); }

.ccd-time { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 24px; background: var(--cc-card); border-bottom: 1px solid var(--cc-input); font-size: 12.8px; }
.ccd-clock { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--cc-text); font-size: 13px; margin-right: auto; }
.ccd-clock b { color: var(--cc-primary); font-size: 14px; font-weight: 800; padding: 3px 9px; border-radius: 6px; background: var(--cc-soft); border: 1px solid var(--cc-info-bd); }
.ccd-clock em { font-style: normal; color: var(--cc-muted); font-size: 12.5px; }
.ccd-clock svg { color: var(--cc-primary); }
.ccd-time-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ccd-time .ccd-btn { min-height: 34px; padding: 6px 11px; font-size: 13px; }

.ccd-body { display: grid; grid-template-columns: 254px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; min-height: 660px; transition: grid-template-columns .2s ease; }
.ccd-side { display: flex; flex-direction: column; border-right: 1px solid var(--cc-input); background: var(--cc-card); min-width: 0; }
.ccd-nav { padding: 18px 16px; flex: 1; }
.ccd-collapse { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 26px; border: 0; border-top: 1px solid var(--cc-line); background: none; color: var(--cc-muted); font: 700 13px var(--cc-font); cursor: pointer; text-align: left; }
.ccd-collapse:hover { color: var(--cc-primary); background: var(--cc-hl); }
.ccd.is-collapsed .ccd-body { grid-template-columns: 68px minmax(0, 1fr); }
.ccd.is-collapsed .ccd-nav { padding: 16px 10px; }
.ccd.is-collapsed .ccd-nav-item { justify-content: center; padding: 10px 0; position: relative; }
.ccd.is-collapsed .ccd-nav-item > span, .ccd.is-collapsed .ccd-who > div, .ccd.is-collapsed .ccd-collapse span { display: none; }
.ccd.is-collapsed .ccd-nav-item em { position: absolute; top: 2px; right: 2px; margin: 0; padding: 0 4px; }
.ccd.is-collapsed .ccd-nav-label { font-size: 0; padding: 12px 6px 4px; }
.ccd.is-collapsed .ccd-who { justify-content: center; padding: 4px 0 12px; }
.ccd.is-collapsed .ccd-collapse { justify-content: center; padding: 14px 0; }
.ccd.is-collapsed .ccd-collapse svg { transform: scaleX(-1); }
.ccd-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ccd-nav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; padding: 6px 8px 6px 14px; border: 0; border-radius: 6px; background: none; color: #525B75; font: 600 12.8px var(--cc-font); text-align: left; cursor: pointer; }
.ccd-nav-item:hover { background: var(--cc-hl); color: var(--cc-ink); }
.ccd-nav-item svg { color: var(--cc-muted); }
.ccd-nav-item.is-on svg { color: var(--cc-primary); }
.ccd-nav-label { display: block; padding: 18px 14px 6px; font-size: 10.24px; font-weight: 700; text-transform: uppercase; color: var(--cc-muted); }
.ccd-nav li:first-child.ccd-nav-label { padding-top: 2px; }
.ccd-nav-item.is-on { background: none; color: var(--cc-primary); }
.ccd-nav-item em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--cc-warn-bd); background: var(--cc-warn-bg); color: var(--cc-warn); }
.ccd-who { display: flex; align-items: center; gap: 10px; padding: 6px 6px 14px; margin-bottom: 10px; border-bottom: 1px solid var(--cc-line); }
.ccd-who b { color: var(--cc-ink); font-size: 14px; font-weight: 800; display: block; }
.ccd-main { padding: 32px 40px 40px; min-width: 0; outline: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start; }
.ccd-note { display: flex; align-items: center; gap: 8px; justify-content: flex-start; min-height: 64px; padding: 12px 40px; border-top: 1px solid var(--cc-input); background: var(--cc-bg); color: var(--cc-label); font-size: 12.8px; text-align: left; }

.ccd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ccd-head > div:first-child { flex: 1 1 0; min-width: 280px; }
.ccd-head h3 { font-size: 31.25px; line-height: 1.2; font-weight: 800; letter-spacing: 0; }
.ccd-head p { color: var(--cc-label); font-size: 16px; margin-top: 6px; max-width: 680px; }
.ccd-crumbs ol { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; color: var(--cc-primary); }
.ccd-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--cc-muted); }
.ccd-crumbs li[aria-current] { color: var(--cc-ink); }
.ccd-head-side { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
body.ccd-live .ccd-main { padding: 24px var(--ccd-pad) 40px; }
body.ccd-live .ccd-time { margin: 16px var(--ccs-inset, 16px); padding: 8px 16px; border: 1px solid #ECE9F4; border-radius: 12px; }
body.ccd-live .ccd-head { align-items: center; margin: -24px calc(-1 * var(--ccd-pad)) 0; padding: 16px var(--ccd-pad); background: rgba(255, 255, 255, .72); border-bottom: 1px solid #ECE9F4; font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; }
body.ccd-live .ccd-head h3 { font-size: 26px; font-weight: 800; letter-spacing: -.03em; color: #15103A; }
body.ccd-live .ccd-head p { margin-top: 1px; font-size: 13.5px; color: #6B6580; }
body.ccd-live .ccd-head-side { align-items: center; }
body.ccd-live .ccd-crumbs ol { margin: 0 0 4px; gap: 6px; font-size: 12.5px; color: #6B6580; }
body.ccd-live .ccd-crumbs li + li::before { content: "›"; color: #948FA6; }
body.ccd-live .ccd-crumbs li[aria-current] { font-weight: 700; color: #4A4660; }
.ccd-field { display: grid; gap: 8px; font-size: 14px; font-weight: 700; color: var(--cc-ink); position: relative; }
.ccd-field > span { padding-left: 0; }
.ccd-field select, .ccd-field input { min-height: 38px; padding: 8px 16px; border-radius: 6px; border: 1px solid var(--cc-input); background: var(--cc-card); color: var(--cc-label); font: 600 12.8px var(--cc-font); text-transform: none; letter-spacing: 0; min-width: 160px; transition: border-color .15s ease, box-shadow .15s ease; }
.ccd-field input::placeholder { color: #9FA6BC; font-weight: 500; }
.ccd-field select:focus, .ccd-field input:focus { border-color: var(--cc-primary); outline: 0; box-shadow: 0 0 0 4px rgba(109, 40, 217, .16); }
.ccd-field select:disabled { background: var(--cc-hl); color: var(--cc-muted); }
.ccd-search input { padding-left: 34px; min-width: 240px; }
.ccd-search svg { position: absolute; left: 12px; bottom: 11px; color: var(--cc-muted); }
.ccd-grow { flex: 1 1 260px; }
.ccd-tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; }
.ccd-tab { margin: 0; padding: 2px 0; border: 0; background: none; color: var(--cc-primary); font: 700 14px var(--cc-font); cursor: pointer; }
.ccd-tab span { color: var(--cc-muted); font-weight: 600; }
.ccd-tab:hover { text-decoration: underline; text-underline-offset: 3px; }
.ccd-tab.is-on { color: var(--cc-ink); }
.ccd-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ccd-filters .ccd-field select { min-width: 140px; }
.ccd-filter-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.ccd-form { display: grid; gap: 14px; }
.ccd-form .ccd-field select, .ccd-form .ccd-field input { width: 100%; }
.ccd-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
.ccd-fieldset legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 700; color: var(--cc-ink); }
.ccd-check { display: flex; gap: 10px; align-items: center; min-height: 36px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--cc-line); cursor: pointer; color: var(--cc-ink); font-weight: 600; }
.ccd-check input { accent-color: var(--cc-primary); width: 16px; height: 16px; flex: none; }
.ccd-check:has(input:checked) { border-color: var(--cc-soft-2); background: var(--cc-soft); }

.ccd-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; position: relative; }
.ccd-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ccd-switch span { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--cc-input); transition: background .18s ease; flex: none; }
.ccd-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .25); transition: transform .18s ease; }
.ccd-switch input:checked + span { background: var(--cc-primary); }
.ccd-switch input:checked + span::after { transform: translateX(16px); }
.ccd-switch input:focus-visible + span { outline: 3px solid rgba(109, 40, 217, .45); outline-offset: 2px; }
.ccd-switch b { color: var(--cc-ink); font-weight: 700; }
.ccd-switch.is-disabled { cursor: not-allowed; opacity: .55; }

.ccd-segs { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; background: var(--cc-hl); border: 1px solid var(--cc-line); border-radius: 8px; }
.ccd-seg { position: relative; cursor: pointer; }
.ccd-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ccd-seg span { display: block; padding: 6px 12px; border-radius: 6px; font-weight: 700; font-size: 13px; color: var(--cc-text); }
.ccd-seg input:checked + span { background: var(--cc-card); color: var(--cc-primary); box-shadow: 0 1px 2px rgba(20, 24, 36, .1); }
.ccd-seg input:focus-visible + span { outline: 3px solid rgba(109, 40, 217, .45); }

.ccd-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ccd-chips-label { font-size: 13px; font-weight: 700; color: var(--cc-ink); margin-right: 2px; }
.ccd-chip { display: inline-grid; gap: 1px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--cc-soft-2); background: var(--cc-card); text-align: left; font: inherit; color: var(--cc-ink); cursor: pointer; }
.ccd-chip:hover { background: var(--cc-soft); }
.ccd-chip small { font-size: 11.5px; }

.ccd-dash { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 32px; padding-bottom: 32px; border-bottom: 1px solid var(--cc-input); }
.ccd-dash-main { display: grid; gap: 28px; align-content: start; min-width: 0; }
.ccd-dash-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-content: start; min-width: 0; }
.ccd-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 20px; }
.ccd-stat { display: flex; align-items: center; gap: 10px; padding: 2px; border: 0; background: none; font: inherit; text-align: left; color: var(--cc-text); cursor: pointer; border-radius: 6px; }
.ccd-stat b { display: block; color: var(--cc-ink); font-size: 15px; font-weight: 800; line-height: 1.25; }
.ccd-stat:hover b { color: var(--cc-primary); }
.ccd-stat small { font-size: 12.5px; }
.ccd-stat-ico { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; }
.ccd-stat-ico::before { content: ""; position: absolute; inset: 0; border-radius: 50% 50% 50% 8px; transform: rotate(-12deg); background: var(--cc-info-bg); }
.ccd-stat-ico svg { position: relative; width: 18px; height: 18px; color: var(--cc-info); }
.ccd-stat-warn .ccd-stat-ico::before { background: var(--cc-warn-bg); }
.ccd-stat-warn .ccd-stat-ico svg { color: var(--cc-warn); }
.ccd-stat-bad .ccd-stat-ico::before { background: var(--cc-bad-bg); }
.ccd-stat-bad .ccd-stat-ico svg { color: var(--cc-bad); }

.ccd-big { display: grid; gap: 14px; min-width: 0; }
.ccd-big-head, .ccd-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ccd-big-head h4, .ccd-panel-head h4 { font-size: 20px; font-weight: 700; }
.ccd-mini { display: grid; gap: 10px; align-content: start; padding: 18px 18px 16px; background: var(--cc-card); border: 1px solid var(--cc-line); border-radius: var(--cc-radius); min-width: 0; }
.ccd-mini-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.ccd-mini-head h4 { font-size: 14px; font-weight: 700; }
.ccd-mini-head small { font-size: 11.5px; }
.ccd-mini-value { padding: 0; border: 0; background: none; font: 800 20px/1.1 var(--cc-font); color: var(--cc-ink); cursor: pointer; white-space: nowrap; }
.ccd-mini-value small { display: inline; font-size: 13px; font-weight: 700; }
button.ccd-mini-value:hover { color: var(--cc-primary); text-decoration: underline; text-underline-offset: 3px; }
span.ccd-mini-value { cursor: default; }
.ccd-mini-trend { margin-top: -6px; }
.ccd-mini-axis { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--cc-muted); margin-top: -4px; }
.ccd-mini-split { display: grid; gap: 12px; }
.ccd-mini-split .ccd-donut { width: 112px; margin: 0 auto; }
.ccd-trend { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 800; border: 1px solid transparent; }
.ccd-trend-ok { background: var(--cc-ok-bg); color: var(--cc-ok); border-color: var(--cc-ok-bd); }
.ccd-trend-bad { background: var(--cc-bad-bg); color: var(--cc-bad); border-color: var(--cc-bad-bd); }
.ccd-trend-muted { background: var(--cc-hl); color: var(--cc-label); border-color: var(--cc-line); }

.ccd-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ccd .ccd-chart, .ccd .ccd-donut svg, .ccd .ccd-gauge svg { width: 100%; height: auto; }
.ccd-grid-line { stroke: var(--cc-line); stroke-width: 1; stroke-dasharray: 3 4; }
.ccd-axis { fill: var(--cc-muted); font: 600 11px var(--cc-font); }
.ccd-ln { fill: none; stroke: var(--cc-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ccd-ln-expired { stroke: #8A94AD; stroke-dasharray: 5 5; }
.ccd-area { fill: var(--cc-primary); opacity: .08; }
.ccd-dot { fill: var(--cc-primary); stroke: var(--cc-card); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ccd-dot-expired { fill: #8A94AD; }
.ccd-hit rect:first-child { fill: transparent; }
.ccd-hit .ccd-dot, .ccd-guide { opacity: 0; transition: opacity .12s ease; }
.ccd-guide { stroke: var(--cc-input); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ccd-hit:hover .ccd-dot, .ccd-hit:hover .ccd-guide { opacity: 1; }
.ccd-bar-mark { fill: var(--cc-primary); }
.ccd-bar-mark.is-zero { fill: var(--cc-line); }
.ccd-hit:hover .ccd-bar-mark { fill: var(--cc-hover); }

.ccd-donut, .ccd-gauge { position: relative; display: grid; place-items: center; }
.ccd-donut circle { fill: none; stroke-width: 4.5; }
.ccd-donut > span, .ccd-gauge > span { position: absolute; display: grid; justify-items: center; text-align: center; line-height: 1.1; }
.ccd-donut b, .ccd-gauge b { color: var(--cc-ink); font-size: 17px; font-weight: 800; }
.ccd-donut small, .ccd-gauge small { font-size: 10.5px; }
.ccd-gauge { max-width: 170px; margin: 0 auto; width: 100%; }
.ccd-gauge > span { bottom: 0; }
.ccd-gauge path { fill: none; stroke-width: 9; stroke-linecap: round; }
.ccd-track { fill: none; stroke: var(--cc-hl); }
.ccd-donut .ccd-track { stroke-width: 4.5; }
.ccd-gauge-val { stroke: var(--cc-primary); }
.ccd-seg-ok { stroke: #25B003; } .ccd-seg-warn { stroke: #E5780B; } .ccd-seg-bad { stroke: #EC1F00; } .ccd-seg-muted { stroke: #8A94AD; }

.ccd-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12px; }
.ccd-legend li { display: flex; align-items: center; gap: 8px; color: var(--cc-label); font-weight: 600; }
.ccd-legend span { flex: 1; min-width: 0; }
.ccd-legend b { color: var(--cc-ink); font-weight: 800; }
.ccd-legend-row { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ccd-legend-row span { flex: none; }
.ccd-swatch { display: inline-block; width: 10px; height: 4px; border-radius: 2px; flex: none; background: var(--cc-primary); }
.ccd-swatch-soft { background: var(--cc-soft-2); }
.ccd-swatch-line { background: repeating-linear-gradient(90deg, #8A94AD 0 4px, transparent 4px 6px); }
.ccd-swatch-ok { background: #25B003; } .ccd-swatch-warn { background: #E5780B; } .ccd-swatch-bad { background: #EC1F00; } .ccd-swatch-muted { background: #8A94AD; }

.ccd-panel { display: grid; gap: 14px; min-width: 0; }
.ccd-panel .ccd-table-wrap { border-width: 1px 0; border-radius: 0; padding: 0; background: none; }
.ccd-panel .ccd-table td b { display: block; color: var(--cc-ink); font-weight: 700; }

.ccd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ccd-grid-tpl { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.ccd-span { grid-column: 1 / -1; }
.ccd-card { background: var(--cc-card); border: 1px solid var(--cc-line); border-radius: var(--cc-radius); padding: 24px; min-width: 0; display: grid; gap: 16px; align-content: start; }
.ccd-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ccd-card-head h4 { font-size: 20px; font-weight: 700; }
.ccd-card-head > span { font-size: 12.5px; font-weight: 600; color: var(--cc-muted); }
.ccd-empty { display: grid; justify-items: center; gap: 8px; padding: 20px 12px; color: var(--cc-muted); text-align: center; }
.ccd-empty svg { width: 22px; height: 22px; }

.ccd-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 4px; border: 1px solid transparent; font-size: 10.5px; font-weight: 800; line-height: 1.3; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.ccd-tag-ok { background: var(--cc-ok-bg); color: var(--cc-ok); border-color: var(--cc-ok-bd); }
.ccd-tag-warn { background: var(--cc-warn-bg); color: var(--cc-warn); border-color: var(--cc-warn-bd); }
.ccd-tag-bad { background: var(--cc-bad-bg); color: var(--cc-bad); border-color: var(--cc-bad-bd); }
.ccd-tag-info { background: var(--cc-info-bg); color: var(--cc-info); border-color: var(--cc-info-bd); }
.ccd-tag-revoked { background: var(--cc-revoked-bg); color: var(--cc-revoked); border-color: var(--cc-revoked-bd); }
.ccd-tag-muted { background: var(--cc-line); color: var(--cc-label); border-color: var(--cc-input); }

.ccd-av { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; flex: none; }
.ccd-av-0 { background: #2563EB; } .ccd-av-1 { background: #7C3AED; } .ccd-av-2 { background: #0D9488; } .ccd-av-3 { background: #D97706; }
.ccd-av-4 { background: #DB2777; } .ccd-av-5 { background: #0891B2; } .ccd-av-6 { background: #4F46E5; } .ccd-av-7 { background: #059669; }
.ccd-person { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.ccd-person b { color: var(--cc-ink); font-weight: 700; }

.ccd-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ccd-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--cc-line); flex-wrap: wrap; }
.ccd-list li:first-child { border-top: 0; padding-top: 0; }
.ccd-list-mid { flex: 1 1 160px; min-width: 0; }
.ccd-list .ccd-person { flex: 0 1 190px; min-width: 0; }
.ccd-list li > .ccd-btn { margin-left: auto; }
.ccd-list-mid b { color: var(--cc-ink); font-weight: 600; font-size: 13.5px; }
.ccd-picks li { padding: 10px 12px; border: 1px solid var(--cc-line); border-radius: 8px; margin-top: 8px; }
.ccd-picks li:first-child { margin-top: 0; padding-top: 10px; border-top: 1px solid var(--cc-line); }
.ccd-pick.is-on { border-color: var(--cc-primary); background: var(--cc-soft); box-shadow: inset 0 0 0 1px var(--cc-primary); }
.ccd-pick.is-blocked { background: var(--cc-bg); }
.ccd-pick.is-done { background: var(--cc-ok-bg); border-color: #A7F3D0; }

.ccd-depts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ccd-dept { display: grid; grid-template-columns: 110px minmax(60px, 1fr) 44px; grid-template-rows: auto auto; align-items: center; column-gap: 12px; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid transparent; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ccd-dept:hover, .ccd-dept.is-on { background: var(--cc-soft); border-color: var(--cc-soft-2); }
.ccd-dept-name { font-weight: 600; color: var(--cc-ink); }
.ccd-dept b { text-align: right; color: var(--cc-ink); }
.ccd-dept small { grid-column: 1 / -1; }
.ccd progress { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border: 0; border-radius: 999px; background: var(--cc-line); overflow: hidden; }
.ccd progress::-webkit-progress-bar { background: var(--cc-line); border-radius: 999px; }
.ccd progress::-webkit-progress-value { background: var(--cc-primary); border-radius: 999px; transition: width .3s ease; }
.ccd progress::-moz-progress-bar { background: var(--cc-primary); border-radius: 999px; }
.ccd-progress { display: grid; gap: 4px; min-width: 160px; }
.ccd-progress span { font-size: 12px; color: var(--cc-muted); }

.ccd-table-wrap { border: 1px solid var(--cc-line); border-radius: var(--cc-radius); background: var(--cc-card); overflow: auto; padding: 0 16px; }
.ccd-main > .ccd-table-wrap { border-width: 1px 0; border-radius: 0; margin: 0 -40px; padding: 0 40px; }
.ccd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ccd-table th { text-align: left; font-size: 12.8px; font-weight: 800; color: var(--cc-label); text-transform: uppercase; letter-spacing: 0; padding: 14px 10px 12px 0; background: var(--cc-card); border-bottom: 1px solid var(--cc-line); white-space: nowrap; }
.ccd-table td, .ccd-table tbody th { padding: 16px 10px 16px 0; font-size: 12.8px; color: var(--cc-label); border-top: 1px solid rgba(203, 208, 221, .54); vertical-align: middle; }
.ccd-table tbody th { background: none; text-transform: none; letter-spacing: 0; font-size: 13.5px; white-space: normal; border-bottom: 0; }
.ccd-table tbody tr:first-child td, .ccd-table tbody tr:first-child th { border-top: 0; }
.ccd-table tbody tr:hover td { background: var(--cc-bg); }
.ccd-table tr.is-focus td { background: var(--cc-soft); }
.ccd-table-compact td { font-weight: 700; color: var(--cc-ink); }
.ccd-table-plain td { white-space: nowrap; }
.ccd-row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ccd-table:not(.ccd-table-plain) .ccd-btn { white-space: normal; text-align: left; }
.ccd-table:not(.ccd-table-plain) .ccd-tag { white-space: normal; max-width: 100%; }
.ccd-count { font-size: 12.5px; color: var(--cc-muted); }

.ccd-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--cc-radius); background: linear-gradient(135deg, var(--cc-soft), var(--cc-soft)); border: 1px solid var(--cc-soft-2); text-align: left; }
.ccd-cta p { color: var(--cc-ink); font-weight: 600; }

.ccd-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.ccd-feed-scroll { max-height: 480px; overflow: auto; padding-right: 4px; }
.ccd-ev { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--cc-line); }
.ccd-ev:first-child { border-top: 0; }
.ccd-ev b { color: var(--cc-ink); font-weight: 600; font-size: 13.5px; }
.ccd-ev p { font-size: 12.5px; color: var(--cc-text); margin-top: 2px; }
.ccd-ev-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--cc-hl); color: var(--cc-muted); }
.ccd-ev-ico svg { width: 14px; height: 14px; }
.ccd-ev-issued .ccd-ev-ico, .ccd-ev-pass .ccd-ev-ico, .ccd-ev-eligible .ccd-ev-ico { background: var(--cc-ok-bg); color: var(--cc-ok); }
.ccd-ev-training .ccd-ev-ico, .ccd-ev-lesson .ccd-ev-ico, .ccd-ev-assignment .ccd-ev-ico, .ccd-ev-verified .ccd-ev-ico, .ccd-ev-viewed .ccd-ev-ico { background: var(--cc-info-bg); color: var(--cc-info); }
.ccd-ev-expired .ccd-ev-ico { background: var(--cc-warn-bg); color: var(--cc-warn); }
.ccd-ev-fail .ccd-ev-ico { background: var(--cc-bad-bg); color: var(--cc-bad); }
.ccd-ev-revoked .ccd-ev-ico { background: var(--cc-revoked-bg); color: var(--cc-revoked); }

.ccd-reports { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ccd-report { display: grid; gap: 3px; align-content: start; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--cc-line); background: var(--cc-card); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ccd-report b { color: var(--cc-ink); font-weight: 700; }
.ccd-report:hover { border-color: var(--cc-soft-2); }
.ccd-report.is-on { border-color: var(--cc-primary); background: var(--cc-soft); box-shadow: inset 0 0 0 1px var(--cc-primary); }
.ccd-report-out { display: grid; gap: 10px; }

.ccd-tpl-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--cert-seal-bg, #f2edfe); color: var(--cert-accent, #724df2); }
.ccd-tpl-violet { --cert-seal-bg: #f2edfe; --cert-accent: #724df2; }
.ccd-tpl-gold { --cert-seal-bg: #fbf3d6; --cert-accent: #a9821f; }
.ccd-tpl-slate { --cert-seal-bg: #eef2f7; --cert-accent: #334155; }
.ccd-tpl-dark { --cert-seal-bg: #23164f; --cert-accent: #c9b6ff; }
.ccd-tpl-ico svg { width: 18px; height: 18px; }
.ccd-used { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.ccd-used span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--cc-soft); color: var(--cc-hover); font-size: 12px; font-weight: 700; }
.ccd-used span svg { width: 12px; height: 12px; }
.ccd-used span.is-muted { background: var(--cc-hl); color: var(--cc-muted); }
.ccd-reg, .ccd-reg-head, .ccd-cert-modal { --cc-primary: #6D28D9; --cc-hover: #5B21B6; --cc-soft: #EDE9FE; --cc-ink: #15103A; --cc-label: #4A4660; --cc-muted: #6B6580; --cc-line: #F0EEF6; --cc-input: #DDD9EA; --cc-bg: #F5F3FA; --cc-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-family: var(--cc-font); }
/* minmax(0, 1fr) caps the single track at the container, so a long nowrap
   label (e.g. the active template filter) truncates instead of pushing the
   stats and filter rows past the card edge on narrow screens. */
.ccd-reg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.ccd-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 0 var(--ccd-pad, 28px) 24px; background: #F5F3FA; border-bottom: 1px solid #ECE9F4; }
.ccd-top[hidden] { display: none; }
.ccd-top .ccd-head, body.ccd-live .ccd-top .ccd-head { margin: 0 calc(-1 * var(--ccd-pad, 28px)); }
.ccd-reg-head { align-items: center; gap: 10px; }
.ccd-reg-head .ccd-btn { min-height: 42px; padding: 0 18px; border-radius: 12px; font: 600 14px/1 var(--cc-font); letter-spacing: -.01em; }
.ccd-reg-head .ccd-btn-primary { box-shadow: 0 8px 20px rgba(109, 40, 217, .28); }
.ccd-reg-head .ccd-btn-ghost { background: #fff; color: var(--cc-ink); border-color: var(--cc-input); }
.ccd-reg-topsearch { display: flex; align-items: center; gap: 9px; width: 240px; height: 40px; padding: 0 13px; border-radius: 11px; background: #F0EEF6; color: #948FA6; }
.ccd-reg-topsearch svg { width: 16px; height: 16px; }
.ccd-reg-topsearch input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 13.5px var(--cc-font); color: var(--cc-ink); }
.ccd-reg-topsearch input::placeholder { color: #948FA6; }
.ccd-reg-topsearch:focus-within { box-shadow: 0 0 0 3px rgba(109, 40, 217, .2); }
.ccd-reg-bell { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; border: 1px solid #ECE9F4; background: #fff; color: var(--cc-label); cursor: pointer; }
.ccd-reg-bell:hover { border-color: var(--cc-primary); color: var(--cc-primary); }
.ccd-reg-bell svg { width: 18px; height: 18px; }
.ccd-reg-stats { display: flex; flex-wrap: wrap; gap: 16px; }
.ccd-reg-stat { flex: 1 1 150px; display: flex; align-items: center; gap: 13px; padding: 18px; background: #fff; border: 1px solid #ECE9F4; border-radius: 16px; box-shadow: 0 1px 2px rgba(21, 16, 58, .04); }
.ccd-reg-stat-ico { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none; }
.ccd-reg-stat-ico svg { width: 20px; height: 20px; }
.ccd-reg-green { background: #ECFDF5; color: #166534; } .ccd-reg-amber { background: #FEF3C7; color: #92400E; } .ccd-reg-violet { background: #EDE9FE; color: #6D28D9; } .ccd-reg-blue { background: #EFF6FF; color: #1D4ED8; }
.ccd .ccd-reg-stat b { display: block; font-size: 23px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: #948FA6; font-variant-numeric: tabular-nums; }
.ccd .ccd-reg-stat small { font-size: 12px; color: var(--cc-muted); }
.ccd-reg-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; background: #fff; border: 1px solid #ECE9F4; border-radius: 16px; box-shadow: 0 1px 2px rgba(21, 16, 58, .04); }
.ccd-reg-search { display: flex; align-items: center; gap: 8px; width: 250px; height: 38px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--cc-input); background: #fff; color: #948FA6; }
.ccd-reg-search svg { width: 15px; height: 15px; }
.ccd-reg-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 13.5px var(--cc-font); color: var(--cc-ink); }
.ccd-reg-search input::placeholder { color: #948FA6; }
.ccd-reg-search:focus-within { border-color: var(--cc-primary); }
.ccd-reg-dd { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--cc-input); background: #fff; font-size: 13.5px; color: var(--cc-muted); cursor: pointer; white-space: nowrap; }
.ccd-reg-dd svg { width: 15px; height: 15px; color: #948FA6; }
.ccd-reg-dd b { font-weight: 700; color: var(--cc-ink); max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.ccd-reg-dd.is-active { border-color: var(--cc-primary); background: var(--cc-soft); }
.ccd-reg-dd.is-active b, .ccd-reg-dd.is-active svg { color: var(--cc-hover); }
.ccd-reg-dd select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.ccd-reg-dd:focus-within { box-shadow: 0 0 0 3px rgba(109, 40, 217, .25); }
.ccd-reg-clear { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 6px; border: 0; background: none; color: var(--cc-muted); font: 600 13px var(--cc-font); cursor: pointer; }
.ccd-reg-clear svg { width: 14px; height: 14px; }
.ccd .ccd-reg-count { margin: 0; font-size: 13.5px; color: var(--cc-muted); }
.ccd-reg-count b { color: var(--cc-ink); }
[data-ccd-rows] { display: grid; gap: 12px; min-width: 0; }
.ccd-reg-card { background: #fff; border: 1px solid #ECE9F4; border-radius: 16px; box-shadow: 0 1px 2px rgba(21, 16, 58, .04); overflow: hidden; }
.ccd-reg-scroll { overflow-x: auto; }
.ccd-reg-table { min-width: 760px; }
.ccd-reg-row { display: grid; grid-template-columns: minmax(200px, 1.7fr) minmax(180px, 1.9fr) 90px 132px 140px 116px; gap: 16px; align-items: center; min-height: 60px; padding: 12px 22px; border-bottom: 1px solid var(--cc-line); }
.ccd-reg-row:last-child { border-bottom: 0; }
.ccd-reg-row.is-focus { background: #FAF9FD; box-shadow: inset 3px 0 0 var(--cc-primary); }
.ccd-reg-headrow { min-height: 0; padding: 13px 22px; background: #FAF9FD; border-bottom-color: #ECE9F4; }
.ccd-reg-th { display: inline-flex; align-items: center; gap: 5px; width: 100%; padding: 0; border: 0; background: none; font: 700 11.5px var(--cc-font); letter-spacing: .04em; text-transform: uppercase; color: #948FA6; cursor: pointer; text-align: left; }
.ccd-reg-th.is-right { justify-content: flex-end; text-align: right; }
.ccd-reg-th svg { width: 12px; height: 12px; color: var(--cc-primary); }
.ccd-reg-th[aria-sort] { color: var(--cc-label); }
.ccd-reg-person { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ccd-reg-person > div, .ccd-reg-course { min-width: 0; }
.ccd .ccd-reg-person b { display: block; font-size: 13.5px; font-weight: 600; color: var(--cc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccd .ccd-reg-person small, .ccd .ccd-reg-course small { font-size: 11.5px; color: #948FA6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccd-reg-course span { display: block; font-size: 13px; color: var(--cc-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ccd-reg-score { text-align: right; font-size: 13.5px; font-weight: 700; color: var(--cc-ink); font-variant-numeric: tabular-nums; }
.ccd-reg-date { font-size: 13px; color: var(--cc-muted); white-space: nowrap; }
.ccd-reg-date.is-muted { color: #948FA6; }
.ccd-reg .ccd-tag { padding: 4px 10px; border-radius: 999px; border: 0; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.ccd-reg-actions { display: flex; justify-content: flex-end; gap: 5px; }
.ccd-reg-act { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--cc-input); background: #fff; color: var(--cc-muted); cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.ccd-reg-act:hover { border-color: var(--cc-primary); background: var(--cc-soft); color: var(--cc-primary); }
.ccd-reg-act:disabled { border-color: #ECE9F4; background: #F5F3FA; color: #948FA6; cursor: not-allowed; }
.ccd-reg-act svg { width: 16px; height: 16px; }
.ccd-reg-empty { display: grid; justify-items: center; gap: 6px; padding: 44px 20px; text-align: center; }
.ccd-reg-empty > span { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #F5F3FA; color: #948FA6; margin-bottom: 4px; }
.ccd-reg-empty > span svg { width: 26px; height: 26px; }
.ccd .ccd-reg-empty b { font-size: 15px; color: var(--cc-ink); }
.ccd .ccd-reg-empty small { font-size: 13.5px; color: var(--cc-muted); margin-bottom: 8px; }
.ccd-reg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--cc-line); font-size: 13px; color: var(--cc-muted); }
.ccd-reg-foot > div { display: flex; align-items: center; gap: 6px; }
.ccd-reg-page { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 9px; border: 1px solid #ECE9F4; background: #fff; color: var(--cc-label); font: 700 13px var(--cc-font); cursor: pointer; }
.ccd-reg-page.is-on { background: var(--cc-primary); border-color: var(--cc-primary); color: #fff; }
.ccd-reg-page:disabled { opacity: .5; cursor: default; }
.ccd-reg-page svg { width: 16px; height: 16px; }
.ccd-reg .ccd-btn, .ccd-cert-modal .ccd-btn { min-height: 42px; padding: 0 18px; border-radius: 12px; font: 600 14px/1 var(--cc-font); letter-spacing: -.01em; }
.ccd-reg .ccd-btn-sm { min-height: 34px; padding: 0 13px; font-size: 13px; }
.ccd-reg .ccd-btn-ghost, .ccd-cert-modal .ccd-btn-ghost { background: #fff; color: var(--cc-ink); border-color: var(--cc-input); box-shadow: 0 1px 2px rgba(21, 16, 58, .04); }
.ccd-cert-modal .ccd-btn-primary { box-shadow: 0 8px 20px rgba(109, 40, 217, .28); }
.ccd-modal-box.ccd-cert-modal { width: min(660px, 100%); border-radius: 20px; box-shadow: 0 12px 32px rgba(21, 16, 58, .08), 0 2px 8px rgba(21, 16, 58, .04); }
.ccd-cert-modal-head { align-items: center; gap: 12px; padding: 16px 20px; }
.ccd-cert-modal-head > div { flex: 1; min-width: 0; }
.ccd-cert-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--cc-ink); }
.ccd .ccd-cert-modal-head small { font-size: 12.5px; color: #948FA6; }
.ccd-cert-modal-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #ECFDF5; color: #166534; flex: none; }
.ccd-cert-modal-ico svg { width: 19px; height: 19px; }
.ccd-cert-modal .ccd-icon-btn { border: 0; background: none; color: #948FA6; }
.ccd-cert-modal-body { padding: 24px; background: var(--cc-bg); }
.ccd-cert-modal .ccd-modal-foot { gap: 10px; padding: 14px 20px; background: #FAF9FD; }
.ccd-tpl-editor { --cc-primary: #6D28D9; --cc-hover: #5B21B6; --cc-soft: #EDE9FE; --cc-soft-2: #DBD8FC; --cc-ink: #15103A; --cc-label: #4A4660; --cc-muted: #6B6580; --cc-line: #F0EEF6; --cc-input: #DDD9EA; --cc-bg: #F5F3FA; --cc-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--cc-card); border: 1px solid #ECE9F4; border-radius: 20px; box-shadow: 0 12px 32px rgba(21, 16, 58, .08), 0 2px 8px rgba(21, 16, 58, .04); overflow: hidden; min-width: 0; font-family: var(--cc-font); }
.ccd-tpl-editor :focus-visible { outline-color: rgba(109, 40, 217, .45); }
.ccd-tpl-editor .ccd-btn { min-height: 42px; padding: 0 18px; border-radius: 12px; font: 600 14px/1 var(--cc-font); letter-spacing: -.01em; }
.ccd-tpl-editor .ccd-btn-primary { box-shadow: 0 8px 20px rgba(109, 40, 217, .28); }
.ccd-tpl-editor .ccd-btn-ghost { background: #fff; color: var(--cc-ink); border-color: var(--cc-input); box-shadow: 0 1px 2px rgba(21, 16, 58, .04); }
.ccd-tpl-editor .ccd-btn-ghost:hover { background: #FAF9FD; border-color: var(--cc-input); }
.ccd-tpl-editor .ccd-live-dot { color: #166534 !important; }
.ccd-tpl-preview .ccd-stage { padding: 0; border: 0; border-radius: 0; background: none; overflow: visible; }
.ccd-tpl-preview .ccd-stage::before { display: none; }
.ccd-tpl-preview .ccd-stage > .ccd-cert { box-shadow: 0 12px 32px rgba(21, 16, 58, .08), 0 2px 8px rgba(21, 16, 58, .04); }
.ccd-tpl-top { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--cc-line); }
.ccd-tpl-badge { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--cc-primary); color: #fff; flex: none; }
.ccd-tpl-badge svg { width: 20px; height: 20px; }
.ccd-tpl-top h4 { margin: 0; font-size: 17px; font-weight: 700; color: var(--cc-ink); }
.ccd-tpl-top small { display: block; font-size: 12.5px; color: var(--cc-muted); }
.ccd-tpl-body { display: grid; grid-template-columns: 340px minmax(0, 1fr); }
.ccd-tpl-body.is-swapped { grid-template-columns: minmax(0, 1fr) 340px; }
.ccd-tpl-form { padding: 22px; gap: 14px; border-right: 1px solid var(--cc-line); align-content: start; min-width: 0; }
.ccd-tpl-body.is-swapped .ccd-tpl-form { border-right: 0; border-left: 1px solid var(--cc-line); }
.ccd-tpl-preview { display: grid; gap: 12px; align-content: start; padding: 22px; background: var(--cc-bg); min-width: 0; }
.ccd-tpl-label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; color: var(--cc-muted); }
.ccd-tpl-label .ccd-live-dot { margin-left: auto; }
.ccd-tpl-form .ccd-field { gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--cc-label); }
.ccd-tpl-form .ccd-fieldset legend { margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--cc-label); }
.ccd-tpl-form .ccd-field input, .ccd-tpl-form .ccd-field textarea { width: 100%; min-width: 0; min-height: 40px; padding: 0 12px; border-radius: 10px; border: 1.5px solid var(--cc-input); background: var(--cc-card); color: var(--cc-ink); font: 500 14px var(--cc-font); transition: border-color .15s ease, box-shadow .15s ease; }
.ccd-tpl-form .ccd-field textarea { height: 64px; padding: 9px 12px; line-height: 1.5; resize: none; }
.ccd-tpl-form .ccd-field input:focus, .ccd-tpl-form .ccd-field textarea:focus { border-color: var(--cc-primary); outline: 0; box-shadow: 0 0 0 3px #F5F3FA; }
.ccd-tpl-form .ccd-field input::placeholder, .ccd-tpl-form .ccd-field textarea::placeholder { color: #948FA6; }
.ccd-pills { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; }
.ccd-pill { position: relative; cursor: pointer; }
.ccd-pills-row { display: flex; flex-wrap: wrap; }
.ccd-pills-row .ccd-pill { flex: 1 1 64px; }
.ccd-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ccd-pill span { display: block; padding: 10px 6px; border-radius: 10px; border: 1.5px solid var(--cc-input); background: var(--cc-card); text-align: center; font-size: 12.5px; font-weight: 600; color: var(--cc-label); transition: border-color .15s ease, background .15s ease, color .15s ease; }
.ccd-pill:hover span { border-color: var(--cc-soft-2); }
.ccd-pill input:checked + span { border-color: var(--cc-primary); background: var(--cc-soft); color: var(--cc-hover); }
.ccd-pill input:focus-visible + span { outline: 3px solid rgba(109, 40, 217, .45); outline-offset: 2px; }
.ccd-tpl-form .ccd-tpl-note { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 500; line-height: 1.5; color: #948FA6; }
.ccd-fieldset .ccd-tpl-note { margin-top: 3px; font-size: 12.5px; }
.ccd-tpl-note svg { width: 14px; height: 14px; flex: none; }
.ccd-switch-row { display: flex; justify-content: space-between; width: 100%; }
.ccd-switch-row b { font-size: 13.5px; font-weight: 600; }
.ccd-tpl-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--cc-line); background: #FAF9FD; }
.ccd-stage-card { gap: 14px; }
.ccd-grid-tpl .ccd-stage-card { position: sticky; top: 20px; }
.ccd-grid-issue { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.ccd-issue-form { gap: 20px; }
.ccd-fsec { display: grid; gap: 14px; padding: 18px; border-radius: 10px; border: 1px solid var(--cc-line); background: var(--cc-bg); }
.ccd-fsec-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; color: var(--cc-ink); }
.ccd-fsec-title span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cc-primary); color: #fff; font-size: 12px; }
.ccd-fsec .ccd-field select { width: 100%; }
.ccd-ro-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ccd-ro { display: grid; gap: 3px; padding: 10px 12px; border-radius: 8px; background: var(--cc-card); border: 1px solid var(--cc-line); min-width: 0; }
.ccd-ro > span { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cc-muted); }
.ccd-ro b { color: var(--cc-ink); font-weight: 700; font-size: 13.5px; overflow-wrap: anywhere; }
.ccd-ro b small { display: inline; font-weight: 600; margin-left: 4px; }
.ccd-elig { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; border: 1px solid; }
.ccd-elig svg { width: 20px; height: 20px; margin-top: 1px; }
.ccd-elig b { display: block; font-weight: 800; }
.ccd-elig.is-ok { background: var(--cc-ok-bg); border-color: var(--cc-ok-bd); color: var(--cc-ok); }
.ccd-elig.is-bad { background: var(--cc-warn-bg); border-color: var(--cc-warn-bd); color: var(--cc-warn); }
.ccd-elig small { color: inherit; opacity: .85; }
.ccd-form-foot { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--cc-line); }
.ccd-ready { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--cc-ok-bg); border: 1px solid var(--cc-ok-bd); color: var(--cc-ok); font-size: 13px; font-weight: 800; }
.ccd-grip { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-left: -6px; border-radius: 6px; color: var(--cc-muted); cursor: grab; }
.ccd-grip:hover { background: var(--cc-hl); color: var(--cc-primary); }
.ccd-grip:active { cursor: grabbing; }
.ccd-grip svg { width: 16px; height: 16px; }
[data-ccd-panel] { transition: opacity .15s ease, box-shadow .15s ease, border-color .15s ease; }
[data-ccd-panel].is-dragging { opacity: .45; }
[data-ccd-panel].is-drop { outline: 2px dashed var(--cc-primary); outline-offset: -6px; }
body.ccd-live main.ccs-page:has(.ccd-section) { height: 100vh; display: flex; flex-direction: column; }
body.ccd-live .ccd-section { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.ccd-live .ccd-section > .container { flex: 1; min-height: 0; display: flex; flex-direction: column; }
body.ccd-live .ccd-section .ccs-top { flex: none; }
body.ccd-live .ccd-bar { position: sticky; top: 64px; z-index: 40; }
body.ccd-live .ccd-time { position: sticky; top: var(--ccs-inset, 16px); z-index: 39; box-shadow: 0 -14px 0 2px var(--cc-bg), 0 8px 16px -14px rgba(20, 24, 36, .35); }
body.ccd-live .ccd-grid-tpl .ccd-stage-card { top: calc(3 * var(--ccs-inset, 16px) + var(--ccd-time-h, 52px)); }
.ccd-body > .ccd-note { grid-column: 1 / -1; }
body.ccd-live .ccd-body > .ccd-note { grid-column: 2; }
body.ccd-live .ccd-body { margin: 0 var(--ccs-inset, 16px) var(--ccs-inset, 16px); border: 1px solid #ECE9F4; border-radius: 12px; overflow: clip; background: var(--cc-bg); }
}
body.ccd-live .ccd-side { grid-row: 1 / span 2; }
body.ccd-live .ccd-side { position: sticky; top: calc(2 * var(--ccs-inset, 16px) + var(--ccd-time-h, 52px)); align-self: start; height: calc(100vh - 67px - 6 * var(--ccs-inset, 16px) - var(--ccd-time-h, 52px)); overflow-y: auto; }
.ccd-live-dot { display: inline-flex; align-items: center; gap: 7px; font-size: 12px !important; font-weight: 700 !important; color: var(--cc-ok) !important; }
.ccd-live-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #25B003; box-shadow: 0 0 0 0 rgba(37, 176, 3, .5); animation: ccd-pulse 1.8s ease-out infinite; }
@keyframes ccd-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 176, 3, .45); } 100% { box-shadow: 0 0 0 9px rgba(37, 176, 3, 0); } }
.ccd-stage { position: relative; padding: 32px 28px; border-radius: 12px; background: radial-gradient(120% 90% at 50% 0%, #fff 0%, #EEF2FF 100%); border: 1px solid var(--cc-line); overflow: hidden; }
.ccd-stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(109, 40, 217, .12) 1px, transparent 1px); background-size: 16px 16px; pointer-events: none; }
.ccd-stage > .ccd-cert { position: relative; box-shadow: 0 30px 50px -34px rgba(20, 24, 60, .6); }
.ccd-stage-gold { background: radial-gradient(120% 90% at 50% 0%, #FFFDF5 0%, #FBF3D6 100%); }
.ccd-stage-slate { background: radial-gradient(120% 90% at 50% 0%, #fff 0%, #EEF2F7 100%); }
.ccd-stage-dark { background: radial-gradient(120% 90% at 50% 0%, #2A2160 0%, #120E33 100%); }
.ccd-stage-dark::before { background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px); }
.ccd-stage-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.ccd-stage-meta span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--cc-line); background: var(--cc-bg); font-size: 12px; font-weight: 700; color: var(--cc-label); }
.ccd-stage-meta svg { width: 13px; height: 13px; color: var(--cc-muted); }
.ccd-stage-meta .ccd-tpl-dot { width: 10px; height: 10px; margin: 0; }
.ccd-tpl-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: none; }

.ccd-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ccd-checks li { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 8px; background: var(--cc-bg); }
.ccd-checks li.is-ok > svg { color: var(--cc-ok); margin-top: 2px; }
.ccd-checks li.is-bad > svg { color: var(--cc-bad); margin-top: 2px; }
.ccd-checks li.is-bad { background: var(--cc-bad-bg); }
.ccd-checks b { color: var(--cc-ink); font-weight: 600; font-size: 13.5px; }
.ccd-verdict { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; text-align: left; width: 100%; }
.ccd-verdict > svg { width: 20px; height: 20px; margin-top: 1px; }
.ccd-verdict b { color: var(--cc-ink); }
.ccd-verdict-ok { background: var(--cc-ok-bg); }
.ccd-verdict-ok > svg { color: var(--cc-ok); }
.ccd-verdict-bad { background: var(--cc-bad-bg); }
.ccd-verdict-bad > svg { color: var(--cc-bad); }
.ccd-verdict-info { background: var(--cc-info-bg); }
.ccd-verdict-info > svg { color: var(--cc-info); }

.ccd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ccd-kpis span { padding: 12px; border-radius: 8px; background: var(--cc-card); border: 1px solid var(--cc-line); font-size: 12.5px; color: var(--cc-muted); font-weight: 600; }
.ccd-kpis b { display: block; font-size: 22px; color: var(--cc-ink); font-weight: 800; }
.ccd-course-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.ccd-course-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px; border-radius: 8px; border: 1px solid var(--cc-soft-2); background: linear-gradient(180deg, #F5F8FF, #FFFFFF); }
.ccd-course-card-top { display: flex; gap: 12px; align-items: flex-start; }
.ccd-course-card-top > div { flex: 1; min-width: 0; }
.ccd-course-card-top b { color: var(--cc-ink); }
.ccd-course-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 6px; background: var(--cc-primary); color: #fff; flex: none; }
.ccd-course-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ccd-course-card-foot .ccd-muted { align-items: center; }

.ccd-course { display: grid; gap: 16px; min-width: 0; }
.ccd-course-body > nav { min-width: 0; }
.ccd-course-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--cc-line); }
.ccd-course-head > div:nth-child(2) { flex: 1 1 220px; min-width: 0; }
.ccd-eyebrow { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cc-primary); margin-bottom: 4px; }
.ccd-course-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
.ccd-outline { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ccd-outline-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 10px; border-radius: 8px; border: 1px solid transparent; background: none; text-align: left; font: 550 13.5px var(--cc-font); color: var(--cc-ink); cursor: pointer; }
.ccd-outline-item small { font-weight: 600; }
.ccd-outline-item:hover:not(:disabled) { background: var(--cc-hl); }
.ccd-outline-item.is-on { background: var(--cc-soft); border-color: var(--cc-soft-2); }
.ccd-outline-item.is-done .ccd-outline-ico { color: var(--cc-ok); }
.ccd-outline-item:disabled { color: var(--cc-muted); cursor: not-allowed; }
.ccd-outline-ico { color: var(--cc-muted); padding-top: 1px; }
.ccd-lesson { display: grid; gap: 12px; padding: 22px; border-radius: var(--cc-radius); background: var(--cc-card); border: 1px solid var(--cc-line); min-width: 0; }
.ccd-lesson h4 { font-size: 20px; outline: none; }
.ccd-lesson > p { font-size: 15px; line-height: 1.65; }
.ccd-key { display: flex; gap: 12px; padding: 14px; border-radius: 8px; background: var(--cc-soft); color: var(--cc-ink); }
.ccd-key svg { color: var(--cc-primary); margin-top: 2px; }
.ccd-key b { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--cc-hover); }
.ccd-lesson-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 6px; }
.ccd-file { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 8px; border: 1px dashed var(--cc-input); background: var(--cc-bg); }
.ccd-file > svg { width: 22px; height: 22px; color: var(--cc-primary); }
.ccd-file b { color: var(--cc-ink); overflow-wrap: anywhere; }
.ccd-center { justify-items: center; text-align: center; }
.ccd-center > p { max-width: 560px; }
.ccd-big-ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 8px; }
.ccd-big-ico svg { width: 28px; height: 28px; }
.ccd-ok { background: var(--cc-ok-bg); color: var(--cc-ok); }
.ccd-bad { background: var(--cc-bad-bg); color: var(--cc-bad); }
.ccd-q { border: 1px solid var(--cc-line); border-radius: 8px; padding: 14px; margin: 0; display: grid; gap: 6px; }
.ccd-q legend { padding: 0 6px; font-weight: 700; color: var(--cc-ink); font-size: 14.5px; }
.ccd-q legend span { color: var(--cc-primary); }
.ccd-opt { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--cc-line); cursor: pointer; min-height: 44px; transition: border-color .15s ease, background .15s ease; }
.ccd-opt:hover { border-color: var(--cc-soft-2); background: #F5F8FF; }
.ccd-opt input { accent-color: var(--cc-primary); width: 16px; height: 16px; flex: none; }
.ccd-opt:has(input:checked) { border-color: var(--cc-primary); background: var(--cc-soft); }
.ccd-form-error { color: var(--cc-bad); font-weight: 600; font-size: 13px; min-height: 1em; }
.ccd-form-error:empty { display: none; }
.ccd-review { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; text-align: left; width: 100%; }
.ccd-review li { display: flex; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--cc-bg); }
.ccd-review li.is-ok > svg { color: var(--cc-ok); }
.ccd-review li.is-bad > svg { color: var(--cc-bad); }
.ccd-review b { color: var(--cc-ink); font-weight: 600; font-size: 13.5px; }

.ccd-cert { position: relative; overflow: hidden; width: 100%; max-width: 620px; margin: 0 auto; padding: 34px 40px 28px; border-radius: 16px; background: var(--cert-bg); border: 2px solid var(--cert-border); box-shadow: 0 24px 50px -40px rgba(15, 23, 42, .55); text-align: center; }
.ccd-cert-violet { --cert-bg: #ffffff; --cert-border: #724df2; --cert-inner: #dbd8fc; --cert-fg: #15103a; --cert-sub: #6b6580; --cert-accent: #724df2; --cert-seal-bg: #f2edfe; --cert-seal-fg: #724df2; }
.ccd-cert-gold { --cert-bg: #fffdf5; --cert-border: #c9a227; --cert-inner: #e7d28a; --cert-fg: #3d3414; --cert-sub: #8a7a3a; --cert-accent: #a9821f; --cert-seal-bg: #fbf3d6; --cert-seal-fg: #a9821f; }
.ccd-cert-slate { --cert-bg: #ffffff; --cert-border: #cbd5e1; --cert-inner: #e2e8f0; --cert-fg: #15103a; --cert-sub: #6b6580; --cert-accent: #334155; --cert-seal-bg: #eef2f7; --cert-seal-fg: #334155; }
.ccd-cert-dark { --cert-bg: linear-gradient(135deg, #15103b, #23164f); --cert-border: rgba(255, 255, 255, .18); --cert-inner: rgba(255, 255, 255, .12); --cert-fg: #ffffff; --cert-sub: rgba(255, 255, 255, .66); --cert-accent: #c9b6ff; --cert-seal-bg: rgba(255, 255, 255, .12); --cert-seal-fg: #c9b6ff; }
.ccd-cert-inner { position: absolute; inset: 9px; border: 1px solid var(--cert-inner); border-radius: 10px; pointer-events: none; }
.ccd-cert-body { position: relative; }
.ccd-cert p { margin: 0; }
.ccd-cert-logo { display: grid; place-items: center; width: 30px; height: 30px; margin: 0 auto 14px; border-radius: 9px; background: var(--cert-accent); color: var(--cert-seal-bg); }
.ccd-cert-logo svg { width: 16px; height: 16px; }
.ccd-cert-org { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--cert-accent); margin-bottom: 4px !important; }
.ccd-cert-title { font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--cert-fg); }
.ccd-cert-presented { font-size: 12.5px; color: var(--cert-sub); margin: 16px 0 6px !important; }
.ccd-cert-name { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--cert-fg); font-family: Georgia, serif; overflow-wrap: break-word; }
.ccd-cert-rule { display: block; width: 120px; height: 2px; background: var(--cert-accent); opacity: .5; margin: 12px auto; }
.ccd-cert-desc { font-size: 13px; color: var(--cert-sub); max-width: 460px; margin: 0 auto !important; line-height: 1.55; }
.ccd-cert-course { font-size: 16px; font-weight: 700; color: var(--cert-fg); margin-top: 8px !important; }
.ccd-cert-sigrow { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 28px; gap: 20px; }
.ccd-cert-sig { text-align: left; min-width: 120px; }
.ccd-cert-score { text-align: right; min-width: 120px; }
.ccd-cert-sig-name, .ccd-cert-score-value { font-size: 17px; font-weight: 700; color: var(--cert-fg); border-bottom: 1px solid var(--cert-inner); padding-bottom: 4px; margin-bottom: 5px !important; }
.ccd-cert-sig-name { font-family: Georgia, serif; }
.ccd-cert-score-value { font-variant-numeric: tabular-nums; }
.ccd-cert-sig-title { font-size: 10.5px; color: var(--cert-sub); font-weight: 600; }
.ccd-cert-seal { width: 56px; height: 56px; border-radius: 999px; background: var(--cert-seal-bg); color: var(--cert-seal-fg); display: inline-flex; align-items: center; justify-content: center; flex: none; border: 2px solid var(--cert-seal-fg); }
.ccd-cert-seal svg { width: 26px; height: 26px; }
.ccd-cert-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--cert-inner); font-size: 11px; color: var(--cert-sub); }
.ccd-cert-meta b { color: var(--cert-fg); font-weight: 700; }
.ccd-cert-meta .ccd-mono { font-size: inherit; }
.ccd-cert-verify { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px !important; font-size: 12px; font-weight: 700; color: var(--cert-accent); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.ccd-cert-verify svg { width: 13px; height: 13px; }
.ccd-cert-thumb { padding: 18px 14px 14px; box-shadow: none; max-width: none; }
.ccd-cert-thumb .ccd-cert-inner { inset: 6px; }
.ccd-cert-thumb .ccd-cert-logo { width: 22px; height: 22px; margin-bottom: 8px; border-radius: 7px; }
.ccd-cert-thumb .ccd-cert-logo svg { width: 12px; height: 12px; }
.ccd-cert-thumb .ccd-cert-org { font-size: 9.5px; }
.ccd-cert-thumb .ccd-cert-title { font-size: 14px; }
.ccd-cert-thumb .ccd-cert-presented { font-size: 10.5px; margin: 8px 0 2px !important; }
.ccd-cert-thumb .ccd-cert-name { font-size: 17px; }
.ccd-cert-thumb .ccd-cert-rule { width: 70px; margin: 7px auto; }
.ccd-cert-thumb .ccd-cert-course { font-size: 12.5px; margin-top: 0 !important; }
.ccd-cert-thumb .ccd-cert-meta { margin-top: 10px; padding-top: 8px; gap: 2px 12px; font-size: 10px; }
.ccd-tpl-dot-violet { background: #724df2; }
.ccd-tpl-dot-gold { background: #c9a227; }
.ccd-tpl-dot-slate { background: #64748b; }
.ccd-tpl-dot-dark { background: linear-gradient(135deg, #15103b, #23164f); }
.ccd-seg .ccd-tpl-dot { display: inline-block; width: 11px; height: 11px; margin: 0 6px 0 0; vertical-align: -1px; }

.ccd-wallet { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ccd-wcard { position: relative; display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: var(--cc-radius); border: 1px solid var(--cc-line); background: var(--cc-card); }
.ccd-wcard.is-new { border-color: var(--cc-primary); box-shadow: 0 0 0 3px rgba(109, 40, 217, .14); }
.ccd-wcard-body { display: grid; gap: 3px; justify-items: start; }
.ccd-wcard-body b { color: var(--cc-ink); }
.ccd-new { position: absolute; top: -9px; left: 14px; z-index: 3; padding: 2px 9px; border-radius: 999px; background: var(--cc-primary); color: #fff; font-size: 11.5px; font-weight: 700; }

.ccd-verify { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.ccd-verify .ccd-field input { width: 100%; font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: .02em; }
.ccd-vresult { display: grid; gap: 14px; padding: 18px; border-radius: var(--cc-radius); border: 1px solid var(--cc-line); background: var(--cc-card); }
.ccd-vresult-head { display: flex; gap: 14px; align-items: flex-start; }
.ccd-vresult-head h4 { font-size: 20px; outline: none; }
.ccd-vresult-head p { color: var(--cc-text); margin-top: 2px; }
.ccd-vresult-ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 8px; flex: none; }
.ccd-vresult-ico svg { width: 24px; height: 24px; }
.ccd-vresult-ok { border-color: #A7F3D0; } .ccd-vresult-ok .ccd-vresult-ico { background: var(--cc-ok-bg); color: var(--cc-ok); }
.ccd-vresult-warn { border-color: #FDE68A; } .ccd-vresult-warn .ccd-vresult-ico { background: var(--cc-warn-bg); color: var(--cc-warn); }
.ccd-vresult-bad { border-color: #FECACA; } .ccd-vresult-bad .ccd-vresult-ico { background: var(--cc-bad-bg); color: var(--cc-bad); }
.ccd-vresult-revoked { border-color: #FECDD3; } .ccd-vresult-revoked .ccd-vresult-ico { background: var(--cc-revoked-bg); color: var(--cc-revoked); }
.ccd-vresult-muted .ccd-vresult-ico { background: var(--cc-hl); color: var(--cc-muted); }

.ccd-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.ccd-dl dt { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cc-muted); }
.ccd-dl dd { margin: 0; color: var(--cc-ink); font-weight: 600; overflow-wrap: anywhere; }
.ccd-dl dd small { display: inline; }

.ccd [hidden] { display: none !important; }
.ccd-overlay { position: fixed; inset: 0; background: rgba(20, 24, 36, .45); z-index: 1200; }
.ccd-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); background: var(--cc-card); z-index: 1210; box-shadow: -20px 0 50px -30px rgba(15, 23, 42, .5); display: flex; flex-direction: column; animation: ccd-slide .22s ease; }
.ccd-drawer-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--cc-line); }
.ccd-drawer-head > div { flex: 1; min-width: 0; }
.ccd-drawer-body { padding: 16px 18px 24px; overflow: auto; display: grid; grid-auto-rows: max-content; gap: 14px; align-content: start; flex: 1; min-height: 0; }
.ccd-drawer-body > h4 { margin-top: 6px; }

.ccd-modal { position: fixed; inset: 0; z-index: 1220; display: grid; place-items: center; padding: 20px; pointer-events: none; }
.ccd-modal-box { pointer-events: auto; width: min(680px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: var(--cc-card); border-radius: 6px; box-shadow: 0 30px 80px -30px rgba(20, 24, 36, .55); animation: ccd-pop .2s ease; display: grid; }
.ccd-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--cc-line); }
.ccd-modal-body { padding: 16px 20px; display: grid; gap: 14px; }
.ccd-modal-foot { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 12px 20px 18px; border-top: 1px solid var(--cc-line); }
.ccd-status-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ccd-toast { position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 16px); z-index: 1230; max-width: min(520px, calc(100% - 32px)); padding: 11px 16px; border-radius: 8px; background: var(--cc-ink); color: #fff; font-size: 13.5px; font-weight: 600; box-shadow: 0 16px 40px -20px rgba(15, 23, 42, .7); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.ccd-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@keyframes ccd-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ccd-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

.ccp-hero { position: relative; max-width: 520px; margin: 0 auto; padding: 10px 0 40px; font-family: var(--cc-font); }
.ccp-hero-cert { max-width: none; box-shadow: 0 40px 80px -50px rgba(15, 23, 42, .55); }
.ccp-hero-verify { position: absolute; right: -10px; bottom: 6px; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid #A7F3D0; box-shadow: 0 20px 40px -24px rgba(15, 23, 42, .45); }
.ccp-hero-verify b { display: block; color: var(--cc-ok); font-size: 14px; }
.ccp-hero-verify small { color: var(--cc-muted); font-size: 12px; }
.ccp-hero-ok { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--cc-ok-bg); color: var(--cc-ok); }
.ccp-hero-ok svg { width: 18px; height: 18px; }

.ccp-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; font-family: var(--cc-font); }
.ccp-step { display: grid; justify-items: start; gap: 6px; width: 100%; height: 100%; padding: 18px 16px; border-radius: 20px; border: 1px solid var(--cc-line); background: #fff; text-align: left; font: inherit; color: var(--cc-text); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.ccp-step:hover { border-color: var(--cc-soft-2); box-shadow: 0 16px 36px -26px rgba(109, 40, 217, .8); transform: translateY(-2px); }
.ccp-step-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--cc-soft); color: var(--cc-primary); }
.ccp-step-ico svg { width: 19px; height: 19px; }
.ccp-step small { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--cc-muted); }
.ccp-step b { font-size: 15px; color: var(--cc-ink); line-height: 1.3; }
.ccp-step-text { font-size: 13.5px; line-height: 1.5; }

.ccp-feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.ccp-feature-grid.is-flip .ccp-feature-copy { order: 2; }
.ccp-feature-copy { display: grid; gap: 16px; justify-items: start; }
.ccp-feature-copy h2, .ccp-feature-copy p { margin: 0; }
.ccp-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ccp-points li { display: flex; gap: 10px; color: var(--cc-text); font-size: 15px; }
.ccp-points svg { width: 18px; height: 18px; color: var(--cc-primary); flex: none; margin-top: 2px; }
.ccp-feature-art { position: relative; padding: 28px 28px 72px; border-radius: 24px; background: linear-gradient(150deg, #F5F3FF, #F8FAFC 60%); border: 1px solid var(--cc-line); font-family: var(--cc-font); color: var(--cc-text); }
.ccp-feature-art p, .ccp-feature-art dl, .ccp-feature-art dd, .ccp-feature-art ul { margin: 0; padding: 0; }
.ccp-feature-art small { display: block; color: var(--cc-muted); font-size: 12px; }
.ccp-art-win { display: grid; gap: 14px; padding: 16px; border-radius: 18px; background: #fff; border: 1px solid var(--cc-line); box-shadow: 0 30px 60px -44px rgba(15, 23, 42, .55); }
.ccp-art-head { display: flex; gap: 10px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid #F1F5F9; }
.ccp-art-head b { display: block; color: var(--cc-ink); font-size: 14.5px; }
.ccp-art-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--cc-primary); color: #fff; flex: none; }
.ccp-art-ico svg { width: 18px; height: 18px; }
.ccp-art-chip { position: absolute; right: -10px; bottom: 14px; display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--cc-soft-2); box-shadow: 0 20px 40px -24px rgba(15, 23, 42, .45); }
.ccp-art-chip b { display: block; color: var(--cc-ink); font-size: 13.5px; }
.ccp-art-chip-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--cc-soft); color: var(--cc-primary); }
.ccp-art-chip-ico svg { width: 17px; height: 17px; }
.ccp-art-verifier .ccp-art-chip { border-color: #FECDD3; }
.ccp-art-verifier .ccp-art-chip b { color: var(--cc-revoked); }
.ccp-art-verifier .ccp-art-chip-ico { background: var(--cc-revoked-bg); color: var(--cc-revoked); }

.ccp-art-fan { position: relative; height: 210px; }
.ccp-art-fan .ccd-cert { position: absolute; top: 8px; width: 54%; padding: 16px 12px 14px; box-shadow: 0 20px 40px -30px rgba(15, 23, 42, .6); }
.ccp-art-fan .ccd-cert:nth-child(1) { left: 0; transform: rotate(-5deg); }
.ccp-art-fan .ccd-cert:nth-child(2) { right: 0; top: 4px; z-index: 1; transform: rotate(3deg); box-shadow: 0 26px 50px -28px rgba(15, 23, 42, .65); }
.ccp-art-fan .ccd-cert-org { font-size: 8.5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ccp-art-fan .ccd-cert-title { font-size: 12.5px; }
.ccp-art-fan .ccd-cert-name { font-size: 15px; }
.ccp-art-fan .ccd-cert-course { font-size: 11px; }
.ccp-art-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.ccp-art-swatches span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--cc-line); font-size: 12px; font-weight: 600; color: var(--cc-text); }
.ccp-art-swatches i { display: block; width: 11px; height: 11px; border-radius: 999px; }

.ccp-art-search { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 12px; border-radius: 12px; border: 1px solid var(--cc-soft-2); background: var(--cc-bg); }
.ccp-art-search .ccd-mono { flex: 1; color: var(--cc-ink); font-size: 13px; }
.ccp-art-search b { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 9px; background: var(--cc-primary); color: #fff; font-size: 12.5px; }
.ccp-art-search svg { width: 14px; height: 14px; }
.ccp-art-result { display: grid; gap: 12px; padding: 14px; border-radius: 14px; border: 1px solid #A7F3D0; }
.ccp-art-result-head { display: flex; gap: 10px; align-items: center; }
.ccp-art-result-head b { display: block; color: var(--cc-ok); font-size: 15px; }
.ccp-art-result dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.ccp-art-result dt { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--cc-muted); }
.ccp-art-result dd { color: var(--cc-ink); font-size: 13px; font-weight: 600; }

.ccp-art-wallet { list-style: none; display: grid; gap: 10px; }
.ccp-art-wallet li { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--cc-line); }
.ccp-art-wallet li > div:nth-child(2) { flex: 1; min-width: 0; }
.ccp-art-wallet b { display: block; color: var(--cc-ink); font-size: 14px; }
.ccp-art-wallet .ccd-mono { margin-top: 2px; font-size: 11px; }
.ccp-art-mini { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--cert-seal-bg); color: var(--cert-seal-fg); border: 2px solid var(--cert-border); flex: none; }
.ccp-art-mini svg { width: 20px; height: 20px; }
.ccp-art-wallet-side { display: grid; justify-items: end; gap: 4px; text-align: right; }
.ccp-art-pill { padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.ccp-art-pill.is-ok { background: var(--cc-ok-bg); color: var(--cc-ok); }
.ccp-art-pill.is-warn { background: var(--cc-warn-bg); color: var(--cc-warn); }

.ccp-art-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ccp-art-totals span { padding: 9px 10px; border-radius: 12px; border: 1px solid var(--cc-line); font-size: 11.5px; font-weight: 600; color: var(--cc-muted); }
.ccp-art-totals b { display: block; font-size: 20px; font-weight: 750; color: var(--cc-ink); }
.ccp-art-totals .is-ok b { color: var(--cc-ok); }
.ccp-art-totals .is-warn b { color: var(--cc-warn); }
.ccp-art-totals .is-bad b { color: var(--cc-bad); }
.ccp-art-totals .is-revoked b { color: var(--cc-revoked); }
.ccp-art-bars { list-style: none; display: grid; gap: 9px; }
.ccp-art-bars li { display: grid; grid-template-columns: 96px minmax(0, 1fr) 18px; gap: 10px; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--cc-text); }
.ccp-art-bars b { color: var(--cc-ink); text-align: right; }
.ccp-art-units { display: flex; gap: 3px; }
.ccp-art-units i { display: block; width: 18%; height: 12px; border-radius: 4px; }
.ccp-art-units .is-ok { background: #34D399; }
.ccp-art-units .is-warn { background: #FBBF24; }
.ccp-art-units .is-bad { background: #F87171; }
.ccp-art-units .is-revoked { background: #FB7185; }
.ccp-band-wrap { padding-top: 0; }

@media (max-width: 1280px) {
  .ccs-top-actions[data-ccd-controls] .ccs-btn span, .ccs-top .ccd-role span { display: none; }
  .ccs-top-actions[data-ccd-controls] .ccs-btn { padding: 8px 11px; }
  .ccs-top .ccd-role { padding: 6px 10px; }
}

@media (max-width: 1180px) {
  body.ccd-live .ccd-side { position: static; height: auto; overflow: visible; grid-row: auto; }
  body.ccd-live .ccd-body > .ccd-note { grid-column: 1 / -1; }
  .ccp-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ccd-grid-tpl { grid-template-columns: 1fr; }
  [data-act="swap-panels"] { display: none; }
  .ccd-tpl-body, .ccd-tpl-body.is-swapped { grid-template-columns: minmax(0, 1fr); }
  .ccd-tpl-form, .ccd-tpl-body.is-swapped .ccd-tpl-form { border: 0; border-bottom: 1px solid var(--cc-line); }
  .ccd-tpl-body.is-swapped .ccd-tpl-form { border-bottom: 0; border-top: 1px solid var(--cc-line); }
  .ccd-table:not(.ccd-table-plain):not(.ccd-table-compact) th:nth-child(4), .ccd-table:not(.ccd-table-plain) td[data-label="Department"] { display: none; }
  .ccd-table-wrap { border: 0; background: none; overflow: visible; }
  .ccd-table:not(.ccd-table-plain) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ccd-table:not(.ccd-table-plain), .ccd-table:not(.ccd-table-plain) tbody, .ccd-table:not(.ccd-table-plain) tr, .ccd-table:not(.ccd-table-plain) td, .ccd-table:not(.ccd-table-plain) tbody th { display: block; width: 100%; }
  .ccd-table:not(.ccd-table-plain) tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 12px; background: var(--cc-card); border: 1px solid var(--cc-line); border-radius: 8px; padding: 8px 12px; margin-bottom: 10px; }
  .ccd-table:not(.ccd-table-plain) td[data-label="Employee"] { grid-column: span 2; }
  .ccd-table:not(.ccd-table-plain) td, .ccd-table:not(.ccd-table-plain) tbody th { border: 0; padding: 6px 0; min-width: 0; overflow-wrap: anywhere; }
  .ccd-table:not(.ccd-table-plain) tbody th, .ccd-table:not(.ccd-table-plain) td[data-label="Action"], .ccd-table:not(.ccd-table-plain) td[colspan] { grid-column: 1 / -1; }
  .ccd-table:not(.ccd-table-plain) td[data-label="Action"] { border-top: 1px solid var(--cc-hl); margin-top: 4px; padding-top: 10px; }
  .ccd-table:not(.ccd-table-plain) td[data-label="Action"] > * { margin-right: 6px; }
  .ccd-table:not(.ccd-table-plain) td[data-label="Action"]::before { display: none; }
  .ccd-table.ccd-table-compact tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ccd-table-compact tbody th { border-bottom: 1px solid var(--cc-hl); padding-bottom: 8px; margin-bottom: 2px; }
  .ccd-table:not(.ccd-table-plain) td::before { content: attr(data-label); display: block; margin-bottom: 3px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--cc-muted); }
  .ccd-table:not(.ccd-table-plain) td[colspan]::before { display: none; }
  .ccd-table-plain { border: 1px solid var(--cc-line); border-radius: 8px; background: var(--cc-card); }
  .ccd-report-out .ccd-table-wrap { overflow-x: auto; }
  .ccd-table-wrap, .ccd-main > .ccd-table-wrap { margin: 0; padding: 0; }
}

@media (max-width: 1080px) {
  .ccs-grid, .ccs-grid-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccs-hero { padding: 36px 0 36px; }
  .ccs-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .ccs-hero-art { height: 320px; max-width: 560px; width: 100%; margin: 0 auto; }
  .ccs-top-links { display: none; }
  .ccs-top-actions { margin-left: auto; }
  .ccd-dash { grid-template-columns: minmax(0, 1fr); }
  .ccd-body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .ccd-main { padding: 24px; }
  body.ccd-live .ccd { --ccd-pad: 24px; }
  .ccd-topsearch { order: 3; flex: 1 1 100%; margin: 0; }
  .ccd-note { padding: 12px 24px; }
  .ccd-nav { border-right: 0; border-bottom: 1px solid var(--cc-line); padding: 8px 12px; display: flex; gap: 12px; align-items: center; overflow-x: auto; }
  .ccd-nav ul { display: flex; gap: 4px; }
  .ccd-nav-item { white-space: nowrap; }
  .ccd-nav-label, .ccd-collapse { display: none; }
  .ccd-side { border-right: 0; }
  .ccd.is-collapsed .ccd-body { grid-template-columns: minmax(0, 1fr); }
  .ccd-who { border-bottom: 0; padding: 0; margin: 0; flex: none; }
  .ccd-reports { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccd-course-body { grid-template-columns: minmax(0, 1fr); }
  .ccd-outline { grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); overflow-x: auto; padding-bottom: 4px; }
  .ccp-feature-grid { grid-template-columns: 1fr; gap: 32px; }
  .ccp-feature-grid.is-flip .ccp-feature-copy { order: 0; }
}

@media (max-width: 760px) {
  .ccd-reg-head { flex-wrap: wrap; }
  .ccd-reg-head .ccd-reg-topsearch { flex: 1 1 100%; width: auto; }
  .ccd-reg-head .ccd-btn { flex: 1; }
  .ccd-reg-search { flex: 1 1 100%; width: auto; }
  .ccd-reg-dd { flex: 1 1 140px; min-width: 0; }
  .ccd-reg-dd b { max-width: none; flex: 1; min-width: 0; }
  .ccd-reg-stat { padding: 14px; gap: 10px; }
  .ccd-reg-foot { justify-content: center; }
  .ccd-reg-table { min-width: 0; }
  .ccd-reg-headrow { display: none; }
  .ccd-reg-row:not(.ccd-reg-headrow) { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 16px; }
  .ccd-reg-row .ccd-reg-person, .ccd-reg-row .ccd-reg-course { grid-column: 1 / -1; }
  .ccd-reg-row .ccd-reg-course { padding-left: 45px; }
  .ccd-reg-row .ccd-reg-score { text-align: left; padding-left: 45px; }
  .ccd-reg-row .ccd-reg-date { justify-self: end; }
  .ccd-reg-row > [role="cell"]:nth-child(5) { padding-left: 45px; }
  .ccd-cert-modal .ccd-modal-foot { flex-wrap: nowrap; }
  body.ccd-live .ccd-modal { padding-bottom: 92px; }
  body.ccd-live .ccd-modal-box { max-height: calc(100vh - 112px); }
  .ccd-cert-modal .ccd-modal-foot .ccd-btn { flex: 1 1 0; width: auto; min-width: 0; padding: 0 12px; }
  .ccs-wrap { width: calc(100% - 32px); }
  .ccd-ro-grid { grid-template-columns: 1fr; }
  .ccd-form-foot .ccd-btn { flex: 1; }
  .ccd-grid-tpl .ccd-stage-card { position: static; }
  body.ccd-live .ccd-bar, body.ccd-live .ccd-time { position: static; box-shadow: none; }
  .ccd-stage { padding: 18px 12px; }
  .ccd-tpl-top, .ccd-tpl-form, .ccd-tpl-preview, .ccd-tpl-foot { padding-left: 16px; padding-right: 16px; }
  .ccd-tpl-foot .ccd-btn { flex: 1; }
  .ccs-grid, .ccs-grid-views { grid-template-columns: 1fr; }
  .ccs-grid-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ccs-grid-themes .ccs-shot { padding: 14px 10px; }
  .ccs-body-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; }
  .ccs-top-actions .ccs-btn span { display: none; }
  .ccs-top .ccd-role span { display: none; }
  .ccs-top .ccd-role { flex: none; min-height: 36px; padding: 6px 10px; }
  .ccs-page { --ccs-gap: 6px; }
  .ccs-top-row { height: auto; min-height: 64px; flex-wrap: wrap; gap: 10px 12px; padding: 10px 0; }
  .ccs-top-actions[data-ccd-controls] { width: 100%; margin-left: 0; }
  .ccs-top-actions[data-ccd-controls] .ccd-roles { margin-right: auto; }
  .ccs-top-actions .ccs-btn { padding: 8px 11px; }
  .ccs-brand small { display: none; }
  .ccs-hero { padding: 28px 0 32px; }
  .ccs-hero-ctas .ccs-btn { flex: 1 1 100%; }
  .ccs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; margin-top: 28px; }
  .ccs-hero-art { height: 250px; }
  .ccs-chip { left: 0; bottom: 0; }
  .ccs-section { padding-top: 28px; }
  .ccs-head p { text-align: left; }
  .ccs-section-alt { margin-top: 28px; padding: 28px 0; }
  .ccs-band { padding: 28px 22px; }
  .ccs-band-ctas .ccs-btn { flex: 1 1 100%; }
  .ccs-shot-cta { display: none; }
  .ccd { border-radius: 8px; margin-left: -4px; margin-right: -4px; }
  .ccd-bar { padding: 12px; }
  .ccd-brand { width: 100%; }
  .ccd-bar .ccd-roles { flex: 1; }
  .ccd-bar > .ccd-btn { flex: 1; }
  .ccd-role { flex: 1; justify-content: center; padding: 6px 8px; min-height: 44px; }
  .ccd-time { padding: 10px 12px; }
  .ccd-time-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .ccd-time .ccd-btn { min-height: 44px; }
  .ccd-main { padding: 16px 12px 20px; }
  body.ccd-live .ccd { --ccd-pad: 12px; }
  .ccd-head h3 { font-size: 24px; }
  .ccd-note { padding: 12px 16px; }
  .ccd-nav { flex-wrap: wrap; gap: 8px; }
  .ccd-who { flex: 1 1 100%; }
  .ccd-nav ul { max-width: 100%; overflow-x: auto; }
  .ccd-grid, .ccd-reports { grid-template-columns: 1fr; }
  .ccd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccd-dash-side { grid-template-columns: 1fr; }
  .ccd-stats { display: grid; gap: 10px; }
  .ccd-field, .ccd-field select, .ccd-field input, .ccd-search input { width: 100%; min-width: 0; }
  .ccd-head-side, .ccd-head-side .ccd-field, .ccd-head > .ccd-field, .ccd-filters > .ccd-search { flex: 1 1 100%; }
  .ccd-filters > .ccd-field { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .ccd-filters .ccd-field select { min-width: 0; }
  .ccd-filter-actions { margin-left: 0; width: 100%; }
  .ccd-filter-actions .ccd-btn, .ccd-verify .ccd-btn { flex: 1; }
  .ccd-btn, .ccd-icon-btn { min-height: 44px; }
  .ccd-icon-btn { width: 44px; }
  .ccd-check, .ccd-seg span { min-height: 44px; display: flex; align-items: center; }
  .ccd-table:not(.ccd-table-plain):not(.ccd-table-compact) tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccd-table:not(.ccd-table-plain) td[data-label="Employee"] { grid-column: 1 / -1; }
  .ccd-drawer { width: 100%; }
  .ccd-dl { grid-template-columns: 1fr 1fr; }
  .ccd-cert:not(.ccd-cert-thumb) { padding: 24px 16px 18px; }
  .ccd-cert:not(.ccd-cert-thumb) .ccd-cert-body { zoom: .8; }
  .ccd-cert-sigrow { gap: 10px; }
  .ccd-cert-sig, .ccd-cert-score { min-width: 0; }
  .ccd-modal { padding: 10px; align-items: end; }
  .ccd-modal-box { max-height: calc(100vh - 20px); }
  .ccd-modal-foot .ccd-btn { flex: 1 1 100%; }
  .ccd-lesson { padding: 16px; }
  .ccd-course-head .ccd-progress { flex: 1 1 100%; }
  .ccd-course-card-top { flex-wrap: wrap; }
  .ccd-course-card-top > div { flex-basis: calc(100% - 50px); }
  .ccd-course-card-top > .ccd-tag { margin-left: 50px; }
  .ccd-q { padding: 10px; }
  .ccd-lesson-foot .ccd-btn { flex: 1 1 100%; }
  .ccd-list li > .ccd-btn, .ccd-picks li > .ccd-btn { margin-left: 0; width: 100%; }
  .ccd-chip { flex: 1 1 calc(50% - 8px); }
  .ccp-hero-verify { position: relative; right: auto; bottom: auto; margin: -18px auto 0; width: max-content; max-width: 100%; }
  .ccp-flow { grid-template-columns: 1fr; }
  .ccp-feature-art { padding: 16px 16px 72px; }
  .ccp-art-win { padding: 12px; }
  .ccp-art-chip { right: 16px; bottom: 14px; }
  .ccp-art-fan { height: 215px; }
  .ccp-art-fan .ccd-cert { width: 57%; padding: 14px 8px 12px; }
  .ccp-art-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccp-art-bars li { grid-template-columns: 84px minmax(0, 1fr) 14px; }
  .ccp-art-wallet li { flex-wrap: wrap; }
  .ccp-art-wallet-side { width: 100%; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: space-between; align-items: center; }
}

@media (max-width: 360px) {
  .ccd-dept { grid-template-columns: minmax(0, 1fr) minmax(48px, 1fr) 40px; column-gap: 8px; }
  .ccd-btn { white-space: normal; text-align: center; }
  /* Status pills in registry rows wrap instead of clipping mid-word. */
  .ccd-reg-row .ccd-tag { white-space: normal; text-align: center; border-radius: 8px; max-width: 100%; justify-content: center; }
  #lead .hero-ctas .btn, .lp-band .btn { white-space: normal; max-width: 100%; text-align: center; padding-left: 16px; padding-right: 16px; }
  .ccd-bar .ccd-roles { width: 100%; }
  .ccd-role { gap: 4px; padding: 6px 4px; font-size: 13px; min-width: 0; }
  .ccd-role svg { width: 14px; height: 14px; }
  .ccd-table.ccd-table-compact tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccp-art-fan { height: 240px; }
}

@media (prefers-reduced-motion: reduce) {
  .ccd *, .ccd *::before, .ccd *::after, .ccp-flow * { animation: none !important; transition: none !important; }
}