/*
 * carplay.css — mock phone-projection mode.
 */
#carplay {
  --cp-bg: #000;
  --cp-side: rgba(28, 28, 30, .78);
  --cp-card: rgba(44, 44, 46, .82);
  --cp-row: rgba(255, 255, 255, .0);
  --cp-sep: rgba(255, 255, 255, .1);
  --cp-text: #fff;
  --cp-text-2: rgba(235, 235, 245, .6);
  --cp-blue: #0a84ff;
  --cp-green: #30d158;
  --cp-red: #ff453a;
  --cp-fill: rgba(120, 120, 128, .32);
  background: var(--cp-bg);
  color: var(--cp-text);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  display: flex;
  letter-spacing: -.01em;
}
#carplay.cp-light {
  --cp-bg: #f2f2f7;
  --cp-side: rgba(246, 246, 248, .85);
  --cp-card: rgba(255, 255, 255, .9);
  --cp-sep: rgba(60, 60, 67, .16);
  --cp-text: #000;
  --cp-text-2: rgba(60, 60, 67, .62);
  --cp-blue: #007aff;
  --cp-green: #34c759;
  --cp-red: #ff3b30;
  --cp-fill: rgba(120, 120, 128, .16);
}
.cp-wall { position: absolute; inset: 0; }
#carplay.cp-light .cp-wall { filter: brightness(1.9) saturate(.7); opacity: .55; }
#carplay .ic { stroke-width: 1.8; }

/* Sidebar */
.cp-side {
  position: relative; z-index: 3; width: 96px; flex: none; display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 12px; background: var(--cp-side); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-right: .5px solid var(--cp-sep);
}
.cp-time { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cp-sig { display: flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--cp-text-2); }
.cp-sig .ic { width: 15px; height: 15px; stroke-width: 2.4; }
.cp-recents { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }
.cp-rec { position: relative; border-radius: 14px; transition: transform .12s; }
.cp-rec:active { transform: scale(.92); }
.cp-rec.on::before { content: ''; position: absolute; left: -14px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--cp-text); }
.cp-homebtn { margin-top: auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--cp-fill); }
.cp-homebtn .ic { width: 30px; height: 30px; }
.cp-homebtn:active { transform: scale(.94); }

.cp-main { position: relative; z-index: 2; flex: 1; min-width: 0; overflow: hidden; animation: cpIn .25s ease; }
@keyframes cpIn { from { opacity: 0; transform: scale(.985); } }

