/* Animation du hero : « De l’idée à la production » (cycle de 20 s). Généré depuis la maquette. */
@keyframes cc1{0%,20%{opacity:0;transform:translateY(6px)}21.2%{opacity:1;transform:none}97%{opacity:1;transform:none}98.5%,100%{opacity:0;transform:none}}
@keyframes cc2{0%,22%{opacity:0;transform:translateY(6px)}23.2%{opacity:1;transform:none}97%{opacity:1;transform:none}98.5%,100%{opacity:0;transform:none}}
@keyframes cc3{0%,23.5%{opacity:0;transform:translateY(6px)}24.7%{opacity:1;transform:none}97%{opacity:1;transform:none}98.5%,100%{opacity:0;transform:none}}
@keyframes cc4{0%,24.7%{opacity:0;transform:translateY(6px)}25.9%{opacity:1;transform:none}97%{opacity:1;transform:none}98.5%,100%{opacity:0;transform:none}}
@keyframes cc5{0%,25.9%{opacity:0;transform:translateY(6px)}27.1%{opacity:1;transform:none}97%{opacity:1;transform:none}98.5%,100%{opacity:0;transform:none}}
@keyframes cc6{0%,28%{opacity:0;transform:translateY(6px)}29.2%{opacity:1;transform:none}97%{opacity:1;transform:none}98.5%,100%{opacity:0;transform:none}}
@keyframes cc7{0%,46%{opacity:0;}47.2%{opacity:1;}97%{opacity:1;}98.5%,100%{opacity:0;}}
@keyframes cc8{0%,47.5%{opacity:0;}48.7%{opacity:1;}97%{opacity:1;}98.5%,100%{opacity:0;}}
@keyframes cc9{0%,49%{opacity:0;}50.2%{opacity:1;}97%{opacity:1;}98.5%,100%{opacity:0;}}
@keyframes cc10{0%,50%{opacity:0;}51.2%{opacity:1;}97%{opacity:1;}98.5%,100%{opacity:0;}}
@keyframes cc11{0%,51%{opacity:0;}52.2%{opacity:1;}97%{opacity:1;}98.5%,100%{opacity:0;}}
@keyframes cc12{0%,52.5%{opacity:0;}53.7%{opacity:1;}97%{opacity:1;}98.5%,100%{opacity:0;}}
@keyframes cc13{0%,77.5%{height:4px}81.5%{height:40%}100%{height:40%}}
@keyframes cc14{0%,78.1%{height:4px}82.1%{height:62%}100%{height:62%}}
@keyframes cc15{0%,78.7%{height:4px}82.7%{height:52%}100%{height:52%}}
@keyframes cc16{0%,79.3%{height:4px}83.3%{height:78%}100%{height:78%}}
@keyframes cc17{0%,79.9%{height:4px}83.9%{height:68%}100%{height:68%}}
@keyframes cc18{0%,80.5%{height:4px}84.5%{height:90%}100%{height:90%}}
@keyframes cc19{0%,81.1%{height:4px}85.1%{height:84%}100%{height:84%}}
@keyframes cc20{0%,71%{opacity:0;}72.2%{opacity:1;}97%{opacity:1;}98.5%,100%{opacity:0;}}
@keyframes cc21{0%,72.5%{opacity:0;}73.7%{opacity:1;}97%{opacity:1;}98.5%,100%{opacity:0;}}
@keyframes cc22{0%,77.5%{opacity:0;transform:translateY(6px)}78.7%{opacity:1;transform:none}97%{opacity:1;transform:none}98.5%,100%{opacity:0;transform:none}}
@keyframes cc23{0%,74%{opacity:0;}75.2%{opacity:1;}97%{opacity:1;}98.5%,100%{opacity:0;}}
@keyframes cc24{0%,78.3%{opacity:0;transform:translateY(6px)}79.5%{opacity:1;transform:none}97%{opacity:1;transform:none}98.5%,100%{opacity:0;transform:none}}
@keyframes cc25{0%,75%{opacity:0;}76.2%{opacity:1;}97%{opacity:1;}98.5%,100%{opacity:0;}}
@keyframes cc26{0%,79.1%{opacity:0;transform:translateY(6px)}80.3%{opacity:1;transform:none}97%{opacity:1;transform:none}98.5%,100%{opacity:0;transform:none}}
@keyframes cc27{0%,76%{opacity:0;}77.2%{opacity:1;}97%{opacity:1;}98.5%,100%{opacity:0;}}
@keyframes cc28{0%,76%{opacity:0;}77.2%{opacity:1;}97%{opacity:1;}98.5%,100%{opacity:0;}}
@keyframes cc29{0%,83.5%{opacity:0;transform:scale(.6)}85.5%{opacity:1;transform:scale(1.06)}87.0%{opacity:1;transform:none}100%{opacity:1;transform:none}}
@keyframes cc30{0%{opacity:0;}0.5%{opacity:1;}18%{opacity:1;}19.5%,100%{opacity:0;}}
@keyframes cc31{0%{stroke-dashoffset:140}6%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
@keyframes cc32{0%,4%{opacity:0;transform:rotate(-5deg) scale(.7)}5.2%{opacity:1;transform:rotate(-5deg)}97%{opacity:1;transform:rotate(-5deg)}98.5%,100%{opacity:0;transform:rotate(-5deg)}}
@keyframes cc33{0%,6.5%{opacity:0;transform:rotate(4deg) scale(.7)}7.7%{opacity:1;transform:rotate(4deg)}97%{opacity:1;transform:rotate(4deg)}98.5%,100%{opacity:0;transform:rotate(4deg)}}
@keyframes cc34{0%,9%{opacity:0;transform:rotate(3deg) scale(.7)}10.2%{opacity:1;transform:rotate(3deg)}97%{opacity:1;transform:rotate(3deg)}98.5%,100%{opacity:0;transform:rotate(3deg)}}
@keyframes cc35{0%,11.5%{opacity:0;transform:rotate(-4deg) scale(.7)}12.7%{opacity:1;transform:rotate(-4deg)}97%{opacity:1;transform:rotate(-4deg)}98.5%,100%{opacity:0;transform:rotate(-4deg)}}
@keyframes cc36{0%,46%{opacity:0;}46.8%{opacity:1;}68.5%{opacity:1;}70.0%,100%{opacity:0;}}
@keyframes cc37{0%,71%{opacity:0;}71.8%{opacity:1;}97%{opacity:1;}98.5%,100%{opacity:0;}}
@keyframes cc38{0%{opacity:0;}0.8%{opacity:1;}18%{opacity:1;}19.5%,100%{opacity:0;}}
@keyframes cc39{0%,20%{opacity:0;}20.8%{opacity:1;}43.5%{opacity:1;}45.0%,100%{opacity:0;}}
@keyframes cc40{0%,46%{opacity:0;}46.8%{opacity:1;}68.5%{opacity:1;}70.0%,100%{opacity:0;}}
@keyframes cc41{0%,71%{opacity:0;}71.8%{opacity:1;}97%{opacity:1;}98.5%,100%{opacity:0;}}
@keyframes cc42{0%{opacity:0;}0.8%{opacity:1;}18.8%{opacity:1;}20.3%,100%{opacity:0;}}
@keyframes cc43{0%,20%{opacity:0;}20.8%{opacity:1;}44.3%{opacity:1;}45.8%,100%{opacity:0;}}
@keyframes cc44{0%,46%{opacity:0;}46.8%{opacity:1;}69.3%{opacity:1;}70.8%,100%{opacity:0;}}
@keyframes cc45{0%,71%{opacity:0;}71.8%{opacity:1;}97.8%{opacity:1;}99.3%,100%{opacity:0;}}
@keyframes cc46{0%,20%{opacity:0;}20.8%{opacity:1;}43.5%{opacity:1;}45.0%,100%{opacity:0;}}
@keyframes cc47{0%,46%{opacity:0;}46.8%{opacity:1;}68.5%{opacity:1;}70.0%,100%{opacity:0;}}
@keyframes cc48{0%,71%{opacity:0;}71.8%{opacity:1;}97%{opacity:1;}98.5%,100%{opacity:0;}}

/* ---------- Frise du processus (sous la fenêtre) ----------
   Cycle de 20 s, calé sur la fenêtre : Idée 0–20 %, Maquette 20–45 %, Prototype 46–70 %, Production 71–98 %. */
.cc-steps {
    position: relative; width: 560px; margin: 4px 0 0; padding: 0; list-style: none;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cc-steps__track {
    position: absolute; top: 18.5px; left: 12.5%; right: 12.5%; height: 3px; border-radius: 3px;
    background: color-mix(in srgb, var(--mut) 22%, transparent);
}
.cc-steps__fill {
    position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px;
    background: linear-gradient(90deg, #56378A, #A9398B);
    animation: cs-fill 20s ease-in-out infinite both;
}
.cc-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cc-step__dot {
    position: relative; width: 40px; height: 40px; border-radius: 50%;
    background: var(--card); border: 2px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-title); font-size: 16px; font-weight: 700; color: var(--mut);
}
.cc-step__active, .cc-step__done {
    position: absolute; inset: -2px; border-radius: 50%; color: #fff;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; animation-duration: 20s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: both;
}
.cc-step__active { background: linear-gradient(135deg, #56378A, #A9398B); box-shadow: 0 8px 20px -6px rgba(169, 57, 139, .6); }
.cc-step__active::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #A9398B;
    animation: cs-pulse 1.8s ease-out infinite;
}
.cc-step__done { background: #3D0E4B; }
[data-theme="dark"] .cc-step__done { background: #56378A; }
.cc-step__label {
    margin-top: 12px; font-size: 14px; line-height: 18px; font-weight: 700; color: var(--mut);
    animation-duration: 20s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: both;
}
.cc-step__sub { margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--mut); opacity: .8; }

@keyframes cs-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes cs-fill { 0%, 19% { width: 0; } 21.5%, 45% { width: 33.333%; } 47.5%, 70% { width: 66.667%; } 72.5%, 97% { width: 100%; } 99%, 100% { width: 0; } }

@keyframes cs-act-1 { 0% { opacity: 0; } 1% { opacity: 1; } 19.5% { opacity: 1; } 20.5%, 100% { opacity: 0; } }
@keyframes cs-act-2 { 0%, 20.5% { opacity: 0; } 21.5% { opacity: 1; } 45% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes cs-act-3 { 0%, 46% { opacity: 0; } 47% { opacity: 1; } 70% { opacity: 1; } 71%, 100% { opacity: 0; } }
@keyframes cs-act-4 { 0%, 71% { opacity: 0; } 72% { opacity: 1; } 97.5% { opacity: 1; } 99%, 100% { opacity: 0; } }

@keyframes cs-done-1 { 0%, 20.5% { opacity: 0; transform: scale(.6); } 21.5% { opacity: 1; transform: none; } 97.5% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cs-done-2 { 0%, 46% { opacity: 0; transform: scale(.6); } 47% { opacity: 1; transform: none; } 97.5% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes cs-done-3 { 0%, 71% { opacity: 0; transform: scale(.6); } 72% { opacity: 1; transform: none; } 97.5% { opacity: 1; } 99%, 100% { opacity: 0; } }

@keyframes cs-label-1 { 0%, 19.5% { color: var(--ink); } 20.5%, 97.5% { color: var(--body); } 99%, 100% { color: var(--mut); } }
@keyframes cs-label-2 { 0%, 20.5% { color: var(--mut); } 21.5%, 45% { color: var(--ink); } 46%, 97.5% { color: var(--body); } 99%, 100% { color: var(--mut); } }
@keyframes cs-label-3 { 0%, 46% { color: var(--mut); } 47%, 70% { color: var(--ink); } 71%, 97.5% { color: var(--body); } 99%, 100% { color: var(--mut); } }
@keyframes cs-label-4 { 0%, 71% { color: var(--mut); } 72%, 97.5% { color: var(--eyebrow); } 99%, 100% { color: var(--mut); } }

/* ---------- Barre de navigateur façon Chrome (onglet + barre d'adresse) ---------- */
.cc-chrome { flex-shrink: 0; background: #DFE3EA; font-family: var(--font-body); }
.cc-chrome__tabs { height: 30px; display: flex; align-items: flex-end; gap: 6px; padding: 0 8px 0 10px; }
.cc-chrome__tab {
    position: relative; width: 200px; height: 25px; display: flex; align-items: center; gap: 7px; padding: 0 8px 0 10px;
    background: #fff; border-radius: 9px 9px 0 0; color: #3C4043;
}
.cc-chrome__tab::before, .cc-chrome__tab::after { content: ""; position: absolute; bottom: 0; width: 9px; height: 9px; }
.cc-chrome__tab::before { left: -9px; background: radial-gradient(circle at 0 0, transparent 9px, #fff 9.5px); }
.cc-chrome__tab::after { right: -9px; background: radial-gradient(circle at 100% 0, transparent 9px, #fff 9.5px); }
.cc-chrome__fav { width: 14px; height: 14px; flex-shrink: 0; display: flex; }
.cc-chrome__fav img { width: 14px; height: 14px; }
.cc-chrome__title { position: relative; flex: 1; height: 16px; font-size: 11.5px; font-weight: 600; overflow: hidden; }
.cc-chrome__title > span { left: 0 !important; right: auto !important; top: 1px !important; }
.cc-chrome__close { display: flex; color: #5F6368; }
.cc-chrome__new { align-self: center; display: flex; color: #5F6368; margin-top: 4px; }
.cc-chrome__win { align-self: center; margin-left: auto; display: flex; gap: 14px; color: #5F6368; margin-top: 2px; }
.cc-chrome__bar { height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: #fff; border-bottom: 1px solid #ECE8F2; }
.cc-chrome__nav { display: flex; gap: 10px; color: #5F6368; }
.cc-chrome__omni {
    position: relative; flex: 1; height: 24px; border-radius: 999px; background: #F1F3F4;
    font-size: 12px; font-weight: 500; color: #5E5870;
}
.cc-chrome__omni > span { justify-content: flex-start !important; padding-left: 12px; box-sizing: border-box; }
/* Adresse affichée : Idée = aucune, Maquette = localhost, Prototype = recette chez Connecti'Cloud, Production = domaine du client. */
@keyframes cc-omni0 { 0%, 19% { opacity: 1; } 20.5%, 98.5% { opacity: 0; } 100% { opacity: 1; } }
@keyframes cc-url1 { 0%, 20% { opacity: 0; } 20.8%, 44.5% { opacity: 1; } 45.5%, 100% { opacity: 0; } }
.cc-chrome__menu { display: flex; flex-direction: column; gap: 2px; padding: 0 3px; }
.cc-chrome__menu i { width: 3px; height: 3px; border-radius: 50%; background: #5F6368; }

/* Mobile : l'animation est réduite (zoom) → on grossit les libellés et on masque les sous-titres. */
@media (max-width: 760px) {
    .cc-steps__track { top: 24.5px; }
    .cc-step__label { line-height: 24px; margin-top: 14px; }
    .cc-step__dot { width: 52px; height: 52px; font-size: 22px; }
    .cc-step__done svg { width: 22px; height: 22px; }
    .cc-step__label { font-size: 20px; }
    .cc-step__sub { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cc-anim, .cc-anim * { animation-delay: -19s !important; animation-play-state: paused !important; }
    .cc-step__active::after { display: none; }
}

/* >>> Halo maquette et prototype (généré) */
/* Maquette : fil de fer dessiné à la main */
.mq, .pt { position: absolute; left: 12px; top: 6px; width: 536px; height: 368px; }
.mq-box { position: absolute; box-sizing: border-box; border: 2px dashed #CFC6DC; border-radius: 10px; background: #FDFCFE; font-family: 'Caveat', cursive; font-weight: 600; color: #8B82A0; }
.mq-side { left: 0; top: 0; width: 120px; height: 368px; padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 18px; line-height: 1.05; }
.mq-logo { font-size: 20px; margin-bottom: 4px; }
.mq-avatar { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 17px; }
.mq-avatar span { width: 20px; height: 20px; border-radius: 50%; border: 2px dashed #CFC6DC; }
.mq-head { left: 144px; top: 6px; width: 392px; height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 10px; font-size: 20px; }
.mq-head > span:first-child { flex: 1; }
.mq-search { font-size: 16px; padding: 0 10px; height: 22px; line-height: 20px; border: 2px dashed #CFC6DC; border-radius: 999px; }
.mq-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px dashed #CFC6DC; }
.mq-kpi { top: 56px; width: 120px; height: 72px; padding: 6px 10px; font-size: 18px; line-height: 1.05; }
.mq-val { font-size: 22px; line-height: .9; }
.mq-chart { left: 144px; top: 144px; width: 392px; height: 216px; padding: 8px 12px; }
.mq-chart__head { display: flex; align-items: center; gap: 12px; }
.mq-chart__title { font-size: 20px; }
.mq-select { font-size: 16px; padding: 0 10px; height: 22px; line-height: 19px; border: 2px dashed #CFC6DC; border-radius: 6px; }
.mq-chart__svg { display: block; margin-top: 4px; }
.mq-note { position: absolute; left: 262px; top: 112px; display: flex; align-items: flex-start; gap: 2px; font-family: 'Caveat', cursive; font-size: 21px; font-weight: 600; color: #A9398B; white-space: nowrap; }
.mq-note svg { margin-top: -10px; }
.mq-note--2 { left: 420px; top: 150px; padding: 6px 10px; background: #F7E6F2; border-radius: 6px; box-shadow: 0 8px 18px -8px rgba(61, 14, 75, .35); color: #3D0E4B; font-size: 19px; }

/* Prototype : fonctionnel avec des données, style brut (pas encore habillé) */
.pt-box { position: absolute; box-sizing: border-box; background: #F1F1F1; border: 1px solid #DDDDDD; border-radius: 3px; font-family: Arial, Helvetica, sans-serif; color: #666; font-size: 11px; }
.pt-side { left: 0; top: 0; width: 120px; height: 368px; padding: 12px 10px; display: flex; flex-direction: column; gap: 9px; font-size: 12px; }
.pt-app { font-weight: 700; color: #444; margin-bottom: 2px; }
.pt-sel { margin: 0 -6px; padding: 3px 6px; background: #DADADA; color: #222; }
.pt-user { margin-top: auto; font-size: 10px; color: #888; text-decoration: underline; }
.pt-head { left: 144px; top: 6px; width: 392px; height: 34px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: #444; }
.pt-input { width: 130px; height: 20px; line-height: 18px; padding: 0 6px; box-sizing: border-box; background: #fff; border: 1px solid #BBB; font-size: 10.5px; color: #999; }
.pt-kpi { top: 56px; width: 120px; height: 72px; padding: 7px 10px; }
.pt-val { margin-top: 2px; font-size: 19px; font-weight: 700; color: #333; }
.pt-sub { margin-top: 1px; font-size: 9px; color: #999; }
.pt-chart { left: 144px; top: 144px; width: 392px; height: 216px; padding: 10px 16px 8px; display: flex; flex-direction: column; }
.pt-chart__head { display: flex; justify-content: space-between; align-items: center; }
.pt-tools { display: flex; gap: 6px; }
.pt-btn { padding: 1px 8px; background: linear-gradient(#FDFDFD, #DCDCDC); border: 1px solid #8E8E8E; font-size: 10px; color: #222; }
.pt-select { padding: 1px 6px; background: #fff; border: 1px solid #BBB; font-size: 10px; color: #555; }
.pt-bars { flex-grow: 1; display: flex; align-items: stretch; justify-content: space-between; gap: 10px; margin-top: 10px; border-bottom: 1px solid #BBB; }
.pt-barcol { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.pt-bar { width: 100%; max-width: 30px; background: #A8A8A8; }
.pt-barcol:nth-child(even) .pt-bar { background: #C4C4C4; }
.pt-barcol span { position: absolute; bottom: -15px; font-size: 9px; color: #888; }
.pt-bars { margin-bottom: 14px; }

@keyframes mq1 { 0%, 20.5% { opacity: 0; transform: translateY(6px); } 21.7%, 100% { opacity: 1; transform: none; } }
@keyframes mq2 { 0%, 21.5% { opacity: 0; transform: translateY(6px); } 22.7%, 100% { opacity: 1; transform: none; } }
@keyframes mq3 { 0%, 22.5% { opacity: 0; transform: translateY(6px); } 23.7%, 100% { opacity: 1; transform: none; } }
@keyframes mq4 { 0%, 23.3% { opacity: 0; transform: translateY(6px); } 24.5%, 100% { opacity: 1; transform: none; } }
@keyframes mq5 { 0%, 24.1% { opacity: 0; transform: translateY(6px); } 25.3%, 100% { opacity: 1; transform: none; } }
@keyframes mq6 { 0%, 25% { opacity: 0; transform: translateY(6px); } 26.2%, 100% { opacity: 1; transform: none; } }
@keyframes mq7 { 0%, 26% { stroke-dashoffset: 400; } 30%, 100% { stroke-dashoffset: 0; } }
@keyframes mq8 { 0%, 30.5% { opacity: 0; transform: translateY(6px) rotate(-4deg); } 31.7%, 100% { opacity: 1; transform: rotate(-4deg); } }
@keyframes mq9 { 0%, 32.5% { opacity: 0; transform: translateY(6px) rotate(3deg); } 33.7%, 100% { opacity: 1; transform: rotate(3deg); } }
@keyframes pt-b1 { 0%, 53.5% { height: 0; } 55.5%, 100% { height: 46%; } }
@keyframes pt-b2 { 0%, 54.1% { height: 0; } 56.1%, 100% { height: 63%; } }
@keyframes pt-b3 { 0%, 54.7% { height: 0; } 56.7%, 100% { height: 55%; } }
@keyframes pt-b4 { 0%, 55.3% { height: 0; } 57.3%, 100% { height: 78%; } }
@keyframes pt-b5 { 0%, 55.9% { height: 0; } 57.9%, 100% { height: 70%; } }
@keyframes pt-b6 { 0%, 56.5% { height: 0; } 58.5%, 100% { height: 88%; } }
@keyframes pt-b7 { 0%, 57.1% { height: 0; } 59.1%, 100% { height: 81%; } }
@keyframes pt1 { 0%, 46.5% { opacity: 0; transform: translateY(0px); } 47.7%, 100% { opacity: 1; transform: none; } }
@keyframes pt2 { 0%, 47.5% { opacity: 0; transform: translateY(0px); } 48.7%, 100% { opacity: 1; transform: none; } }
@keyframes pt3 { 0%, 49% { opacity: 0; transform: translateY(0px); } 50.2%, 100% { opacity: 1; transform: none; } }
@keyframes pt4 { 0%, 50% { opacity: 0; transform: translateY(0px); } 51.2%, 100% { opacity: 1; transform: none; } }
@keyframes pt5 { 0%, 51% { opacity: 0; transform: translateY(0px); } 52.2%, 100% { opacity: 1; transform: none; } }
@keyframes pt6 { 0%, 52.5% { opacity: 0; transform: translateY(0px); } 53.7%, 100% { opacity: 1; transform: none; } }
/* <<< Halo maquette et prototype */

/* >>> Halo production (généré) */
/* Version de production : recherche, sélecteur d'atelier et export PDF (cohérents avec la maquette et le prototype) */
.pr-search {
    margin-left: auto; margin-right: 10px; width: 150px; height: 26px; box-sizing: border-box; padding: 0 10px;
    display: flex; align-items: center; gap: 6px; border-radius: 999px; background: #F7F5FA; border: 1px solid #E6E1EE;
    font-size: 10.5px; color: #8B82A0;
}
.pr-chart-head { display: flex; align-items: center; justify-content: space-between; }
.pr-tools { display: flex; gap: 6px; }
.pr-select {
    display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 7px;
    background: #fff; border: 1px solid #E6E1EE; font-size: 10px; font-weight: 600; color: #1F1A2B;
}
.pr-pdf {
    display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; border-radius: 7px;
    background: linear-gradient(90deg, #56378A, #A9398B); font-size: 10px; font-weight: 700; color: #fff;
}
.pr-badge { box-shadow: 0 12px 24px -10px rgba(28, 19, 37, .6); }
/* <<< Halo production */