/* ChatBase profile style: accent colour classes (cba_N), name effects (cbx_*) and the accent look of a profile (cbs_acc). */
.cba_0{--cb-acc:#FFC93C;--cb-on:#1D2B53}
.cba_1{--cb-acc:#FF8A3D;--cb-on:#1D2B53}
.cba_2{--cb-acc:#FF5E5B;--cb-on:#1D2B53}
.cba_3{--cb-acc:#E5383B;--cb-on:#fff}
.cba_4{--cb-acc:#FF6FB5;--cb-on:#1D2B53}
.cba_5{--cb-acc:#F72585;--cb-on:#fff}
.cba_6{--cb-acc:#C8B6FF;--cb-on:#1D2B53}
.cba_7{--cb-acc:#A06CFF;--cb-on:#fff}
.cba_8{--cb-acc:#7B2CBF;--cb-on:#fff}
.cba_9{--cb-acc:#5C6BFF;--cb-on:#fff}
.cba_10{--cb-acc:#2D7DFF;--cb-on:#fff}
.cba_11{--cb-acc:#38BDF8;--cb-on:#1D2B53}
.cba_12{--cb-acc:#22D3EE;--cb-on:#1D2B53}
.cba_13{--cb-acc:#14B8A6;--cb-on:#1D2B53}
.cba_14{--cb-acc:#3DDC97;--cb-on:#1D2B53}
.cba_15{--cb-acc:#4ADE80;--cb-on:#1D2B53}
.cba_16{--cb-acc:#A3E635;--cb-on:#1D2B53}
.cba_17{--cb-acc:#FFE14D;--cb-on:#1D2B53}
.cba_18{--cb-acc:#FFB4A2;--cb-on:#1D2B53}
.cba_19{--cb-acc:#E8A0A0;--cb-on:#1D2B53}
.cba_20{--cb-acc:#C08457;--cb-on:#1D2B53}
.cba_21{--cb-acc:#B8C0CC;--cb-on:#1D2B53}
.cba_22{--cb-acc:#F4F6FA;--cb-on:#1D2B53}
.cba_23{--cb-acc:#BDE6FF;--cb-on:#1D2B53}
.cba_24{--cb-acc:#7FFFD4;--cb-on:#1D2B53}

/* second colour (used by Color flow) */
.cbb_1{--cb-acc2:#FF8A3D}
.cbb_2{--cb-acc2:#FF5E5B}
.cbb_3{--cb-acc2:#E5383B}
.cbb_4{--cb-acc2:#FF6FB5}
.cbb_5{--cb-acc2:#F72585}
.cbb_6{--cb-acc2:#C8B6FF}
.cbb_7{--cb-acc2:#A06CFF}
.cbb_8{--cb-acc2:#7B2CBF}
.cbb_9{--cb-acc2:#5C6BFF}
.cbb_10{--cb-acc2:#2D7DFF}
.cbb_11{--cb-acc2:#38BDF8}
.cbb_12{--cb-acc2:#22D3EE}
.cbb_13{--cb-acc2:#14B8A6}
.cbb_14{--cb-acc2:#3DDC97}
.cbb_15{--cb-acc2:#4ADE80}
.cbb_16{--cb-acc2:#A3E635}
.cbb_17{--cb-acc2:#FFE14D}
.cbb_18{--cb-acc2:#FFB4A2}
.cbb_19{--cb-acc2:#E8A0A0}
.cbb_20{--cb-acc2:#C08457}
.cbb_21{--cb-acc2:#B8C0CC}
.cbb_22{--cb-acc2:#F4F6FA}
.cbb_23{--cb-acc2:#BDE6FF}
.cbb_24{--cb-acc2:#7FFFD4}

/* icons before / after a name (fixed list) */
.cbl_1::before,.cbl_2::before,.cbl_3::before,.cbl_4::before,.cbl_5::before,.cbl_6::before,.cbl_7::before,.cbl_8::before,.cbl_9::before,.cbl_10::before,.cbl_11::before,.cbl_12::before,.cbl_13::before,.cbl_14::before,.cbl_15::before,.cbl_16::before,.cbl_17::before,.cbl_18::before,.cbl_19::before,.cbl_20::before,.cbl_21::before,.cbl_22::before,.cbl_23::before,.cbl_24::before,.cbl_25::before,.cbl_26::before,.cbl_27::before,.cbl_28::before,
.cbr_1::after,.cbr_2::after,.cbr_3::after,.cbr_4::after,.cbr_5::after,.cbr_6::after,.cbr_7::after,.cbr_8::after,.cbr_9::after,.cbr_10::after,.cbr_11::after,.cbr_12::after,.cbr_13::after,.cbr_14::after,.cbr_15::after,.cbr_16::after,.cbr_17::after,.cbr_18::after,.cbr_19::after,.cbr_20::after,.cbr_21::after,.cbr_22::after,.cbr_23::after,.cbr_24::after,.cbr_25::after,.cbr_26::after,.cbr_27::after,.cbr_28::after{display:inline-block;font-weight:normal;font-style:normal;text-decoration:none;color:var(--cb-acc,#FFC93C);-webkit-text-fill-color:var(--cb-acc,#FFC93C);-webkit-text-stroke:0;text-shadow:none}
.cbl_1::before{content:"\2661\A0"}
.cbr_1::after{content:"\A0\2661"}
.cbl_2::before{content:"\2665\A0"}
.cbr_2::after{content:"\A0\2665"}
.cbl_3::before{content:"\2726\A0"}
.cbr_3::after{content:"\A0\2726"}
.cbl_4::before{content:"\2727\A0"}
.cbr_4::after{content:"\A0\2727"}
.cbl_5::before{content:"\2605\A0"}
.cbr_5::after{content:"\A0\2605"}
.cbl_6::before{content:"\2606\A0"}
.cbr_6::after{content:"\A0\2606"}
.cbl_7::before{content:"\265B\A0"}
.cbr_7::after{content:"\A0\265B"}
.cbl_8::before{content:"\26A1\A0"}
.cbr_8::after{content:"\A0\26A1"}
.cbl_9::before{content:"\263E\A0"}
.cbr_9::after{content:"\A0\263E"}
.cbl_10::before{content:"\2600\A0"}
.cbr_10::after{content:"\A0\2600"}
.cbl_11::before{content:"\2744\A0"}
.cbr_11::after{content:"\A0\2744"}
.cbl_12::before{content:"\273F\A0"}
.cbr_12::after{content:"\A0\273F"}
.cbl_13::before{content:"\2740\A0"}
.cbr_13::after{content:"\A0\2740"}
.cbl_14::before{content:"\266A\A0"}
.cbr_14::after{content:"\A0\266A"}
.cbl_15::before{content:"\266B\A0"}
.cbr_15::after{content:"\A0\266B"}
.cbl_16::before{content:"\25C6\A0"}
.cbr_16::after{content:"\A0\25C6"}
.cbl_17::before{content:"\2736\A0"}
.cbr_17::after{content:"\A0\2736"}
.cbl_18::before{content:"\2601\A0"}
.cbr_18::after{content:"\A0\2601"}
.cbl_19::before{content:"\2708\A0"}
.cbr_19::after{content:"\A0\2708"}
.cbl_20::before{content:"\2618\A0"}
.cbr_20::after{content:"\A0\2618"}
.cbl_21::before{content:"\1F525\A0"}
.cbr_21::after{content:"\A0\1F525"}
.cbl_22::before{content:"\1F48E\A0"}
.cbr_22::after{content:"\A0\1F48E"}
.cbl_23::before{content:"\1F98B\A0"}
.cbr_23::after{content:"\A0\1F98B"}
.cbl_24::before{content:"\1F451\A0"}
.cbr_24::after{content:"\A0\1F451"}
.cbl_25::before{content:"\1F3A7\A0"}
.cbr_25::after{content:"\A0\1F3A7"}
.cbl_26::before{content:"\1F3AE\A0"}
.cbr_26::after{content:"\A0\1F3AE"}
.cbl_27::before{content:"\1F338\A0"}
.cbr_27::after{content:"\A0\1F338"}
.cbl_28::before{content:"\1F319\A0"}
.cbr_28::after{content:"\A0\1F319"}

/* name effects: they sit on top of CodyChat's own name colour, gradient, neon and font */
.cbx_glow{filter:drop-shadow(0 0 3px var(--cb-acc,#FFC93C)) drop-shadow(0 0 8px var(--cb-acc,#FFC93C))}
.cbx_neon{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 5px var(--cb-acc,#FFC93C)) drop-shadow(0 0 14px var(--cb-acc,#FFC93C)) drop-shadow(0 0 24px var(--cb-acc,#FFC93C))}
.cbx_pulse{animation:cbxPulse 2.4s ease-in-out infinite}
@keyframes cbxPulse{0%,100%{filter:drop-shadow(0 0 2px var(--cb-acc,#FFC93C))}50%{filter:drop-shadow(0 0 4px var(--cb-acc,#FFC93C)) drop-shadow(0 0 11px var(--cb-acc,#FFC93C))}}
.cbx_flicker{animation:cbxFlicker 3.2s linear infinite}
@keyframes cbxFlicker{0%,19%,21%,23%,25%,54%,56%,100%{opacity:1;filter:drop-shadow(0 0 3px var(--cb-acc,#FFC93C)) drop-shadow(0 0 9px var(--cb-acc,#FFC93C))}20%,24%,55%{opacity:.5;filter:none}}
.cbx_flow{background:linear-gradient(90deg,var(--cb-acc,#FFC93C),var(--cb-acc2,#ffffff),var(--cb-acc,#FFC93C)) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;text-shadow:none;animation:cbxFlow 3s linear infinite}
@keyframes cbxFlow{to{background-position:-200% 0}}
.cbx_shimmer{background:linear-gradient(110deg,currentColor 38%,#fff 50%,currentColor 62%) 0 0/260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;animation:cbxShimmer 2.8s linear infinite}
.cbx_shimmer[class*="bgrad"],.cbx_shimmer[class*="bneon"]{background-image:linear-gradient(110deg,var(--cb-acc,#FFC93C) 38%,#fff 50%,var(--cb-acc,#FFC93C) 62%)}
@keyframes cbxShimmer{from{background-position:130% 0}to{background-position:-30% 0}}
.cbx_rainbow{animation:cbxHue 5s linear infinite}
@keyframes cbxHue{from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)}}
.cbx_glitch{animation:cbxGlitch 2.6s steps(1) infinite}
@keyframes cbxGlitch{0%,90%,100%{filter:none;transform:none}91%{filter:drop-shadow(2px 0 #ff2d55) drop-shadow(-2px 0 #00e5ff);transform:translateX(1px)}93%{filter:drop-shadow(-2px 0 #ff2d55) drop-shadow(2px 0 #00e5ff);transform:translateX(-1px)}95%{filter:drop-shadow(3px 0 #ff2d55) drop-shadow(-3px 0 #00e5ff);transform:none}97%{filter:none}}
.cbx_fire{animation:cbxFire 1.4s ease-in-out infinite alternate}
@keyframes cbxFire{from{filter:drop-shadow(0 -1px 2px #ff9d00) drop-shadow(0 -3px 6px #ff3d00)}to{filter:drop-shadow(0 -2px 3px #ffd000) drop-shadow(0 -6px 10px #ff5400)}}
.cbx_frost{animation:cbxFrost 3s ease-in-out infinite alternate}
@keyframes cbxFrost{from{filter:drop-shadow(0 0 2px #bdeeff) drop-shadow(0 0 6px #4cc9f0)}to{filter:drop-shadow(0 0 4px #e6faff) drop-shadow(0 0 13px #4cc9f0)}}
.cbx_outline{-webkit-text-stroke:1px var(--cb-acc,#FFC93C);paint-order:stroke fill}
.cbx_wavy{text-decoration:underline wavy var(--cb-acc,#FFC93C);text-decoration-thickness:2px;text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.cbx_pulse,.cbx_flicker,.cbx_flow,.cbx_shimmer,.cbx_rainbow,.cbx_glitch,.cbx_fire,.cbx_frost{animation:none !important}.cbx_pulse,.cbx_flicker{filter:drop-shadow(0 0 3px var(--cb-acc,#FFC93C)) drop-shadow(0 0 8px var(--cb-acc,#FFC93C))}.cbx_fire{filter:drop-shadow(0 -2px 3px #ff9d00) drop-shadow(0 -5px 8px #ff3d00)}.cbx_frost{filter:drop-shadow(0 0 3px #bdeeff) drop-shadow(0 0 9px #4cc9f0)}}

/* an opened profile in the owner's accent colour */
.cbs_acc{border-radius:inherit}
.cbs_acc.cbg_1{box-shadow:inset 0 0 0 1px var(--cb-acc,#FFC93C),inset 0 0 30px -12px var(--cb-acc,#FFC93C)}
.cbs_acc.cbg_2{box-shadow:inset 0 0 0 2px var(--cb-acc,#FFC93C),inset 0 0 44px -8px var(--cb-acc,#FFC93C)}
.cbs_acc .modal_selected,.cbs_acc .rselected,.cbs_acc .pselected,.cbs_acc .theme_color,.cbs_acc .proicon{color:var(--cb-acc,#FFC93C)}
.cbs_acc .avatar_spin{border-color:var(--cb-acc,#FFC93C)}
.cbs_acc.cbg_1 .pro_name{text-shadow:0 0 8px var(--cb-acc,#FFC93C)}
.cbs_acc.cbg_2 .pro_name{text-shadow:0 0 6px var(--cb-acc,#FFC93C),0 0 16px var(--cb-acc,#FFC93C)}
.cbs_acc .pro_name.cbx,.cbs_acc .pro_name .cbx{text-shadow:none}

/* settings screens */
.cbs_prev{padding:14px;border-radius:14px;background:rgba(128,128,128,.12);margin:4px 0 14px}
.cbs_prev_top{display:flex;align-items:center;gap:12px}
.cbs_prev_av{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid #fff;flex:none}
.cbs_prev_name{font-size:20px;font-weight:bold}
.cbs_prev_tab{margin-top:10px;display:flex;gap:14px;font-size:14px}
.cbs_prev_tab b{color:var(--cb-acc,#FFC93C)}
.cbs_prev_play{margin-top:10px;display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;background:#262626;color:#fff;font-size:13px}
.cbs_prev_play i{width:28px;height:28px;border-radius:50%;background:var(--cb-acc,#FFC93C);color:var(--cb-on,#1D2B53);display:flex;align-items:center;justify-content:center;font-size:11px}
.cbs_prev.cbg_1{box-shadow:inset 0 0 0 1px var(--cb-acc,#FFC93C),inset 0 0 30px -12px var(--cb-acc,#FFC93C)}
.cbs_prev.cbg_2{box-shadow:inset 0 0 0 2px var(--cb-acc,#FFC93C),inset 0 0 44px -8px var(--cb-acc,#FFC93C)}
.cbs_prev.cbg_1 .cbs_prev_name{text-shadow:0 0 8px var(--cb-acc,#FFC93C)}
.cbs_prev.cbg_2 .cbs_prev_name{text-shadow:0 0 6px var(--cb-acc,#FFC93C),0 0 16px var(--cb-acc,#FFC93C)}
.cbs_sw_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:8px;margin:6px 0 14px}
.cbs_sw{height:44px;border-radius:12px;border:2px solid transparent;cursor:pointer;position:relative;padding:0}
.cbs_sw.on{border-color:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.45)}
.cbs_sw.on:after{content:"\f00c";font-family:"Font Awesome 6 Free","Font Awesome 5 Free",FontAwesome;font-weight:900;position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--cb-on,#1D2B53)}
.cbs_fx_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:6px 0 12px}
.cbs_fx{padding:14px 10px;border-radius:14px;background:rgba(128,128,128,.12);border:2px solid transparent;cursor:pointer;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.cbs_fx.on{border-color:var(--cb-acc,#FFC93C)}
.cbs_fx .cbs_fx_name{font-size:17px;font-weight:bold;display:block;margin-bottom:4px}
.cbs_fx small{opacity:.7;display:block}


/* name style editor */
.cbs_live_wrap{display:flex;align-items:center;justify-content:center;min-height:84px;margin:4px 0 12px;border-radius:14px;background:rgba(128,128,128,.14);font-size:30px;padding:10px;overflow:hidden}
.cbs_live_wrap .username{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cbs_tabs{display:flex;gap:6px;margin:0 0 10px;border-bottom:1px solid rgba(128,128,128,.25);padding-bottom:8px}
.cbs_tab_btn{border:0;cursor:pointer;padding:8px 16px;border-radius:999px;background:rgba(128,128,128,.16);color:inherit;font-weight:bold;font-family:inherit;font-size:14px}
.cbs_tab_btn.on{background:#FFC93C;color:#1D2B53}
.cbs_group{margin:10px 0 4px;font-weight:bold;font-size:13px;opacity:.85;text-transform:uppercase;letter-spacing:.06em}
.cbs_chip_grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:6px;margin:4px 0 8px}
.cbs_chip{height:42px;border-radius:10px;border:2px solid transparent;background:rgba(128,128,128,.16);cursor:pointer;font-size:19px;color:inherit;padding:0;font-family:inherit}
.cbs_chip.on{border-color:#FFC93C;background:rgba(255,201,60,.18)}
.cbs_sw_none{background:rgba(128,128,128,.25);color:inherit}
.cbs_fx .cbs_fx_name{font-size:18px;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}