/* Icons */
.cp-icon { width: 92px; height: 92px; border-radius: 22px; display: grid; place-items: center; color: #fff; overflow: hidden; box-shadow: 0 6px 16px rgba(0,0,0,.35), inset 0 .5px 0 rgba(255,255,255,.35); position: relative; }
.cp-icon .ic { width: 50px; height: 50px; stroke-width: 1.9; }
.cp-icon svg:not(.ic) { width: 100%; height: 100%; }
.cp-icon.xs { width: 58px; height: 58px; border-radius: 14px; }
.cp-icon.xs .ic { width: 31px; height: 31px; }
.cp-icon.sm { width: 64px; height: 64px; border-radius: 15px; }
.cp-icon.cal { background: #fff; color: #000; display: flex; flex-direction: column; justify-content: center; gap: 0; }
.cp-icon.cal small { color: #ff3b30; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.cp-icon.cal b { font-size: 46px; font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.cp-icon.cal.xs small { font-size: 9px; } .cp-icon.cal.xs b { font-size: 28px; }
.cp-icon.cal.sm small { font-size: 10px; } .cp-icon.cal.sm b { font-size: 32px; }
.cp-icon.maps.xs, .cp-icon.maps.sm { padding: 0; }

/* Home grid */
.cp-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); padding: 34px 40px 44px; row-gap: 10px; }
.cp-app { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: transform .12s; }
.cp-app:active { transform: scale(.92); }
.cp-app:active .cp-icon { filter: brightness(.75); }
.cp-app > span:last-child { font-size: 16px; font-weight: 500; color: var(--cp-text); text-shadow: 0 1px 3px rgba(0,0,0,.4); }
#carplay.cp-light .cp-app > span:last-child { text-shadow: none; }

/* Dashboard */
.cp-dash { position: absolute; inset: 0; display: flex; gap: 12px; padding: 12px; }
.cd-map { position: relative; flex: 1.55; border-radius: 18px; overflow: hidden; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.cd-maphost, .cpm-map { position: absolute; inset: 0; }
.cp-maphost { position: absolute; inset: 0; background: #1c1d20; }
.cd-man { position: absolute; left: 12px; top: 12px; right: 12px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: rgba(28, 28, 30, .9); color: #fff; backdrop-filter: blur(10px); }
.cd-col { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cd-card { flex: 1; border-radius: 18px; background: var(--cp-card); backdrop-filter: blur(20px); display: flex; align-items: center; gap: 16px; padding: 16px; cursor: pointer; min-height: 0; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.cd-np { flex: 1.4; }
.cd-art { width: 128px; height: 128px; font-size: 14px; border-radius: 10px; }
.cd-art.radio { display: grid; place-items: center; background: #333; } .cd-art.radio .ic { width: 50px; height: 50px; }
.cd-np-b { flex: 1; min-width: 0; }
.cd-np-b b, .cd-cal b { display: block; font-size: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-np-b small, .cd-cal small { display: block; font-size: 16px; color: var(--cp-text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-ctrl { display: flex; gap: 6px; margin-top: 14px; }
.cd-ctrl button { width: 64px; height: 54px; border-radius: 12px; display: grid; place-items: center; background: var(--cp-fill); }
.cd-ctrl .ic { width: 26px; height: 26px; }
.cd-ctrl button:active { filter: brightness(1.4); }
.cd-cal { min-width: 0; }
.cd-cal > div:last-child { min-width: 0; }

/* Maps */
.cpm { position: absolute; inset: 0; }
.cpm-man { position: absolute; left: 14px; top: 14px; min-width: 300px; max-width: 380px; display: flex; align-items: center; gap: 14px; padding: 12px 18px 12px 12px; border-radius: 16px; background: rgba(28, 28, 30, .94); color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.4); backdrop-filter: blur(10px); z-index: 2; }
.cpm-arrow { width: 66px; height: 66px; display: grid; place-items: center; flex: none; }
.cpm-arrow .ic { width: 58px; height: 58px; stroke-width: 3; }
.cpm-man b, .cd-man b { display: block; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.cpm-man span, .cd-man span { display: block; font-size: 19px; font-weight: 500; color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-man .cpm-arrow { width: 46px; height: 46px; } .cd-man .cpm-arrow .ic { width: 40px; height: 40px; }
.cd-man b { font-size: 24px; } .cd-man span { font-size: 16px; }
.cpm-btns { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: var(--cp-card); backdrop-filter: blur(16px); box-shadow: 0 8px 20px rgba(0,0,0,.3); z-index: 2; }
.cpm-btns button { width: 62px; height: 60px; display: grid; place-items: center; color: var(--cp-text); border-bottom: .5px solid var(--cp-sep); }
.cpm-btns button:last-child { border: 0; }
.cpm-btns .ic { width: 26px; height: 26px; }
.cpm-recenter { position: absolute; right: 14px; top: 210px; width: 62px; height: 60px; border-radius: 14px; display: grid; place-items: center; background: var(--cp-card); color: var(--cp-blue); z-index: 2; box-shadow: 0 8px 20px rgba(0,0,0,.3); }
.cpm-eta { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 18px; border-radius: 16px; background: var(--cp-card); backdrop-filter: blur(16px); box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 2; }
.cpe-v { padding-right: 20px; }
.cpe-v b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cpe-v small { font-size: 15px; color: var(--cp-text-2); }
.cpe-end { height: 52px; padding: 0 22px; border-radius: 12px; background: var(--cp-red); color: #fff; font-size: 18px; font-weight: 600; }
.cpm-eta.idle { padding: 8px; }
.cpe-where { height: 54px; padding: 0 24px 0 18px; display: flex; align-items: center; gap: 10px; border-radius: 12px; background: var(--cp-fill); font-size: 19px; font-weight: 500; color: var(--cp-text-2); }

/* Generic page */
.cp-page { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--cp-bg); }
#carplay:not(.cp-light) .cp-page { background: rgba(0,0,0,.92); }
.cp-hdr { height: 64px; flex: none; display: grid; grid-template-columns: 80px 1fr 80px; align-items: center; padding: 0 8px; border-bottom: .5px solid var(--cp-sep); }
.cp-hdr b { text-align: center; font-size: 20px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-back, .cp-hbtn { width: 60px; height: 52px; display: grid; place-items: center; color: var(--cp-blue); border-radius: 12px; }
.cp-back .ic { width: 30px; height: 30px; stroke-width: 2.4; }
.cp-hbtn { justify-self: end; } .cp-hbtn .ic { width: 26px; height: 26px; }
.cp-back:active, .cp-hbtn:active { background: var(--cp-fill); }
.cp-list { flex: 1; overflow-y: auto; scrollbar-width: none; padding: 0 0 8px; }
.cp-list::-webkit-scrollbar { display: none; }
.cp-row { width: 100%; min-height: 76px; display: flex; align-items: center; gap: 16px; padding: 8px 22px; text-align: left; position: relative; }
.cp-row::after { content: ''; position: absolute; left: 96px; right: 0; bottom: 0; height: .5px; background: var(--cp-sep); }
.cp-row:active:not(.static) { background: var(--cp-fill); }
.cp-row.on b { color: var(--cp-blue); }
.cp-row.static { cursor: default; }
.cp-rb { flex: 1; min-width: 0; }
.cp-rb b { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-rb b.missed { color: var(--cp-red); }
.cp-rb small { display: block; font-size: 16px; color: var(--cp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cp-rt { font-size: 16px; color: var(--cp-text-2); }
.cp-chev { color: var(--cp-text-2); width: 22px !important; height: 22px !important; }
.cp-ri { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; color: #fff; flex: none; }
.cp-ri.red { background: var(--cp-red); border-radius: 50%; }
.cp-ri .ic { width: 28px; height: 28px; }
.cp-thumb { width: 56px; height: 56px; border-radius: 8px; font-size: 7px; }
.cp-av { width: 54px; height: 54px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 21px; font-weight: 600; color: #fff; background: linear-gradient(180deg, hsl(var(--h) 18% 62%), hsl(var(--h) 14% 42%)); }
.cp-av .ic { width: 28px; height: 28px; }
.cp-av.xl { width: 104px; height: 104px; font-size: 40px; }
.cp-av.xxl { width: 132px; height: 132px; font-size: 52px; }
.cp-av.xxl .ic { width: 64px; height: 64px; }
.cp-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--cp-blue); flex: none; }
.cp-sec { padding: 14px 22px 4px; font-size: 15px; font-weight: 600; color: var(--cp-text-2); text-transform: uppercase; letter-spacing: .02em; }
.cp-tiles { display: flex; gap: 12px; padding: 14px 22px 4px; }
.cp-fav { flex: 1; height: 100px; border-radius: 16px; background: var(--cp-card); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 0 18px; text-align: left; }
.cp-fav .ic { width: 30px; height: 30px; padding: 6px; box-sizing: content-box; border-radius: 50%; background: var(--cp-blue); color: #fff; margin-bottom: 6px; }
.cp-fav.sug .ic { background: #ff9f0a; }
.cp-fav b { font-size: 19px; font-weight: 600; }
.cp-fav small { font-size: 14px; color: var(--cp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cp-fav:active { filter: brightness(1.3); }
.cp-pill { height: 44px; padding: 0 18px; display: flex; align-items: center; gap: 6px; border-radius: 22px; background: var(--cp-blue); color: #fff; font-size: 17px; font-weight: 600; }
.cp-pill .ic { width: 18px; height: 18px; }
.cp-row.cal::after { left: 22px; }
.cp-calbar { width: 6px; align-self: stretch; border-radius: 3px; background: var(--c); }

/* Now playing */
.cp-np { position: absolute; inset: 0; display: flex; align-items: center; gap: 36px; padding: 28px 44px; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.8)); }
#carplay.cp-light .cp-np { background: rgba(242,242,247,.9); }
.cp-np-art { width: 290px; height: 290px; border-radius: 14px; font-size: 26px; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.cp-np-b { flex: 1; min-width: 0; }
.cp-np-src { font-size: 15px; font-weight: 600; color: var(--cp-text-2); text-transform: uppercase; letter-spacing: .04em; }
.cp-np-t { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-np-a { font-size: 21px; color: var(--cp-text-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-prog { margin-top: 22px; }
.cp-bar { height: 8px; border-radius: 4px; background: var(--cp-fill); overflow: hidden; cursor: pointer; position: relative; }
.cp-bar::before { content: ''; position: absolute; inset: -14px 0; }
.cp-bar i { display: block; height: 100%; background: var(--cp-text); opacity: .85; border-radius: 4px; }
.cp-times { display: flex; justify-content: space-between; margin-top: 6px; font-size: 14px; color: var(--cp-text-2); font-variant-numeric: tabular-nums; }
.cp-ctrls { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; max-width: 520px; }
.cp-ctrls button { width: 82px; height: 72px; display: grid; place-items: center; border-radius: 16px; }
.cp-ctrls button:active { background: var(--cp-fill); }
.cp-ctrls .ic { width: 40px; height: 40px; }
.cp-ctrls .big .ic { width: 54px; height: 54px; }
.cp-ctrls .sm { color: var(--cp-text-2); } .cp-ctrls .sm .ic { width: 28px; height: 28px; }
.cp-ctrls .sm.on { color: var(--cp-blue); }
.cp-np-list { position: absolute; right: 18px; top: 18px; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; background: var(--cp-fill); }
.cp-np .eqbars i, .cp-row .eqbars i { background: var(--cp-blue); }

/* Phone */
.cp-page.with-tabs { padding-bottom: 0; }
.cp-tabbody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cp-tabs { height: 74px; flex: none; display: flex; border-top: .5px solid var(--cp-sep); background: var(--cp-side); }
.cp-tabs button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 13px; font-weight: 500; color: var(--cp-text-2); }
.cp-tabs button .ic { width: 28px; height: 28px; }
.cp-tabs button.on { color: var(--cp-blue); }
.cp-favs { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; padding: 0 30px; }
.cp-favc { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 18px; }
.cp-favc:active { background: var(--cp-fill); }
.cp-favc b { font-size: 19px; font-weight: 600; } .cp-favc small { font-size: 14px; color: var(--cp-text-2); margin-top: -4px; }
.cp-keypad { flex: 1; display: grid; grid-template-columns: 1fr 380px 120px; align-items: center; padding: 0 30px; gap: 20px; }
.cpk-num { font-size: 40px; font-weight: 300; text-align: center; font-variant-numeric: tabular-nums; }
.cpk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cpk-grid button { height: 64px; border-radius: 14px; background: var(--cp-fill); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cpk-grid b { font-size: 28px; font-weight: 400; line-height: 1; } .cpk-grid small { font-size: 10px; letter-spacing: .14em; color: var(--cp-text-2); margin-top: 1px; }
.cpk-grid button:active { filter: brightness(1.6); }
.cpk-acts { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.cpk-call { width: 84px; height: 84px; border-radius: 50%; background: var(--cp-green); display: grid; place-items: center; color: #fff; }
.cpk-call .ic { width: 38px; height: 38px; }
.cpk-del { width: 64px; height: 50px; display: grid; place-items: center; color: var(--cp-text-2); }

/* Message read-out */
.cp-read { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 80px; text-align: center; background: rgba(0,0,0,.85); color: #fff; }
.cp-read > b { font-size: 26px; font-weight: 600; margin-top: 10px; }
.cp-read p { font-size: 22px; line-height: 1.35; color: rgba(255,255,255,.85); margin: 10px 0 18px; max-width: 760px; }
.cp-read-orb { display: flex; gap: 5px; align-items: center; height: 30px; margin-top: 8px; }
.cp-read-orb i { width: 6px; border-radius: 3px; background: linear-gradient(180deg, #5ac8fa, #af52de); animation: eq 1s ease-in-out infinite; }
.cp-read-orb i:nth-child(2) { animation-delay: -.2s; } .cp-read-orb i:nth-child(3) { animation-delay: -.5s; } .cp-read-orb i:nth-child(4) { animation-delay: -.7s; } .cp-read-orb i:nth-child(5) { animation-delay: -.35s; }
.cp-read-acts { display: flex; gap: 14px; }
.cp-read-acts button { height: 58px; padding: 0 26px; border-radius: 29px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; background: rgba(255,255,255,.16); }
.cp-read-acts button.green { background: var(--cp-green); }
.cp-read-acts .ic { width: 22px; height: 22px; }

/* Settings */
.cp-seg { display: flex; padding: 3px; border-radius: 11px; background: var(--cp-fill); }
.cp-seg button { height: 44px; padding: 0 18px; border-radius: 9px; font-size: 16px; font-weight: 500; }
.cp-seg button.on { background: var(--cp-card); box-shadow: 0 2px 6px rgba(0,0,0,.25); }
#carplay:not(.cp-light) .cp-seg button.on { background: #636366; }
.cp-walls { display: flex; gap: 10px; }
.cp-walls button { width: 64px; height: 44px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--cp-sep); }
.cp-walls button.on { box-shadow: 0 0 0 3px var(--cp-blue); }
.cp-tgl { width: 64px; height: 38px; border-radius: 19px; background: var(--cp-fill); position: relative; transition: background .2s; }
.cp-tgl i { position: absolute; left: 3px; top: 3px; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .2s; }
.cp-tgl.on { background: var(--cp-green); } .cp-tgl.on i { transform: translateX(26px); }

/* Call */
.cp-call { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, #2c2c2e, #0a0a0b); color: #fff; }
.cp-call > b { font-size: 34px; font-weight: 600; margin-top: 14px; }
.cp-cs { font-size: 19px; color: rgba(255,255,255,.65); margin-top: 2px; font-variant-numeric: tabular-nums; }
.cp-cbtns { display: flex; gap: 30px; margin-top: 26px; }
.cp-cb { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 15px; color: rgba(255,255,255,.75); }
.cp-cb .ic { width: 80px; height: 80px; padding: 23px; box-sizing: border-box; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; }
.cp-cb.on .ic { background: #fff; color: #000; }
.cp-cb.red .ic { background: #ff3b30; } .cp-cb.green .ic { background: #34c759; }

/* Banners, voice, volume, connect */
.cp-banner { position: absolute; left: 50%; top: 10px; z-index: 10; transform: translate(-50%, -160%); visibility: hidden; transition: transform .35s cubic-bezier(.3,.8,.3,1.1), visibility 0s .35s; width: 540px; display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 18px; background: rgba(44,44,46,.96); color: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.5); cursor: pointer; }
.cp-banner.show { transform: translate(-50%, 0); visibility: visible; transition: transform .35s cubic-bezier(.3,.8,.3,1.1); }
.cp-banner div { min-width: 0; } .cp-banner b { display: block; font-size: 17px; } .cp-banner small { display: block; font-size: 15px; color: rgba(255,255,255,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-voice { position: absolute; inset: 0; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 50px; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.85)); color: #fff; animation: cpIn .2s ease; }
.cp-orb { position: relative; width: 120px; height: 120px; }
.cp-orb i { position: absolute; inset: 0; border-radius: 50%; mix-blend-mode: screen; filter: blur(4px); animation: orb 2.4s ease-in-out infinite; }
.cp-orb i:nth-child(1) { background: radial-gradient(circle at 35% 35%, #5ac8fa, transparent 65%); }
.cp-orb i:nth-child(2) { background: radial-gradient(circle at 65% 40%, #ff2d55, transparent 65%); animation-delay: -.8s; }
.cp-orb i:nth-child(3) { background: radial-gradient(circle at 50% 70%, #af52de, transparent 65%); animation-delay: -1.6s; }
@keyframes orb { 0%, 100% { transform: scale(.85) rotate(0deg); } 50% { transform: scale(1.1) rotate(180deg); } }
.cp-vtext { margin-top: 16px; font-size: 22px; font-weight: 500; }
.cp-vol { position: absolute; right: 18px; top: 50%; z-index: 11; width: 54px; height: 220px; margin-top: -110px; border-radius: 18px; background: rgba(44,44,46,.9); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 10px; opacity: 0; transform: translateX(20px); transition: .2s; pointer-events: none; color: #fff; }
.cp-vol.show { opacity: 1; transform: none; }
.cp-vol div { flex: 1; width: 12px; border-radius: 6px; background: rgba(255,255,255,.2); position: relative; overflow: hidden; }
.cp-vol i { position: absolute; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 6px; transition: height .1s; }
.cp-connect { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #000; color: #fff; transition: opacity .4s; }
.cp-connect.out { opacity: 0; }
.cc-phone { width: 96px; height: 96px; border-radius: 24px; display: grid; place-items: center; background: linear-gradient(180deg, #fff, #d1d1d6); color: #000; margin-bottom: 12px; animation: ring2 1.4s ease-in-out infinite; }
.cc-phone .ic { width: 54px; height: 54px; }
@keyframes ring2 { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.35); } 50% { box-shadow: 0 0 0 18px rgba(255,255,255,0); } }
.cp-connect b { font-size: 22px; font-weight: 600; }
.cp-connect span { font-size: 16px; color: rgba(255,255,255,.6); }