@import url(https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap);
body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: fade all 1s
}

input:focus,
textarea:focus {
    outline: none;
}

::-webkit-scrollbar {
    display: none;
}

input[data-autocompleted] {
    background-color: transparent !important;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
    -webkit-transition: background-color 0s 0s, color 0s 0s;
    transition: background-color 0s 0s, color 0s 0s;
    transition-delay: calc(infinity * 1s);
}

.table_data table {
    height: auto !important;
    max-height: 100% !important;
}

.css-1nmdiq5-menu {
    background-color: #21242d !important;
    position: absolute !important;
    z-index: 999999999999999999999 !important;
}






.MuiTextField-root {
    height: 100% !important;
    width: calc(100% + 2.5rem);
    margin: -5px -15px 0 -15px !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.MuiIconButton-root:not(.MuiPickersArrowSwitcher-button) {
    padding: 30px !important;
    margin: -30px !important;
}

.MuiTextField-root input {
    margin: 0 !important;
    padding-top: 5px !important;
}

.MuiSvgIcon-root:not(.MuiPickersArrowSwitcher-leftArrowIcon, .MuiPickersArrowSwitcher-rightArrowIcon) {
    display: none !important;
}

.MuiOutlinedInput-root {
    padding: 0 15px !important;
    color: white !important;
}

.MuiOutlinedInput-input {
	padding: 0 !important;
    font-weight: normal !important;
    line-height: normal !important;
    letter-spacing: normal !important;
    font-family: 'Comfortaa', sans-serif !important;
}

.MuiOutlinedInput-notchedOutline {
	border: none !important;
}


.pac-container {
    background-color: var(--sub-bg-dark) !important;
    border: 1px solid #2d2f39 !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
    padding: 0.35rem 0 !important;
    z-index: 1100 !important;
    margin-top: 6px !important;
}

.pac-container:after {
    display: none !important;
}

.pac-item {
    border-top: 1px solid rgba(45, 47, 57, 0.4) !important;
    color: #888 !important;
    padding: 0.65rem 1rem !important;
    font-size: 14px !important;
    cursor: pointer !important;
    line-height: 1.4 !important;
}

.pac-item:first-child {
    border-top: none !important;
}

.pac-item:hover {
    background-color: rgba(255, 255, 255, 0.04) !important;
}

.pac-item:hover,
.pac-item:hover > .pac-item-query {
    color: var(--white) !important;
}

.pac-item-query {
    color: var(--white) !important;
    font-size: 14px !important;
}

.pac-icon {
    display: none !important;
}

.pac-matched {
    color: var(--accent-1) !important;
}

.css-b62m3t-container {
    width: 100%
}

/*.css-1nmdiq5-menu {
    background-color: #21242d !important;
    width: calc(100% + 52.5px) !important;
    left: -39.5px !important;
    display: block !important
}*/

.css-qr46ko {
    display: block !important
}

#react-select-2-input {
    color: white !important;
}

.css-d7l1ni-option {
    background-color: #21242d !important;
    cursor: pointer !important;
}

.css-d7l1ni-option:hover {
    background-color: white !important;
    color: #21242d !important;
}

#react-select-3-input {
    color: white !important;
}

.MuiInputBase-root {
    width: 100%
}

.shine-animation {
    background-color: rgba(1, 0, 13, 0.3);
    background: linear-gradient(
        135deg,
        rgba(1, 0, 13, 0.3) 0%,
        rgba(1, 0, 13, 0.1) 40%,
        rgba(80, 90, 92, 0.1) 50%,
        rgba(1, 0, 13, 0.3) 60%,
        rgba(1, 0, 13, 0.3) 100%
    );
    background-size: 400% 100%;
    background-position: 100% 50%;
    animation: animation-shine 5s 0s infinite;
}

.shine-animation-light {
    background-color: rgba(22, 24, 36, 0.3);
    background: linear-gradient(
        135deg,
        rgba(22, 24, 36, 0.3) 0%,
        rgba(22, 24, 36, 0.1) 40%,
        rgba(80, 90, 92, 0.3) 50%,
        rgba(22, 24, 36, 0.3) 60%,
        rgba(22, 24, 36, 0.3) 100%
    );
    background-size: 400% 100%;
    background-position: 100% 50%;
    animation: animation-shine 5s 0s infinite;
}


@keyframes animation-shine {
    0% {
        background-position: 100% 50%;
    }
    50% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}




@keyframes autofill {
  from {}
  to {}
}

.autofilled_input:-webkit-autofill {
  animation-name: autofill;
  animation-fill-mode: both;
  animation-duration: 0.1s;
}

.gsi-material-button {
    margin-top: 3rem;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-appearance: none;
    background-color: #f0f1f2;
    background-image: none;
    border: none;
    border-radius: 10px;
    box-sizing: border-box;
    color: #000000;
    cursor: pointer;
    font-family: 'DonerRegular', sans-serif;
    font-size: 14px;
    /*  height: 50px;*/
    letter-spacing: 0.25px;
    outline: none;
    overflow: hidden;
    padding: 15px;
    position: relative;
    text-align: center;
    transition: background-color .218s, border-color .218s, box-shadow .218s;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
    max-width: 100%;
    min-width: 100%;
}

.gsi-material-button .gsi-material-button-icon {
    height: 20px;
    margin-right: 12px;
    min-width: 20px;
    width: 20px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
    justify-content: center;
    position: relative;
    width: 100%;
}

.gsi-material-button .gsi-material-button-contents {
    font-family: 'DonerRegular', sans-serif;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

.gsi-material-button .gsi-material-button-state {
    transition: opacity .218s;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.gsi-material-button:disabled {
    cursor: default;
    background-color: #ffffff61;
}

.gsi-material-button:disabled .gsi-material-button-state {
    background-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents {
    opacity: 38%;
}

.gsi-material-button:disabled .gsi-material-button-icon {
    opacity: 38%;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state, 
.gsi-material-button:not(:disabled):focus .gsi-material-button-state {
    background-color: #001d35;
    opacity: 12%;
}





.my-dark-range .ant-picker {
  background: #01000D !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; /* always this border */

  padding: 10px !important;
  border-radius: 0 !important;
}

.my-dark-range .ant-picker:hover,
.my-dark-range .ant-picker:focus,
.my-dark-range .ant-picker:focus-within {
    border: none !important;
    border-bottom: solid 2px #0D7AC7 !important; /* prevent hover change */
    box-shadow: none !important;

}

/* Input text */
.my-dark-range .ant-picker .ant-picker-input > input {
  background: transparent !important;
  color: white !important;
  font-size: 16px !important;
  padding-bottom: .25rem !important
}




/* Icons */
.my-dark-range .ant-picker .ant-picker-suffix,
.my-dark-range .ant-picker .ant-picker-clear {
  color: white !important;
}

.ant-picker-panel-container {
    background: #161824 !important;
}

.ant-btn {
    background: #0D7AC7 !important
}
/* -----------------------------------------------------
	Global Variables and Resets
------------------------------------------------------ */

@font-face {
    font-family: DonerRegular;
    src: url(/static/media/Doner-RegularText.ba9ab1d5394d74b3284f.otf) format("opentype");
}


:root {
	--white: #ffffff;
	--black: #000000;

/*	--bg-dark: #161824;*/
	--bg-dark: #01000D;

	--sub-bg-dark: #161824;
/*	--sub-bg-dark: #21242d;*/
	--sub-bg-light: #f0f1f2;

	--accent-1: #0D7AC7;
	--success-green: #3CA259;
}

:root {
	--font-family: 'DonerRegular', sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
}

button {
	cursor: pointer;
}

h1 {
	font-weight: 700;
	font-size: 34px;
}

h3 {
	font-weight: 600;
	font-size: 24px;
}

p, input {
	font-weight: 300;
	font-size: 15px;
}

.h_1sRDog {
	font-weight: 600;
}

.thHC8nhO {
	font-weight: 700;
}

.IPupDwnx {
	font-size: 8px;
}

.aJ7m3mp5 {
	font-size: 10px;
}

.bDrkh257 {
	font-size: 12px;
}

.f40zCYLK {
	font-size: 14px;
}

.H2Pbxpt0 {
	font-size: 15px;
}

.qV2rbLln {
	font-size: 17px;
}

.Ev_u5yDX {
	font-size: 22px;
}

.lgbLSG0G {
	font-size: 25px;
}

.PZeWV6zB {
	font-size: 28px;
}

.Ua_3LZ_T {
	font-size: 30px;
}

.yxT6_fxy {
	font-size: 35px;
}

/* -----------------------------------------------------
	Layout & Grid System
------------------------------------------------------ */

.PxUSl9_o {
	height: 100vh;
	width: 100%;

	display: grid;
	grid-template-columns: 40% 1fr;
	overflow: hidden;
}

.QWaODmUm {
	height: 100%;
	width: 100%;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	color: #ffffff;
	color: var(--white);
	padding: 30px 80px 30px 100px;

	display: flex;
	flex-direction: column;
	justify-content: center;
}

.QWaODmUm h3 {
	margin-bottom: 1.25rem;
}

.QWaODmUm p {
	margin-bottom: 3rem;
}

.QWaODmUm img {
	width: calc(100% + 200px);
	margin: 0 -200px 0 0
}

.mwvK5h2V {
	display: flex;
	align-items: center;
	column-gap: .35rem;
	margin-bottom: 1.5rem;
}

.ATawtEDU {
	height: 9px;
	width: 9px;
	border-radius: 100%;
	background-color: #ffffff;
	background-color: var(--white);
	opacity: .6
}

.ATawtEDU:last-child {
	opacity: 1 !important;
}

.qlmuYky_ {
	height: 100%;
	width: 100%;
	background-color: #ffffff;
	background-color: var(--white);
	padding: 60px;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
}

.VI9sXW3I {
	width: 30%;
	margin-bottom: .75rem;
}

.MovXn3dY {
	height: 25px
}

.K3bq8YCl {
	width: 20%;
	height: 2.5px;
	background-color: #0D7AC7;
	background-color: var(--accent-1)
}

.eGdetUJq {
	margin-top: 2rem;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.F32_oObS {
	text-align: center;
}

.XJQE_xdD {
	margin: 3rem 0;
	width: 100%;
	padding: 15px 0;
	box-sizing: border-box;
	background-color: #f0f1f2;
	background-color: var(--sub-bg-light);
	border: none;
	border-radius: 10px;

	display: flex;
	align-items: center;
	justify-content: center;

	column-gap: 1rem;
}

.XJQE_xdD img {
	width: 4%;
}

.FO049hpy {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	grid-column-gap: 1rem;
	column-gap: 1rem;
	margin: 2rem 0 3rem 0;
}

.SbQ6rKl2 {
	width: 100%;
	height: 1px;
	background-color: #f0f1f2;
	background-color: var(--sub-bg-light)
}

.iuYDoQjY {
	margin-top: 4rem;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.Hduh22U7 {
	width: 100%;
	height: 60px;
	padding: 25px;
	box-sizing: border-box;
	border: 2px solid #f0f1f2;
	border: 2px solid var(--sub-bg-light);
	border-radius: 10px;

	display: flex;
	align-items: center;
	position: relative;
	column-gap: 1rem;
}

.Hduh22U7 input {
	position: absolute;
	background: none;
	border: none;
	width: calc(100% - 50px);
}

.g9mt41rW {
	margin-top: 1.5rem;
}

.x6U3cM7A {
	width: calc(100% - (2.5rem + 90px)) !important;
}

.uS49JuDW {
	margin: 0 0 0 auto;
	background: none;
	border: none;
}

.Xxb54815 {
	margin: 0 0 0 auto;
	background: none;
	border: none;
	margin-top: .5rem
}

.V6SDtmJt {
	margin-top: 3rem;
	width: 100%;
	height: 50px;
	box-sizing: border-box;
	background-color: #ffffff;
	background-color: var(--white);
	border: 1px solid #0D7AC7;
	border: 1px solid var(--accent-1);
	border-radius: 10px;

	display: flex;
	align-items: center;
	justify-content: center;

	column-gap: 1rem;
}

.V6SDtmJt p {
	color: #ffffff;
	color: var(--white)
}

.HvwuxFAz {
	margin-top: 3rem;
	width: 100%;
	height: 50px;
	box-sizing: border-box;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	border: 1px solid #0D7AC7;
	border: 1px solid var(--accent-1);
	border-radius: 10px;

	display: flex;
	align-items: center;
	justify-content: center;

	column-gap: 1rem;
}

.HvwuxFAz p {
	color: #ffffff;
	color: var(--white)
}

.HvwuxFAz,
.V6SDtmJt {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.jnTt80la {
	margin-top: .5rem;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.jnTt80la button {
	background: none;
	border: none;
}

.jnTt80la button p {
	text-decoration: underline;
}

.sGDYKocT {
  position: fixed;
  align-self: center;
  top: 10px;
  background-color: #ff4d4f;
  padding: 10px 30px;
  max-width: 35%;
  text-align: center;
  animation: QT3dXmJA 0.4s ease-out;
  border-radius: 7.5px;
}

@keyframes QT3dXmJA {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.sL2cmE0O {
  font-size: 13px;
  margin: 0;
  color: white;
  font-weight: 600
}


.OCYMbsMQ {
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	color: white;
	padding: 10px;
	box-sizing: border-box;
	text-align: center;
	border-radius: 5px;
}

.OCYMbsMQ p {
  font-size: 13px;
  margin: 0;
  color: white;
  font-weight: 600
}

.LEEHtQ_3 {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* -----------------------------------------------------
	Media Queries
------------------------------------------------------ */

@media (max-width: 768px) {
}

@media (max-width: 1200px) {
}
/* -----------------------------------------------------
	Global Variables and Resets
------------------------------------------------------ */

@font-face {
    font-family: DonerRegular;
    src: url(/static/media/Doner-RegularText.ba9ab1d5394d74b3284f.otf) format("opentype");
}


:root {
	--white: #ffffff;
	--black: #000000;

/*	--bg-dark: #161824;*/
	--bg-dark: #01000D;

	--sub-bg-dark: #161824;
/*	--sub-bg-dark: #21242d;*/
	--sub-bg-light: #f0f1f2;

	--accent-1: #0D7AC7;
	--past: #0D7AC788;
	--success-green: #3CA259;
	--cancelled-red: #ff2626
}

:root {
	--font-family: 'DonerRegular', sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
}

body {
	background-color: #01000D;
	background-color: var(--bg-dark)
}

button {
	cursor: pointer;
}

h1 {
	font-weight: 700;
	font-size: 34px;
}

h3 {
	font-weight: 600;
	font-size: 24px;
}

p, input {
	font-weight: 300;
	font-size: 15px;
}

.zhGnwrbl {
	font-weight: 600;
}

.b_ICmhpG {
	font-weight: 700;
}

.oFiyU4J9 {
	font-size: 8px;
}

.tUmkAxjr {
	font-size: 10px;
}

.KEIALwZh {
	font-size: 12px;
}

.Lms4D8bi {
	font-size: 14px;
}

.sPz4EZr5 {
	font-size: 15px;
}

.VcCI2v0p {
	font-size: 16px;
}

.pyxYca69 {
	font-size: 17px;
}

.VhsUzkLa {
	font-size: 22px;
}

.FMdHpUqY {
	font-size: 25px;
}

.iMNzXY_k {
	font-size: 28px;
}

.LpoG1BFA {
	font-size: 31px;
}

.cq0HbXtH {
	font-size: 34px;
}

.F2C85RVV {
	font-size: 37px;
}

.YTMNnyGJ {
	font-size: 40px;
}

.fpuc3Wvr {
	font-size: 43px;
}

/* -----------------------------------------------------
	Layout & Grid System
------------------------------------------------------ */

.gdWl3W0A {
	position: relative;
}

.YZHcViPF {
	height: 100vh;
	width: 100%;

/*	display: grid;
	grid-template-columns: 15% 1fr;*/
	display: flex;
    /*column-gap: 2rem;*/
	overflow: hidden;
	background-color: #01000D;
	background-color: var(--bg-dark);

	/*padding: 40px;*/
	box-sizing: border-box;
	color: #ffffff;
	color: var(--white)
}

.IgecvfKV {
	height: 100%;
	width: 100%;
	position: relative;
	background-color: #01000D;
	background-color: var(--bg-dark);
	transition: background-color 400ms ease
}

.kTxHG_Z1 {
	background-color: #ffffff;
	background-color: var(--white);
}

.STriTjfa {
  	opacity: 0.7 !important;
  	pointer-events:none !important;
}

.BijLopPI {
    width: 100%;
    background-color: #0D7AC7;
    background-color: var(--accent-1);
    color: #ffffff;
    color: var(--white);
    border: none;
    border-radius: 10px;
    padding: 12.5px 0;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .75rem;
}

.Zhd2qAqE {
	height: 100%;
	width: 100%;
/*	display: grid;*/
/*	grid-template-rows: auto 1fr;*/
	display: flex;
	flex-direction: column;
	/*row-gap: 2rem;*/

	padding: 40px 60px;
	row-gap: 2.5rem;
	box-sizing: border-box;
}

.SztJaSFe {
/*	height: 100%;*/
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
}

.DRV1Aynd {
	height: 75%;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-column-gap: 1rem;
	column-gap: 1rem;
	position: relative;
}

.Ou8uxS9q {
	position: absolute;
	height: 500px;
	background-color: white;
	top: 50px;
	z-index: 999;
	border-radius: 10px;
	overflow-y: scroll;

	width: 350px;
}

.pLmafTV4 {
	padding: 15px 20px;
	box-sizing: border-box;
	color: #01000D;
	color: var(--bg-dark);
	display: grid;
	grid-template-columns: 20px 1fr;
	align-items: center;
	grid-column-gap: .5rem;
	column-gap: .5rem;

	background: none;
    width: 100%;
    border: none;
    text-align: left;
}

.jf5zsxSp {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.VAXT7tus {
	width: 400px;
	box-sizing: border-box;
	border-radius: 50px;
	display: flex;
	align-items: center;
	background-color: #ffffff;
	background-color: var(--white)
}

.lVGNMuT_ {
	padding: 0 15px;
	box-sizing: border-box;
	width: 100%;
	border: none;
	background: none;

	display: flex;
	position: relative;
	column-gap: 1rem;
}

.lVGNMuT_ p,
.lVGNMuT_ i {
	color: #01000D;
	color: var(--bg-dark);
}

.lVGNMuT_ input {
	position: absolute;
	background: none;
	border: none;
	margin-left: 2.5rem;
	width: calc(100% - (2.5rem + 60px));
}

.qc0PA27c {
	height: 100%;
	aspect-ratio: 1;
	border: 1px solid #ffffff;
	border: 1px solid var(--white);

	border-radius: 100%;
	background-color: #ffffff;
	background-color: var(--white);
	border: none;
}

.qc0PA27c i {
	color: #01000D;
	color: var(--bg-dark);
}

.fwPmkbxy {
	height: 100%;
	overflow: hidden;
	width: 100%;
	display: flex;
	column-gap: 1.25rem;
}

.W0AZbjkz {
	height: 100%;
	width: 45%;
	display: flex;
	flex-direction: column;
/*	grid-template-rows: auto 1fr;*/
	row-gap: 1.25rem;
}

.zIS9wIa0 {
	height: 100%;
	width: 100%;
	border-radius: 15px;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	padding: 30px;
	box-sizing: border-box;
	position: relative;

    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid #2d2f39
}

.Cb9L87df {
	grid-template-rows: auto auto 1fr
}

.MrZPXaiA {
	padding: 30px 30px 0 30px
}

.xMWA5jK8 {
	display: grid;
	grid-template-columns: auto 1fr;
}

.Hfhs0GB0 {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 auto;
	background: none;
	border: none;
	color: #ffffff;
	color: var(--white);
}

.Cf9I05tL {
	display: flex;
	align-items: flex-end;
	column-gap: 1rem;
	background: none;
	border: none;
	color: #ffffff;
	color: var(--white);
	pointer-events: none;
}

.RkxqYgyE {
	background: none;
	border: none;
	color: white;
	pointer-events: auto;
	display: flex;
	margin-top: 5px;
}

.pLGmCfBv {
	background: none;
	border: none;
	color: white;
	pointer-events: auto;
	display: flex;
	height: 30px;
	margin-top: 5px;
	aspect-ratio: 1;
	box-sizing: border-box;
	align-items: flex-start;
	justify-content: flex-end
}

.dB8I7V4S {
	display: flex;
	align-items: center;
	column-gap: .5rem;
}

.VhWeTMrL {
	display: flex;
	align-items: center;
	column-gap: .4rem;
}

.VhWeTMrL p {
	margin-top: 2px;
}

.swWW4Uf2 {
	display: flex;
	align-items: flex-start;
	column-gap: 1rem;
}

._0vyURsN {
	display: flex;
	align-items: center;
	column-gap: .4rem;
}

._0vyURsN p {
	margin-top: 2px;
}

.W8C1N3Zp {
	padding-right: 2.5rem;
}

.FiI3mmF9 {
	margin: 0 0 0 auto;
	column-gap: .5rem;
}

.QzKJic_S {
	height: 30px;
	width: 30px;
	position: absolute;
	right: 30px;

	border: none;
	border-radius: 100%;
	background-color: #0D7AC7;
	background-color: var(--accent-1);

	display: flex;
	align-items: center;
	justify-content: center;
}

.QzKJic_S i {
	color: #ffffff;
	color: var(--white);
}

.kvBYbNkW {
	height: calc(100% - 1.5rem);
	margin-top: 1.5rem;
	overflow-y: hidden;
}

.fruRkpsH {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	row-gap: 1.5rem;
	margin-bottom: -5rem;
	overflow-y: scroll;
}

.fruRkpsH::-webkit-scrollbar,
.SY_N8olI::-webkit-scrollbar {
	display: none;
}

.ewPza4mn { 
	height: 40px !important;
    margin-top: 1rem;
    margin-bottom: .5rem;
	border: none !important;
	padding: 5px 0 0 0 !important;
}

.ewPza4mn input {
	margin-left: 0 !important;
}

.uUCqPFMV {
	padding: 0 !important;
	left: 0 !important;
}

.uUCqPFMV p,
.uUCqPFMV i,
.uUCqPFMV input {
	font-size: 13px !important;
}

.erTXBooH {
	background-color: #f0f1f2;
	background-color: var(--sub-bg-light);
}

.erTXBooH p,
.erTXBooH i,
.erTXBooH input {
	color: #01000D;
	color: var(--bg-dark);
}

.acu6iWU8 {
	display: grid;
	grid-template-columns: auto 125px 1fr;
	grid-column-gap: 1.5rem;
	column-gap: 1.5rem;
}

.VIF1ugpY {
	display: flex;
	flex-direction: column;
	row-gap: .25rem;
}

.hhDfWW83 {
	height: 130%;
	display: grid;
	grid-template-rows: 7.5px 1fr;
}

.w6XWwscc {
	width: 7.5px;
	height: 7.5px;
	border-radius: 100%;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
}

.Z1yz7JES {
	width: 7.5px;
	height: 7.5px;
	border-radius: 100%;
	background-color: #3CA259;
	background-color: var(--success-green);
}

.XkdgrI3b {
	height: 100%;
	width: 1px;
	background: linear-gradient(180deg, #0D7AC7 0%, #3943b7 58.53%, #161824 100%);
	background: linear-gradient(180deg, #0D7AC7 0%, #3943b7 58.53%, var(--sub-bg-dark) 100%);
	margin: 0 auto;
}

.CbF4XyY_ {
	height: 100%;
	width: 1px;
	background: linear-gradient(180deg, #3CA259 0%, #337c5b 58.53%, #161824 100%);
	background: linear-gradient(180deg, #3CA259 0%, #337c5b 58.53%, var(--sub-bg-dark) 100%);
	margin: 0 auto;
}

.lC56r4No {
	height: 100%;
	width: 100%;
	background: none;
	border: none;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	border-radius: 10px;
	padding: 15px 20px;
	box-sizing: border-box;
	text-align: left;
	color: #ffffff;
	color: var(--white);
}

.lf3zc05f {
	background-color: #0D7AC788;
	background-color: var(--past)
}

.otE9t1Dk {
	background-color: #3CA259;
	background-color: var(--success-green)
}

.VyhVWjmD {
	background-color: #ff2626
;
	background-color: var(--cancelled-red);
}

.E360dbaq {
	background-color: #ff2626
;
	background-color: var(--cancelled-red);
	padding: 10px;
	border-radius: 5px;
	box-sizing: border-box;
}

.E360dbaq p {
	color: #ffffff;
	color: var(--white);
	text-align: center;
}

.gz16TVZp {
	background-color: #ffffff;
	background-color: var(--white)
}

.IjoGGa3e {
	margin-top: 1rem;
	display: flex;
	column-gap: 1rem;
}

.oBLLHhG5 {
	display: flex;
	column-gap: .5rem;
	align-items: center;
}

.CsLBaTbH {
	background: none;
	border: none;
	display: flex;
	align-items: center;
	column-gap: .5rem;
	margin: 0 0 0 auto;
}

.CsLBaTbH p {
 	color: #ffffff;
 	color: var(--white)
 }

.sF6uQfVF {
	height: 20px;
    width: 20px;
    border: none;
    border-radius: 100%;
    background-color: #ffffff;
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
}

.sF6uQfVF i {
	color: #3CA259;
	color: var(--success-green)
}

.wpetO4hi {
	aspect-ratio: 1;
	height: 60%;
}

.QEPzh7qX {
	height: calc(100% - 1.5rem);
	margin-top: 1.5rem;
	overflow: hidden;
}

.JgMFsMQK {
	height: 100%;
	width: 100%;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.NSjOZcQB {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background: none;
    border: none;
    color: #ffffff;
    color: var(--white);
    aspect-ratio: 1
}

.IvEWKu5f {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: none;
    border: none;
    border-radius: 100%;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
    margin: 7.5px;
    box-sizing: border-box;
    color: #ffffff;
    color: var(--white);
}

.NM3f2TxT {
	position: absolute;
	bottom: 7px;
	width: 5px;
	height: 5px;
	border-radius: 100%;
	background-color: #3CA259;
	background-color: var(--success-green)
}

.RIRitEO9 {
	display: flex;
	width: 50%;
	height: calc(100% - 40px);
	position: absolute;
	top: 0;
	right: 20px;
  	top: 50%;
  	transform: translate(0, -50%);
  	border-radius: 15px;

	background-color: #01000D;

	background-color: var(--bg-dark);
}

.F8eQ4MmW {
	width: 60%;
}

.rOvv0QSK {
    display: grid;
    grid-template-columns: 25% 1fr;
    grid-template-rows: auto 1fr;
    width: 100%;
    height: 100%;
    overflow: hidden;
    grid-column-gap: 1rem;
    column-gap: 1rem;
    grid-row-gap: 1rem;
    row-gap: 1rem;
}

.PKUWjlvJ {
	display: flex;
	align-items: center;
	display: grid;
	grid-template-columns: 1fr auto;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-column-gap: 1rem;
    column-gap: 1rem;
}

.OHtISepC {
    border: 1px solid #2d2f39;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    border-radius: 10px;
    color: #ffffff;
    color: var(--white);
    column-gap: .75rem;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    position: relative;
}

.OHtISepC input {
	width: calc(100% - 4rem);
	border: none;
	background: none;
	height: 50px;
	position: absolute;
	left: 40px;
	color: #ffffff;
	color: var(--white)
}

.d4uzMAUL {
    border: 1px solid #2d2f39;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    border-radius: 10px;
    height: 50px;
    /*width: 50px;*/
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    color: var(--white);
    column-gap: .75rem
}

.arvle_Tv {
    border: 1px solid #2d2f39;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    border-radius: 10px;
	height: calc(100% - 15px);
	width: 100%;
    padding: 10px;
    box-sizing: border-box;
    color: #ffffff;
    color: var(--white);
    display: flex;
    flex-direction: column;
    overflow:hidden;
}

.o4QFyFIH {
    display: flex;
    flex-direction: column;
    flex: 1 1;
}

._9SUzD2R {
	display: flex;
	align-items: center;
	column-gap: .75rem;
}

.ZxLTcbVb {
	flex: 1 1;
	width: 100%;
	overflow-y: scroll;
	margin-top: 2rem;
}

.qdFjWZKu {
	display: flex;
	flex-direction: column;
	justify-content: center;
	row-gap: .75rem;
	margin-top: 1rem;
}

.A68wt5z2 {
	display: flex;
	align-items: center;
	column-gap: .5rem;
}

.ehVOjJLt {
	width: 22.5px;
	aspect-ratio: 1;
	border-radius: 4px;
	border: 1px solid #0D7AC7;
	border: 1px solid var(--accent-1);
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	color: var(--white)
}

.GfGgynT_ {
	background-color: #0D7AC7;
	background-color: var(--accent-1);
}

.oJb2oOv3 {
	height: 100%;
	width: 100%;
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
}

.Tyknq2pH {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	position: relative;

}

.YoEgshx3 {
	position: absolute;
	left: -16px;
	top: 20px;
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: none;
	border-radius: 12.5px;
	padding: 10px;
	color: white;
    z-index: 9999;
}

.hPZTubhA {
	position: absolute;
	left: -16px;
	top: 20px;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border: none;
	border-radius: 12.5px;
	padding: 10px;
	color: white;
    z-index: 9999;
    overflow: hidden
}

.hPZTubhA::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #2d2f39;
    border-right: none;
    border-radius: 12.5px 0 0 12.5px;
    pointer-events: none;
}

.Tzrs5nfg {
	padding: 15px 15px 0 15px;
	box-sizing: border-box;
/*	height: 100%;*/
	width: 100%;
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
	position: relative;
}

.RC4IDhpG {
	padding: 15px;
	box-sizing: border-box;

	display: flex;
	flex-direction: column;
	row-gap: 2rem;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
	position: relative;
}

.q5MKlJOf {
	height: 100%;
	width: 100%;
	position: relative;
	padding: 15px;
	box-sizing: border-box;
}

.XwnBn6Ez {
	height: 100%;
	width: 100%;
	position: relative;
	padding: 0 15px 15px 15px;
	box-sizing: border-box;
}

.FFbpg9r7 {
    height: 100%;
    width: calc(100% - 30px);
    position: absolute;
    top: 0;
	transition: top .75s ease;
    display: grid;
    grid-template-rows: auto 1fr;
}

.Jb60klRt {
	grid-template-rows: 1fr;
}

.SxrGQVgf {
	background-color: #01000D;
	background-color: var(--bg-dark);
    display: flex;
    flex-direction: column;
    row-gap: 10px;
}

.IqFXmsUL {
	grid-template-rows: 130px auto auto 1fr;
}

.tRV9XDaW .FFbpg9r7 {
	top: calc(-1 * (165px + 2rem));
	height: calc(100% + 30%);
	transition: top .75s ease;
	display: flex;
	flex-direction: column;
}

.Tzrs5nfg,
.FFbpg9r7 {
	transition: all 0.3s ease;
}

.tRV9XDaW .Tzrs5nfg {
	opacity: 0;
	transition: opacity 0.3s ease 0.3s;
}


.ivZsGCO4 {
	padding: 15px;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-rows: 25% auto 1fr;
	grid-row-gap: 2rem;
	row-gap: 2rem;
}

.GONcyuTy {
	aspect-ratio: 1;
	width: 100%;
	border-radius: 15px;
	background-color: #161824;
	background-color: var(--sub-bg-dark);	
	border: 1px solid #2d2f39;
	display: flex;
	align-items: center;
	justify-content: center;
}

.GONcyuTy img {
    height: 100%;
    width: 100%;
    object-fit: fill;
    border-radius: 15px;
}

.DgcNoVqH {
	color: #ffffff;
	color: var(--white);
	display: grid;
	grid-template-columns: 125px 1fr;
	grid-column-gap: 1.25rem;
	column-gap: 1.25rem;
}

.iPIJKRfT {
	display: flex;
	flex-direction: column;
	row-gap: .25rem;
	margin-top: .5rem;
}

.uP3X2tK3 {
	display: flex;
	column-gap: .75rem;
	align-items: center;
}

.uP3X2tK3 a {
	text-decoration: underline;
}

.xc_OYupj {
	height: -webkit-max-content;
	height: max-content;
	width: 100%;
	border-radius: 15px;
	overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dzTSRlDB {
	height: 40px;
	width: 100%;
	border-radius: 15px;
	overflow: hidden;
    display: flex;
    flex-direction: column;
}

.HPEoU1GM {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
}

.cXH9neG7 {
	position: absolute;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}

.jcyPybmV {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1001;
}

.aZeatVzb {
	background: #01000D;
	background: var(--bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 12px;
	padding: 24px;
	width: 360px;
	max-width: 90vw;
}

.GRhGOH2H {
	display: flex;
	gap: 10px;
	margin-top: 20px;
	justify-content: flex-end;
}

._Tgee7vu {
	padding: 8px 16px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	background: transparent;
	color: white;
	cursor: pointer;
	font-size: 13px;
}

._Tgee7vu:hover {
	background: rgba(255, 255, 255, 0.05);
}

.FkExXiR1 {
	padding: 8px 16px;
	border-radius: 8px;
	border: none;
	background: #e74c3c;
	color: white;
	cursor: pointer;
	font-size: 13px;
}

.FkExXiR1:hover {
	background: #c0392b;
}

.rLAqaqya {
  height: 80vh;
  width: 40vw;
  overflow: hidden !important;
  border-radius: 15px;
  background-color: #01000D;
  background-color: var(--bg-dark);
}


.mg0tF5B3 {
  height: 80vh;
  width: 40vw;
  overflow-y: scroll;
  border-radius: 15px;
  background-color: #01000D;
  background-color: var(--bg-dark);
  padding-right: 4px;
  scrollbar-gutter: stable;
}

/* WebKit browsers (Chrome, Safari, Edge) */
.mg0tF5B3::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  display: block !important;
  background-color: transparent;
}

.mg0tF5B3::-webkit-scrollbar-track {
  margin-top: 8px;
  margin-bottom: 8px;
}

.mg0tF5B3::-webkit-scrollbar-thumb {
  background: #0D7AC7;
  background: var(--accent-1);
  border-radius: 10px;
  background-clip: padding-box;
}

.mg0tF5B3::-webkit-scrollbar-corner {
  background: transparent;
}


.b8wuv9mi {
	overflow: hidden;
}

.Ub6HBKZq {
	height: -webkit-max-content;
	height: max-content;
	width: 40%;
	position: absolute;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	border-radius: 15px;

	background-color: #01000D;

	background-color: var(--bg-dark);
}

.RAEL9teC {
	height: -webkit-max-content;
	height: max-content;
	width: 40%;
	position: absolute;
    left: calc(75% - 15px);
    top: 50%;
    transform: translate(-50%, -50%);
  	border-radius: 15px;
  	border: 1px solid #2d2f39;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
}

.CmTR_q0S {
	height: 80%;
	width: 40%;
	position: absolute;
    left: calc(75% - 15px);
    top: 50%;
    transform: translate(-50%, -50%);
  	border-radius: 15px;
  	border: 1px solid #2d2f39;
	background-color: #161824;
	background-color: var(--sub-bg-dark);	
}

.Kq_xQsbH {
	height: 50%;
}

.onkijyh4 {
	padding: 25px;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-row-gap: 2.5rem;
	row-gap: 2.5rem;
	color: #ffffff;
	color: var(--white);
	animation: O5jrtgkG 0.4s ease-in-out;
/*	overflow-y: scroll;*/
}

.ioNqgnZl {
	padding: 25px;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-row-gap: 1.5rem;
	row-gap: 1.5rem;
	color: #ffffff;
	color: var(--white);
}

.tuMnl_83 {
	padding: 25px;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	color: #ffffff;
	color: var(--white);
}


.b_xgENJO {
	display: grid;
	grid-template-columns: auto 1fr;
	animation: O5jrtgkG 0.4s ease-in-out;
}

.byYivzq5 {
	display: flex;
	flex-direction: column;
	row-gap: .25rem;
}

.kp642MIB {
	height: 30% !important;
	width: auto !important;
}

.G9Y6MOsZ {
	margin: 0 0 0 auto;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-column-gap: 1.25rem;
	column-gap: 1.25rem;
	position: relative;
	height: 35px
}

.WA_r6vlU { 
	display: flex;
	column-gap: 1rem;
}

.wQH7GdcF {
	width: 35px;
	aspect-ratio: 1;
	border: 1px solid #ffffff;
	border: 1px solid var(--white);
	background-color: #01000D;
	background-color: var(--bg-dark);
	border-radius: 100%;
	

	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.W04dM0K2 {
	border: 1px solid #0D7AC7;
	border: 1px solid var(--accent-1);
	background-color: #0D7AC7;
	background-color: var(--accent-1);
}

.F9z2ymup {
	width: 100%;
	display: flex;
	flex-direction: column;
	row-gap: 2.5rem;
	animation: O5jrtgkG 0.5s ease-in-out;
}

.ZyUh9oCx {
	max-height: 80%;
	overflow-y: scroll
}

.g3Xl7JND {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.stRqS01h {
	row-gap: 0 !important;
}

.VwkgmRnT {
	width: 100%;
	height: 100px;
	background: none;
	border: 2px dashed #161824;
	border: 2px dashed var(--sub-bg-dark);
	border-radius: 10px;
	color: #ffffff;
	color: var(--white);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: .5rem
}

.VVxo852Q {
	width: 350px;
	box-sizing: border-box;
	border-radius: 50px;
	display: flex;
	align-items: center;
	box-sizing: border-box;

	display: flex;
	align-items: center;
	position: relative;
	column-gap: 1rem;
	color: #01000D;
	color: var(--bg-dark);
	background-color: #ffffff;
	background-color: var(--white);
}

.VVxo852Q input {
	position: absolute;
	background: none;
	border: none;
	margin-left: 15px;
	width: calc(100% - (2rem));
	color: #01000D;
	color: var(--bg-dark)
}

.aqfiWALv {
	width: 100%;
	height: 55px;
	padding: 5px 15px 0 15px;
	box-sizing: border-box;
	border: 2px solid #161824;
	border: 2px solid var(--sub-bg-dark);
	border-radius: 10px;

	display: flex;
	align-items: center;
	position: relative;
	column-gap: 1rem;
}

.aqfiWALv input {
	position: absolute;
	background: none;
	border: none;
	margin-left: 15px;
	width: calc(100% - (2.5rem + 15px));
	color: #ffffff;
	color: var(--white)
}


.QMk6El8e {
	width: 100%;
	height: 40px;
	padding: 5px 0 0 15px;
	box-sizing: border-box;
	border: 2px solid #161824;
	border: 2px solid var(--sub-bg-dark);
	border-radius: 8px;

	display: flex;
	align-items: center;
	position: relative;
	column-gap: 1rem;
}

.QMk6El8e input {
	position: absolute;
	background: none;
	border: none;
	/*margin-left: 15px;*/
	width: calc(100% - (2.5rem + 15px));
	color: #ffffff;
	color: var(--white)
}

.tzme_f68 {
    display: flex;
    flex-wrap: wrap;
	column-gap: .5rem;
	row-gap: .5rem;
}


.nfL64KaM input {
	width: 100%;
	padding: 5px 15px 5px 15px;
	margin-top: 1rem;
	margin-bottom: .5rem;
	box-sizing: border-box;
	border: 2px solid #01000D;
	border: 2px solid var(--bg-dark);
	border-radius: 10px;

	display: flex;
	align-items: center;
	position: relative;
}

.R72S2xmZ {
	background: none;
	border: none;
	color: #ffffff;
	color: var(--white);
/*	width: 100%;*/
	flex: 1 1
}

.guazhlts {
	width: 100%;
	padding: 0 15px;
	box-sizing: border-box;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border: none;
	border-radius: 10px;

	display: flex;
	align-items: center;
	position: relative;
	column-gap: 1rem;
}

.guazhlts input {
	position: absolute;
	background: none;
	border: none;
	margin-left: 2rem;
	width: calc(100% - (2.5rem + 60px));
	color: #ffffff;
	color: var(--white)
}


.zNUO3H9h {
	width: calc(100% - 30px) !important;
	margin-left: 0 !important
}

.XjQR68M2 {
	margin: 0 0 0 auto !important;
}

.GlnFH7TQ {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 1rem;
	column-gap: 1rem
}

.Km3KG_YB {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 1rem;
	column-gap: 1rem
}

._2zZWl8Nv {
	position: absolute;
	background-color: #01000D;
	background-color: var(--bg-dark);
	padding: 5px 20px;
	display: flex;
	flex-direction: column;
	right: 30px;
	top: 65px;
	border-radius: 10px;
	z-index: 999999999999;
/*	row-gap: .5rem;*/
    max-height: 75%;
    overflow-y: scroll;
}

.EIIeqW69 {
    grid-column-start: 2;
    display: flex;
    justify-content: flex-end;
    column-gap: 1rem;
    margin-top: .5rem;
}

.EzR5qPv5 {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	color: #ffffff;
	color: var(--white);
	position: absolute;
	left: 10px
}

.jK3zEdxk button {
	background: none;
	border: none;
	color: white;
	text-decoration: underline
}

.eujDlRRS {
	background: none;
	border: none;
	padding: 5px 0;
}

.eujDlRRS p {
	color: white;
	text-align: left;
}

.Us1gAJ5x {
	display: flex;
	margin-top: 1rem
}

.NTMHBSYc {
	width: 40px;
	aspect-ratio: 1;
	background-color: #ffffff;
	background-color: var(--white);
	border: none;
	color: #01000D;
	color: var(--bg-dark);
	border-radius: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
}

._eFV2ICY {
	padding: 5px 15px;
	box-sizing: border-box;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	color: #ffffff;
	color: var(--white);
	border: none;
	border-radius: 5px;

	display: flex;
	align-items: center;
	justify-content: center;
}

.Xh3PNcYv {
	position: absolute;
	top: 80px;
	right: 10px;
	padding: 5px 15px;
	box-sizing: border-box;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	color: #ffffff;
	color: var(--white);
	border: none;
	border-radius: 5px;

	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
}

.WhDm920a {
	width: -webkit-max-content;
	width: max-content;
	margin: 0 0 0 auto;
	padding: 5px 15px;
	box-sizing: border-box;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	color: #ffffff;
	color: var(--white);
	border: none;
	border-radius: 5px;

	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
}

.Iwihoh2F {
	background-color: red;
	cursor: default
}

.Twm_ouXC {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 5px 15px;
	box-sizing: border-box;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	color: #ffffff;
	color: var(--white);
	border: none;
	border-radius: 5px;

	display: flex;
	align-items: center;
	justify-content: center;
}

.SgeV9u_x {
	margin: 10px 0 0 auto;
}

.cW9M6CpF {
	margin: 0 0 0 auto
}

.tQu8tccI {
	margin: 10px 0 25px auto;
}

.MHLxdEDq {
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr;
	margin-bottom: 1rem;
}

.CrTCspuT {
	display: flex;
	column-gap: 1rem;
}

.MHLxdEDq button {
	margin: 0 0 0 auto;
	border: none;
	background: none;
	color: #ffffff;
	color: var(--white);
	border-bottom: 1px solid #01000D;
	border-bottom: 1px solid var(--bg-dark);
	padding: 0 5px 5px 5px
}

.AvLpekTK {
	border-bottom: 2px solid #0D7AC7 !important;
	border-bottom: 2px solid var(--accent-1) !important;
}

.TViW3591 {
	margin-right: 2.75rem;
}


.amLiXUKX {
	height: 100%;
	overflow-y: scroll;
	width: 100%;
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	grid-template-columns: repeat(4, 1fr);
	grid-row-gap: 10px;
	row-gap: 10px;
	grid-column-gap: 10px;
	column-gap: 10px;
	margin-top: .75rem;
}

.amLiXUKX div {
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border-radius: 10px;
}

.NF2meK9H {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.OUu4aLgr {
	display: flex;
	margin: 0 0 0 auto;
	column-gap: 1rem;
	margin-top: 1.5rem;
}

.OUu4aLgr button {
	background: none;
	border: none;
	color: #ffffff;
	color: var(--white);
}

.u9uW8kMs {
/*	height: 55vh;*/
	width: 100%;
	position: relative
}

.xM8axV6g {
	width: 55%;
    height: calc(100% + 5rem);
    background-color: #ffffff;
    background-color: var(--white);
    position: absolute;
    top: 0;
	left: 50%;
	transform: translate(-50%, 0);
}

.iPTzOssI {
	height: 100%;
	width: 100%;
	position: relative;

	display: grid;
	grid-template-rows: auto 25% auto 1fr;
	grid-row-gap: 1rem;
	row-gap: 1rem;
	padding: 10px;
	box-sizing: border-box;
}

.Io0C1xc2 {
	position: absolute;
    top: -15px;
	left: 50%;
	transform: translate(-50%, -15px);

	border-radius: 100%;
	height: 50px;
	width: 50px;
	background-color: #01000D;
	background-color: var(--bg-dark)
}

.zCxC4ffa {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: 30% 1fr;
	color: #01000D;
	color: var(--bg-dark)
}

.zCxC4ffa img {
	width: 100%;
}

.uz6WVUWH {
	margin: 0 0 0 auto;
	display: flex;
	flex-direction: column;
	text-align: right;
}

.wJBn6T2w {
	width: calc(100% + 22px);
    margin: 0 -11px;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    color: #ffffff;
    color: var(--white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    row-gap: .25rem
}

.wJBn6T2w img {
  width: 100%; /* Stretch to fit width */
  height: 100%; /* Stretch to fit height */
  object-fit: fill; /* Distorts the image */
}

.zxk92Zg8 {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 1rem;
	column-gap: 1rem;
	grid-row-gap: 1rem;
	row-gap: 1rem;
	color: #01000D;
	color: var(--bg-dark)
}

.JHzQeJy2 {
	display: flex;
	flex-direction: column;
	row-gap: .15rem
}

.JMHKFGy2 {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.JMHKFGy2 img {
	width: 40%;
}

.Ch9Wjffb {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-rows: auto 1fr;
	grid-row-gap: 2rem;
	row-gap: 2rem;
}

.zgqv5mKa {
	width: 100%;
}

.zgqv5mKa button {
	margin-top: 7.5px;
}

.hDweC2ed {
	box-sizing: border-box;
}

.Gd5HhTQV {
	box-sizing: border-box;
}

.VeSKa4ux {
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border: none;
	border-radius: 10px;
	height: 50px;
}

.VeSKa4ux textarea {
	background: none;
	border: 1px solid #2d2f39;
	max-width: 100%;
	width: 100%;
	color: #ffffff;
	color: var(--white);
	height: 100%;
	max-height: 100%;
}

.fOPtNFNS {
	display: flex;
	flex-direction: column;
	row-gap: .75rem;
}

.cFYary0_ {
	width: 100%;
	padding: 5px 15px 5px 5px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	justify-content: center;
	grid-column-gap: .5rem;
	column-gap: .5rem;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border-radius: 50px;
}

.euqK26DV {
	height: 32px;
	aspect-ratio: 1;
	background-color: #ffffff;
	background-color: var(--white);
	color: #161824;
	color: var(--sub-bg-dark);
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.xqmtR2Rz {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.AuCjfb_T {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.AuCjfb_T p {
	color: #161824 !important;
	color: var(--sub-bg-dark) !important;
}

.hfGHx9L9 {
	display: grid;
	grid-template-columns: repeat(4, calc(35px + 1.25rem));
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	padding: 0 2.5px;
	box-sizing: border-box;
}

.qcDNPAcs {
	width: 100%;
	border: 1px solid #ffffff;
	border: 1px solid var(--white)
}

.Q8MHhv0z {
	width: 100%;
	border: 1px dashed #ffffff;
	border: 1px dashed var(--white)
}

.mRqTDBsI {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
}

.v2XYRmmH {
    background: none;
    border: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.GYBgpIWB {
	z-index: 9999999999;
    max-width: 100%;
    width: 100%;
    padding: 5px 15px 15px 15px;
    box-sizing: border-box;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    border: none;
    border-radius: 5px;
    height: auto;
    min-height: 200px;
    max-height: 300px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    position: absolute;
}

.kUDqfF4I {
	z-index: 9999999999;
    max-width: 100%;
    width: calc(100% - 50px);
    padding: 5px 15px 15px 15px;
    box-sizing: border-box;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    border: none;
    border-radius: 5px;
    margin-top: 10px;
    height: auto;
    min-height: 200px;
    max-height: 300px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    position: absolute;
}

.xWBu8evb {
	background: none;
	border: none;
	border-bottom: 1px solid #01000D;
	border-bottom: 1px solid var(--bg-dark);
	padding: 10px 0;
	display: grid;
	grid-template-columns: 100px 1fr;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	color: var(--white);
	text-align: left;
	margin-top: 0 !important;
}

.xWBu8evb:hover {
	background-color: white;
	color: #161824;
	color: var(--sub-bg-dark);
	margin: 0 -30px;
	padding: 10px 30px;
}

.scR8yJI_ {
	display: grid;
	grid-template-rows: auto 1fr
}

.WpZPHOkN {
	text-align: center;
    margin: auto 0;
    padding-top: 5px;
}

.HqhfyZCg {
	display: flex;
	column-gap: 10px;
	margin-top: 5px;
	align-items: center
}

.yxpi_Ka8 {
	height: 8px;
	width: 8px;
	border-radius: 100%;
	background-color: #3CA259;
	background-color: var(--success-green);
}

.Z6wCy8z9 {
	background: #01000D;
	background: var(--bg-dark);;
	border: 3px solid rgba(13, 122, 199,0.3);
	max-width: 100%;
	padding: 10px;
	width: 100%;
	color: #ffffff;
	color: var(--white);
	height: 50px;
	border-radius: 10px;
	/*margin-bottom: 5px;*/
	transition: border 0.3s ease;
	resize: none
}

.T4HUPZ3R {
	background: #01000D;
	background: var(--bg-dark);;
	border: 3px solid rgba(13, 122, 199,0.3);
	max-width: 100%;
	padding: 10px;
	width: 100%;
	color: #ffffff;
	color: var(--white);
	height: 120px;
	max-height: 120px;
	border-radius: 10px;
	/*margin-bottom: 5px;*/
	transition: border 0.3s ease;
	resize: none
}

.T4HUPZ3R:focus, .Yg1zeP1C {
	border: 3px solid rgba(13, 122, 199,1);
	position: relative;
/*	display: flex;
	align-items: center;
	justify-content: center;*/
}


.Y8vB986J {
	border: 3px solid red;
}




.K0YiHqIk {
	background: #161824;
	background: var(--sub-bg-dark);;
	border: none;
	max-width: 100%;
	padding: 10px;
	width: 100%;
	color: #ffffff;
	color: var(--white);
	height: 35px;
	max-height: 35px;
	border-radius: 5px;
	margin-bottom: 5px;
}

.NpHMerMm {
	display: grid;
	grid-template-columns: 200px 1fr;
	align-items: center;
	grid-column-gap: .75rem;
	column-gap: .75rem;
	position: relative;
	z-index: 999999999;
}

.VE0RUKXh {
	position: absolute;
	left: 0;
	top: 40px;
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: 3px dashed #161824;
	border: 3px dashed var(--sub-bg-dark);
	border-top: 0;
	width: 200px;
	padding: 10px;
	box-sizing: border-box;
	z-index: 99999999999999999
}

.VE0RUKXh button {
	width: 100%;
	padding: 10px 0;
	box-sizing: border-box;
	color: #ffffff;
	color: var(--white);
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tsNmMVUZ {
	background-color: #01000D;
	background-color: var(--bg-dark);
	width: 100%;
	padding: 10px 0;
	box-sizing: border-box;
	border: 3px dashed #161824;
	border: 3px dashed var(--sub-bg-dark);
	border-radius: 5px;
	color: #ffffff;
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 1rem
}

.QKGi0wGs {
	background: #01000D;
	background: var(--bg-dark);;
	border: 3px solid rgba(13, 122, 199,0.3);
	max-width: 100%;
	padding: 10px;
	width: 100%;
	color: #ffffff;
	color: var(--white);
	height: 120px;
	max-height: 120px;
	resize: none;
	border-radius: 5px;
	margin-bottom: 5px;
	resize: none;
    grid-column-end: 3;
    grid-column-start: 1;
    display: flex;
}

.SY_N8olI {
    z-index: 9999999999;
    max-width: 100%;
    width: calc(100% - 50px);
    padding: 5px 15px 15px 15px;
    box-sizing: border-box;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    border: none;
    border-radius: 5px;
    height: auto;
    max-height: 300px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

.xWBu8evb {
	background: none;
	border: none;
	border-bottom: 1px solid #01000D;
	border-bottom: 1px solid var(--bg-dark);
	padding: 10px 0;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 150px 150px 1fr;
	grid-column-gap:1rem;
	column-gap:1rem;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	color: var(--white);
	text-align: left;
	margin-top: 0 !important;
}

.qmK82lO7 {
	top: 60% !important
}

.Q58KwcAS {
	top: 45% !important
}

.xWBu8evb:hover {
	background-color: white;
	color: #161824;
	color: var(--sub-bg-dark);
	margin: 0 -30px;
	padding: 10px 30px;
}

.okzsXHxj {
	display: flex;
	align-items: center;
	column-gap: 7.5px;
	margin-bottom: 10px
}

.nFLoelrl {
	background: none;
	border: none;
	padding: 2.5px 10px;
	color: #ffffff;
	color: var(--white);
	border-bottom: 2px solid #01000D;
	border-bottom: 2px solid var(--bg-dark);
}

.TIRYdf9v {
	border-bottom: 2px solid #0D7AC7;
	border-bottom: 2px solid var(--accent-1);
}

.GBTCVyWE {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	position: relative;
}

.GBTCVyWE button {
	background: none;
	border: none;
	color: white;
}

.uJbbmwbv {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.RroR29E1 {
	display: flex;
	align-items: center;
	column-gap: 7.5px;
	margin: 1.5rem 0 0 0
}

.jah3HMqV {
	background: none;
	border: none;
	padding: 2.5px 10px;
	color: #ffffff;
	color: var(--white);
	border-bottom: 2px solid #161824;
	border-bottom: 2px solid var(--sub-bg-dark);
}

.HZ1qzKdI {
	border-bottom: 2px solid #0D7AC7;
	border-bottom: 2px solid var(--accent-1);
}


/* 
==============================
 PARENT WIDGET
==============================
*/
.DcMhTZK4 {
  width: 100%;
  height: 100%;
  background-color: #161824;
  background-color: var(--sub-bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  border: 1px solid #2d2f39
}

/* 
==============================
 CAROUSEL WRAPPER
==============================
*/
.TBA1Cs0U {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.QYbV3HQw {
	position: absolute;
  border: none;
  background: none;
  color: #999;
  font-size: 24px;
  cursor: pointer;
  margin: 0 1rem;
  z-index: 5;
  transition: color 0.3s ease;
}

.MFRhXrm4 {
	left: 5px;
}

.KL_UUjbp {
	right: 5px;
}

.QYbV3HQw:hover {
  color: #fff;
}

.zJ52iI5y {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.LeyTFcQ_ {
  position: absolute;
  bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  z-index: 10;
}
.qVPoF_P5 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid #aaa;
  background-color: transparent;
  margin: 0 3px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.vd1I0yh5 {
  background-color: #fff;
  transform: scale(1.2);
}

/* 
==============================
 SLIDES
==============================
*/
.Lo94naT7 {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.6s ease;
}

.CgPNoupp {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.j0X7Ph_A {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}
.jzddc7Tu {
  transform: translateX(-100%);
  opacity: 0;
  z-index: 1;
}
.FcCm1Dxq {
  transform: translateX(100%);
  opacity: 0;
  z-index: 1;
}

/* 
==============================
 MAIN STAT (Centered)
==============================
*/
.X_9MHbIE {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.d4VDeJQO {
  font-size: 40px;
}

.dAEqj_77 {
  font-size: 36px;
  font-weight: 700;
  margin: 1rem 0 ;
}

.uZyHe5so {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  opacity: 0.9;
}

.LE1Ho_hZ {
  font-size: 14px;
  font-weight: 300;
  opacity: 0.7;
  margin: 0;
}

/* 
==============================
 TWO SMALL MODULES ROW
==============================
*/
.kmRrcYbd {
  display: flex;
  column-gap: 1rem;
  justify-content: center;
}

.ifEBkTf7 {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  column-gap: 0.5rem;
}

.MSrwGZb0 {
  font-size: 18px;
  color: #fff;
}

.H17lTY5c {
  font-size: 12px;
  opacity: 0.8;
  margin: 0;
}

.SrMHwarC {
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

._MHGzrw8 {
	display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1rem;
}

.LcAXh5xU {
	display: flex;
	flex-direction: column;
	align-items: baseline
}

.FPWtKa22 {
    position: absolute;
    bottom: 5rem;
    background-color: red;
    width: calc(100% - 50px);
    padding: 10px;
    border-radius: 5px;
}

.rtUGhs36 input[type=number] {
	margin: 0 0 0 auto;
	background: none;
}

.rtUGhs36 input[type=number]::-webkit-inner-spin-button {
    opacity: 1;
    padding-left: 2.5px;
    box-sizing: border-box;
}

.flQbDxQe {
	position: relative;
	height: calc(100% - 250px);
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: -webkit-max-content;
	grid-template-rows: max-content;
	grid-row-gap: 1rem;
	row-gap: 1rem;
	grid-column-gap: 1rem;
	column-gap: 1rem;
	margin-top: 2rem;
	overflow-y: scroll;
}

.MeegnK1M {
	background-color: red !important;
}

._pfMN49f {
	background-color: #2d2f39 !important
}

.nl_H4KnO {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
/*	grid-template-rows: max-content;*/
	grid-row-gap: 1rem;
	row-gap: 1rem;
	grid-column-gap: 1rem;
	column-gap: 1rem;
	position: relative;
/*    flex: 1;*/
    margin-top: 1rem;
    /*overflow-y: scroll;*/
}






.GN31ZQdi {
	position: relative;
	background: none;
	border: none;
	text-align: left;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	z-index: 999;
	cursor: pointer;
}

.RBCFIa80 {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	row-gap: .5rem;
	text-align: left;
	border: 1px solid #2d2f39;
	
	background-color: #161824;
	
	background-color: var(--sub-bg-dark);
	color: #ffffff;
	color: var(--white);
	border-radius: 10px;
	/*height: 115px;*/
	position: relative;
	pointer-events: none;
}

.fetYfXsb {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	row-gap: .5rem;
	text-align: left;
	border: 1px solid #2d2f39;
	
	background-color: #161824;
	
	background-color: var(--sub-bg-dark);
	color: #ffffff;
	color: var(--white);
	border-radius: 10px;
	height: 100px;
	position: relative;
	pointer-events: none;
}

.dVr8tLAM {
	background-color: #01000D;
	background-color: var(--bg-dark)
}

.UWjK2JSj {
	grid-column-start: 1;
	grid-column-end: 3;	
	pointer-events: auto !important; 
}

.UWjK2JSj .fetYfXsb,
.UWjK2JSj .RBCFIa80 {
	border: 1px solid #0D7AC7;
	border: 1px solid var(--accent-1)
}

.fetYfXsb label,
.RBCFIa80 label {
	pointer-events: none;
}

.nl_H4KnO .wxckIraM {
	cursor: default;
	pointer-events: none;
}

.GN31ZQdi:not(.wxckIraM):hover:not(:has(.pLGmCfBv:hover)) > .fetYfXsb,
.GN31ZQdi:not(.wxckIraM):hover:not(:has(.pLGmCfBv:hover)) > .RBCFIa80,
.GN31ZQdi:not(.wxckIraM):hover:not(:has(.pLGmCfBv:hover)) > .fetYfXsb .NNp0eUHP,
.GN31ZQdi:not(.wxckIraM):hover:not(:has(.pLGmCfBv:hover)) > .RBCFIa80 .NNp0eUHP {
	border: 1px solid #0D7AC7;
	border: 1px solid var(--accent-1)
}


.NNp0eUHP {
	position: absolute;
	bottom: -10px;
}







.AoqmUkDe {
	margin-top: 1rem;
	background-color: #0D7AC7;
	background-color: var(--accent-1)
}

.AoqmUkDe .O5sZ4BTP .qkuPGaqQ i,
.AoqmUkDe .Cf9I05tL .Ig_6AX9T .ygtA05vi i {
	color: #0D7AC7;
	color: var(--accent-1);
}

.jj_MTKmc {
	background-color: #3CA259;
	background-color: var(--success-green)
}

.VDHCkSmm i {
	color: #3CA259;
	color: var(--success-green)
}

.Tfm9s_ae {
	border: 1px solid #2d2f39;
	text-align: left;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	/*row-gap: .5rem;*/
/*	justify-content: center;*/
	
	background-color: #161824;
	
	background-color: var(--sub-bg-dark);
	color: #ffffff;
	color: var(--white);
	border-radius: 10px;
	height: -webkit-max-content;
	height: max-content;
}

.OzZddVce {
	margin-top: .5rem;
}

.O5sZ4BTP {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-column-gap: .5rem;
  column-gap: .5rem;
  pointer-events: none;
  position: relative;
}

.MNVzdt_E {
  opacity: 0.4 !important;
  filter: brightness(90%);
  pointer-events:none !important;
}

.qc48Z90t {
	box-sizing: border-box;
	padding: 20px 15px 10px 15px;
	color: #ffffff;
	color: var(--white);
    border: 1px solid #2d2f39;
    border-radius: 7.5px;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    z-index: 9999999999 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.15s ease !important;
}

.WA8ZmjzI {
	display: flex;
	align-items: center;
	column-gap: .75rem;
	margin-bottom: .75rem;
}

.CZnFSzI9 {
	background: none;
	border: none;
	color: white;
	pointer-events: auto;
	display: flex;
	margin-top: 5px;
	column-gap: .75rem;
	margin: 0 -15px;
	padding: 10px 15px;
	z-index: 9999999999999
}

.CZnFSzI9 i {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.CZnFSzI9:hover {
	transition: all 0.15s ease !important;
	background-color: #0D7AC7;
	background-color: var(--accent-1)
}

.sZ1wzXcR {
	display: grid;
	grid-column-gap: .5rem;
	column-gap: .5rem;
	grid-template-columns: auto 1fr;
}

.qkuPGaqQ {
	height: 38px;
	aspect-ratio: 1;
	background-color: #ffffff;
	background-color: var(--white);
	color: #161824;
	color: var(--sub-bg-dark);
	border-radius: 7.5px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nlbNCy2d {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr;
	grid-row-gap: .5rem;
	row-gap: .5rem;
	grid-column-gap: 1rem;
	column-gap: 1rem;
	height: 100%;

}

.udAvIJeD {
	position: absolute;
	top: 85px;
	right: 10px;

	width: 25px;
	height: 25px;
	border-radius: 100%;
	border: none;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	color: white;

	display: flex;
	align-items: center;
	justify-content: center;
}

.XCtGICDG {
	display: flex;
	flex-direction: column;
	row-gap: 5px;
	height: -webkit-max-content;
	height: max-content;
}


.XCtGICDG button {
    padding: 5px 25px;
    box-sizing: border-box;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    border: 1px solid #161824;
    border: 1px solid var(--sub-bg-dark);
    color: white;
    border-radius: 5px;
}

.swCKYqQ_ {
	border: 1px solid #0D7AC7 !important;
	border: 1px solid var(--accent-1) !important;
}

.XCtGICDG button p {
	font-size: 12px;
}

.vcY1KTA4 {
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	overflow-y: scroll;
    margin-bottom: -40px;
    padding-bottom: 40px;
    box-sizing: border-box;
    height: 100%;
}

.gpK1SbTd {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 1rem;
	overflow-y: scroll;
    margin-bottom: -40px;
    padding-bottom: 40px;
    box-sizing: border-box;
    height: 100%;
    color: white;
    text-align: center;
}

.z0m2A1az {
	width: 100%;
	display: grid;
	grid-template-columns: auto auto 1fr;
	color: white;
	grid-column-gap: 1rem;
	column-gap: 1rem;
}

.CKj0A3ji {
	width: 100%;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border: 1px solid #161824;
	border: 1px solid var(--sub-bg-dark);

	border-radius: 5px;
	padding: 10px;
	text-align: left;
	box-sizing: border-box;
	border: none;

	display: grid;
	grid-template-columns: 1fr auto;
	grid-column-gap: .5rem;
	column-gap: .5rem;
}

.ANzfOO5m {
	row-gap: 1.5rem
}

.lChW8TQp {
	width: 20px;
	height: 20px;
	background: none;
	border: none;

	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}

.sa6G5SIf {
    display: grid;
	padding: 0 30px;
    box-sizing: border-box;
}

.Ltgdd4r6 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 1rem
}

.Ltgdd4r6 p {
    width: 75%;
    text-align: center;
    word-wrap: break-word;
}

.Py_amTwq {
	width: 60px;
	aspect-ratio: 1;
	background-color: #ffffff;
	background-color: var(--white);
	border-radius: 100%;
	color: #161824;
	color: var(--sub-bg-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}


.Py_amTwq i {
	font-size: 25px;
}

.d1BSIXGh {
	width: 70px;
	aspect-ratio: 1;
	background-color: #ffffff;
	background-color: var(--white);
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.d1BSIXGh i {
	font-size: 30px;
	color: #01000D !important;
	color: var(--bg-dark) !important;
}

.T0nTRY0d {
	display: grid;
    grid-template-columns: auto 1fr;
    width: calc(100% + 80px);
    margin: 0 -30px;
    padding: 0 30px;
    box-sizing: border-box;
}

.jmiS6xd0 {
	display: flex;
	align-items: center;
	column-gap: .75rem;
	position: absolute;
	left: 20px;
	padding: 0 10px;
	box-sizing: border-box;
	color: #ffffff;
	color: var(--white);
/*	z-index: 9999999;*/
}

.uYOJ0Ksf {
	display: flex;
	align-items: center;
	column-gap: .75rem;
	position: absolute;
	left: 10px;
	padding: 0 10px;
	box-sizing: border-box;
}

.Ig_6AX9T {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 0 auto;
}

.Ig_6AX9T input[type="number"] {
  width: 50px;
  height: 20px;
  text-align: center;
  border: 1px solid #ffffff;
  border: 1px solid var(--white);
  border-radius: 5px;
  outline: none;
  -webkit-appearance: textfield;
          appearance: textfield;
  color: #ffffff;
  color: var(--white);

  display: flex;
  align-items: center;
  justify-content: center;
}

.Ig_6AX9T input[type="number"]::-webkit-inner-spin-button,
.Ig_6AX9T input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
  margin: 0;
}

.Ig_6AX9T input[type="number"] {
  -moz-appearance: textfield;
}

.ygtA05vi {
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  background-color: var(--white);
  color: #161824;
  color: var(--sub-bg-dark);
  border: 1px solid #ffffff;
  border: 1px solid var(--white);
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}


.JiePVgyf {
	background: none;
}

.GulCOpu8 {
    background-color: #ffffff11;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
    color: #ffffff;
    color: var(--white)
}

.lV1PHCXV {
	background: none;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	color: var(--white)
}

.JBdaSc3J {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    padding: 0 0 7.5px 0;
    box-sizing: border-box;
}

.JBdaSc3J::placeholder {
	font-size: 12px !important;
}

.QdE3BWgi {
	background-color: red;
	color: #ffffff;
	color: var(--white)
}

.H765KoNo { 
	color: #ffffff; 
	color: var(--white);
	position: absolute;
	top: 45%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0 10px;
	box-sizing: border-box;
	text-align: center;
}

.N9eTX9Dh {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.N9eTX9Dh img {
	height: 60%
}

.gz6Bw9Og {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gz6Bw9Og img {
	height: 30%	
}

.zOz38aDB {
  cursor: pointer;
}

.zOz38aDB p {
    color: #0D7AC7 !important;
    color: var(--accent-1) !important;
    text-decoration: underline !important;
}

.SuRZ9G5W {
	height: 40%;
	position: absolute;
	left: 50%;
  	top: 50%;
  	transform: translate(-50%, -50%);
}

.HzhpOnYi {
	height: 20px
}

.OyYDsdPg {
	position: fixed;
	align-self: center;
	top: 10px;
	background-color: #ff4d4f;
	padding: 10px 30px;
	max-width: 50%;
	text-align: center;
	animation: QzSBF2dU 0.4s ease-out;
	border-radius: 7.5px;
	left: 50%;
	transform: translate(-50%, 0);
	z-index:99999999
}

.BqIyMXOy {
	position: absolute;
	top: 20px;
	right: 0;
	height: -webkit-max-content;
	height: max-content;
	display: flex;
	flex-direction: column;

    border-radius: 10px;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    padding: 10px 20px;
    row-gap: .25rem;
    box-sizing: border-box;
    border: 1px solid #2d2f39;
}

.BqIyMXOy button {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	grid-column-gap: 1rem;
	column-gap: 1rem;
	text-align: left;
}

@keyframes QzSBF2dU {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.bFtlYUnJ {
  font-size: 13px;
  margin: 0;
  color: white;
  font-weight: 600
}

.k2g2eeRB {
	margin-bottom: 1rem;
}

.uJbbmwbv p {
	margin-bottom: 3rem;
}

.TtPPxsf2 {
	max-width: 100%;
}

.Vu29AdHP {
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	margin: 0 -20px;
	padding: 5px 20px;
}

.loCqN4fQ {
	width: 100%;
	padding: 10px 20px;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	border-radius: 10px;
	text-align: center;
}

.MwPL5e4l {
	margin-top: 1.5rem;
	width: 100%;
	padding: 10px 20px;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	border-radius: 10px;
	text-align: center;
}

.Y4Ebizl4 {
	margin: 1.5rem 0;
	width: 100%;
	padding: 10px 20px;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	border-radius: 10px;
	text-align: center;	
}

.GfLNt_1d {
	width: 100%;
	padding: 10px 20px;
	background-color: red;
	border-radius: 10px;
	text-align: center;
	color: #ffffff;
	color: var(--white);
	border: none;
}

.U1HIPhhF {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	width: 100%;
}

.XiQtuVCm {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	margin-top: .5rem;
	row-gap: 1.5rem;
	position: relative;
	width: 100%;
}

.XxSRASQr {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 1rem;
	column-gap: 1rem;
}

.r7enC1lR {
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 15px;
	padding: 10px;
	box-sizing: border-box;
	display: grid;
	grid-template-rows: auto 1fr;
	grid-row-gap: .35rem;
	row-gap: .35rem;
	text-align: left;
}

.r7enC1lR:hover {
	border: 1px solid #0D7AC7 !important;
	border: 1px solid var(--accent-1) !important;
}

.KaXMLGk4 {
	border: 1px solid #0D7AC7 !important;
	border: 1px solid var(--accent-1) !important;
}


.WICZldrJ {
	display: flex;
	align-items: center;
	column-gap: .75rem;
	color: #ffffff;
	color: var(--white)
}

.MTKm9vBz {
	color: #0D7AC7;
	color: var(--accent-1)
}

.jUkyURTY {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;

	background-color: #161824;

	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 15px;
	padding: 15px 15px 0 15px;
	box-sizing: border-box;
}

.eWGVAfJl {
	display: flex;
	align-items: center;
	column-gap: .75rem;
	color: #ffffff;
	color: var(--white);
	margin-bottom: 1rem
}

.funqkpfY {
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-column-gap: 1rem;
	column-gap: 1rem;
	margin-top: 1rem;
}

.uZVIwb7A {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.NW9JtYjs {
	width: 100%;
	display: flex;
	flex-direction: column;
	row-gap: .25rem;
	margin-top: -3px;
}

.yN9mlDcT {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	display: grid;
	grid-template-rows: auto 1fr;
	grid-row-gap: .5rem;
	row-gap: .5rem;
	text-align: left;

	border: 1px solid #2d2f39;
	background-color: #01000D;
	background-color: var(--bg-dark);
	color: #ffffff;
	color: var(--white);
	border-radius: 10px;
	position: relative;
	pointer-events: none;
}

.yN9mlDcT span {
	color: #0D7AC7;
	color: var(--accent-1)
}

._UpBRnH9 {
	padding-right: .75rem;
}

.E48MedgO {
	display: grid;
	grid-template-columns: 60% 1fr;
	grid-column-gap: 1rem;
	column-gap: 1rem;
	grid-row-gap: 1rem;
	row-gap: 1rem;

	flex: 1 1 auto;
	min-height: 0;
}

.V_PUNNeU {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-rows: auto 1fr;
	grid-row-gap: 1rem;
	row-gap: 1rem;
}

.m5XGP3Wv {
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 15px;
	padding: 15px 15px 0 15px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column
}

.exDM_tkp {
	height: 100%;
	width: 100%;
	overflow-y: scroll;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 15px;
	padding: 15px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	color: var(--white);
	column-gap: 1rem;
}

.K8PWbk_j {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
}

.Vus8xUzI {
	color: #ffffff;
	color: var(--white);
	text-align: center;
	display: flex;
	flex: 1 1;
	align-items: center;
	justify-content: center;
	margin-bottom: 3rem;
	padding: 0 4rem;
}

.NyoBs5v1 {
	color: #ffffff;
	color: var(--white);
	text-align: center;
	display: flex;
	flex: 1 1;
	align-items: center;
	justify-content: center;
	margin-bottom: 3rem;
	padding: 0 2rem;
}

.Vus8xUzI span, .NyoBs5v1 span {
	color: #0D7AC7;
	color: var(--accent-1)
}

.Or7p68cb {
	flex: 1 1;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.Vq3VaZlF {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	align-items: center;
	justify-content: center;

  	width: 100%;
}


.SN860hi0 {
	width: 100%;
	aspect-ratio: 1;
	background: none;
	border: none;
	color: #0D7AC7;
	color: var(--accent-1)
}

.Ln5adJzY {
    column-gap: .6rem;
    display: flex;
    width: 100%;
}

.J7rzs3T9 {
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    border: 1px solid #161824;
    border: 1px solid var(--sub-bg-dark);
    border-radius: 6px;
    align-items: center;
    box-sizing: border-box;
    column-gap: 7.5px;
    cursor: pointer;
    display: flex;
    padding: 5px 8px 5px 4px;
}

.cZcWAFYC {
	background-color: #0D7AC7;
	background-color: var(--accent-1);
}

.cZcWAFYC > .Cpr8irwN {
	background-color: #ffffff;
	background-color: var(--white)
}

.cZcWAFYC > .Cpr8irwN i {
	color: #0D7AC7;
	color: var(--accent-1)
}
 
.Cpr8irwN {
	background-color: #01000D;
	background-color: var(--bg-dark);
	align-items: center;
    aspect-ratio: 1;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 5px;
}

.Cpr8irwN i,
.J7rzs3T9 p {
	color: #ffffff;
	color: var(--white)
}

.cOpF8hH7 {
	flex: 1 1;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 80px;
	cursor: pointer;
}

.cOpF8hH7 p {
	color: #ffffff;
	color: var(--white)
}


.OKxO_ozM {
	padding: 25px;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	display: flex;
    flex-direction: column;
	color: #ffffff;
	color: var(--white);
	position: relative;
}

.cjvqSy5B {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    height: calc(100% - 110px);
    width: 100%
}

.KbebpcH5 {
	position: absolute;
	align-self: center;
	background-color: #ff4d4f;
	padding: 10px 30px;
	width: 80%;
	max-width: 80%;
	text-align: center;
	border-radius: 7.5px;
	bottom: 25px;
	left: 25px;
	z-index:99999999
}

.BikO_WwV {
	background-color: #ff4d4f;
	color: #ffffff;
	color: var(--white);
	cursor: default
}

.RAzpweoo {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.RAzpweoo img {
	height: 30%
}

.ykmAdRbN {
	margin-top: 10px;
}

.ykmAdRbN span {
	color: #0D7AC7;
	color: var(--accent-1)
}

._EF73K3p {
  opacity: 0;
  animation: O5jrtgkG 200ms ease-out forwards;
}

.POjVuHQ8 {
  opacity: 0;
  animation: O5jrtgkG 400ms ease-out forwards;
}

.UJjeLqGX span {
	color: #0D7AC7;
	color: var(--accent-1)
}

.bsUJTWRO {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  width: 100%;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid;
  background-color: rgba(255, 255, 255, 0.02);
  transition: all 0.3s ease;
}

.pWeZgJl0 {
	background-color: #ff4d4d;
	border-color: #ff4d4d88;
	padding: .75rem;
	margin-top: 1rem
}

/* Status-based styling */
.bsUJTWRO.zNs0vm0T {
  border-color: rgba(60, 162, 89, 0.3);
  background-color: rgba(60, 162, 89, 0.05);
}

.bsUJTWRO.zxuNntpD {
  border-color: rgba(255, 165, 0, 0.3);
  background-color: rgba(255, 165, 0, 0.05);
}

.bsUJTWRO.xeUFpaVW {
  border-color: rgba(255, 77, 77, 0.3);
  background-color: rgba(255, 77, 77, 0.05);
}

.bsUJTWRO.Ci1mtM_v {
  border-color: rgba(255, 255, 255, 0.05);
  background-color: rgba(255, 255, 255, 0.05);
}

/* Main content area */
.Ld2jXrcl {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
}

/* Left section: Icon and info */
.kAfQC9If {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  gap: 1rem;
  align-items: center;
  width: 100%
}

.jrPRtCCA {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  font-size: 18px;
  flex-shrink: 0;
}

.zNs0vm0T .jrPRtCCA {
  background-color: rgba(60, 162, 89, 0.2);
  color: #3CA259;
}

.zxuNntpD .jrPRtCCA {
  background-color: rgba(255, 165, 0, 0.2);
  color: #ffa500;
}

.xeUFpaVW .jrPRtCCA {
  background-color: rgba(255, 77, 77, 0.2);
  color: #ff4d4d;
}

.Ci1mtM_v .jrPRtCCA {
  background-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255);
}

.Liyn_Ab0 {
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
}

.k1f89M4j {
  margin: 0;
  font-size: 13px;
  color:#f8baba;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nyz7umBY {
  margin: 0;
  font-size: 13px;
  color:#ffffff;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.nyz7umBY span {
	color: #0D7AC7;
	color: var(--accent-1)
}

.rWSb8h2N {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  color: var(--white);
}

.X285AxyP {
  margin: 0;
  font-size: 12px;
  color: #ffa500;
  font-weight: 500;
}

.xeUFpaVW .X285AxyP {
  color: #ff4d4d;
}

/* Middle section: Progress bar */
.wqjOVrg6 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1;
  min-width: 200px;
}

.A5fyrajB {
  flex: 1 1;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.P4NTGJAB {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
  box-shadow: 0 0 15px currentColor;
}

.P4NTGJAB.zz7rDENW {
  background: linear-gradient(90deg, #3CA259 0%, #6bc99f 100%);
}

.P4NTGJAB.MM_31H7_ {
  background: linear-gradient(90deg, #ffa500 0%, #ffb84d 100%);
}

.P4NTGJAB.GZoJAsXG {
  background: linear-gradient(90deg, #ff4d4d 0%, #ff8080 100%);
  animation: IVDDeXjt 1s ease-in-out infinite;
}

/* -----------------------------------------------------
	Media Queries
------------------------------------------------------ */

@media (max-width: 768px) {
	.YZHcViPF {
		overflow: visible;
		overflow: initial;
		height: auto;
		min-height: 100vh;
	}

	.SztJaSFe {
	    display: flex;
	    flex-direction: column;
	}

	.DRV1Aynd {
		height: 50px;
	}

	.fwPmkbxy {
		flex-direction: column;
		overflow-y: scroll;
		display: block
	}

	.W0AZbjkz {
		margin-top: 1.25rem;
		width: 100%;
		height: auto;
		display: block;
	}

	.wpetO4hi {
		height: auto;
    	margin-bottom: 1.25rem;
    	aspect-ratio: auto;
	}

	.DcMhTZK4 {
    	height: 60%;
	}

	.acu6iWU8 {
		grid-template-rows: auto 1fr;
	}

	.hhDfWW83 {
	    grid-column-start: 1;
	    grid-column-end: 2;
	    grid-row-start: 1;
	    grid-row-end: 4;
	}

	.VIF1ugpY {
		grid-column-start: 2;
		grid-column-end: 4;
		margin-bottom: .5rem;
	}

	.lC56r4No {
	    grid-column-start: 2;
	    grid-column-end: 4;
	}

	.Zhd2qAqE {
		padding: 1.25rem;
		height: auto;
		min-height: auto;
		row-gap: 1.25rem;
		overflow: visible;
	}

	.MrZPXaiA {
		height: 75%;
        padding: 1.5rem;
	}

	.TBA1Cs0U {
		min-height: 200px;
	}
}

@media (max-width: 1200px) {
}

@keyframes O5jrtgkG {
  to {
    opacity: 1;
  }
}



.yDUlNNjk {
  padding: 10px;
  margin: 10px 0;
  color: white;
  text-align: center;
  font-weight: 600;
}

.EQT1z3u5 {
  background-color: red
}

.vVCdbMqr {
  width: 80%;
  z-index: 99999999;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  will-change: transform;
  border-radius: 7.5px;
}

.PDHXPQfI {
  animation: QzSBF2dU 0.5s ease-out forwards;
}

.oNiBcvke {
  animation: x9iXwuEw 0.5s ease-in forwards;
}

@keyframes QzSBF2dU {
  from {
    transform: translate(-50%, -100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

@keyframes x9iXwuEw {
  from {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  to {
    transform: translate(-50%, -100%);
    opacity: 0;
  }
}



/* NewEvent Validation Messages */
.nYcpNlyb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.5rem;
  pointer-events: none;
  z-index: 1000;
}

.Qdoly2ja {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 1.25rem;
  gap: 1.25rem;
  align-items: center;
  padding: .75rem 1.5rem;
  border-radius: 12px;
  pointer-events: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border: 1px solid;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.qB5gIdWr {
  border-color: rgba(255, 77, 77, 0.5);
  background: linear-gradient(135deg, rgba(255, 77, 77, 0.2) 0%, rgba(255, 77, 77, 0.1) 100%);
  animation: LvD5BgEs 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.qB5gIdWr .L2gjhFat {
  background-color: rgba(255, 77, 77, 0.25);
  color: #ff6b6b;
  box-shadow: 0 0 20px rgba(255, 77, 77, 0.2);
}

.qB5gIdWr .DW8kbqAC {
  color: #ff8080;
}

.n907Vabn {
  border-color: rgba(255, 165, 0, 0.5);
  background: linear-gradient(135deg, rgba(255, 165, 0, 0.2) 0%, rgba(255, 165, 0, 0.1) 100%);
  animation: LvD5BgEs 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.n907Vabn .L2gjhFat {
  background-color: rgba(255, 165, 0, 0.25);
  color: #ffb84d;
  box-shadow: 0 0 20px rgba(255, 165, 0, 0.2);
}

.n907Vabn .DW8kbqAC {
  color: #ffb84d;
}

.L2gjhFat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 20px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.qZL_wfkR {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.DW8kbqAC {
  margin: 0;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nD6GTiHf {
  margin: 0;
  font-size: 14px;
  color: #ffffff;
  font-weight: 500;
  line-height: 1.4;
}

.vG7lFqCE {
  padding: 0.65rem 1.25rem;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vG7lFqCE:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.vG7lFqCE:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.qGWD0mB_ {
  animation: LvD5BgEs 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.MDvxD3bF {
  animation: YbIVdEDo 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes LvD5BgEs {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes YbIVdEDo {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-30px);
  }
}

/* ===================================================
   Create Event Modal - New Design
   =================================================== */

.kOWUDrS1 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 2rem;
}

.IRSC_5FX {
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 16px;
	width: 100%;
	max-width: 580px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	animation: zfNQbkPY 0.25s ease-out;
}

@keyframes zfNQbkPY {
	from { opacity: 0; transform: translateY(-20px); }
	to { opacity: 1; transform: translateY(0); }
}

.qglnnNo7 {
	padding: 1.5rem 1.5rem 1.25rem;
	border-bottom: 1px solid #2d2f39;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-shrink: 0;
}

.uBzt2ZvE {
	margin: 0 0 0.75rem 0;
	font-size: 17px;
	font-weight: 600;
	color: #ffffff;
	color: var(--white);
}

.Uq62UkHH {
	width: 36px;
	height: 36px;
	background-color: rgba(255, 255, 255, 0.05);
	border: none;
	border-radius: 8px;
	color: #888;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.Uq62UkHH:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	color: var(--white);
}

/* Step Indicator */
.xfq8vRaN {
	display: flex;
	align-items: center;
	gap: 0;
}

.m1PV1Gcj {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.IYrFD266 {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid #3d3f49;
	color: #666;
	font-size: 10px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.COLNMFLd {
	font-size: 11px;
	color: #666;
	font-weight: 500;
	transition: color 0.2s ease;
}

.rp5Opo6i {
	width: 20px;
	height: 1px;
	background-color: #3d3f49;
	margin: 0 0.35rem;
	flex-shrink: 0;
}

.vPqBI1dx .IYrFD266 {
	background: linear-gradient(135deg, #0D7AC7 0%, #0099cc 100%);
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border-color: #0D7AC7;
	border-color: var(--accent-1);
	color: #ffffff;
	color: var(--white);
}

.vPqBI1dx .COLNMFLd {
	color: #ffffff;
	color: var(--white);
}

.nzJndcKL .IYrFD266 {
	background-color: rgba(60, 162, 89, 0.15);
	border-color: #3CA259;
	border-color: var(--success-green);
	color: #3CA259;
	color: var(--success-green);
}

.nzJndcKL .COLNMFLd {
	color: #888;
}

/* Content */
.Pxv3GWsZ {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 0 1 auto;
	min-height: 0;
}

.qUENKgnf {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	animation: O5jrtgkG 0.3s ease;
}

/* Form Elements */
.gWSPGjRb {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.JDqSvGZk {
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
	font-size: 11px;
	font-weight: 600;
}

.LYn6WXsW {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	padding: 0.75rem 1rem;
	transition: border-color 0.2s ease;
}

.LYn6WXsW:focus-within {
	border-color: #0D7AC7;
	border-color: var(--accent-1);
}

/* Regenerate days */
.Jnx4RYcL {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.Jnx4RYcL input[type="number"] {
	width: 50px;
	text-align: center;
	background: none;
	border: none;
	color: #ffffff;
	color: var(--white);
	font-size: 14px;
	outline: none;
	font-family: inherit;
	-moz-appearance: textfield;
}

.Jnx4RYcL input[type="number"]::-webkit-inner-spin-button,
.Jnx4RYcL input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.AZy52gnw {
	font-size: 13px;
	color: #888;
	font-weight: 400;
}

.PGZpyE32 {
	color: #555;
	font-size: 12px;
}

.LYn6WXsW i {
	color: #666;
	font-size: 14px;
	flex-shrink: 0;
}

.LYn6WXsW input {
	background: none;
	border: none;
	color: #ffffff;
	color: var(--white);
	font-size: 14px;
	width: 100%;
	outline: none;
	font-family: inherit;
}

.LYn6WXsW input::placeholder {
	color: #555;
}

/* Select */
.jh_eu8QU {
	position: relative;
}

.Ot0uOpCr {
	cursor: pointer;
	-webkit-user-select: none;
	        user-select: none;
}

.s8Ztp7Kq {
	border-color: #0D7AC7 !important;
	border-color: var(--accent-1) !important;
}

.LgU0ApOD {
	color: #ffffff;
	color: var(--white);
	font-size: 14px;
	flex: 1 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.O0hzsrZc {
	color: #555;
	font-size: 14px;
	flex: 1 1;
}

.bBHP6AjX {
	font-size: 12px;
	color: #666;
	transition: transform 0.2s ease;
	margin-left: auto;
}

.rdEpw1Zl {
	transform: rotate(180deg);
	color: #0D7AC7;
	color: var(--accent-1);
}

.rct74Ioe {
	background: none;
	border: none;
	color: #666;
	cursor: pointer;
	padding: 0;
	font-size: 13px;
	margin-left: auto;
	display: flex;
	align-items: center;
	transition: color 0.15s ease;
}

.rct74Ioe:hover {
	color: #ffffff;
	color: var(--white);
}

.VPpH5M5U {
	border: 1px solid rgba(13, 122, 199, 0.3);
	border-radius: 10px;
	background-color: #161824;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
	z-index: 2000;
	max-height: 260px;
	overflow-y: auto;
	animation: O9Jt8VoK 0.15s ease;
}

@keyframes O9Jt8VoK {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.F5YimGJg {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.75rem 1rem;
	border: none;
	background: none;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.12s ease;
	text-align: left;
}

.F5YimGJg:hover {
	background-color: rgba(13, 122, 199, 0.1);
	color: #ffffff;
	color: var(--white);
}

.bFJgeXxW {
	background-color: rgba(13, 122, 199, 0.08);
	color: #0D7AC7;
	color: var(--accent-1);
	font-weight: 500;
}

.bFJgeXxW i {
	color: #0D7AC7;
	color: var(--accent-1);
	font-size: 11px;
}

._EnyK2oO {
	cursor: not-allowed;
	opacity: 0.7;
}

._EnyK2oO:hover {
	background-color: rgba(13, 122, 199, 0.08);
}

.lkQzhOnU {
	padding: 1rem;
	text-align: center;
	color: #666;
	font-size: 13px;
}

.KnHc8FFA {
	padding: 0.5rem 1rem 0.25rem;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #666;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.KnHc8FFA:first-child {
	border-top: none;
}

/* Upload */
.BFDmdx6Z {
	width: 100%;
	aspect-ratio: 960 / 300;
	border-radius: 10px;
	overflow: hidden;
	transition: all 0.2s ease;
	border: 2px dashed rgba(13, 122, 199, 0.4);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.BFDmdx6Z:hover {
	border-color: #0D7AC7;
	border-color: var(--accent-1);
	background-color: rgba(13, 122, 199, 0.04);
}

.Sxz0ecrb {
	border: 1px solid #2d2f39;
	cursor: default;
}

.Sxz0ecrb:hover {
	border-color: #2d2f39;
	background: none;
}

.QNulCfcy {
	position: relative;
	width: 100%;
	height: 100%;
}

.xEirWpeM {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.Mt0p8rCb {
	position: absolute;
	bottom: 8px;
	right: 8px;
	display: flex;
	gap: 6px;
}

.ioJtzEv6 {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 6px;
	border: none;
	background: rgba(0, 0, 0, 0.7);
	color: #ffffff;
	color: var(--white);
	font-size: 12px;
	cursor: pointer;
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
	transition: background 0.15s ease;
}

.ioJtzEv6:hover {
	background: rgba(0, 0, 0, 0.85);
}

.lMFcarH8 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 6px;
	border: none;
	background: rgba(239, 68, 68, 0.7);
	color: #ffffff;
	color: var(--white);
	font-size: 12px;
	cursor: pointer;
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
	transition: background 0.15s ease;
}

.lMFcarH8:hover {
	background: rgba(239, 68, 68, 0.9);
}

.pr8sCfQs {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: rgba(255, 255, 255, 0.5);
	font-size: 14px;
	font-weight: 500;
}

.pr8sCfQs i {
	font-size: 24px;
	color: #0D7AC7;
	color: var(--accent-1);
	margin-bottom: 4px;
}

.BDnpqbIB {
	font-size: 12px;
	color: #555;
	font-weight: 400;
}

/* Rich Text Editor */
.wALt_bSV {
	border: 1px solid #2d2f39;
	border-radius: 10px;
	overflow: hidden;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	transition: border-color 0.2s ease;
}

.wALt_bSV:focus-within {
	border-color: #0D7AC7;
	border-color: var(--accent-1);
}

.lXTKsfH_ {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 6px 8px;
	border-bottom: 1px solid #2d2f39;
	background-color: rgba(255, 255, 255, 0.02);
}

.nMot44_D {
	width: 30px;
	height: 28px;
	border: none;
	border-radius: 6px;
	background: none;
	color: #888;
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.12s ease;
}

.nMot44_D:hover {
	background-color: rgba(255, 255, 255, 0.06);
	color: #ffffff;
	color: var(--white);
}

.gvQuFfDz {
	background-color: rgba(13, 122, 199, 0.15);
	color: #0D7AC7;
	color: var(--accent-1);
}

.d2MXm_kA {
	width: 1px;
	height: 18px;
	background-color: #2d2f39;
	margin: 0 4px;
}

.Vbwq3cjz {
	min-height: 100px;
	max-height: 200px;
	overflow-y: auto;
	padding: 0.75rem 1rem;
	color: #ffffff;
	color: var(--white);
	font-size: 14px;
	font-family: inherit;
	line-height: 1.6;
	outline: none;
}

.Vbwq3cjz:empty::before {
	content: attr(data-placeholder);
	color: #555;
	pointer-events: none;
}

.Vbwq3cjz a {
	color: #0D7AC7;
	color: var(--accent-1);
	text-decoration: underline;
}

.Vbwq3cjz ul,
.Vbwq3cjz ol {
	margin: 0.25rem 0;
	padding-left: 1.5rem;
}

.Vbwq3cjz li {
	margin: 0.15rem 0;
}

/* Genre Tags */
.TjMzinob {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	padding: 0.6rem 0.75rem;
	min-height: 42px;
	cursor: text;
	transition: border-color 0.2s ease;
}

.TjMzinob:focus-within {
	border-color: #0D7AC7;
	border-color: var(--accent-1);
}

.sGCuaVgK {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: rgba(13, 122, 199, 0.12);
	border: 1px solid rgba(13, 122, 199, 0.25);
	border-radius: 20px;
	color: #0D7AC7;
	color: var(--accent-1);
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	animation: zfNQbkPY 0.15s ease;
}

.sGCuaVgK button {
	background: none;
	border: none;
	color: rgba(13, 122, 199, 0.5);
	cursor: pointer;
	padding: 0;
	font-size: 10px;
	display: flex;
	align-items: center;
	transition: color 0.12s ease;
}

.sGCuaVgK button:hover {
	color: #0D7AC7;
	color: var(--accent-1);
}

._lJJgoek {
	background: none;
	border: none;
	outline: none;
	color: #ffffff;
	color: var(--white);
	font-size: 13px;
	font-family: inherit;
	flex: 1 1;
	min-width: 120px;
	padding: 2px 0;
}

._lJJgoek::placeholder {
	color: #555;
}

/* Validation */
.NEvnWohB {
	margin: 0 1.5rem;
	padding: 0.6rem 0.85rem;
	border-radius: 8px;
	background: rgba(239, 68, 68, 0.12);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: #ef4444;
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem
}

.yuG7s1AN {
	margin: 0 1.5rem;
	padding: 0.6rem 0.85rem;
	border-radius: 8px;
	background: rgba(245, 158, 11, 0.12);
	border: 1px solid rgba(245, 158, 11, 0.3);
	color: #f59e0b;
	font-size: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.RHXWiG8a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1 1;
}

.fvIhFlzo {
	background: rgba(245, 158, 11, 0.2);
	border: 1px solid rgba(245, 158, 11, 0.4);
	border-radius: 6px;
	color: #f59e0b;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease;
}

.fvIhFlzo:hover {
	background: rgba(245, 158, 11, 0.3);
}

/* Footer */
.aevTOk43 {
	padding: 1.25rem 1.5rem;
	border-top: 1px solid #2d2f39;
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	flex-shrink: 0;
}

.nJhBUJb_ {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.25rem;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: #ffffff;
	color: var(--white);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.nJhBUJb_:hover {
	background-color: #2d2f39;
}

.Mxv42DIr {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.25rem;
	background: linear-gradient(135deg, #0D7AC7 0%, #0099cc 100%);
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 8px;
	color: #ffffff;
	color: var(--white);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}

.Mxv42DIr:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

/* Loading */
.SkW3sW9D {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 300px;
}

.SkW3sW9D img {
	height: 80px;
}

/* Discard Confirmation */
.aIGmL6Xv {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1100;
	animation: zfNQbkPY 0.15s ease;
}

.x2ulUnBm {
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 16px;
	padding: 2rem;
	width: 380px;
	max-width: 90vw;
	text-align: center;
	animation: zfNQbkPY 0.2s ease-out;
}

.KpP1yxOL {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(245, 158, 11, 0.12);
	border: 1px solid rgba(245, 158, 11, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
	font-size: 18px;
	color: #f59e0b;
}

.jSwk7yhK {
	margin: 0 0 0.5rem;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	color: var(--white);
}

.IY5HzPVT {
	margin: 0 0 1.5rem;
	font-size: 13px;
	color: #888;
	line-height: 1.5;
}

.TS7ojCNN {
	display: flex;
	gap: 0.75rem;
}

.bS_iEuF0 {
	flex: 1 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1rem;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	color: #ffffff;
	color: var(--white);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}

.bS_iEuF0:hover {
	background-color: #2d2f39;
}

.hnDuotf3 {
	flex: 1 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1rem;
	background: rgba(239, 68, 68, 0.15);
	border: 1px solid rgba(239, 68, 68, 0.3);
	border-radius: 10px;
	color: #ef4444;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}

.hnDuotf3:hover {
	background: rgba(239, 68, 68, 0.25);
}


/* ===================================================
   Event Name Input - Clean Minimal (legacy)
   =================================================== */

.sDGGUqsc {
  padding: 0 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.75rem;
  position: relative;
  animation: O5jrtgkG 0.5s ease-in-out;
}

.tnAQKl1u {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  grid-gap: 1.25rem;
  gap: 1.25rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.2s ease;
  cursor: pointer;
}

.tnAQKl1u:hover {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

.tnAQKl1u.lplsKbs3 {
  border-bottom-color: #0D7AC7;
  border-bottom-width: 2px;
  /*padding-bottom: calc(1.25rem - 1px);*/
}

.tnAQKl1u.gZDEqebg {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.EpYSYfci {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 20px;
  flex-shrink: 0;
  transition: color 0.2s ease;
}

.tnAQKl1u.lplsKbs3 .EpYSYfci {
  color: #0D7AC7;
}

.tnAQKl1u.gZDEqebg .EpYSYfci {
  color: rgba(255, 255, 255, 0.5);
}

.Fu3LyHFs {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.nnpeKFVE {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.4);
  pointer-events: none;
  transition: all 0.2s ease;
  transform-origin: left center;
}

.xDt0eShk {
  top: -14px;
  font-size: 11px;
  font-weight: 700;
  color: #0D7AC7;
  /*text-transform: uppercase;*/
  letter-spacing: 0.6px;
  transform: translateY(0);
}

.V9leJ8Yt {
  top: -14px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.6px;
  transform: translateY(0);
}

.tlCZFp7N {
  background: none;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  padding: 0.5rem 0;
  font-family: 'DonerRegular', sans-serif;
  font-family: var(--font-family);
  width: 100%;
  min-height: 1.5rem;
}

.tlCZFp7N::placeholder {
  color: rgba(255, 255, 255, 0.2);
}

/* Textarea variant - aligns icon to top, label always at top */
.nIi5vWWc {
  align-items: flex-start;
}

.nIi5vWWc .EpYSYfci {
  margin-top: 0.5rem;
}

.vADbQqhZ {
  position: relative;
  top: auto;
  transform: none;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.6px;
  margin-bottom: 0.25rem;
}

.vADbQqhZ.xDt0eShk {
  color: #0D7AC7;
}

.LN3PPP5t {
  resize: vertical;
  line-height: 1.5;
}

.Cz66x2MR {
  color: #ffffff;
  font-size: 16px;
  font-weight: 400;
  padding: 0.5rem 0;
  font-family: 'DonerRegular', sans-serif;
  font-family: var(--font-family);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.5rem;
  display: flex;
  align-items: center;
}

.tnKJ8W9J {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  transition: all 0.2s ease;
  margin-left: 0.5rem;
}

.dCQ9F8zc {
  color: #0D7AC7;
  transform: rotate(180deg);
}

.EHa57clv {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  margin-left: 0.5rem;
}

.EHa57clv:hover {
  color: rgba(255, 255, 255, 0.7);
}

.EHa57clv:active {
  color: rgba(255, 255, 255, 0.9);
}

.qaO9CE1n {
	max-height: 300px;
	overflow-y: scroll;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 0.5rem;
  border: 1px solid rgba(13, 122, 199, 0.3);
  border-radius: 8px;
  background-color: #161824;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 1000;
  animation: QzSBF2dU 0.2s ease;
}

.efIAlvGJ {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1rem 1.25rem;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  font-weight: 400;
  font-family: 'DonerRegular', sans-serif;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
}

.efIAlvGJ:hover {
  background-color: rgba(13, 122, 199, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.efIAlvGJ:active {
  background-color: rgba(13, 122, 199, 0.15);
}

.TjSEGoN9 {
  background-color: rgba(13, 122, 199, 0.08);
  color: #0D7AC7;
  font-weight: 500;
}

.TjSEGoN9 i {
  color: #0D7AC7;
  font-size: 12px;
}

._zGfZ308 {
  padding: 1rem 1.25rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
}

.qAh5mA9l {
  padding: 0.5rem 1.25rem 0.25rem;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.qAh5mA9l:first-child {
  border-top: none;
}

@keyframes QzSBF2dU {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes O5jrtgkG {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.RPO1edQg {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}

.RPO1edQg p {
  margin: 0;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .tnAQKl1u {
    padding: 1rem 0;
    gap: 1rem;
  }

  .tnAQKl1u.lplsKbs3 {
    padding-bottom: calc(1rem - 1px);
  }

  .EpYSYfci {
    font-size: 18px;
  }

  .tlCZFp7N {
    font-size: 15px;
  }
}

/* ===================================================
   Upload Button - Clean Minimal
   =================================================== */
/* --- Base Container Styles --- */
.NOzA7oU1 {
    box-sizing: border-box;
    width: 100%;
    aspect-ratio: 960 / 350;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: none;
    overflow: hidden;
    transition: all 0.3s ease;
    margin-bottom: 1rem;
    animation: O5jrtgkG 0.5s ease-in-out;
}

/* --- No Preview (Initial/Empty State) --- */
.NOzA7oU1.H9pJ6WV3 {
    border: 2px dashed rgba(13, 122, 199, 0.5); /* Dashed border for drop-zone look */
    cursor: pointer; /* Indicate it's clickable */
}

.NOzA7oU1.H9pJ6WV3:hover {
    border-color: #0D7AC7;
    background-color: rgba(13, 122, 199, 0.05);
}

.uWt3UTHT {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
}

.TitjxBEc {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0D7AC7;
    font-size: 30px; /* Larger icon */
    margin-bottom: 5px;
}

.iI6qQw2P {
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.3px;
    font-family: 'DonerRegular', sans-serif;
    font-family: var(--font-family);
}

.SCo3F5Bi {
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    margin-top: 5px;
}

/* --- Has Preview State --- */
.NOzA7oU1.Bhhbo0kK {
    border: 1px solid rgba(13, 122, 199, 0.3); /* Solid border when image is present */
    cursor: default;
}

.a0zwQWRI {
    position: relative;
    width: 100%;
    height: 100%; /* Fill the container height */
}

.CUcOtqvz {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* --- Preview Controls --- */
.avE5YsNF {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.wvzf83x9, .tOKNNv07 {
    /* Base for both buttons */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

.wvzf83x9 {
    background-color: rgba(13, 122, 199, 0.85); /* Semi-transparent blue */
    border: 1px solid rgba(13, 122, 199, 1);
    gap: 8px;
}

.wvzf83x9:hover {
    background-color: #0D7AC7;
}

.tOKNNv07 {
    width: 38px;
    height: 38px;
    padding: 0;
    background-color: rgba(255, 77, 77, 0.85); /* Semi-transparent red */
    border: 1px solid rgba(255, 77, 77, 1);
}

.tOKNNv07:hover {
    background-color: #ff4d4d;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .NOzA7oU1 {
        aspect-ratio: 960 / 350;
    }
    
    .TitjxBEc {
        font-size: 24px;
    }

    .iI6qQw2P {
        font-size: 15px;
    }

    .wvzf83x9 {
        padding: 6px 10px;
        font-size: 13px;
    }

    .tOKNNv07 {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }
}

/* ==========================================
   INFO BANNER STYLES
   ========================================== */

.IrwUH8IW {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(13, 122, 199, 0.1);
    border: 1px solid rgba(13, 122, 199, 0.3);
    border-radius: 10px;
    margin: 0 10px 16px 10px;
}

.cwGraocP {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: #0D7AC7;
    font-size: 16px;
    flex-shrink: 0;
}

.XXyoh8NP {
    flex: 1 1;
}

._dKKcVCF {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

/* ==========================================
   MULTI-SELECT STYLES
   ========================================== */

.sCnUDQd0 {
    min-height: 56px;
    height: auto;
    align-items: flex-start;
    padding-top: 8px;
    padding-bottom: 8px;
}

.gPHzvx7N {
    padding-top: 16px;
}

.FKJeC6Mj {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 24px;
    align-items: center;
}

.vOQU5jRt {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.vnEZWgXN {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 10px;
    background: rgba(13, 122, 199, 0.2);
    border: 1px solid rgba(13, 122, 199, 0.4);
    border-radius: 6px;
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
}

.CbOIhZfN {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.15s ease;
}

.CbOIhZfN:hover {
    background: rgba(255, 100, 100, 0.3);
    color: #fff;
}

.CbOIhZfN i {
    font-size: 10px;
}

.i1dCwNQe {
    color: rgba(255, 255, 255, 0.4);
}

.Jf80d0Xs {
    max-height: 320px;
    display: flex;
    flex-direction: column;
}

.miNm0h8V {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
}

.miNm0h8V i {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
}

.R1Empirm {
    flex: 1 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-size: 14px;
}

.R1Empirm::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.W0iLOLWl {
    flex: 1 1;
    overflow-y: auto;
    padding: 6px 0;
}

.LvIIfov6 {
    display: flex;
    align-items: center;
    gap: 10px;
}

._9I_oNFqn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.LvIIfov6.TjSEGoN9 ._9I_oNFqn {
    background: #0D7AC7;
    border-color: #0D7AC7;
}

._9I_oNFqn i {
    font-size: 10px;
    color: #fff;
}



/* ======================================================
   HUB DASHBOARD V3 - Clean & Aligned (hb_ prefix)
====================================================== */

/* --- LAYOUT --- */
.kzBfjGBw {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	flex: 1 1;
	min-height: 0;
	overflow-y: auto;
}

.kzBfjGBw::-webkit-scrollbar {
	display: none;
}


/* --- PENDING REQUESTS TOAST --- */
.l3HIMvQx {
	position: fixed;
	top: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 10px 24px;
	background: #161824;
	background: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 12px;
	cursor: pointer;
	animation: fRvaDJOZ 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	transition: border-color 0.2s ease;
}

.l3HIMvQx:hover {
	border-color: #3d3f49;
}

.uyAgrnrk {
	animation: Cl9_i5tW 0.35s cubic-bezier(0.7, 0, 0.84, 0) forwards;
}

@keyframes fRvaDJOZ {
	0% { opacity: 0; transform: translateX(-50%) translateY(-50px); }
	100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes Cl9_i5tW {
	0% { opacity: 1; transform: translateX(-50%) translateY(0); }
	100% { opacity: 0; transform: translateX(-50%) translateY(-50px); }
}

.oL0pSX6E {
	font-size: 18px;
	color: #ffffff;
	color: var(--white);
	flex-shrink: 0;
}

.vd2PLiPI {
	font-size: 14px;
	color: #ffffff;
	color: var(--white);
	white-space: nowrap;
}

.vd2PLiPI strong {
	font-weight: 600;
}

.aU26JDWS {
	width: 1px;
	height: 16px;
	background: #2d2f39;
	flex-shrink: 0;
}

.Dqk42kF4 {
	font-size: 14px;
	color: #ff3b30;
	font-weight: 600;
	white-space: nowrap;
}

/* --- GUESTLINE CONNECT BANNER --- */
/* --- STATS ROW (4 inline horizontal cards) --- */
.qUQLXlOw {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1rem;
	gap: 1rem;
	flex-shrink: 0;
}

.KyO8Ce57 {
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border-radius: 12px;
	padding: 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	border: 1px solid #2d2f39;
	transition: border-color 0.2s ease;
}

.KyO8Ce57:hover {
	border-color: #3d3f49;
}

.MXVWFZUS {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	flex-shrink: 0;
}

.XE06FFoo {
	background: rgba(13, 122, 199, 0.12);
	color: #0D7AC7;
	color: var(--accent-1);
}

.w7AS3JXs {
	background: rgba(60, 162, 89, 0.12);
	color: #3CA259;
	color: var(--success-green);
}

.Qnxrx1rz {
	background: rgba(99, 102, 241, 0.12);
	color: #6366f1;
}

.HBw73IlO {
	background: rgba(245, 158, 11, 0.12);
	color: #f59e0b;
}

.xlxgEbcq {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.ji3Vcj1o {
	margin: 0;
	color: #666;
	font-size: 12px;
}

.mHjOpxJA {
	margin: 0;
	color: #ffffff;
	color: var(--white);
	font-size: 22px;
	font-weight: 700;
}


/* --- LIVE BADGE (inline with event name) --- */
.lKHVLGLe {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.lKHVLGLe .sFXcvmy8 {
	flex: 1 1;
	min-width: 0;
}

.z01LlznF {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.15rem 0.45rem;
	border-radius: 4px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.5px;
	background: rgba(60, 162, 89, 0.15);
	color: #3CA259;
	color: var(--success-green);
	white-space: nowrap;
	flex-shrink: 0;
}

.FbrXJ8RA {
	width: 5px;
	height: 5px;
	border-radius: 100%;
	background: #3CA259;
	background: var(--success-green);
	animation: OEkrAAC_ 2s infinite;
}

/* Cancelled pill - mirrors .hb_live_badge but in the destructive red
   tone. No pulse on the dot (cancellation is a final state, not a
   live signal). Used inline on the right side of the event row in
   the same slot as the LIVE badge. */
.rk3Ux7u5 {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.15rem 0.45rem;
	border-radius: 4px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.5px;
	background: rgba(239, 68, 68, 0.15);
	color: #ef4444;
	white-space: nowrap;
	flex-shrink: 0;
}

.at7MH_2Z {
	width: 5px;
	height: 5px;
	border-radius: 100%;
	background: #ef4444;
}

/* Grid-view variant - same shape as .hb_grid_live_badge, sits in the
   top-left corner of the banner. Red instead of green. */
.WpgmTfob {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.55rem;
	background-color: rgba(239, 68, 68, 0.9);
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
	border-radius: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #ffffff;
	color: var(--white);
}

/* Past event dimming */
.Tr0Wj0of {
	opacity: 0.45;
}

.Tr0Wj0of:hover {
	opacity: 0.65;
}

/* Live event left accent */
.CPNyMC5F {
	border-left: 3px solid #3CA259 !important;
	border-left: 3px solid var(--success-green) !important;
}


/* --- CONTENT ROW: events (left) + calendar/team (right) --- */
.yqanrk7Q {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1rem;
	gap: 1rem;
	flex: 1 1;
	min-height: 0;
}


/* --- EVENTS WIDGET --- */
.AfUxsTVs {
	grid-column: span 3;
	display: flex;
	flex-direction: column;
	min-height: 0;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border-radius: 12px;
	border: 1px solid #2d2f39;
	overflow: hidden;
}


/* --- EVENTS HEADER (filters + search + add) --- */
.F7sh9djH {
	padding: 1rem 1.25rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #2d2f39;
	flex-shrink: 0;
	gap: 1rem;
	flex-wrap: wrap;
}

.HjbJAO6c {
	display: flex;
	gap: 0.5rem;
}

.ajpTLBue {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	/* Vertical padding collapses to 0 so `height` is the only thing
	   that decides the rendered height. Keeps every control on this
	   row at exactly the same vertical size. */
	padding: 0 1rem;
	height: 34px;
	box-sizing: border-box;
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: 1px solid #01000D;
	border: 1px solid var(--bg-dark);
	border-radius: 8px;
	color: #888;
	cursor: pointer;
	transition: all 0.2s ease;
	font-size: 12px;
	white-space: nowrap;
}

.ajpTLBue:hover {
	background-color: rgba(255, 255, 255, 0.05);
	color: #ffffff;
	color: var(--white);
}

.e8bWrEZI {
	background-color: #0D7AC7 !important;
	background-color: var(--accent-1) !important;
	border-color: #0D7AC7 !important;
	border-color: var(--accent-1) !important;
	color: #ffffff !important;
	color: var(--white) !important;
}

.eYYgCIMn {
	font-size: 10px;
	opacity: 0.7;
}

/* ── Compact filter (≤1200px): "All" button + dropdown ──
   Hidden on desktop / large laptop; the responsive block at 1200px
   below flips visibility with .hb_filter_nav. */
.b9RHMI1k {
	display: none;
	gap: 0.5rem;
	align-items: center;
}

.WeaX6cxZ {
	position: relative;
}

.EO4EWnKW {
	gap: 0.4rem;
}

.EBHzodKJ {
	font-size: 10px;
	opacity: 0.75;
	margin-left: 0.1rem;
	transition: transform 0.15s ease;
}

.RUQu5j3N {
	transform: rotate(180deg);
}

.zqs5Q_H1 {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	min-width: 180px;
	background: #161824;
	background: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.45),
		0 1px 0 rgba(255, 255, 255, 0.025) inset;
	padding: 4px;
	z-index: 30;
	display: flex;
	flex-direction: column;
}

.GZKfTR9d {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0.65rem;
	border: none;
	background: none;
	border-radius: 6px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
	cursor: pointer;
	text-align: left;
	transition: background 0.12s ease, color 0.12s ease;
}

.GZKfTR9d:hover {
	background: rgba(255, 255, 255, 0.04);
	color: #ffffff;
	color: var(--white);
}

.XlAsPFJs {
	background: rgba(13, 122, 199, 0.12);
	color: #ffffff;
	color: var(--white);
}

.iTF3RVXk {
	font-weight: 500;
}

.KmgLWZK4 {
	font-size: 11px;
	opacity: 0.7;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.OjBE2dIy {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

/* Search input */
.JM1e1GhJ {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	/* Match the filter / view / add buttons exactly. Vertical padding
	   removed so the input wrapper's height isn't padding-driven. */
	padding: 0 0.75rem;
	height: 34px;
	box-sizing: border-box;
	transition: border-color 0.2s ease;
	min-width: 0;
}

.JM1e1GhJ:focus-within {
	border-color: #0D7AC7;
	border-color: var(--accent-1);
}

.JM1e1GhJ i {
	font-size: 12px;
	color: #555;
	flex-shrink: 0;
}

.JM1e1GhJ input {
	background: none;
	border: none;
	outline: none;
	color: #ffffff;
	color: var(--white);
	font-size: 12px;
	width: 220px;
	padding: 0;
}

.JM1e1GhJ input::placeholder {
	color: #555;
}

.yPhABgWV {
	background: none;
	border: none;
	color: #666;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	font-size: 11px;
	transition: color 0.15s ease;
}

.yPhABgWV:hover {
	color: #ffffff;
	color: var(--white);
}

.iOHpUDbN {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 1.15rem;
	height: 34px;
	box-sizing: border-box;
	background: linear-gradient(135deg, #0D7AC7 0%, #0099cc 100%);
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 8px;
	color: #ffffff;
	color: var(--white);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.iOHpUDbN:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

.iOHpUDbN i {
	font-size: 11px;
}


/* --- EVENT CARDS (with banner images) --- */
.yYCOL5hd {
	flex: 1 1;
	overflow-y: auto;
	min-height: 0;
	padding: 0.25rem 0;
}

.yYCOL5hd::-webkit-scrollbar {
	display: none;
}

.tjeqvFG1 {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	align-items: center;
	grid-gap: 1rem;
	gap: 1rem;
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.4);
	cursor: pointer;
	transition: background-color 0.15s ease;
	background: none;
	border-left: none;
	border-right: none;
	border-top: none;
	color: #ffffff;
	color: var(--white);
	text-align: left;
	width: 100%;
}

.tjeqvFG1:hover {
	background-color: rgba(255, 255, 255, 0.02);
}

.tjeqvFG1:last-child {
	border-bottom: none;
}

/* Banner thumbnail */
.XvIQGccp {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
	background-color: #01000D;
	background-color: var(--bg-dark);
}

.iQGLPSl2 {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.iinfvZfa {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(13, 122, 199, 0.15) 0%, rgba(13, 122, 199, 0.04) 100%);
	color: #0D7AC7;
	color: var(--accent-1);
	font-size: 20px;
}

/* Status dot on banner */
.Dc1cELTi {
	position: absolute;
	bottom: 4px;
	right: 4px;
	width: 8px;
	height: 8px;
	border-radius: 100%;
	border: 2px solid #161824;
	border: 2px solid var(--sub-bg-dark);
}

.I93hWg6Q { background-color: #3CA259; background-color: var(--success-green); }
.m7LrgORW { background-color: #0D7AC7; background-color: var(--accent-1); }
.we3TgKR0 { background-color: #444; }
._3t_OzAP { background-color: #ff2626
; background-color: var(--cancelled-red); }

/* Event info */
.h4UjQpzZ {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.sFXcvmy8 {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.xkoMBKCM {
	margin: 0;
	font-size: 12px;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.JrpEISFA {
	margin: 0;
	font-size: 11px;
	color: #666;
	display: flex;
	align-items: center;
	gap: 0.3rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.JrpEISFA i {
	font-size: 9px;
	color: #555;
}

/* Right side: guest count + chevron */
.p9TE3v6w {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

.krfI_xNu {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 12px;
	color: #888;
	background: rgba(255, 255, 255, 0.04);
	padding: 0.25rem 0.6rem;
	border-radius: 8px;
	white-space: nowrap;
}

.krfI_xNu i {
	font-size: 10px;
	color: #0D7AC7;
	color: var(--accent-1);
}

.y5yvrjLJ {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 12px;
	color: #888;
	background: rgba(255, 255, 255, 0.04);
	padding: 0.25rem 0.6rem;
	border-radius: 8px;
	white-space: nowrap;
}

.y5yvrjLJ i {
	font-size: 10px;
	color: #a78bfa;
}

/* Pending-requests pill. Identical chrome to the guest/team pills —
   same background, padding, radius, font size — only the text+icon are
   red so the row reads as actionable at a glance. Only rendered when
   count > 0 so a healthy event row stays visually quiet. */
.vWL8wb2T {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 12px;
	color: #ef4444;
	background: rgba(255, 255, 255, 0.04);
	padding: 0.25rem 0.6rem;
	border-radius: 8px;
	white-space: nowrap;
}

.vWL8wb2T i {
	font-size: 10px;
	color: #ef4444;
}

.iZp3LQiH {
	color: #444;
	font-size: 12px;
	transition: color 0.15s ease;
}

.tjeqvFG1:hover .iZp3LQiH {
	color: #0D7AC7;
	color: var(--accent-1);
}


/* --- VIEW TOGGLE --- */
.f2B_ArtJ {
	display: flex;
	align-items: stretch;
	height: 34px;
	box-sizing: border-box;
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	overflow: hidden;
}

.eAbb8ygt {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	/* Stretch to the toggle wrapper's inner height. Wrapper is 34px
	   total, borders take 2px → inner 32px, so the buttons feel
	   exactly the same as the filter / search / add controls. */
	height: 100%;
	background: none;
	border: none;
	color: #555;
	cursor: pointer;
	transition: all 0.15s ease;
	font-size: 12px;
}

.eAbb8ygt:hover {
	color: #aaa;
	background-color: rgba(255, 255, 255, 0.04);
}

.gt4f2HdR {
	color: #ffffff !important;
	color: var(--white) !important;
	background-color: rgba(13, 122, 199, 0.2) !important;
}


/* --- GRID MODE --- */
.XSEEvYVE {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	grid-gap: 1rem;
	gap: 1rem;
	padding: 1rem;
	align-content: start;
}

.wgp32e3I {
	display: flex;
	flex-direction: column;
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 12px;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, opacity 0.15s ease;
	color: #ffffff;
	color: var(--white);
	text-align: left;
	width: 100%;
	min-width: 0;
}

.wgp32e3I:hover {
	border-color: #3d3f49;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.fF_gbf9F {
	opacity: 0.5;
}

.fF_gbf9F:hover {
	opacity: 0.75;
}

.KddcOB4N {
	border-color: rgba(60, 162, 89, 0.4);
}

.KddcOB4N:hover {
	border-color: rgba(60, 162, 89, 0.6);
}

/* Grid banner - fixed height, no percentage sizing */
.RATSOjXo {
	position: relative;
	width: 100%;
	height: 130px;
	overflow: hidden;
	background-color: #1a1c24;
	flex-shrink: 0;
	border-radius: 12px 12px 0 0;
}

.SHK4Qt1h {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.aqipIioo {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(13, 122, 199, 0.15) 0%, rgba(13, 122, 199, 0.04) 100%);
	color: #0D7AC7;
	color: var(--accent-1);
	font-size: 28px;
}

.OBoLYI_o {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.55rem;
	background-color: rgba(60, 162, 89, 0.9);
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
	border-radius: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	color: #ffffff;
	color: var(--white);
}

.DgmpNZxe {
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 10px;
	height: 10px;
	border-radius: 100%;
	border: 2px solid rgba(0, 0, 0, 0.4);
}

/* Grid body */
.I5nsf0lO {
	padding: 0.75rem 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	flex: 1 1;
}

.xlB6ja7r {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.3;
}

.D198p1ZU {
	margin: 0;
	font-size: 11px;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.Ku5W1XOi {
	margin: 0;
	font-size: 11px;
	color: #666;
	display: flex;
	align-items: center;
	gap: 0.3rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.Ku5W1XOi i {
	font-size: 8px;
	color: #555;
	flex-shrink: 0;
}

/* Grid footer stats */
.vrntMx6l {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.35rem;
	padding-top: 0.5rem;
	border-top: 1px solid rgba(45, 47, 57, 0.5);
}

.WlS5bcq_ {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 11px;
	color: #777;
}

.WlS5bcq_ i {
	font-size: 10px;
	color: #555;
}

/* Explicit per-pill modifier colors. Replaces the old positional
   :first-child / :last-child rules so DOM order doesn't matter — a new
   pill (like the red requests one) can be inserted in front without
   stealing the guest pill's accent. */
.vOfzgg57 i {
	color: #0D7AC7;
	color: var(--accent-1);
}

.qEOIkZvg i {
	color: #a78bfa;
}

.tShbUPTP {
	color: #ef4444;
}

.tShbUPTP i {
	color: #ef4444;
}

/* Grid - no events */
.WbY8Bgp_ {
	grid-column: 1 / -1;
}

/* --- GRID SKELETON --- */
.Za8LIlC1 {
	display: flex;
	flex-direction: column;
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 12px;
	overflow: hidden;
}

.t4R0sSPX {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #2d2f39;
	animation: p4fAN1p2 1.5s ease-in-out infinite;
}

.gE4JlKp6 {
	padding: 0.75rem 0.85rem;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}


/* --- SKELETON LOADING --- */
.YQ9mZDHY {
	display: grid;
	grid-template-columns: 64px 1fr;
	align-items: center;
	grid-gap: 1rem;
	gap: 1rem;
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.3);
}

.vTmn30rk {
	width: 64px;
	height: 64px;
	border-radius: 10px;
	background: #2d2f39;
	animation: p4fAN1p2 1.5s ease-in-out infinite;
}

.exDgNlla {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.jUle2_Sk {
	height: 10px;
	background: #2d2f39;
	border-radius: 4px;
	animation: p4fAN1p2 1.5s ease-in-out infinite;
}

.W57tOiWt { width: 70%; }
.AzCoj02r { width: 45%; }

@keyframes p4fAN1p2 {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 0.7; }
}


/* --- Next Event Skeleton --- */
.bP4WUctR {
	flex: 1 1;
	min-height: 0;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border-radius: 12px;
	border: 1px solid #2d2f39;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.IZ7XYPAl {
	flex: 1 1;
	min-height: 160px;
	background: #2d2f39;
	animation: p4fAN1p2 1.5s ease-in-out infinite;
}

.j4O2hM98 {
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}


/* --- EMPTY STATE --- */
.rgFWrhWY {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 2rem;
	color: #555;
	gap: 1rem;
	text-align: center;
}

.p1Lm2VHE {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(13, 122, 199, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #0D7AC7;
	color: var(--accent-1);
}

.rgFWrhWY p {
	font-size: 14px;
	color: #555;
	margin: 0;
}


/* --- RIGHT COLUMN (Next Event + Calendar, stretch to fill) --- */
.NQUyuofF {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	min-height: 0;
}


/* --- NEXT EVENT CARD (right column) --- */
.V_n57iM0 {
	flex: 1 1;
	min-height: 0;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border-radius: 12px;
	border: 1px solid #2d2f39;
	overflow: hidden;
	cursor: pointer;
	transition: border-color 0.2s ease;
	display: flex;
	flex-direction: column;
}

.V_n57iM0:hover {
	border-color: #3d3f49;
}

.LVMMUdQ5 {
	width: 100%;
	flex: 1 1;
	min-height: 160px;
	overflow: hidden;
	position: relative;
	background-color: #01000D;
	background-color: var(--bg-dark);
}

.LVMMUdQ5 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.w0Qff962 {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(13, 122, 199, 0.15) 0%, rgba(13, 122, 199, 0.04) 100%);
	color: #0D7AC7;
	color: var(--accent-1);
	font-size: 28px;
}

.fywej2I0 {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(0,0,0,0.5) 65%, rgba(0,0,0,0.85) 78%, rgba(0,0,0,1) 100%);
}

.PddVhIUP {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.6rem;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
	width: -webkit-fit-content;
	width: fit-content;
}

.rgk6Echl {
	background: rgba(60, 162, 89, 0.85);
	color: #ffffff;
	color: var(--white);
}

.dVHq2iyH {
	background: rgba(13, 122, 199, 0.85);
	color: #ffffff;
	color: var(--white);
}

.LnvMFbJa {
	width: 5px;
	height: 5px;
	border-radius: 100%;
	background: #ffffff;
	background: var(--white);
	animation: OEkrAAC_ 2s infinite;
}

@keyframes OEkrAAC_ {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

.Rx3c2MCC {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

.uB9T2jAo {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.Uu865Zem {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.ML657iQS {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 12px;
	color: #0D7AC7;
	color: var(--accent-1);
	font-weight: 600;
	margin: 0;
}

.BLVMFyab {
	color: #3CA259;
	color: var(--success-green);
}

.ML657iQS i {
	font-size: 10px;
}

.yk6k4K2t {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 11px;
	color: rgba(255,255,255,0.8);
	margin: 0;
}

.yk6k4K2t i {
	font-size: 9px;
}

.aqVdjltt {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 11px;
	color: rgba(255,255,255,0.7);
	margin: 0;
}

.aqVdjltt i {
	font-size: 9px;
}

.WuzErzQj {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.35rem;
	font-size: 11px;
	font-weight: 600;
	color: #0D7AC7;
	color: var(--accent-1);
	opacity: 0.8;
	transition: opacity 0.2s ease, gap 0.2s ease;
}

.WuzErzQj i {
	font-size: 9px;
	transition: transform 0.2s ease;
}

.V_n57iM0:hover .WuzErzQj {
	opacity: 1;
}

.V_n57iM0:hover .WuzErzQj i {
	transform: translateX(3px);
}

/* --- NEXT EVENT EMPTY STATE --- */
.Zexs5vR5 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 100%;
	color: #555;
	background: linear-gradient(135deg, rgba(13, 122, 199, 0.15) 0%, rgba(13, 122, 199, 0.04) 100%);
}

.Zexs5vR5 i {
	font-size: 24px;
	opacity: 0.6;
}

.Zexs5vR5 p {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
}


/* --- CALENDAR TILE --- */
.PQy7o0tB {
	flex-shrink: 0;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border-radius: 12px;
	border: 1px solid #2d2f39;
	overflow: hidden;
}

.mrZO9Ca8 {
	padding: 1rem 1.25rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #2d2f39;
	flex-shrink: 0;
}

.dHaIis46 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
}

.kihn2zvA {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background: none;
	border: none;
	color: #ffffff;
	color: var(--white);
	cursor: pointer;
	font-size: 13px;
	position: relative;
	padding: 0.3rem 0.5rem;
	border-radius: 6px;
	transition: background-color 0.15s ease;
}

.kihn2zvA:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

.Kqfk_KME {
	position: absolute;
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	padding: 6px;
	right: 0;
	top: calc(100% + 8px);
	z-index: 999;
	display: flex;
	flex-direction: column;
	max-height: 240px;
	overflow-y: auto;
	min-width: 130px;
}

.UU7e8DTj {
	background: none;
	border: none;
	padding: 5px 10px;
	color: #ffffff;
	color: var(--white);
	text-align: left;
	border-radius: 6px;
	cursor: pointer;
	font-size: 13px;
	transition: background-color 0.15s ease;
}

.UU7e8DTj:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

.Zt12iSk0 {
	background-color: #0D7AC7 !important;
	background-color: var(--accent-1) !important;
}

.ifg_9S0y {
	padding: 0.75rem 1rem;
}

.bZ7jhuS7 {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	width: 100%;
}

.A0hQT7Dq {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #555;
	font-size: 11px;
	font-weight: 600;
	padding: 0.3rem 0;
}

.fy9j39E2 {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background: none;
	border: none;
	color: #ffffff;
	color: var(--white);
	aspect-ratio: 1;
	cursor: pointer;
	border-radius: 8px;
	transition: background-color 0.15s ease;
	font-size: 13px;
}

.fy9j39E2:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

.Hr35nmoW {
	background-color: #0D7AC7 !important;
	background-color: var(--accent-1) !important;
	font-weight: 600;
}

.sl2s7lcA {
	position: absolute;
	bottom: 3px;
	width: 4px;
	height: 4px;
	border-radius: 100%;
	background-color: #3CA259;
	background-color: var(--success-green);
}


/* --- RESPONSIVE --- */

/* Laptop and smaller (≤1440px): collapse the full filter pill row into
   an "All" button + dropdown so the header stays single-line. Bumped
   from 1200px so 14"/16" MacBooks (~1440px native) get the compact UI. */
@media (max-width: 1440px) {
	.HjbJAO6c {
		display: none;
	}

	.b9RHMI1k {
		display: flex;
	}
}

/* Tablet landscape */
@media (max-width: 1200px) {
	.qUQLXlOw {
		grid-template-columns: repeat(2, 1fr);
	}

	.yqanrk7Q {
		grid-template-columns: 1fr 1fr;
	}

	.AfUxsTVs {
		grid-column: span 1;
	}
}

/* Tablet portrait - stack to single column */
@media (max-width: 1024px) {
	.yqanrk7Q {
		grid-template-columns: 1fr;
	}

	.AfUxsTVs {
		grid-column: span 1;
	}

	.NQUyuofF {
		flex-direction: row;
		gap: 1rem;
	}

	.V_n57iM0 {
		flex: 1 1;
		min-width: 0;
		min-height: 200px;
	}

	.PQy7o0tB {
		flex: 1 1;
		min-width: 0;
	}

	.AfUxsTVs {
		max-height: none;
		min-height: 400px;
	}
}

/* Small tablet / large phone */
@media (max-width: 768px) {
	.kzBfjGBw {
		gap: 1rem;
		flex: none;
		overflow: visible;
	}

	.qUQLXlOw {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}

	.KyO8Ce57 {
		padding: 1rem;
		gap: 0.75rem;
	}

	.MXVWFZUS {
		width: 38px;
		height: 38px;
		font-size: 16px;
	}

	.mHjOpxJA {
		font-size: 20px;
	}

	.yqanrk7Q {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		flex: none;
		min-height: auto;
	}

	.NQUyuofF {
		flex-direction: column;
		gap: 1rem;
		min-height: auto;
		flex-shrink: 0;
	}

	.PQy7o0tB {
		min-height: auto;
		overflow: visible;
		flex-shrink: 0;
	}

	.AfUxsTVs {
		height: 500px;
		min-height: 0;
		min-height: initial;
		max-height: none;
		max-height: initial;
		flex-shrink: 0;
	}

	.F7sh9djH {
		padding: 1rem;
		gap: 0.75rem;
	}

	.HjbJAO6c {
		flex-wrap: wrap;
		gap: 0.35rem;
	}

	.ajpTLBue {
		padding: 0.45rem 0.85rem;
		font-size: 12px;
	}

	.tjeqvFG1 {
		padding: 0.75rem 1rem;
		gap: 0.75rem;
	}

	.V_n57iM0 {
		min-height: 180px;
	}

	.LVMMUdQ5 {
		min-height: 140px;
	}

	.JM1e1GhJ input {
		width: 100px;
	}

	.OjBE2dIy {
		flex-wrap: wrap;
	}

	.XSEEvYVE {
		grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		gap: 0.75rem;
		padding: 0.75rem;
	}
}

/* Phone */
@media (max-width: 480px) {
	.qUQLXlOw {
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}

	.KyO8Ce57 {
		padding: 0.85rem;
		gap: 0.6rem;
		border-radius: 10px;
	}

	.MXVWFZUS {
		width: 36px;
		height: 36px;
		font-size: 15px;
		border-radius: 8px;
	}

	.ji3Vcj1o {
		font-size: 11px;
	}

	.mHjOpxJA {
		font-size: 18px;
	}

	.yqanrk7Q {
		gap: 0.75rem;
	}

	.AfUxsTVs {
		border-radius: 10px;
	}

	.F7sh9djH {
		padding: 0.85rem 1rem;
		flex-direction: column;
		align-items: stretch;
	}

	.HjbJAO6c {
		overflow-x: auto;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 0.25rem;
	}

	.HjbJAO6c::-webkit-scrollbar {
		display: none;
	}

	.ajpTLBue {
		padding: 0.45rem 0.85rem;
		font-size: 12px;
		flex-shrink: 0;
	}

	.OjBE2dIy {
		flex-direction: row;
		gap: 0.5rem;
	}

	.JM1e1GhJ {
		flex: 1 1;
	}

	.JM1e1GhJ input {
		width: 100%;
		min-width: 0;
	}

	.iOHpUDbN {
		flex-shrink: 0;
	}

	.tjeqvFG1 {
		grid-template-columns: 52px 1fr auto;
		padding: 0.65rem 0.85rem;
		gap: 0.65rem;
	}

	.XvIQGccp {
		width: 52px;
		height: 52px;
		border-radius: 8px;
	}

	.sFXcvmy8 {
		font-size: 13px;
	}

	.xkoMBKCM {
		font-size: 11px;
	}

	.JrpEISFA {
		font-size: 10px;
	}

	.krfI_xNu {
		padding: 0.2rem 0.5rem;
		font-size: 11px;
	}

	.iZp3LQiH {
		font-size: 10px;
	}

	.V_n57iM0 {
		border-radius: 10px;
		min-height: 160px;
	}

	.LVMMUdQ5 {
		min-height: 120px;
	}

	.uB9T2jAo {
		font-size: 14px;
	}

	.Uu865Zem {
		gap: 0.5rem;
	}

	.PQy7o0tB {
		border-radius: 10px;
	}

	.mrZO9Ca8 {
		padding: 0.85rem 1rem;
	}

	.ifg_9S0y {
		padding: 0.5rem 0.75rem;
	}

	.fy9j39E2 {
		font-size: 12px;
	}

	.YQ9mZDHY {
		grid-template-columns: 52px 1fr;
		padding: 0.65rem 0.85rem;
	}

	.vTmn30rk {
		width: 52px;
		height: 52px;
		border-radius: 8px;
	}

	.Zhd2qAqE {
		padding: 1rem;
	}

	.y5yvrjLJ {
		display: none;
	}

	.WuzErzQj {
		font-size: 12px;
	}

	.XSEEvYVE {
		grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
		gap: 0.6rem;
		padding: 0.6rem;
	}

	.RATSOjXo {
		height: 100px;
	}

	.aqipIioo {
		font-size: 22px;
	}

	.xlB6ja7r {
		font-size: 13px;
	}

	.I5nsf0lO {
		padding: 0.6rem 0.7rem;
	}
}

/* -----------------------------------------------------
	Split Layout
------------------------------------------------------ */

.d6JFXAws {
	height: 100vh;
	width: 100%;
	display: grid;
	grid-template-columns: 44% 1fr;
	overflow: hidden;
	background-color: var(--bg-dark);
}

/* -----------------------------------------------------
	Left - Form Side
------------------------------------------------------ */

.eaMsaA8m {
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 4.5rem;
	z-index: 1;
}

.jYr2ZlA1 {
	width: 100%;
	max-width: 85%;
	display: flex;
	flex-direction: column;
}

.Sa0sxNr7 {
	width: 140px;
	margin-bottom: 3.5rem;
	opacity: 0;
	animation: sg56wroE 0.6s ease forwards 0.1s;
}

.u3auziyP {
	font-size: 34px;
	font-weight: 700;
	color: var(--white);
	line-height: 1.2;
	margin-bottom: 0.5rem;
	opacity: 0;
	animation: sg56wroE 0.6s ease forwards 0.15s;
}

.u3auziyP span {
	color: var(--accent-1);
}

.YIuNpWE3 {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 2.75rem;
	opacity: 0;
	animation: sg56wroE 0.6s ease forwards 0.2s;
}

/* -----------------------------------------------------
	Form
------------------------------------------------------ */

.DIxOimYO {
	display: flex;
	flex-direction: column;
	opacity: 0;
	animation: sg56wroE 0.6s ease forwards 0.25s;
}

.kLxTmPyl {
	margin-bottom: 1.35rem;
}

.GulVeGAN {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 0.5rem;
}

.ONumUjyc {
	width: 100%;
	height: 56px;
	padding: 0 1.15rem;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	display: flex;
	align-items: center;
	column-gap: 0.8rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ONumUjyc:focus-within {
	border-color: var(--accent-1);
	box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.12);
}

.ONumUjyc i {
	color: rgba(255, 255, 255, 0.22);
	font-size: 15px;
	flex-shrink: 0;
	width: 16px;
	text-align: center;
	transition: color 0.2s ease;
}

.ONumUjyc:focus-within i {
	color: var(--accent-1);
}

.ONumUjyc input {
	flex: 1 1;
	background: none;
	border: none;
	outline: none;
	color: var(--white);
	font-size: 15px;
	font-family: var(--font-family);
	padding: 0;
}

.ONumUjyc input::placeholder {
	color: rgba(255, 255, 255, 0.18);
}

.ZoP67Zqt {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ZoP67Zqt i {
	color: rgba(255, 255, 255, 0.22);
	font-size: 14px;
	transition: color 0.2s ease;
}

.ZoP67Zqt:hover i {
	color: rgba(255, 255, 255, 0.45);
}

.N5t_izxz {
	align-self: flex-end;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.3);
	font-size: 13px;
	font-family: var(--font-family);
	cursor: pointer;
	transition: color 0.2s ease;
	margin-top: 0.35rem;
}

.N5t_izxz:hover {
	color: var(--accent-1);
}

.ZzNElrte {
	width: 100%;
	height: 54px;
	margin-top: 2rem;
	background: var(--accent-1);
	border: none;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.1s ease;
}

.ZzNElrte:hover {
	filter: brightness(1.12);
}

.ZzNElrte:active {
	transform: scale(0.98);
}

.ZzNElrte p {
	color: var(--white);
	font-size: 16px;
	font-weight: 600;
}

.VVF6j3Oj {
	width: 100%;
	height: 54px;
	margin-top: 2rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.MCUYmSEm {
	height: 22px;
}

/* -----------------------------------------------------
	Right - Visual Panel
------------------------------------------------------ */

.YXP1CMsy {
	height: 100%;
	position: relative;
	z-index: 1;
	background-color: var(--sub-bg-dark);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4rem;
	overflow: hidden;
}

.YXP1CMsy::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 30% 20%, rgba(13, 122, 199, 0.08) 0%, transparent 60%),
		radial-gradient(ellipse at 80% 80%, rgba(60, 162, 89, 0.04) 0%, transparent 50%);
	pointer-events: none;
}

/* Panel content */
.BduJM7mY {
	position: relative;
	z-index: 1;
	opacity: 0;
	animation: lgBmNEhP 0.8s ease forwards 0.5s;
}

.iWSMuHFc {
	font-size: 28px;
	font-weight: 700;
	color: var(--white);
	line-height: 1.25;
	margin-bottom: 0.75rem;
}

.iWSMuHFc span {
	color: var(--accent-1);
}

.VkWFVY5F {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.6;
	margin-bottom: 2.5rem;
	max-width: 400px;
}

/* Banner image */
.ZXasEPPs {
	position: relative;
	margin-bottom: 2.5rem;
	opacity: 0;
	animation: hjuFtDHt 0.8s ease forwards 0.7s;
}

.C4nfwGVh {
	width: 100%;
	border-radius: 16px;
	display: block;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.4),
		0 0 0 1px rgba(255, 255, 255, 0.06);
}

.xtZOyDFJ {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	pointer-events: none;
	background:
		linear-gradient(180deg, transparent 60%, rgba(22, 24, 36, 0.5) 100%);
}

/* Feature items */
.Q576iyKo {
	display: flex;
	gap: 1.5rem;
	opacity: 0;
	animation: lgBmNEhP 0.8s ease forwards 0.9s;
}

.ySpTZvqb {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.suZjmM9u {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 13px;
}

.FSCdU7bx {
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
}

.JSfpHPTn {
	background: rgba(60, 162, 89, 0.12);
	color: var(--success-green);
}

.JTvoaebi {
	background: rgba(167, 139, 250, 0.12);
	color: #a78bfa;
}

.Ts8H3jqi {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
}

/* -----------------------------------------------------
	Error Banner
------------------------------------------------------ */

.dKmuovK4 {
	position: fixed;
	top: 1.25rem;
	left: 22%;
	transform: translateX(-50%);
	background: rgba(255, 60, 60, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 0.6rem 1.5rem;
	border-radius: 8px;
	animation: dHYyBIrh 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 10;
}

.RoHMFrs7 {
	font-size: 13px;
	margin: 0;
	color: white;
	font-weight: 600;
	white-space: nowrap;
}

/* -----------------------------------------------------
	Animations
------------------------------------------------------ */

@keyframes sg56wroE {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes lgBmNEhP {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes hjuFtDHt {
	from { opacity: 0; transform: translateY(25px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dHYyBIrh {
	from { transform: translate(-50%, -120%); opacity: 0; }
	to { transform: translate(-50%, 0); opacity: 1; }
}

/* -----------------------------------------------------
	Magic Link Sent State
------------------------------------------------------ */

.nT2pnIWj {
	display: flex;
	flex-direction: column;
	opacity: 0;
	animation: sg56wroE 0.6s ease forwards 0.1s;
}

.b5lzqCvj {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(13, 122, 199, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.75rem;
}

.b5lzqCvj i {
	font-size: 22px;
	color: var(--accent-1);
}

.OgYupc7W {
	color: var(--white);
	font-weight: 600;
}

.iIsuLCS0 {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	margin-top: 0.5rem;
	margin-bottom: 2rem;
}

.A6rr22vW {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.4);
}

.A6rr22vW i {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.2);
	width: 16px;
	text-align: center;
}

.DEGZnidN {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 0.6rem 1.1rem;
	color: rgba(255, 255, 255, 0.45);
	font-size: 13px;
	font-family: var(--font-family);
	cursor: pointer;
	transition: all 0.2s ease;
}

.DEGZnidN i {
	font-size: 12px;
}

.DEGZnidN:hover {
	border-color: var(--accent-1);
	color: var(--accent-1);
}

/* -----------------------------------------------------
	Magic Link Verify Page
------------------------------------------------------ */

.wnjlvLxL {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bg-dark);
}

.ePaG0sVQ {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 380px;
	padding: 3rem;
	opacity: 0;
	animation: sg56wroE 0.6s ease forwards 0.1s;
}

.a4yhFfF6 {
	width: 120px;
	margin-bottom: 2.5rem;
}

.Chd5HRuN {
	height: 28px;
	margin-bottom: 1.5rem;
}

.fVLA3wfH {
	font-size: 24px;
	font-weight: 700;
	color: var(--white);
	margin: 0 0 0.5rem 0;
}

.to5VAnMX {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.6;
	margin: 0;
}

.cZqohjLx {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(60, 162, 89, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.cZqohjLx i {
	font-size: 22px;
	color: var(--success-green);
}

.wHKlhcet {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(255, 60, 60, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.wHKlhcet i {
	font-size: 22px;
	color: #ff4444;
}

.yNA93F6Q {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1.5rem;
	padding: 0.65rem 1.25rem;
	border-radius: 8px;
	background: var(--accent-1);
	color: var(--white);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	transition: filter 0.2s ease;
}

.yNA93F6Q:hover {
	filter: brightness(1.12);
}

.yNA93F6Q i {
	font-size: 12px;
}

/* -----------------------------------------------------
	Media Queries
------------------------------------------------------ */

@media (max-width: 1024px) {
	.d6JFXAws {
		grid-template-columns: 50% 1fr;
	}

	.eaMsaA8m {
		padding: 3rem 3rem;
	}

	.YXP1CMsy {
		padding: 3rem;
	}

	.Q576iyKo {
		gap: 1rem;
	}
}

@media (max-width: 768px) {
	.d6JFXAws {
		grid-template-columns: 1fr;
	}

	.YXP1CMsy {
		display: none;
	}

	.eaMsaA8m {
		padding: 3rem 2rem;
	}
}

@media (max-width: 480px) {
	.eaMsaA8m {
		padding: 2rem 1.5rem;
	}

	.u3auziyP {
		font-size: 28px;
	}

	.Sa0sxNr7 {
		width: 95px;
		margin-bottom: 2.5rem;
	}
}

/* ══════════════════════════════════════
   Sidebar v2 - Floating card with categories
   ══════════════════════════════════════ */

/* ── Outer wrapper ── */
.jccuufIB {
  height: 100%;
  display: flex;
  align-items: stretch;
  column-gap: 6px;
  position: relative;
  flex-shrink: 0;
}

/* ── Floating card ── */
.XckJs3HW {
  width: 220px;
  height: calc(100% - 32px);
  margin: 16px 0 16px 16px;
  background-color: var(--sub-bg-dark);
  border: 1px solid #2d2f39;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.OqVm9_gg {
  width: 68px;
}

/* ── Logo ── */
.rso6jU9Q {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px 0;
  flex-shrink: 0;
  height: 56px;
}

.rso6jU9Q a {
  display: flex;
  align-items: center;
}

.rso6jU9Q img {
  display: block;
}

/* ── Navigation ── */
.pSpsvJTg {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  padding: 57px 0 8px;
  gap: 4px;
  overflow-y: auto;
  overflow-x: hidden;
}

.pSpsvJTg::-webkit-scrollbar {
  width: 0;
}

/* ── Category ── */
.AV7rBxJ_ {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.iLVqz6FZ {
  margin: 0;
  padding: 6px 20px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: nowrap;
  overflow: hidden;
  height: 22px;
  box-sizing: border-box;
  transition: height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}

.OqVm9_gg .iLVqz6FZ {
  height: 0;
  padding: 0 20px;
  opacity: 0;
}

.kGePzTKO {
  height: 1px;
  background: #2d2f39;
  margin: 10px 16px;
  transition: margin 0.3s ease;
}

.OqVm9_gg .kGePzTKO {
  margin: 4px 16px;
}

/* ── Nav item ── */
.e07xqiUr {
  display: block;
  text-decoration: none;
  padding: 0 8px;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}

.fw4nhpnP {
  display: flex;
  align-items: center;
  height: 40px;
  border-radius: 10px;
  transition: background-color 0.2s ease;
  overflow: hidden;
}

.fw4nhpnP:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

.hIB51byV {
  background-color: var(--accent-1) !important;
}

.hIB51byV .py_h7Q9V {
  color: var(--white);
}

.hIB51byV .RkPzpmtC i {
  color: var(--white);
}

.UXwODFYu:hover {
  background-color: rgba(239, 68, 68, 0.1);
}

.UXwODFYu:hover .RkPzpmtC i {
  color: #ef4444;
}

.UXwODFYu:hover .py_h7Q9V {
  color: #ef4444;
}

/* ── Icon ── */
.RkPzpmtC {
  width: 52px;
  min-width: 52px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.RkPzpmtC i {
  font-size: 22px;
  color: var(--white);
  transition: color 0.2s ease;
}

.M6vwTRn8 {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 7px;
  height: 7px;
  background-color: #ff3b30;
  border-radius: 50%;
  pointer-events: none;
}

/* ── Label ── */
.py_h7Q9V {
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.3s ease, color 0.2s ease;
}

/* ── Logout button (bottom) ── */
.HgD7I0mn {
  display: flex;
  align-items: center;
  height: 44px;
  margin: 0 8px 8px;
  border-radius: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.HgD7I0mn:hover {
  background-color: rgba(239, 68, 68, 0.1);
}

.HgD7I0mn:hover .RkPzpmtC i {
  color: #ef4444;
}

.HgD7I0mn:hover .py_h7Q9V {
  color: #ef4444;
}

/* ── Text visibility transitions ── */
.Qtfqr0HC {
  opacity: 1;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
}

.NKi1MXtv {
  opacity: 0;
  transition: opacity 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
}

.TdRr4sBU {
  opacity: 0;
  width: 0;
  transition: opacity 0.3s ease, width 0.3s ease;
  white-space: nowrap;
  overflow: hidden;
  transition-delay: 0.2s;
}

/* ── Toggle bar ── */
.QYaPP49j {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.H5HP97uu {
  height: 2rem;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.H5HP97uu::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: transparent;
}

.aBocAqxk {
  opacity: 0.4;
}

.VzFJXiIG {
  height: 1rem;
  width: 0.25rem;
  background-color: var(--accent-1);
  border-radius: 9999px;
}

/* ══════════════════════════════════════
   Desktop hide below 768px
   ══════════════════════════════════════ */

@media (max-width: 768px) {
  .jccuufIB {
    display: none;
  }
}

/* ══════════════════════════════════════
   Mobile Sidebar
   ══════════════════════════════════════ */

.dsZCZ2zU {
  display: none;
}

.CfJaYFKG {
  display: none;
}

@media (max-width: 768px) {
  .dsZCZ2zU {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    z-index: 9998;
    animation: AsVOSRp5 0.2s ease;
  }

  .CfJaYFKG {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 80vw;
    background-color: var(--sub-bg-dark);
    border-right: 1px solid #2d2f39;
    z-index: 9999;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }

  .k_hlHIba {
    transform: translateX(0);
  }

  .WkNyZQBm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    padding-left: 0.75rem;
    border-bottom: 1px solid #2d2f39;
    flex-shrink: 0;
  }

  .wLYtGxJ3 {
    height: 32px;
    width: auto;
  }

  .IcacKlqk {
    background: none;
    border: none;
    color: #888;
    font-size: 20px;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
  }

  .IcacKlqk:hover {
    color: var(--white);
  }

  .mC9svevY {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    padding: 0.75rem 0;
    overflow-y: auto;
  }

  .zbYqYiD6 {
    margin: 0;
    padding: 12px 1.5rem 6px;
    font-size: 10px;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .OgjQa5oq {
    height: 1px;
    background: #2d2f39;
    margin: 4px 1.25rem;
  }

  .DatxGu3h {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    color: var(--white);
    font-weight: 500;
    font-size: 15px;
    transition: background-color 0.15s ease;
  }

  .DatxGu3h:hover {
    background-color: rgba(255, 255, 255, 0.04);
  }

  .wO94rS5N {
    background-color: var(--accent-1);
  }

  .c0XSuJBQ {
    font-size: 18px;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
  }

  .k3OVQF77 {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 7px;
    height: 7px;
    background-color: #ff3b30;
    border-radius: 50%;
    pointer-events: none;
  }

  .cH0rBOkQ {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #2d2f39;
    background: none;
    border-left: none;
    border-right: none;
    border-bottom: none;
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    flex-shrink: 0;
    width: 100%;
    text-align: left;
    transition: background-color 0.15s ease;
  }

  .cH0rBOkQ:hover {
    background-color: rgba(239, 68, 68, 0.15);
  }

  .cH0rBOkQ i {
    font-size: 18px;
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @keyframes AsVOSRp5 {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}

/* -----------------------------------------------------
    Guestii Shared Styles
    Extracted from Hub.module.css and Connections.module.css
------------------------------------------------------ */

@font-face {
    font-family: DonerRegular;
    src: url(/static/media/Doner-RegularText.ba9ab1d5394d74b3284f.otf) format("opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: DonerRegular;
    src: url(/static/media/Doner-RegularText.ba9ab1d5394d74b3284f.otf) format("opentype");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: DonerRegular;
    src: url(/static/media/Doner-RegularDisplay.3dddc1e11ab2935c3dca.otf) format("opentype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: DonerRegular;
    src: url(/static/media/Doner-RegularDisplay.3dddc1e11ab2935c3dca.otf) format("opentype");
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

:root {
    --white: #ffffff;
    --black: #000000;
    --bg-dark: #01000D;
    --sub-bg-dark: #161824;
    --sub-bg-light: #f0f1f2;
    --accent-1: #0D7AC7;
    --past: #0D7AC788;
    --success-green: #3CA259;
    --cancelled-red: #ff2626;
    --font-family: 'DonerRegular', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'DonerRegular', sans-serif;
    font-family: var(--font-family);
}

body {
    background-color: #01000D;
    background-color: var(--bg-dark)
}

button {
    cursor: pointer;
}

h1 {
    font-weight: 700;
    font-size: 34px;
}

h3 {
    font-weight: 600;
    font-size: 24px;
}

p, input {
    font-weight: 300;
    font-size: 15px;
}

/* -----------------------------------------------------
    Typography
------------------------------------------------------ */

.Amf2H8sg { font-weight: 600; }
.YJBuY2SN { font-weight: 700; }

.KHR_0o48 { font-size: 8px; }
.DfHrCQaZ { font-size: 10px; }
.VrJsJddC { font-size: 12px; }
.VHszidZf { font-size: 14px; }
.nWK3mA00 { font-size: 15px; }
.jZoOZo73 { font-size: 16px; }
.QoPn4TUb { font-size: 17px; }
.BuUOidgq { font-size: 22px; }
.qC47wrTr { font-size: 25px; }
.s5Fbzv9Z { font-size: 28px; }
.FnsPJT6N { font-size: 31px; }
.yRN5vf_O { font-size: 34px; }
.UQtbv0BY { font-size: 37px; }
.ai0nzKVj { font-size: 40px; }
.cR547lQi { font-size: 43px; }

/* -----------------------------------------------------
    Layout
------------------------------------------------------ */

.PKhLRUda {
    position: relative;
}

.tJ5rjLoL {
    height: 100vh;
    width: 100%;
    display: flex;
    overflow: hidden;
    background-color: #01000D;
    background-color: var(--bg-dark);
    box-sizing: border-box;
    color: #ffffff;
    color: var(--white)
}

.C5A0aCwY {
    height: 100%;
    width: 100%;
    position: relative;
    background-color: #01000D;
    background-color: var(--bg-dark);
    transition: background-color 400ms ease
}

.F_B53uyx {
    opacity: 0;
    animation: T9fGTNVv 200ms ease-out forwards;
}

._SoIoQbY {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 40px 60px;
    row-gap: 2.5rem;
    box-sizing: border-box;
    overflow-y: scroll;
}

.MVU5XCjn {
    height: 100%;
    overflow: hidden;
    width: 100%;
    display: flex;
    column-gap: 1.25rem;
    flex-direction: column;
}

/* -----------------------------------------------------
    Banner
------------------------------------------------------ */

.OlxEtvJ7 {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
}

.bwjo3fEF h3 {
    margin: 0 0 0.25rem 0;
}

.bwjo3fEF p {
    margin: 0;
    opacity: 0.7;
}

.NgaUh2Ec {
    height: 75%;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-column-gap: 1rem;
    column-gap: 1rem;
    position: relative;
}

/* -----------------------------------------------------
    Search Input
------------------------------------------------------ */

.hLfxMzp4 {
    width: 350px;
    box-sizing: border-box;
    border-radius: 50px;
    display: flex;
    align-items: center;
    position: relative;
    column-gap: 1rem;
    color: #01000D;
    color: var(--bg-dark);
    background-color: #ffffff;
    background-color: var(--white);
}

.hLfxMzp4 input {
    position: absolute;
    background: none;
    border: none;
    margin-left: 15px;
    width: calc(100% - (2rem));
    color: #01000D;
    color: var(--bg-dark)
}

.o7R2RE48 {
    display: flex;
    align-items: center;
    column-gap: .75rem;
    position: absolute;
    left: 10px;
    padding: 0 10px;
    box-sizing: border-box;
}

.fLto3KBP {
    position: absolute;
    width: 350px;
    height: 500px;
    background-color: white;
    top: 50px;
    z-index: 999;
    border-radius: 10px;
    overflow-y: scroll;
}

.Ol_wdeGH {
    padding: 15px 20px;
    box-sizing: border-box;
    color: #01000D;
    color: var(--bg-dark);
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    grid-column-gap: .5rem;
    column-gap: .5rem;
    background: none;
    width: 100%;
    border: none;
    text-align: left;
}

.u4LwI4Uj {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.evB8Text {
    height: 100%;
    aspect-ratio: 1;
    border-radius: 100%;
    background-color: #ffffff;
    background-color: var(--white);
    border: 1px solid #ffffff;
    border: 1px solid var(--white);
}

.evB8Text i {
    color: #01000D;
    color: var(--bg-dark);
}

/* -----------------------------------------------------
    Widget Container
------------------------------------------------------ */

.wBERSR2t {
    height: 100%;
    width: 100%;
    border-radius: 15px;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    padding: 30px;
    box-sizing: border-box;
    position: relative;
    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid #2d2f39
}

/* -----------------------------------------------------
    Control Buttons
------------------------------------------------------ */

.skd3iHXX {
    display: flex;
    margin-top: 1rem
}

.NRx71tFt {
    width: 40px;
    aspect-ratio: 1;
    background-color: #ffffff;
    background-color: var(--white);
    border: none;
    color: #01000D;
    color: var(--bg-dark);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.L1huCCyX {
    margin: 0 0 0 auto
}

/* -----------------------------------------------------
    Status Badge
------------------------------------------------------ */

.JAKo8ehe {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.T3vIkTOV {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

/* -----------------------------------------------------
    Connection Count Badge
------------------------------------------------------ */

.xWUEwM2d {
    background-color: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
}

/* -----------------------------------------------------
    Action Buttons
------------------------------------------------------ */

.qByyPqmQ {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #0D7AC7 0%, #0099cc 100%);
    background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
    border: none;
    border-radius: 8px;
    color: #ffffff;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.qByyPqmQ:hover {
    box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

.qByyPqmQ i {
    font-size: 11px;
}

.Nunam8tv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: #01000D;
    background-color: var(--bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    color: #888;
    cursor: pointer;
    transition: all 0.2s ease;
}

.Nunam8tv:hover {
    border-color: #0D7AC7;
    border-color: var(--accent-1);
    color: #0D7AC7;
    color: var(--accent-1);
}

.NRBCvOJI {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    color: #ef4444;
    cursor: pointer;
    transition: all 0.2s ease;
}

.NRBCvOJI:hover {
    background-color: rgba(239, 68, 68, 0.15);
}

.GACnNUL7 {
    padding: 0.75rem 1.5rem;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    color: #ffffff;
    color: var(--white);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.GACnNUL7:hover {
    background-color: #2d2f39;
}

/* -----------------------------------------------------
    Cards
------------------------------------------------------ */

.U0YaTBe8 {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid #2d2f39;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.U0YaTBe8:hover {
    border-color: #3d3f49;
}

.pV8HlDXw {
    padding: 1.25rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.gBzI7Siw {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
    color: var(--white);
    flex-shrink: 0;
}

.DryXY8TF {
    flex: 1 1;
    min-width: 0;
}

.yl9wT2jY {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.125rem;
}

.DryXY8TF h4 {
    margin: 0;
}

.DryXY8TF p {
    margin: 0;
    color: #666;
}

.LM8jt790 {
    display: flex;
    gap: 0.5rem;
}

/* -----------------------------------------------------
    Empty State
------------------------------------------------------ */

.KltVrh1w {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    border: 1px dashed #2d2f39;
    border-radius: 16px;
    min-height: calc(100vh - 320px);
}

.UxhGXAYZ {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.1) 0%, rgba(0, 191, 255, 0.05) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.UxhGXAYZ i {
    font-size: 24px;
    color: #0D7AC7;
    color: var(--accent-1);
}

.KltVrh1w h3 {
    margin: 0 0 0.5rem 0;
    color: #ffffff;
    color: var(--white);
}

.KltVrh1w > p {
    margin: 0 0 1.5rem 0;
    color: #888;
}

/* -----------------------------------------------------
    Loading
------------------------------------------------------ */

.EDMW44wp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    gap: 1rem;
}

.XQuiDToU {
    width: 40px;
    height: 40px;
    border: 3px solid #2d2f39;
    border-top-color: #0D7AC7;
    border-top-color: var(--accent-1);
    border-radius: 50%;
    animation: l3_OD0M_ 1s linear infinite;
}

/* -----------------------------------------------------
    Modal
------------------------------------------------------ */

.rqSicJgb {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
    margin: 0;
    width: 100%;
    height: 100vh;
}

.aWZOr_uM {
    background-color: #01000D;
    background-color: var(--bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: D3a_YywI 0.2s ease-out;
    position: relative;
    margin: 0 auto;
}

.eLhNOPt_ {
    max-width: 700px;
}

.ig3aCorD {
    padding: 1.5rem;
    border-bottom: 1px solid #2d2f39;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ig3aCorD h3 {
    margin: 0;
    color: #ffffff;
    color: var(--white);
}

.mMy4P6mu {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
}

.mMy4P6mu:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    color: var(--white);
}

.Xrx901Ao {
    padding: 1.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.AvvZHMIo {
    padding: 1.5rem;
    border-top: 1px solid #2d2f39;
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* -----------------------------------------------------
    Form Elements
------------------------------------------------------ */

.ao2ZsD6L {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.TpTBA3tC {
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.WMRQ9vrv {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 10px;
    padding: 0.875rem 1rem;
    color: #ffffff;
    color: var(--white);
}

.WMRQ9vrv i {
    color: #666;
    font-size: 14px;
}

/* -----------------------------------------------------
    Popup / Overlay
------------------------------------------------------ */

.XKSYdPIW {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 2rem;
    margin: 0;
    width: 100%;
    height: 100vh;
}

.SOVXrYMg {
    background-color: #01000D;
    background-color: var(--bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 16px;
    width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}

.U1N3818e {
    pointer-events: none;
}

.y1uIKMel {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.mDWYDsDQ {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.dzRQ8H_Y p:first-child {
    font-size: 20px;
    margin-bottom: 0.25rem;
}

.fmFOazbQ {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 1rem;
    right: 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fmFOazbQ:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    color: var(--white);
}

/* -----------------------------------------------------
    Progress Circles
------------------------------------------------------ */

.VoOheHT4 {
    display: flex;
    gap: 0.5rem;
}

.B6sWYjmS {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: all 0.2s ease;
}

.RUDr2U0r {
    background-color: #0D7AC7;
    background-color: var(--accent-1);
    border-color: #0D7AC7;
    border-color: var(--accent-1);
    color: #ffffff;
    color: var(--white);
}

/* -----------------------------------------------------
    Loading Layout
------------------------------------------------------ */

.vKDHeNTZ {
    height: 300px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vKDHeNTZ img {
    height: 80px;
}

/* -----------------------------------------------------
    Animations
------------------------------------------------------ */

@keyframes T9fGTNVv {
    to { opacity: 1; }
}

@keyframes D3a_YywI {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes l3_OD0M_ {
    to { transform: rotate(360deg); }
}

/* -----------------------------------------------------
    Merge Suggestions Banner
------------------------------------------------------ */

.PbNMu7tt {
    background: #0D7AC7;
    color: white;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.PbNMu7tt:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    background: #0D7AC7;
}

.sYrrsW30 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sYrrsW30 i {
    font-size: 1.25rem;
    opacity: 0.9;
}

.sYrrsW30 i:last-child {
    font-size: 0.875rem;
    transition: transform 0.2s ease;
    margin-left: auto;
}

.PbNMu7tt:hover .sYrrsW30 i:last-child {
    transform: translateX(3px);
}

/* -----------------------------------------------------
    Responsive
------------------------------------------------------ */

@media (max-width: 768px) {
    ._SoIoQbY {
        padding: 20px 30px;
    }

    .NgaUh2Ec {
        display: none;
    }
}

/* ------------------------------------------------------
   Hide Scrollbar
------------------------------------------------------ */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* -----------------------------------------------------
    Guestii CRM Styles
------------------------------------------------------ */

/* Container */
.UAZUy8rz {
    width: 100%;
    min-height: 100vh;
    background-color: var(--bg-dark);
    color: var(--white);
    display: flex;
    flex-direction: column;
    padding: 40px 60px;
    box-sizing: border-box;
    overflow-y: scroll;
}

/* Navigation Tabs */
.YFsvBnqY {
    position: relative;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.M_s7L6hy {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding-left: 0;
    position: relative;
}

.zAsILcoW {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    font-weight: 400;
    font-family: var(--font-family);
    cursor: pointer;
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.2s ease;
}

.zAsILcoW:hover {
    color: rgba(255, 255, 255, 0.9);
}

.w4A2KfLT {
    color: var(--white);
    font-weight: 500;
}

.w4A2KfLT::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #0D7AC7;
    border-radius: 2px 2px 0 0;
}

/* Guest Search Toolbar */
.waMnOjTv {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.KBycPltd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.vTCnEXJJ {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 400px;
}

.NcEZhy9H {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}

.hU_9EiYe {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    -webkit-user-select: none;
            user-select: none;
    margin-bottom: 0.75rem;
}

.eRcPfZkW {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

/* Guest Toolbar */
.ftnZ9igN {
    display: flex;
    align-items: center;
    gap: 0;
}

.hpLVu8io {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.foXNihly {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 400;
    font-family: var(--font-family);
    cursor: pointer;
    transition: all 0.2s ease;
}

.foXNihly:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: #444;
    color: rgba(255, 255, 255, 0.9);
}

.VTTjjeQY {
    background-color: #0D7AC7;
    border-color: #0D7AC7;
    color: var(--white);
    font-weight: 500;
}

.VTTjjeQY:hover {
    background-color: rgba(13, 122, 199, 0.8);
    border-color: rgba(13, 122, 199, 0.8);
    color: var(--white);
}

.foXNihly i {
    font-size: 16px;
}

.foXNihly span {
    white-space: nowrap;
}

.yDUK8Q9n {
    flex: 1 1;
    max-width: 400px;
    margin-left: auto;
}

@media (min-width: 768px) {
    .dSssm0MQ {
        max-width: 220px;
        width: auto;
    }
}

/* Responsive for Guest Search Toolbar */
@media (max-width: 1280px) {
    .dSssm0MQ {
        min-width: 150px;
        max-width: 190px;
    }
}

@media (max-width: 1024px) {
    .waMnOjTv {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem 0;
    }

    .hpLVu8io {
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .foXNihly {
        padding: 0.625rem 1rem;
        font-size: 14px;
        flex: 1 1;
        min-width: 0;
        justify-content: center;
    }

    .foXNihly i {
        font-size: 14px;
    }

    .MVDE7MM_ {
        justify-content: flex-start;
        gap: 0.75rem;
    }

    .dSssm0MQ {
        min-width: 0;
        max-width: 100%;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: calc(50% - 0.375rem);
        width: auto;
    }

    .NcEZhy9H {
        margin-left: 0;
        margin-top: 0.5rem;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .waMnOjTv {
        padding: 0.75rem 0;
        gap: 0.75rem;
    }

    .hpLVu8io {
        gap: 0.5rem;
        width: 100%;
    }

    .foXNihly {
        padding: 0.625rem 0.75rem;
        font-size: 13px;
        gap: 0.375rem;
        flex: 1 1;
        min-width: 0;
    }

    .foXNihly i {
        font-size: 13px;
    }

    .foXNihly span {
        font-size: 13px;
    }

    .vTCnEXJJ {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .vTCnEXJJ .Du2f4eha {
        width: 100%;
        max-width: 100%;
    }

    .MVDE7MM_ {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .dSssm0MQ {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 100%;
        width: 100%;
    }

    .hh3CYZmR {
        flex-direction: column;
        gap: 0.5rem;
    }

    .hh3CYZmR span {
        max-width: 100%;
        width: 100%;
    }

    .WpZO1B6K span {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .waMnOjTv {
        gap: 0.75rem;
    }

    .hpLVu8io {
        flex-direction: row;
        gap: 0.5rem;
        flex-wrap: wrap;
    }

    .foXNihly {
        flex: 1 1;
        min-width: calc(33.333% - 0.5rem);
        padding: 0.625rem 0.5rem;
        justify-content: center;
        font-size: 12px;
    }

    .foXNihly i {
        font-size: 12px;
    }

    .foXNihly span {
        font-size: 12px;
    }

    .vTCnEXJJ {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
    }

    .vTCnEXJJ .Du2f4eha {
        width: 100%;
    }

    .MVDE7MM_ {
        flex-direction: column;
        gap: 0.625rem;
    }

    .dSssm0MQ {
        min-width: 0;
        max-width: 100%;
        flex: 1 1 100%;
        width: 100%;
    }
}

.JPaobRff {
    display: flex;
    flex: 1 1;
    max-height: 100%;
    overflow: hidden;
}

.UK2DnXLy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
    width: 100%;
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 16px;
    padding: 1.25rem;
    box-sizing: border-box;
    overflow-y: scroll;
}

.rKmQagqB {
    display: grid;
    grid-gap: 2rem;
    gap: 2rem;
    width: 100%;
    transition: grid-template-columns 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.yf20dx86 {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1;
    justify-content: flex-start;
    min-height: 0;
}

.BXegidIJ {
    flex: 1 1;
    width: 100%;
}

.S8BqG0Ot {
    width: 100%;
}

/* Dashboard Styles */
.GQRZ8ndO {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
}

.Y3j1hGmd {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 1.5rem;
    gap: 1.5rem;
}

.QtlJmLO0 {
    min-width: 0;
}

.QtlJmLO0 .TAysv5CP {
    padding: 1.5rem;
}

.t9zshDH1 {
    display: grid;
    grid-template-columns: 1fr 400px;
    grid-gap: 2rem;
    gap: 2rem;
}

.WVENiNNZ {
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 15px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.OtlJw1Z_ {
    width: 100%;
    height: 400px;
}

.SlW9638E {
    background-color: rgba(22, 24, 36, 0.98);
    border: 1px solid #2d2f39;
    border-radius: 10px;
    padding: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    pointer-events: none;
    animation: none;
    transition: none;
}

.YkAKkTWv {
    margin: 0 0 0.5rem 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #2d2f39;
}

.S_2jyfHD {
    margin: 0.5rem 0;
    font-size: 13px;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rJH7ruoZ {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.Y0k3hVB4 {
    color: rgba(255, 255, 255, 0.7);
    min-width: 80px;
}

.Vk0Kxn9g {
    color: var(--white);
    font-weight: 600;
    margin-left: auto;
}

.ztcOIHHr {
    color: var(--white);
    font-size: 13px;
    margin: 0;
}

.apfAtwRy {
    padding-bottom: 1rem;
    border-bottom: 1px solid #2d2f39;
}

.apfAtwRy h4 {
    margin: 0;
    color: var(--white);
}

.zUHN6CnD {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.odmQQ3Ln {
    min-width: 0;
}

.odmQQ3Ln .TAysv5CP {
    padding: 1.5rem;
}


/* Responsive */
@media (max-width: 1024px) {
    .t9zshDH1 {
        grid-template-columns: 1fr;
    }

    .Y3j1hGmd {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .Y3j1hGmd {
        grid-template-columns: 1fr;
    }

    .OtlJw1Z_ {
        height: 300px;
        overflow-x: auto;
    }

    .WVENiNNZ {
        padding: 1rem;
        gap: 1rem;
    }

    .t9zshDH1 {
        gap: 1rem;
    }

    .r9dJhFl4 {
        grid-template-columns: 1fr;
    }

    .n7ONJ0Dt {
        grid-template-columns: 1fr;
    }
}

/* Insights Section */
.BjLoMcC8 {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.cPL29Dd9 h3 {
  margin: 0;
  color: var(--white);
  display: flex;
  align-items: center;
}

.cPL29Dd9 p {
  margin: 0;
}

/* Smart Groups Grid */
/* Smart Groups Grid */
.r9dJhFl4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 1.5rem;
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .r9dJhFl4 {
        grid-template-columns: 1fr;
    }
}

.rOqz6EyH {
  min-width: 0;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  cursor: pointer;
}

.rOqz6EyH:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.rOqz6EyH .TAysv5CP {
  padding: 1.5rem;
}

.VepSZLQj {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 8px;
}

@media (max-width: 768px) {
    .VepSZLQj {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
}

.o98SWnUd {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.TH4fLwyV {
  padding: 0.375rem 0.75rem;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.WBEtTP5J {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #2d2f39;
}

.Z_OzDT4e {
  padding: 0.625rem 1.25rem;
  border: none;
  border-radius: 8px;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.Z_OzDT4e:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  filter: brightness(1.1);
}

/* Insights Grid */
.n7ONJ0Dt {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  grid-gap: 2rem;
  gap: 2rem;
}

.uEz952e1 {
  background-color: var(--sub-bg-dark);
  border: 1px solid #2d2f39;
  border-radius: 15px;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mvtKKtSB {
  padding-bottom: 1rem;
  border-bottom: 1px solid #2d2f39;
}

.mvtKKtSB h4 {
  margin: 0 0 0.5rem 0;
  color: var(--white);
  display: flex;
  align-items: center;
}

.mvtKKtSB p {
  margin: 0;
}

/* VIP List */
.MbTe_hiR {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.Bj0x3z3f {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid #2d2f39;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.Bj0x3z3f:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-color: #444;
  transform: translateX(4px);
}

.seHl6Gqb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.Fln2SGBR {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0d7ac7 0%, #0a5f9e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 20px;
  flex-shrink: 0;
}

.zl4ztKH_ {
  flex: 1 1;
  min-width: 0;
}

.HioLzHZw {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.HioLzHZw h5 {
  margin: 0;
  color: var(--white);
}

.yZoXF2bA {
  padding: 0.25rem 0.5rem;
  background-color: #0d7ac720;
  color: #0d7ac7;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.zl4ztKH_ p {
  margin: 0;
}

.ezU_GTRP {
  margin-left: auto;
  flex-shrink: 0;
}

.sQGnMcS4 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.afbkQIzz {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--sub-bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #0d7ac7;
}

/* Events List */
.iuJQkzeo {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cfQg9Ya0 {
  padding: 1.25rem;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid #2d2f39;
  border-radius: 12px;
}

.YF3efA9u {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #888;
  font-size: 13px;
  margin-bottom: 0.75rem;
}

.YF3efA9u i {
  color: #0d7ac7;
}

.cfQg9Ya0 h5 {
  margin: 0;
  color: var(--white);
}

.NcGzNWTe {
  margin-top: 1rem;
  padding: 1rem;
  background-color: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 8px;
}

.O3pglJLu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

._TtX1pjR {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.HX2aUIwB {
  padding: 0.5rem 1rem;
  background-color: #10b981;
  border: none;
  border-radius: 6px;
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.HX2aUIwB:hover {
  background-color: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.dTNrvHny {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #2d2f39;
}

.dTNrvHny i {
  margin-right: 0.25rem;
}

/* Insights List */
.YoWjtBNQ {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.Fmie2NGh {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  border-left-width: 4px;
  border-left-style: solid;
}

.cZsRqYJa {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.ABnQwsG6 {
  flex: 1 1;
}

.ABnQwsG6 h5 {
  margin: 0 0 0.5rem 0;
  color: var(--white);
}

.ABnQwsG6 p {
  margin: 0;
}

.etk9G9Em {
  padding: 0.5rem 1rem;
  background-color: rgba(13, 122, 199, 0.2);
  border: 1px solid rgba(13, 122, 199, 0.4);
  border-radius: 6px;
  color: #0d7ac7;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.etk9G9Em:hover {
  background-color: rgba(13, 122, 199, 0.3);
  border-color: #0d7ac7;
  transform: translateX(2px);
}

/* View All Button */
.TVfLlKMT {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid #2d2f39;
  border-radius: 10px;
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-family);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.TVfLlKMT:hover {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: #444;
  transform: translateY(-1px);
}

/* Responsive for new insights dashboard */
@media (max-width: 1200px) {
  .n7ONJ0Dt {
    grid-template-columns: 1fr;
  }

  .r9dJhFl4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .r9dJhFl4 {
    grid-template-columns: 1fr;
  }

    .n7ONJ0Dt {
        grid-template-columns: 1fr;
    }

  .Bj0x3z3f {
    flex-wrap: wrap;
  }

  .ezU_GTRP {
    margin-left: auto;
  }

    ._TtX1pjR {
        flex-direction: column;
        align-items: stretch;
    }

    .HX2aUIwB {
        width: 100%;
        justify-content: center;
    }
}

/* Special responsive for VIP items on very small screens */
@media (max-width: 500px) {
    .Bj0x3z3f {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.75rem;
        padding: 1rem 0.75rem;
    }

    .seHl6Gqb {
        order: 1;
        flex-shrink: 0;
    }

    .Fln2SGBR {
        order: 2;
        flex-shrink: 0;
    }

    .ezU_GTRP {
        order: 3;
        margin-left: auto;
        margin-right: 0;
        flex-shrink: 0;
    }

    .zl4ztKH_ {
        order: 4;
        width: 100%;
        flex: 1 1 100%;
        margin: 0.5rem 0 0 0;
    }
}

/* ─── Dashboard (db_) ─── */

.E0QkS5z7 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
}

/* ── Stats Row ── */
.GD4lqp4F {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;
    gap: 1rem;
}

.KUjSZx9M {
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: border-color 0.2s ease;
}
.KUjSZx9M:hover {
    border-color: #3d3f49;
}

.U94TuQly {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.mg0NaGjb { background: rgba(13, 122, 199, 0.12); color: var(--accent-1); }
.d_c8hQWx { background: rgba(60, 162, 89, 0.12); color: var(--success-green); }
.aGx7Gms1 { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.uk91t11o { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }

.bJ62tluR {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.vOhvmRjn {
    margin: 0;
    color: #666;
    font-size: 12px;
}
.GGMxPsxK {
    margin: 0;
    color: var(--white);
    font-size: 22px;
    font-weight: 700;
}

/* ── Metrics Row (4 visual tiles) ── */
.XovJH8Xs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;
    gap: 1rem;
}

.mAQhbfVX {
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    transition: border-color 0.2s ease;
}
.mAQhbfVX:hover { border-color: #3d3f49; }

.XqxpSV8K {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.xUgyCvhD {
    font-size: 11px;
    color: #555;
    margin: 0;
}

/* Donut chart (Attendance) */
.baAaBQOs {
    position: relative;
    width: 80px;
    height: 80px;
}
.WseNI_MR {
    width: 80px;
    height: 80px;
    transform: rotate(-90deg);
}
.Cvl6tNwG {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
}

/* Stacked bar (Guest Mix) */
.LqWPr8Cq {
    width: 100%;
    padding: 0.5rem 0;
}
.MxxOQn9O {
    display: flex;
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    background: #2d2f39;
}
.MxxOQn9O > div[data-type="member"] { background: var(--success-green); }
.MxxOQn9O > div[data-type="repeat"] { background: var(--accent-1); }
.MxxOQn9O > div[data-type="once"]   { background: #f59e0b; }

.jrtQoKYX {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
    width: 100%;
}
.jrtQoKYX > span {
    font-size: 11px;
    color: #888;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ljwy7mZf {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.ljwy7mZf[data-type="member"] { background: var(--success-green); }
.ljwy7mZf[data-type="repeat"] { background: var(--accent-1); }
.ljwy7mZf[data-type="once"]   { background: #f59e0b; }

/* Semi-circle arc (Conversion) */
.X6b00lpt {
    position: relative;
    width: 100px;
    height: 55px;
}
.djt0Lypf {
    width: 100px;
    height: 55px;
}
.EeeCSmTx {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
}

/* Top Event highlight */
.Ko9EsbX3 {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}
.RWj_bemN {
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.E3lRKRwU {
    font-size: 24px;
    font-weight: 700;
    color: #f59e0b;
    margin: 0;
    line-height: 1;
}

.nUmyK7RU {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    color: #444;
}
.nUmyK7RU i {
    font-size: 24px;
    opacity: 0.4;
}
.nUmyK7RU p {
    margin: 0;
    font-size: 12px;
}

/* ── Tile (shared card container) ── */
.tt4SEka7 {
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hn5uuTiN {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #2d2f39;
}

.jX_jTawH {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
}
.jX_jTawH i {
    color: var(--accent-1);
    font-size: 14px;
}

.mQodMdir {
    background: none;
    border: none;
    color: var(--accent-1);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.2s ease;
}
.mQodMdir:hover {
    opacity: 0.8;
}
.mQodMdir i {
    font-size: 10px;
}

.eYIWuBH1 {
    display: flex;
    flex-direction: column;
}

/* ── Actions List (Smart Groups) ── */
.gSMFTQc9 {
    display: flex;
    flex-direction: column;
}

.eew2v68v {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(45, 47, 57, 0.4);
    cursor: pointer;
    transition: background-color 0.15s ease;
    text-align: left;
    font-family: var(--font-family);
    width: 100%;
}
.eew2v68v:last-child {
    border-bottom: none;
}
.eew2v68v:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.nsTn3kgg {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.YtD9EMWo {
    flex: 1 1;
    min-width: 0;
}
.sxfTM72S {
    margin: 0;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
}
.W5RRonOj {
    margin: 0.2rem 0 0;
    color: #666;
    font-size: 12px;
}

.bt3ujD66 {
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.RFNMpqDq {
    font-size: 11px;
    color: #444;
    flex-shrink: 0;
}

/* ── Main Layout (4-col grid, mirrors Hub) ── */
.lcXvaWUb {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 1rem;
    gap: 1rem;
    align-items: start;
}

.VEEZTZs_ {
    grid-column: span 3;
}

.QvoerQVt {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── Guest Row (Leaderboard) ── */
.RFtX67WL {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(45, 47, 57, 0.4);
    cursor: pointer;
    transition: background-color 0.15s ease;
    width: 100%;
    text-align: left;
    font-family: var(--font-family);
}
.RFtX67WL:last-child {
    border-bottom: none;
}
.RFtX67WL:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.BAJbqkd6 {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    background: rgba(13, 122, 199, 0.12);
    color: var(--accent-1);
}
.BAJbqkd6[data-rank="1"] { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.BAJbqkd6[data-rank="2"] { background: rgba(148, 163, 184, 0.15); color: #94A3B8; }
.BAJbqkd6[data-rank="3"] { background: rgba(205, 127, 50, 0.15); color: #CD7F32; }

.oCGbKehN {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d7ac7, #0a5f9e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.eqwnM5YV {
    flex: 1 1;
    min-width: 0;
}
.Xj1VRj3N {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.zqmLXjEX {
    margin: 0;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.JwBXOXmS {
    padding: 0.15rem 0.4rem;
    background: rgba(13, 122, 199, 0.15);
    color: var(--accent-1);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    flex-shrink: 0;
}
.vLjsbPlG {
    margin: 0.15rem 0 0;
    color: #555;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Attendance Ring (SVG) ── */
.FpLcANMK {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}
.DAxSTq3L {
    width: 40px;
    height: 40px;
    transform: rotate(-90deg);
}
.erEtp0lX {
    fill: none;
    stroke: #2d2f39;
    stroke-width: 3;
}
.yxi7xIwk {
    fill: none;
    stroke: var(--accent-1);
    stroke-width: 3;
    stroke-linecap: round;
}
.FJ9SryyP {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-1);
}

/* ── Event Row ── */
.Fe7oxi1o {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(45, 47, 57, 0.4);
}
.Fe7oxi1o:last-child {
    border-bottom: none;
}

.dKOayfsd {
    width: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
}
.blN_pxoD {
    font-size: 10px;
    font-weight: 600;
    color: var(--accent-1);
    letter-spacing: 0.5px;
}
.oupl3LmX {
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.1;
}

.VhzOVDvw {
    flex: 1 1;
    min-width: 0;
}
.uYYCBFFv {
    margin: 0;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.timQJ26i {
    margin: 0.2rem 0 0;
    color: #555;
    font-size: 12px;
}
.timQJ26i i {
    margin-right: 0.25rem;
    font-size: 11px;
}

.uTXAHJVE {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(16, 185, 129, 0.12);
    border: none;
    color: #10b981;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s ease;
}
.uTXAHJVE:hover {
    background: rgba(16, 185, 129, 0.25);
}

/* ── Chart ── */
.fX12VfDd {
    padding: 0.75rem 1.25rem 1.25rem;
}

/* ── Empty state ── */
.uzqxLXRh {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    color: #444;
    gap: 0.75rem;
}
.uzqxLXRh i {
    font-size: 28px;
    opacity: 0.5;
}
.uzqxLXRh p {
    margin: 0;
    font-size: 14px;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .lcXvaWUb {
        grid-template-columns: 1fr 1fr;
    }
    .VEEZTZs_ {
        grid-column: span 1;
    }
}
@media (max-width: 1024px) {
    .lcXvaWUb {
        grid-template-columns: 1fr;
    }
    .VEEZTZs_ {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .GD4lqp4F {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .KUjSZx9M {
        padding: 1rem;
        gap: 0.75rem;
    }
    .U94TuQly {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }
    .GGMxPsxK {
        font-size: 20px;
    }
    .XovJH8Xs {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .GD4lqp4F {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .KUjSZx9M {
        padding: 0.85rem;
        gap: 0.6rem;
        border-radius: 10px;
    }
    .U94TuQly {
        width: 36px;
        height: 36px;
        font-size: 15px;
        border-radius: 8px;
    }
    .vOhvmRjn { font-size: 11px; }
    .GGMxPsxK { font-size: 18px; }
    .RFtX67WL {
        padding: 0.65rem 1rem;
    }
    .Fe7oxi1o {
        padding: 0.65rem 1rem;
    }
    .XovJH8Xs {
        grid-template-columns: 1fr 1fr;
    }
}

/* ── Skeleton loading ── */
.vD0t8gn9 {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid rgba(45, 47, 57, 0.3);
}
.hDFSXqFy {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2d2f39;
    flex-shrink: 0;
    animation: Al87ylCu 1.5s ease-in-out infinite;
}
.XsIVQH8B {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1 1;
}
.lK8EvSTt {
    height: 10px;
    background: #2d2f39;
    border-radius: 4px;
    animation: Al87ylCu 1.5s ease-in-out infinite;
}
.NYkzEQRu { width: 70%; }
.takaETRz { width: 45%; }

@keyframes Al87ylCu {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.7; }
}

/* Requests Tab Styles */
.pNpznweK {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.B7knGC8n {
    display: grid;
    grid-template-columns: 7fr 3fr;
    grid-gap: 1.5rem;
    gap: 1.5rem;
    width: 100%;
    box-sizing: border-box;
}

._EsO0PDJ {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.QrbOWWv3 {
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 15px;
    padding: 1.5rem;
}

.Dj4z5Y40 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.Dj4z5Y40 i {
    color: #0D7AC7;
    font-size: 18px;
}

.vsZcKkez {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.vsZcKkez .TAysv5CP {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.VhiiXky2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #2d2f39;
    background-color: var(--sub-bg-dark);
    border-radius: 15px 15px 0 0;
}

.VhiiXky2 i {
    color: var(--white);
    font-size: 16px;
}

.TATBuJJ0 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.v1Nj5sMT {
    padding: 1rem 1.25rem 0 1.25rem;
}

.aWC6iq63 {
    min-width: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    box-sizing: border-box;
}

.aWC6iq63 .TAysv5CP {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 0 0 15px 15px;
    width: 100%;
    box-sizing: border-box;
}

.cPL29Dd9 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 15px 15px 0 0;
}

.cPL29Dd9 i {
    color: #0D7AC7;
    font-size: 16px;
}

.nWuEWB7i {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.I2urt9i5 {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    color: var(--white);
    font-size: 15px;
    font-family: var(--font-family);
    outline: none;
    box-sizing: border-box;
}

.jJ8ivoce {
    width: 100%;
    display: flex;
}

.jJ8ivoce button {
    width: 100%;
    justify-content: center;
}

.I2urt9i5:focus {
    border-color: #0D7AC7;
    background-color: rgba(255, 255, 255, 0.08);
}

.I2urt9i5::placeholder {
    color: #666;
}

.uBVWNoiM {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.mqUeTtVY {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ZGE8KVPr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid #2d2f39;
    border-radius: 8px;
}

.pDeQYmwc {
    padding: 0.5rem 1rem;
    background-color: #ef4444;
    border: none;
    border-radius: 6px;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.pDeQYmwc:hover {
    background-color: #dc2626;
}

.sDllqGdc {
    position: relative;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    padding: 1rem;
}

.YohPXgE_ {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.YohPXgE_:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-color: #444;
}

.WEz9TH3y {
    margin: 0;
    padding: 0;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    white-space: pre-wrap;
    word-break: break-all;
    overflow-x: auto;
}

.WEz9TH3y code {
    font-family: inherit;
    color: inherit;
}

.qxqhQdVR {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.AnACOpPk {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    align-content: start;
}

/* Requests List Styles */
.oEhHMhHT {
    min-width: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.zEn9cxnN {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #2d2f39;
    background-color: var(--sub-bg-dark);
    border-radius: 15px 15px 0 0;
}

.zEn9cxnN h4 {
    margin: 0;
    color: var(--white);
}

.oEhHMhHT .TAysv5CP {
    padding: 1rem;
    border-radius: 0 0 15px 15px;
}

.yiqDVECj {
    width: 100%;
}

.pY4itW7t {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    min-height: calc(100vh - 350px);
    max-height: calc(100vh - 350px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pY4itW7t::-webkit-scrollbar {
    display: none;
}

.VLtasE4n {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background-color: #000;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.VLtasE4n:hover {
    background-color: rgb(11, 10, 10);
}

.iN7q693b {
    border-color: #0D7AC7;
    background-color: rgba(13, 122, 199, 0.1);
    box-shadow: 0 0 0 2px rgba(13, 122, 199, 0.2);
}

.LDY2raQN {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #0D7AC7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

.g4q2pZaQ {
    flex: 1 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.fHg3xpHc {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #0D7AC7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 12px;
}

/* Quick Invite Styles */
.egvbOK0z {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.egvbOK0z .TAysv5CP {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 0 0 15px 15px;
}

.sQq4Fybh {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #2d2f39;
    background-color: var(--sub-bg-dark);
    border-radius: 15px 15px 0 0;
}

.sQq4Fybh i {
    color: var(--white);
    font-size: 16px;
}

.AFqxey5O {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.xJUeKtCv {
    width: 100%;
}

.nL50X3eB {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    color: var(--white);
    font-size: 15px;
    font-family: var(--font-family);
    outline: none;
    box-sizing: border-box;
}

.nL50X3eB:focus {
    border-color: #0D7AC7;
    background-color: rgba(255, 255, 255, 0.08);
}

.nL50X3eB::placeholder {
    color: #666;
}

.XAR40Z7o {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 302px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.XAR40Z7o::-webkit-scrollbar {
    display: none;
}

.EgFXMMQJ {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.EgFXMMQJ:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: #444;
}

.seCxxwjW {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.EgFXMMQJ:hover .seCxxwjW {
    border-color: rgba(255, 255, 255, 0.5);
}

.v57dj7uF {
    background-color: #0D7AC7;
    border-color: #0D7AC7;
}

.seCxxwjW i {
    color: var(--white);
    font-size: 12px;
}

/* Actions Styles */
.s_2IpAO_ {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.s_2IpAO_ .TAysv5CP {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 0 0 15px 15px;
}

._ei5jkwd {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #2d2f39;
    background-color: var(--sub-bg-dark);
    border-radius: 15px 15px 0 0;
}

._ei5jkwd i {
    color: var(--white);
    font-size: 16px;
}

.g_q8fR_a {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.Km6o73PN {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: #3A7BD5;
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.Km6o73PN:hover {
    background-color: #2d62b0;
}

.Km6o73PN i {
    font-size: 16px;
}

.Km6o73PN span {
    text-align: center;
    line-height: 1.4;
}

.LXRMZtIT {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: #3A7BD5;
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.LXRMZtIT:hover {
    background-color: #2d62b0;
}

.LXRMZtIT i {
    font-size: 11px;
}

.LXRMZtIT span {
    text-align: center;
    line-height: 1.4;
}

.EYLy_iFa {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: #C04A3B;
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.EYLy_iFa:hover {
    background-color: #a83d30;
}

.EYLy_iFa i {
    font-size: 11px;
}

.zj0tGnhK {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background-color: #c74a3a;
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.zj0tGnhK:hover {
    background-color: #b03d2e;
}

.zj0tGnhK i {
    font-size: 16px;
}

/* Member Info Panel Styles */
.ilz4PIgt {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.GNwalvBw {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.GNwalvBw .TAysv5CP {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 0 0 15px 15px;
}

.FbaLDoPG {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1rem 0 1rem;
    border-radius: 15px 15px 0 0;
}

.FbaLDoPG i {
    color: #0D7AC7;
    font-size: 16px;
}

.A5VHfb6R {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.FjWylZ6E {
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.FjWylZ6E h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.FjWylZ6E p {
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
}

.lp9gUzw6 {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.kvcZgUOT {
    color: #0D7AC7;
    font-size: 12px;
    cursor: pointer;
}

.kvcZgUOT:hover {
    text-decoration: underline;
}

.aa98YQT0 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.gHRTiWZ2 {
    padding: 0.5rem 0.875rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 6px;
    color: var(--white);
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    display: inline-block;
    line-height: 1;
}

.hXDoJl16 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.FWu8ly9d {
    padding: 0.25rem 0.5rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 4px;
    color: var(--white);
    font-size: 11px;
    display: inline-block;
    line-height: 1.2;
}

.CwaV1tds {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: #0D7AC7;
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.CwaV1tds:hover {
    background-color: #0b6ba8;
}

.CwaV1tds i {
    font-size: 11px;
}

._5J5hp7sy {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.ObnFiAOg {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: #0D7AC7;
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.ObnFiAOg:hover {
    background-color: #0b6ba8;
}

.ObnFiAOg i {
    font-size: 11px;
}

/* Rating Section */
.OyRaxWjY {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.q8JsMpQd {
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.ZHOvpbcE {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

._2lGzCr3z {
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.oBJQPzi3 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mNRITcrk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.AxJ3xLJL {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.AxJ3xLJL:hover {
    transform: scale(1.1);
}

.wtGBmnGh {
    font-size: 24px;
    transition: all 0.2s ease;
}

.oFZjnJ1S {
    color: #FFD700;
}

.RxGGPVpb {
    color: rgba(255, 255, 255, 0.3);
}

.Y3oMkw9m {
    width: 100%;
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    color: var(--white);
    font-size: 13px;
    font-family: var(--font-family);
    resize: vertical;
    min-height: 80px;
    transition: border-color 0.2s ease;
}

.Y3oMkw9m:focus {
    outline: none;
    border-color: #0D7AC7;
}

.Y3oMkw9m::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.E3RIuIFJ {
    width: 100%;
    padding: 0.5rem 1rem;
    background-color: #0D7AC7;
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.E3RIuIFJ:hover:not(:disabled) {
    background-color: #0b6ba8;
}

.E3RIuIFJ:disabled {
    background-color: rgba(13, 122, 199, 0.3);
    cursor: not-allowed;
    opacity: 0.5;
}

.E3RIuIFJ i {
    font-size: 11px;
}

/* Responsive */
@media (max-width: 1024px) {
    .B7knGC8n {
        grid-template-columns: 1fr;
    }

    .qxqhQdVR {
        order: -1;
    }
}

/* Sidebar */
.v1qpgRbq {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    min-height: calc(100vh - 220px);
    max-height: calc(100vh);
    overflow-y: auto;
    overflow-x: hidden;
    position: -webkit-sticky;
    position: sticky;
    top: 2rem;
    align-self: flex-start;
    scrollbar-width: none;
    -ms-overflow-style: none;
    animation: grzf7IyE 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    animation-fill-mode: forwards;
    width: 100%;
}

/* Mobile Sidebar Overlay */
.oEe340HV {
    display: none;
}

@media (max-width: 768px) {
    .oEe340HV {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 998;
        animation: aKvOJPcc 0.3s ease;
        -webkit-backdrop-filter: blur(2px);
                backdrop-filter: blur(2px);
    }

    .v1qpgRbq {
        position: fixed;
        top: auto;
        bottom: auto;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 500px;
        max-height: 80vh;
        margin-top: 10vh;
        margin-bottom: 10vh;
        background-color: var(--sub-bg-dark);
        border: 1px solid #2d2f39;
        border-radius: 20px;
        z-index: 999;
        padding: 1.5rem;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
        animation: QAajiUNR 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        opacity: 1;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }

    @keyframes PNwOx_hC {
        from {
            transform: translateX(100%);
        }
        to {
            transform: translateX(0);
        }
    }

    @keyframes QAajiUNR {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    @keyframes aKvOJPcc {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
}

.v1qpgRbq::-webkit-scrollbar {
    display: none;
}

@keyframes grzf7IyE {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.wGjVgYJG {
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 15px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.htCEEs3e {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #2d2f39;
}

.htCEEs3e i {
    color: #0D7AC7;
    font-size: 16px;
}

.d7V2GQtK {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sFqMJ1ao {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sFqMJ1ao i {
    font-size: 12px;
    color: #666;
}

.a6LC6tB_ {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.X0p3gUqf {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
    background-color: rgba(255, 255, 255, 0.02);
}

.X0p3gUqf:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.dN0DWfpx {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.i158c4cg {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.X0p3gUqf:hover .i158c4cg {
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.08);
}

.xBy9W0Z4 {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-color: #0D7AC7;
    border: 2px solid #0D7AC7;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.xBy9W0Z4 i {
    color: var(--white);
    font-size: 12px;
}

/* Selected Guest Card */
.zUnfesZa {
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 15px;
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.kbTV6zoj {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1;
}

.UulskbpX {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(13, 122, 199, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0D7AC7;
}

.E50hD7Wg {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.E50hD7Wg:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-color: #444;
}

/* Guest Info Panel */
.EM3oMH_6 {
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 15px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Guest Info Panel Popup Styles */
.j0t8_Mm_ {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    z-index: 1000;
    animation: aKvOJPcc 0.2s ease;
}

.P2AG3Elj {
    position: fixed;
    top: 0;
    right: 0;
    width: 520px;
    max-width: 100%;
    height: 100vh;
    background-color: var(--sub-bg-dark);
    border-left: 1px solid #2d2f39;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    animation: EIx3Rig3 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
}

@keyframes EIx3Rig3 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.IRr83gcj {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #2d2f39;
    background-color: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
}

.sxOoCjfz {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.Ko9xDswh {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, #0D7AC7 0%, #3A7BD5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}

.S9F4dgg5 {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.S9F4dgg5 h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
}

.W86Ndr0x {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.bRcJZnbl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bRcJZnbl:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--white);
}

.bRcJZnbl i {
    font-size: 16px;
}

.FXdPHX2y {
    flex: 1 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.FXdPHX2y::-webkit-scrollbar {
    width: 6px;
}

.FXdPHX2y::-webkit-scrollbar-track {
    background: transparent;
}

.FXdPHX2y::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.FXdPHX2y::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Mobile responsive for popup */
@media (max-width: 480px) {
    .P2AG3Elj {
        width: 100%;
        border-left: none;
        border-radius: 0;
    }

    .IRr83gcj {
        padding: 1rem 1.25rem;
    }

    .FXdPHX2y {
        padding: 1rem 1.25rem;
    }

    .Ko9xDswh {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}

.IBZmjGWI {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    padding: 0.875rem;
}

.cPL29Dd9 {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.25rem;
}

.cPL29Dd9 i {
    color: #0D7AC7;
    font-size: 13px;
}

.cPL29Dd9 h4 {
    font-size: 14px;
    font-weight: 500;
}

.b0cvUrZh {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Bulk Actions Panel */
.lB9sW2l7 {
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.Gxh_b7wv {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    border-bottom: 1px solid #2d2f39;
}

.CyB6x2X6 {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.VtdS5k2Q {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    display: flex;
    align-items: center;
    justify-content: center;
}

.VtdS5k2Q i {
    font-size: 20px;
    color: var(--white);
}

.FZjKnNBB {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.DhRP0XJG {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.DhRP0XJG:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--white);
}

.DhRP0XJG i {
    font-size: 16px;
}

.onBMYZHS {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.onBMYZHS::-webkit-scrollbar {
    display: none;
}

._MtvwQRt {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.KGz7ZQwZ {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.UJEhs0Ta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.UJEhs0Ta i {
    color: var(--white);
    font-size: 16px;
}

.JBen09vq,
.cWo52OpX,
.SjWRIlMd {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background-color: #3A7BD5;
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.JBen09vq:hover,
.cWo52OpX:hover,
.SjWRIlMd:hover {
    background-color: #2d62b0;
}

    .JBen09vq i,
    .cWo52OpX i,
    .SjWRIlMd i,
    .hZQqzx_K i,
    .FZujjQTR i,
    .r4zyHGk3 i,
    .y0G3qa9l i {
        font-size: 15px;
    }

.hZQqzx_K {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background-color: #C04A3B;
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.hZQqzx_K:hover {
    background-color: #a83d30;
}

.hZQqzx_K i {
    font-size: 16px;
}

.FZujjQTR {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background-color: #6B7280;
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.FZujjQTR:hover {
    background-color: #4B5563;
}

.FZujjQTR i {
    font-size: 16px;
}

.r4zyHGk3 {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background-color: #6B7280;
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.r4zyHGk3:hover {
    background-color: #4B5563;
}

.r4zyHGk3 i {
    font-size: 16px;
}

.y0G3qa9l {
    width: 100%;
    padding: 0.875rem 1.25rem;
    background-color: #DC2626;
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
}

.y0G3qa9l:hover {
    background-color: #B91C1C;
}

.y0G3qa9l i {
    font-size: 16px;
}

.cfQg9Ya0 {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

/* Status Section */
.w4vTPg7G {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.HzgsuZqi {
    position: relative;
    cursor: pointer;
}

.opWnYGKN {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 20px;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.HzgsuZqi:hover .opWnYGKN {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: #444;
}

.s41YgPQ8 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22c55e;
    flex-shrink: 0;
}

.HzgsuZqi[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 100%;
    transform: translateX(-50%) translateY(-4px);
    padding: 0.75rem 1rem;
    background-color: rgba(22, 24, 36, 0.98);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    color: var(--white);
    font-size: 12px;
    font-weight: 400;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    max-width: 350px;
    min-width: 200px;
    white-space: normal;
    text-align: left;
    line-height: 1.5;
    word-wrap: break-word;
}

.HzgsuZqi[data-tooltip]::after {
    content: '';
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #2d2f39;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1001;
}

.HzgsuZqi:hover[data-tooltip]::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.HzgsuZqi:hover[data-tooltip]::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.VIOqPIK0 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.WSLkOh0r {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    color: var(--white);
    font-size: 14px;
    font-family: var(--font-family);
}

.WSLkOh0r:focus {
    outline: none;
    border-color: #0D7AC7;
    background-color: rgba(255, 255, 255, 0.08);
}

.WSLkOh0r::placeholder {
    color: #666;
}

.A0qEwhTS {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.A0qEwhTS::-webkit-scrollbar {
    display: none;
}

/* Main Content */
.lpaQStqe {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.ZBuMYzp2 {
    width: 100%;
    margin-bottom: 0.5rem;
    position: relative;
}

.Du2f4eha {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 10px;
    padding: 0.6rem 0.5rem;
    transition: border-color 0.2s ease;
    min-height: 37px;
    flex: 1 1 auto;
}

.Du2f4eha:focus-within {
    border-color: #444;
}

.qAAUtgCL {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.KNRlDGEl {
    flex: 1 1;
    background: none;
    border: none;
    color: var(--white);
    font-size: 14px;
    font-weight: 300;
    font-family: var(--font-family);
    outline: none;
    width: 100%;
}

.KNRlDGEl::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.n3AJaz9_ {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: 0.75rem;
}

.n3AJaz9_:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #444;
    color: rgba(255, 255, 255, 0.9);
}

.LHrYzY1M {
    background-color: rgba(13, 122, 199, 0.2);
    border-color: #0D7AC7;
    color: #0D7AC7;
}

.n3AJaz9_ i {
    font-size: 14px;
}

.hhwWMWQd {
    position: absolute;
    top: calc(100% + 0.75rem);
    left: 0;
    right: 0;
    z-index: 100;
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    max-height: 600px;
    overflow-y: auto;
    animation: qnYr_tJW 0.2s ease-out;
}

@keyframes qnYr_tJW {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hhwWMWQd .wGjVgYJG {
    border: none;
    border-radius: 0;
    padding: 1.5rem;
    box-shadow: none;
}

/* Chip-style filter buttons (Type/Tag) */
.BC_7OwOs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid #2d2f39;
    background: var(--sub-bg-dark);
    color: #e5e7eb;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 40px;
}

.BC_7OwOs:hover {
    border-color: #3a3c48;
    background: #1e1f2a;
}

.BC_7OwOs:active {
    transform: translateY(1px);
}

.EiZva7NE {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--primary-500);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* Inline guest filters row */
.MVDE7MM_ {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    justify-content: flex-end;
    /* width: fit-content; */
    max-width: 100%;
    min-width: 0;
}

.dSssm0MQ {
    position: relative;
    min-width: 160px;
    flex: 1 1 auto;
}

/* Cascading Dropdown Filters */
.EbS5Y_XT {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.LdX4jLvt {
    position: relative;
    min-width: 140px;
    flex: 0 1 auto;
}

.cUhlHuer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 38px;
    gap: 0.5rem;
}

.cUhlHuer:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.08);
}

.cUhlHuer.I0xUzgPW {
    border-color: #0D7AC7;
    background-color: rgba(13, 122, 199, 0.1);
    box-shadow: 0 0 0 2px rgba(13, 122, 199, 0.1);
}

.cUhlHuer.dkAX_TOS {
    border-color: rgba(13, 122, 199, 0.3);
    background-color: rgba(13, 122, 199, 0.05);
}

.Pq1Ir4GK {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
    flex: 1 1;
    text-align: left;
}

.tAWuhmI3 {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background-color: var(--sub-bg-dark);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: 250px;
    max-width: 350px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lm1dbU3v {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.02);
}

.lm1dbU3v i {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.mf_uCnCm {
    flex: 1 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--white);
    font-size: 13px;
    font-family: var(--font-family);
    padding: 0.25rem 0;
}

.mf_uCnCm::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.UIGFEe9_ {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.25rem 0;
}

.UIGFEe9_::-webkit-scrollbar {
    width: 6px;
}

.UIGFEe9_::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.UIGFEe9_::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.UIGFEe9_::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

.JI6Jfrk1.z_y7Zwqy {
    background-color: rgba(13, 122, 199, 0.15);
}

.JI6Jfrk1.z_y7Zwqy:hover {
    background-color: rgba(13, 122, 199, 0.25);
}

@media (max-width: 860px) {
    .KBycPltd {
        flex-direction: column;
    }
    .ftnZ9igN {
        width: 100%;
    }
    .hpLVu8io {
        width: 100%;
    }
    .vTCnEXJJ {
        width: 100%;
        max-width: 100%;
    }
}

.EgwaxKwj {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

/* Skeleton Loading */
.XU3wt3mY {
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
    cursor: default;
    min-height: 200px;
}

.XU3wt3mY::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.05),
        transparent
    );
    animation: Jj9FBpo6 1.5s infinite;
}

@keyframes Jj9FBpo6 {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.v8b1MDAn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.eHaiDl5p {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.rshZXpU3 {
    height: 12px;
    background-color: rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.bFTlA5Ww {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    grid-gap: 1rem;
    gap: 1rem;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.25rem 0;
}

/* Guest Card - Grid View */
.kM3BRiSK {
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    text-align: center;
    min-height: 200px;
}

.kM3BRiSK:hover {
    border-color: #444;
    background-color: rgba(255, 255, 255, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.HkW_w7xR {
    border-color: #0D7AC7;
    background-color: rgba(13, 122, 199, 0.12);
    box-shadow: 0 0 0 2px rgba(13, 122, 199, 0.25);
}

.HkW_w7xR:hover {
    border-color: #0D7AC7;
    background-color: rgba(13, 122, 199, 0.15);
}

/* Checkbox */
.qxSxpNoN {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.PsCkz2vg {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.kM3BRiSK:hover .PsCkz2vg {
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.08);
}

.BbXSOu9A {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-color: #0D7AC7;
    border: 2px solid #0D7AC7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 11px;
}

/* Avatar */
.ZvYKov4G {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0D7AC7 0%, #3A7BD5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(13, 122, 199, 0.3);
    margin-top: 0.5rem;
}

.WK1vpOmR {
    color: var(--white);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.HkW_w7xR .ZvYKov4G {
    box-shadow: 0 2px 12px rgba(13, 122, 199, 0.5);
}

/* Content */
.j8E2Og60 {
    flex: 1 1;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.wSQFK1wp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.wSQFK1wp h4 {
    margin: 0;
    color: var(--white);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.wGskLmS_ {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.XWv7wspW {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.XWv7wspW i {
    font-size: 9px;
}

.yfA9Quy4 {
    background-color: rgba(58, 123, 213, 0.2);
    color: #3A7BD5;
    border: 1px solid rgba(58, 123, 213, 0.3);
}

.UDUBW4Aa {
    background-color: rgba(192, 74, 59, 0.2);
    color: #C04A3B;
    border: 1px solid rgba(192, 74, 59, 0.3);
}

.U0L82gXD {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.BSJqb7X7 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    width: 100%;
    min-width: 0;
    justify-content: center;
}

.SxcGJZXN {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1;
}

.BSJqb7X7 i {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.4);
}

.FdgSJXmU {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.U1sntWhs {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
}

.VdNKnjD2 {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

/* Arrow */
.gyuVnCKQ {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    transition: all 0.2s ease;
}

.kM3BRiSK:hover .gyuVnCKQ {
    color: rgba(255, 255, 255, 0.6);
    transform: translateX(2px);
}

/* Responsive */
@media (max-width: 1024px) {
    .UAZUy8rz {
        padding: 30px 40px;
    }

    .UK2DnXLy {
        gap: 1rem;
        padding: 1.5rem;
    }
    
    .rKmQagqB {
        gap: 1.25rem;
    }
    
    .UK2DnXLy[style*="350px"] {
        grid-template-columns: 1fr 300px;
    }

    .v1qpgRbq {
        max-height: calc(100vh - 180px);
        width: calc(100% - 3rem);
        top: 1.5rem;
    }

    .bFTlA5Ww {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 0.75rem;
    }

    .kM3BRiSK {
        padding: 0.875rem;
        min-height: 180px;
    }

    .ZvYKov4G {
        width: 40px;
        height: 40px;
    }

    .WK1vpOmR {
        font-size: 14px;
    }

    .lB9sW2l7 {
        max-height: calc(100vh - 180px);
    }

    .onBMYZHS {
        padding: 1.25rem;
        gap: 1.25rem;
    }

    .KGz7ZQwZ {
        gap: 0.625rem;
    }

    .ilz4PIgt {
        gap: 1.25rem;
    }
}

@media (max-width: 768px) {
    .UAZUy8rz {
        padding: 20px 30px;
    }

    .UK2DnXLy {
        gap: 1rem;
        padding: 1rem;
    }
    
    .rKmQagqB {
        gap: 1rem;
        display: flex;
        flex-direction: column;
    }
    
    .rKmQagqB[style*="350px"] {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }

    .yf20dx86 {
        order: 1;
        width: 100%;
    }

    .bFTlA5Ww {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 0.75rem;
    }

    .kM3BRiSK {
        padding: 0.75rem;
        gap: 0.625rem;
        min-height: 160px;
    }

    .ZvYKov4G {
        width: 36px;
        height: 36px;
    }

    .WK1vpOmR {
        font-size: 12px;
    }

    .j8E2Og60 {
        gap: 0.375rem;
    }

    .wSQFK1wp {
        gap: 0.5rem;
    }

    .wSQFK1wp h4 {
        font-size: 14px;
    }

    .U0L82gXD {
        gap: 0.75rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .gyuVnCKQ {
        display: none;
    }

    .qxSxpNoN {
        display: none;
    }

    .wGjVgYJG {
        padding: 1rem;
    }

    /* Bulk Actions Panel Mobile */
    .lB9sW2l7 {
        border-radius: 20px 20px 0 0;
        max-height: 80vh;
    }

    .Gxh_b7wv {
        padding: 1rem;
    }

    .VtdS5k2Q {
        width: 40px;
        height: 40px;
    }

    .onBMYZHS {
        padding: 1rem;
        gap: 1.25rem;
    }

    ._MtvwQRt {
        gap: 0.75rem;
    }

    .KGz7ZQwZ {
        gap: 0.5rem;
    }

    .JBen09vq,
    .cWo52OpX,
    .SjWRIlMd,
    .hZQqzx_K,
    .FZujjQTR,
    .r4zyHGk3,
    .y0G3qa9l {
        padding: 0.75rem 1rem;
        font-size: 14px;
    }

    .JBen09vq i,
    .cWo52OpX i,
    .SjWRIlMd i,
    .hZQqzx_K i,
    .FZujjQTR i,
    .r4zyHGk3 i,
    .y0G3qa9l i {
        font-size: 14px;
    }

    /* Member Info Panel Mobile */
    .ilz4PIgt {
        gap: 1rem;
    }

    .GNwalvBw,
    .egvbOK0z,
    .s_2IpAO_ {
        border-radius: 12px;
    }

    .FbaLDoPG,
    .sQq4Fybh,
    ._ei5jkwd {
        padding: 0.875rem 1rem;
    }

    .GNwalvBw .TAysv5CP,
    .egvbOK0z .TAysv5CP,
    .s_2IpAO_ .TAysv5CP {
        padding: 0.875rem 1rem;
    }
}

/* Request Modal Layout */
.Z3e9g7ji {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1.5rem;
    gap: 1.5rem;
    width: 100%;
}

._aWYK0ld {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.HaxsrVnP {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

/* Request Modal Footer */
.ZRKO_VNz {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid #2d2f39;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* Responsive for Request Modal */
@media (max-width: 768px) {
    .Z3e9g7ji {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .ZRKO_VNz {
        padding: 1rem;
    }
}


.hBsgEvDH {
    background-color: var(--bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 16px;
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    min-height: 700px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: GsjUqeE9 0.2s ease-out;
    position: relative;
    margin: 0 auto;
}

.njvL1RiB {
    padding: 1.5rem;
    border-bottom: 1px solid #2d2f39;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
}

.idaLgNC3 {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    color: var(--white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.idaLgNC3:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.z0CJxbEQ {
    flex: 1 1;
}

.z0CJxbEQ h3 {
    margin: 0 0 0.25rem 0;
    color: var(--white);
}

.z0CJxbEQ p {
    margin: 0;
    color: #888;
}

.L_b8EAtX {
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 8px;
    color: #888;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.L_b8EAtX:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.iYeDUSSP {
    background-color: #0D7AC7;
    border-radius: 8px;
    padding: 1rem;
}

.iYeDUSSP p {
    margin: 0;
    color: var(--white);
}

.JXpsybCd {
    position: relative;
    margin-bottom: 1.5rem;
}

.mwjyYuFL {
    position: relative;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 36px;
    height: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.mwjyYuFL:hover {
    border-color: #3d3f49;
}

.I0xUzgPW {
    border-color: #0D7AC7;
    background-color: rgba(255, 255, 255, 0.08);
}

.z_qgTv1y {
    flex: 1 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.3rem;
    min-height: 28px;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.D0GqP9w2 {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #2d2f39;
    border-radius: 4px;
    color: var(--white);
    font-size: 12px;
    white-space: nowrap;
    line-height: 1.2;
    flex-shrink: 0;
    max-width: 200px;
}

.D0GqP9w2 span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.O01k89QR {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    transition: color 0.2s ease;
    width: 14px;
    height: 14px;
}

.O01k89QR:hover {
    color: var(--white);
}

.K6WzzGPF {
    flex: 1 1;
    min-width: 0;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--white);
    font-size: 14px;
    font-family: var(--font-family);
    padding: 0.2rem 0;
}

.K6WzzGPF::placeholder {
    color: #666;
}

.XunXC94g {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.cyOZyw1o {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 0.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: color 0.2s ease;
    width: 22px;
    height: 22px;
}

.cyOZyw1o:hover {
    color: var(--white);
}

.XunXC94g i {
    color: #888;
    font-size: 12px;
    transition: transform 0.2s ease;
}

.lDkBRnCd {
    transform: rotate(180deg);
}

.H302gAkS {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    max-height: 350px;
    overflow-y: auto;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.JI6Jfrk1 {
    padding: 0.75rem 1rem;
    color: var(--white);
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 14px;
}

.JI6Jfrk1:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.JI6Jfrk1 i {
    color: #0D7AC7;
}

.kk3nkvPK {
    width: 18px;
    height: 18px;
    border: 2px solid #2d2f39;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.lhPtRteO {
    background-color: #0D7AC7;
    border-color: #0D7AC7;
}

.kk3nkvPK i {
    color: var(--white);
    font-size: 10px;
}

.M__qD20p {
    padding: 0.75rem 1rem;
    color: #666;
    text-align: center;
    font-size: 14px;
}

.YqmW6wT9 {
    min-height: 150px;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.HDVb0CFv {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dvv4XMz5 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 6px;
    color: var(--white);
    font-size: 13px;
}

.dvv4XMz5 span {
    color: var(--white);
}

.VRi2vGdI {
    background: transparent;
    border: none;
    color: #888;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: color 0.2s ease;
}

.VRi2vGdI:hover {
    color: var(--white);
}

.AF1HGpsq {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 100px;
}

.zkmFz2A7 {
    padding: 1rem 1.5rem;
    border-top: 1px solid #2d2f39;
    display: flex;
    justify-content: flex-end;
}

.uGreINky {
    width: 40px;
    height: 40px;
    background-color: var(--white);
    border: none;
    border-radius: 50%;
    color: var(--bg-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.uGreINky:hover {
    background-color: #f0f0f0;
    transform: scale(1.05);
}


.RW1Rh41x {
    padding: 0.5rem 1rem;
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    transition: all 0.2s ease;
}

.RW1Rh41x:hover {
    background-color: #2d2f39;
}

.n8e4yJSI {
    padding: 0.5rem 1rem;
    background-color: #3A7BD5;
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    transition: all 0.2s ease;
}

.n8e4yJSI:hover:not(:disabled) {
    background-color: #2d62b0;
}

.n8e4yJSI:disabled {
    background-color: rgba(58, 123, 213, 0.3);
    color: rgba(255, 255, 255, 0.5);
    cursor: not-allowed;
    opacity: 0.6;
}

.PGW9K6SQ {
    padding: 0.5rem 1rem;
    background-color: #C04A3B;
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--font-family);
    cursor: pointer;
    transition: all 0.2s ease;
}

.PGW9K6SQ:hover {
    background-color: #a83d30;
}

/* Duplicate Detection Styles */
.JPYivOiw {
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    margin-right: 0.75rem;
}

.JPYivOiw:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: #3d3f49;
}

.qu200VRo {
    background-color: #0D7AC7;
    border-color: #0D7AC7;
}

.qu200VRo:hover {
    background-color: #0b6ba8;
}

.B8YLEDc1 {
    width: 100%;
    padding: 1rem 0;
}

@media (max-width: 768px) {
    .B8YLEDc1 {
        padding: 1rem 0;
    }
}

._9PvZPd6j {
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 15px;
    padding: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 768px) {
    ._9PvZPd6j {
        padding: 1rem;
        border-radius: 12px;
    }

    .G84bWQyL {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .yy4brW7r {
        padding: 1rem;
    }

    .fCx1rjyt {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .OsNarG97 {
        flex-wrap: wrap;
    }

    .RhZqDT42 {
        flex-direction: row;
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .RhZqDT42 button {
        width: auto;
    }
}

.G84bWQyL {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #2d2f39;
    margin-bottom: 1.5rem;
}

.G84bWQyL i {
    color: #0D7AC7;
    font-size: 18px;
}

.EYUuYhaq {
    background-color: #0D7AC7;
    color: var(--white);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
}

.XbLbzVCQ {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: #888;
    text-align: center;
}

.XbLbzVCQ i {
    font-size: 48px;
    margin-bottom: 1rem;
    color: #0D7AC7;
}

.plrVKB0C {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.yy4brW7r {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid #2d2f39;
    border-radius: 12px;
    padding: 1.25rem;
}

.fCx1rjyt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.OsNarG97 {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1 1;
}

.wGd5GjK0 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #0D7AC7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
}

.gufVCGre {
    flex: 1 1;
    min-width: 0;
    overflow: hidden;
}

.hh3CYZmR {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.25rem;
    min-width: 0;
    width: 100%;
    overflow: hidden;
}

.hh3CYZmR span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: #888;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    flex-shrink: 1;
}

.hh3CYZmR span i {
    flex-shrink: 0;
}

.riTKzR4M {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1;
}

@media (max-width: 768px) {
    .hh3CYZmR span {
        max-width: 100%;
    }
}

.YO8X7U2h {
    margin-left: 1rem;
}

.PDQpuO7k {
    background-color: rgba(13, 122, 199, 0.2);
    color: #0D7AC7;
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.VKAqNccw {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #2d2f39;
}

.bdVKhyms {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: #888;
}

.SvPI76UH {
    display: flex;
    align-items: center;
    gap: 0.75rem;
        padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.wSVnvKiV {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.t0FAuuBU {
    flex: 1 1;
    min-width: 0;
}

.WpZO1B6K {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
    color: #888;
    min-width: 0;
}

.WpZO1B6K span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
}

.sqHP4e8J {
    color: #0D7AC7;
    font-weight: 600;
    font-size: 12px;
}

.RhZqDT42 {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #2d2f39;
    justify-content: flex-end;
}

.aKDfX7wq,
.cpdRKYdl {
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 8px;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.aKDfX7wq {
    background-color: #0D7AC7;
}

.aKDfX7wq:hover {
    background-color: #0b6ba8;
}

.cpdRKYdl {
    background-color: #C04A3B;
}

.cpdRKYdl:hover {
    background-color: #a83d30;
}

/* Merge Recommendation Panel */
.UUaJbT3n {
    margin-top: 1rem;
    padding: 1rem;
    background-color: rgba(13, 122, 199, 0.1);
    border: 1px solid rgba(13, 122, 199, 0.3);
    border-radius: 8px;
}

.OtsfP6Is {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: #0D7AC7;
}

.gBKvKBaw {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ksNvDN2S {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.z5jibft2 {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background-color: rgba(13, 122, 199, 0.2);
    border: 1px solid rgba(13, 122, 199, 0.3);
    border-radius: 6px;
    color: #0D7AC7;
    font-size: 12px;
}

/* Manual Merge Modal */
.LHoKTF5c {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.TgdSTIIf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.45);
}

.TgdSTIIf i {
    font-size: 11px;
}

.RkjMBvLc {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(52, 211, 153, 0.15);
    color: #34D399;
    border: 1px solid rgba(52, 211, 153, 0.25);
}

.BSjFVXLL,
.yjbqAQ_p {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.BSjFVXLL h5,
.yjbqAQ_p h5 {
    color: rgba(255, 255, 255, 0.9);
}

.KIN78WXP,
.OBOhqYtD {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid #2d2f39;
    border-radius: 8px;
}

.OBOhqYtD {
    border-color: rgba(52, 211, 153, 0.25);
    background-color: rgba(52, 211, 153, 0.04);
}

/* Swap divider */
.l54Vl5u3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0;
    color: rgba(255, 255, 255, 0.2);
}

.l54Vl5u3 i {
    font-size: 12px;
    flex-shrink: 0;
}

._TgqwojM {
    flex: 1 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}

.gTLomlWS {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #0D7AC7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 18px;
    flex-shrink: 0;
}

.nqcAvQb0 {
    flex: 1 1;
    min-width: 0;
}

.nqcAvQb0 h6 {
    margin: 0 0 0.5rem 0;
    color: rgba(255, 255, 255, 0.95);
}

.nqcAvQb0 p {
    margin: 0.25rem 0;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pzovC_Jm {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.pzovC_Jm span {
    color: rgba(255, 255, 255, 0.8);
}

.dRuqi9rs {
    padding: 0.25rem 0.5rem;
    background-color: rgba(58, 123, 213, 0.2);
    border: 1px solid rgba(58, 123, 213, 0.3);
    border-radius: 4px;
    color: #3A7BD5;
    font-size: 11px;
    font-weight: 600;
}

.LUEkc6GA {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.T_DqD92c {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.T_DqD92c:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: #3d3f49;
}

.xv5RdlZu {
    background-color: rgba(13, 122, 199, 0.1);
    border-color: #0D7AC7;
}

.j2Sld07s {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1 1;
    min-width: 0;
    cursor: pointer;
}

.f7ZjT0vS {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.625rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.f7ZjT0vS i {
    font-size: 10px;
}

.f7ZjT0vS:hover {
    background: rgba(52, 211, 153, 0.1);
    border-color: rgba(52, 211, 153, 0.3);
    color: #34D399;
}

.oEJKi8Zw {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wtUxxsdJ {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.XIzk6OBA {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    background-color: #0D7AC7;
    border: 2px solid #0D7AC7;
    display: flex;
    align-items: center;
    justify-content: center;
}

.XIzk6OBA i {
    color: var(--white);
    font-size: 12px;
}

.vEH1wXR5 {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.HlQsXqTQ {
    padding: 0.25rem 0.5rem;
    background-color: rgba(13, 122, 199, 0.2);
    border: 1px solid rgba(13, 122, 199, 0.3);
    border-radius: 4px;
    color: #60A5FA;
    font-size: 11px;
    font-weight: 600;
}

.RSynVaGX {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background-color: rgba(192, 74, 59, 0.1);
    border: 1px solid rgba(192, 74, 59, 0.3);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
}

.RSynVaGX i {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: #FF6B6B;
}

.RSynVaGX p {
    color: rgba(255, 255, 255, 0.85);
}

/* Remove Duplicate Modal */
.sEDUlHxy {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.G7rnis2A {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background-color: rgba(192, 74, 59, 0.1);
    border: 1px solid rgba(192, 74, 59, 0.3);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
}

.G7rnis2A h5 {
    margin: 0;
    color: rgba(255, 255, 255, 0.95);
}

.G7rnis2A i {
    color: #FF6B6B;
}

.gq2s0BDd,
.sWwAdzmO {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.gq2s0BDd p,
.sWwAdzmO p {
    color: rgba(255, 255, 255, 0.8);
}

.f8QonEKY {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid #2d2f39;
    border-radius: 8px;
}

.m6psL5cd {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-weight: 600;
    font-size: 14px;
    flex-shrink: 0;
}

.f8QonEKY h6 {
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
}

.f8QonEKY p {
    color: rgba(255, 255, 255, 0.7);
    margin: 0.25rem 0 0 0;
}

.VkEmxtnJ {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.85);
}

.VkEmxtnJ i {
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: #60A5FA;
}

.VkEmxtnJ p {
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Auto Merge Setting */
.Jlpfp7q5 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wLfxTAlG {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.AYSoqriC {
    flex: 1 1;
}

.AYSoqriC h4 {
    margin: 0 0 0.5rem 0;
}

.AYSoqriC p {
    margin: 0;
    color: #888;
}

.SjTuh12M {
    flex-shrink: 0;
}

.QlZXBItF {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 24px;
    cursor: pointer;
}

.QlZXBItF input {
    opacity: 0;
    width: 0;
    height: 0;
}

.dXQU6Zd1 {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid #2d2f39;
    transition: 0.3s;
    border-radius: 24px;
}

.dXQU6Zd1:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: var(--white);
    transition: 0.3s;
    border-radius: 50%;
}

.QlZXBItF input:checked + .dXQU6Zd1 {
    background-color: #0D7AC7;
    border-color: #0D7AC7;
}

.QlZXBItF input:checked + .dXQU6Zd1:before {
    transform: translateX(24px);
}

.XHe6a4qD {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid #2d2f39;
    border-radius: 8px;
}

.q8dNUDn2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.q8dNUDn2 i {
    color: #0D7AC7;
    flex-shrink: 0;
}

/* Duplicate Actions Panel */
.nq8aR0AM {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.F0tjE7sn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid #2d2f39;
    border-radius: 8px;
}

.cBac3A5d {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1 1;
    min-width: 0;
}

.wSVnvKiV {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0D7AC7 0%, #0a5a9a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 600;
    font-size: 14px;
    color: var(--white);
}

/* Duplicate Detection Skeleton */
.hT9KNCVS {
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 15px;
    padding: 1.5rem;
    position: relative;
    overflow: hidden;
}

.hT9KNCVS::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.05),
        transparent
    );
    animation: Jj9FBpo6 1.5s infinite;
}

.bE6q17rg {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #2d2f39;
}

.aSJXLsLr {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid #2d2f39;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.aSJXLsLr:last-child {
    margin-bottom: 0;
}

.bJrpdl6k {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.NR8VhPml {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vNAnkJEl {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #2d2f39;
}

.ecucNrvc {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.ecucNrvc:last-child {
    margin-bottom: 0;
}

.Gx5MpNED {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #2d2f39;
}

@media (max-width: 768px) {
    .B8YLEDc1 {
        padding: 1rem 0;
    }

    .hT9KNCVS {
        padding: 1rem 0;
    }

    .bE6q17rg {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .aSJXLsLr {
        padding: 1rem;
    }

    .bJrpdl6k {
        flex-wrap: wrap;
    }

    .Gx5MpNED {
        flex-direction: column;
    }

    .Gx5MpNED .rshZXpU3 {
        width: 100%;
    }
}

/* Pagination Styles */
.nb5rR26T {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.LPFSeRZo {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.hx_Su5bJ {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.hx_Su5bJ label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.m9E8PkJ_ {
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    color: var(--white);
    font-size: 14px;
    font-family: var(--font-family);
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23888%27 d=%27M6 9L1 4h10z%27/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
}

.m9E8PkJ_:hover {
    border-color: #444;
    background-color: rgba(255, 255, 255, 0.08);
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%23ffffff%27 d=%27M6 9L1 4h10z%27/%3E%3C/svg%3E");
}

.m9E8PkJ_:focus {
    border-color: #0D7AC7;
    background-color: rgba(255, 255, 255, 0.08);
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2712%27 height=%2712%27 viewBox=%270 0 12 12%27%3E%3Cpath fill=%27%230D7AC7%27 d=%27M6 9L1 4h10z%27/%3E%3C/svg%3E");
}

.m9E8PkJ_ option {
    background-color: var(--sub-bg-dark);
    color: var(--white);
    padding: 0.5rem;
}

.Xcz5KkDM {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.Xcz5KkDM .hx_Su5bJ {
    margin-right: 0.75rem;
}

.HgE8Z4rF {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
}

.HgE8Z4rF:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #444;
    color: var(--white);
}

.HgE8Z4rF:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.KMzDnAWf {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.RMv8H44g {
    min-width: 36px;
    height: 36px;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #2d2f39;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
}

.RMv8H44g:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #444;
    color: var(--white);
}

.EWQ8aq4U {
    background-color: #0D7AC7;
    border-color: #0D7AC7;
    color: var(--white);
    font-weight: 500;
}

.EWQ8aq4U:hover {
    background-color: #0b6ba8;
    border-color: #0b6ba8;
}

.DTIKcI0H {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    -webkit-user-select: none;
            user-select: none;
}

/* Responsive Pagination */
@media (max-width: 768px) {
    .nb5rR26T {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .LPFSeRZo {
        display: none;
    }

    .Xcz5KkDM {
        justify-content: center;
        width: 100%;
        flex-wrap: wrap;
    }

    .KMzDnAWf {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .LPFSeRZo {
        display: none;
    }

    .Xcz5KkDM {
        justify-content: center;
        gap: 0.5rem;
    }

    .Xcz5KkDM .hx_Su5bJ {
        margin-right: 0.5rem;
        width: 100%;
        justify-content: center;
        margin-bottom: 0.5rem;
    }

    .hx_Su5bJ label {
        font-size: 13px;
    }

    .m9E8PkJ_ {
        font-size: 13px;
        padding: 0.5rem 2rem 0.5rem 0.625rem;
    }

    .RMv8H44g {
        min-width: 32px;
        height: 32px;
        padding: 0 0.5rem;
        font-size: 13px;
    }

    .HgE8Z4rF {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
}

/* ── Merge Suggestions Modal ── */

.FKUPt7Tp {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Filter pills */
.V0R6K6un {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.yHr9DUST {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    border: 1px solid #2d2f39;
    background: rgba(255, 255, 255, 0.02);
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.yHr9DUST i {
    font-size: 11px;
}

.yHr9DUST:hover {
    border-color: #444;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.04);
}

._KIhE_Gi {
    background: rgba(13, 122, 199, 0.12);
    border-color: #0D7AC7;
    color: #0D7AC7;
}

._KIhE_Gi:hover {
    background: rgba(13, 122, 199, 0.15);
    border-color: #0D7AC7;
    color: #0D7AC7;
}

.YwLRUbaz {
    background: rgba(255, 255, 255, 0.06);
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    min-width: 20px;
    text-align: center;
}

._KIhE_Gi .YwLRUbaz {
    background: rgba(13, 122, 199, 0.2);
}

/* Card list */
.rSOvZqbD {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.DzAklBAU {
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.DzAklBAU:hover {
    border-color: #444;
}

/* Card header */
.kc2BTnSe {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.NwrovAg9 {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3rem 0.625rem;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    background: rgba(13, 122, 199, 0.12);
    color: #0D7AC7;
}

.NwrovAg9 i {
    font-size: 10px;
}

.UffxoC3s {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1;
    min-width: 0;
}

.XoSfacMH {
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Guest rows */
.qtu0wei3 {
    padding: 0.375rem 0;
}

.ii934q8e {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem 1.25rem;
    transition: background 0.15s ease;
}

.ii934q8e:hover {
    background: rgba(255, 255, 255, 0.02);
}

.Csy0Raeb {
    background: rgba(52, 211, 153, 0.03);
}

.ii934q8e + .ii934q8e {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.lcMkaUHC {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0D7AC7 0%, #3A7BD5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lcMkaUHC span {
    color: var(--white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.S6uSsWf1 {
    flex: 1 1;
    min-width: 0;
}

.uMJHhJJB {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.e88GT6va {
    display: flex;
    gap: 1rem;
    margin-top: 0.25rem;
}

.IhPOjyon {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.IhPOjyon i {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.LWDNDIjl {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 11px;
    font-weight: 600;
    color: #34D399;
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.2);
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.LWDNDIjl i {
    font-size: 9px;
}

.C7gVJvoh {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.C7gVJvoh i {
    font-size: 9px;
}

.C7gVJvoh:hover {
    color: #34D399;
    background: rgba(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 0.25);
}

/* Card actions */
.Y0mv2j62 {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    justify-content: flex-end;
}

.FWqWJaEi,
.rQJNULcL {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.FWqWJaEi {
    background: #0D7AC7;
    color: var(--white);
}

.FWqWJaEi:hover {
    background: #0b6ba8;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(13, 122, 199, 0.3);
}

.rQJNULcL {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.5);
}

.rQJNULcL:hover {
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.08);
}

/* Empty state */
.vFo1PIGk {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    gap: 0.75rem;
}

.vFo1PIGk i {
    font-size: 2.5rem;
    color: #0D7AC7;
    opacity: 0.3;
}

.vFo1PIGk p {
    color: rgba(255, 255, 255, 0.4);
    margin: 0;
}

@media (max-width: 480px) {
    .e88GT6va {
        flex-direction: column;
        gap: 0.25rem;
    }

    .kc2BTnSe {
        flex-wrap: wrap;
    }

    .Y0mv2j62 {
        padding: 0.75rem 1rem;
    }
}


/* Large Modal */
.Xk1t3htR .f0gxmsBw {
    max-width: 900px;
    width: 90vw;
}

/* ------------------------------------------------------
   Group Action Buttons
------------------------------------------------------ */
.y1200Qpb,
.Th8eeQgr {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    font-size: 12px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.y1200Qpb:hover {
    background-color: rgba(13, 122, 199, 0.15);
    border-color: #0D7AC7;
    color: #0D7AC7;
}

.Th8eeQgr:hover {
    background-color: rgba(233, 75, 60, 0.15);
    border-color: #E94B3C;
    color: #E94B3C;
}

/* ------------------------------------------------------
   Group Card Skeleton
------------------------------------------------------ */
.Wc9QaGNg {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    animation: ifqyUsII 1.5s ease-in-out infinite;
}

/* ------------------------------------------------------
   Groups Tab Styles
------------------------------------------------------ */
.I8mv_4nD {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

._FQWdMm0 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.RfvFlJwo {
    margin-bottom: 0.25rem;
    font-size: 18px;
}

.II8W6vkD {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.iWn2IPAS {
    background-color: #0D7AC7;
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    width: auto;
    transition: all 0.2s ease;
}

.iWn2IPAS:hover {
    background-color: #0b6ba8;
}

.l0ViglO6 {
    padding: 1rem;
}

.l62vq9MD {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.LL14mBHX {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    cursor: pointer;
}

.LL14mBHX:hover {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

._sNMWmUv {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-color: rgba(13, 122, 199, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

._sNMWmUv i {
    font-size: 20px;
    color: #0D7AC7;
}

.CEsB8cZn {
    flex: 1 1;
    min-width: 0;
}

.m7xUhFzX {
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.25rem;
}

.sIQjIsHA {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

.AYaHaCjA {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    min-width: 80px;
}

.O_x6mTDw {
    font-size: 18px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.A5xqOyF8 {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.QLpUQ10J {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 100px;
}

.iqzMse5f {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

._4KjkONJ {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.t2TY4PYF {
    display: flex;
    gap: 0.5rem;
    margin-left: 0.5rem;
}

.GEfuuH_t {
    text-align: center;
    padding: 6rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.i9Zm3wLn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: rgba(13, 122, 199, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.i9Zm3wLn i {
    font-size: 2rem;
    color: rgba(13, 122, 199, 0.6);
}

.iHmnXpbo {
    margin-bottom: 0.5rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
}

.xrvSW_hC {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 1.5rem;
    max-width: 400px;
    font-size: 13px;
}

/* ------------------------------------------------------
   Group Modal Styles
------------------------------------------------------ */
.lUPfKy6x {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
}

.MEVVTSiU {
    background-color: #1a1d29;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    animation: rEezbnsS 0.2s ease-out;
    overflow: hidden;
}

.BvGVYyhR {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.MHNAG1aF {
    margin-bottom: 0.25rem;
    color: var(--white);
    font-weight: 600;
    font-size: 16px;
}

.TDGiCVQI {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.uq_Sd9ah {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    cursor: pointer;
    padding: 0.4rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uq_Sd9ah:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}

.JBnpLnzi {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    overflow: hidden;
}

.oROryC40 {
    overflow-y: auto;
    flex: 1 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.EuFhG740 {
    padding: 1.25rem;
}

.pzjR2c9w {
    margin-bottom: 1.75rem;
}

.la0VajBa {
    margin-bottom: 0.75rem;
}

.u0l8FK8e {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.625rem;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.faXbvD1o {
    color: #E94B3C;
}

.jBreSORY {
    font-size: 11px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
    text-transform: none;
    letter-spacing: 0;
}

.B2cAOdKd {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--white);
    font-size: 13px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.B2cAOdKd:focus {
    outline: none;
    border-color: #0D7AC7;
    background-color: rgba(255, 255, 255, 0.06);
}

.o0yLmeH_ {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1.5px solid #E94B3C;
    border-radius: 8px;
    color: var(--white);
    font-size: 13px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.o0yLmeH_:focus {
    outline: none;
    border-color: #E94B3C;
    background-color: rgba(255, 255, 255, 0.06);
}

.lgo3d1py {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--white);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 90px;
    transition: all 0.2s ease;
    line-height: 1.5;
}

.lgo3d1py:focus {
    outline: none;
    border-color: #0D7AC7;
    background-color: rgba(255, 255, 255, 0.06);
}

.JQfb5oKn {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    text-align: right;
    margin-top: 0.375rem;
    font-weight: 500;
}

.emDNNg1n {
    font-size: 11px;
    color: #F39C12;
    text-align: right;
    margin-top: 0.375rem;
    font-weight: 500;
}

.UQi0I5L6 {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: #E94B3C;
    font-size: 12px;
    margin-top: 0.5rem;
    font-weight: 500;
}

.jNg_dMXe {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background-color: rgba(0, 0, 0, 0.1);
}

.nACjlb1i {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    background-color: transparent;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.nACjlb1i:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.N1LSuiM_ {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: none;
    background-color: #0D7AC7;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(13, 122, 199, 0.3);
}

.N1LSuiM_:hover {
    background-color: #0b6ba8;
    box-shadow: 0 4px 12px rgba(13, 122, 199, 0.4);
    transform: translateY(-1px);
}

/* Members Selection Section */
.MM4Q8VEI {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.01);
}

.bR1Bk1F1 {
    margin-bottom: 0.75rem;
}

.bR1Bk1F1 input {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--white);
    font-size: 13px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.bR1Bk1F1 input:focus {
    outline: none;
    border-color: #0D7AC7;
    background-color: rgba(255, 255, 255, 0.06);
}

.l150jQ1y {
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    max-height: 280px;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.l150jQ1y::-webkit-scrollbar {
    display: none;
}

.NgC_9IOe {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #212430;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1;
}

.NgC_9IOe:hover {
    background-color: #2a2d3d;
}

.An3vFUTU {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.GQFTx24E {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.GQFTx24E:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.bEHimZ0A {
    flex: 1 1;
    min-width: 0;
}

.qpFlAXaM {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2px;
}

.hJB_2f4I {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}

.jGqcfy6w {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.hb7oFWmf {
    font-size: 10px;
    padding: 2px 6px;
    background-color: rgba(13, 122, 199, 0.15);
    color: #0D7AC7;
    border-radius: 4px;
    font-weight: 600;
}

.AHZJ_E71 {
    padding: 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
}

/* ------------------------------------------------------
   Member Groups Section (in MemberInfoPanel)
------------------------------------------------------ */
.V3PmyV3l {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.f1nbdQqh {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.f1nbdQqh:hover {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

.vbvUgpFZ {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: rgba(13, 122, 199, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.vbvUgpFZ i {
    font-size: 16px;
    color: #0D7AC7;
}

.IXkC2H1v {
    flex: 1 1;
    min-width: 0;
}

.IXkC2H1v h5 {
    margin-bottom: 0.25rem;
    color: rgba(255, 255, 255, 0.95);
}

.IXkC2H1v p {
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

.V6HWvMYG {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.45);
    font-size: 11px;
}

/* ------------------------------------------------------
   Guest Card Groups Styles
------------------------------------------------------ */
.bl8FtI6d {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.D6xukDd9 {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.D6xukDd9:hover {
    transform: translateY(-1px);
}

.YJU82xms {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vS0eF887 {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.vS0eF887:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

/* ------------------------------------------------------
   Groups Skeleton Styles
------------------------------------------------------ */
.lOSz96Lk {
    flex: 1 1;
    min-width: 0;
}

.R4HpTqCC {
    min-width: 80px;
}

.xs6gEU7Y {
    min-width: 100px;
}

.GgcNz5Lj {
    display: flex;
    gap: 0.5rem;
    margin-left: 0.5rem;
}

.DyWW0PEq {
    width: 48px;
    height: 48px;
    border-radius: 10px;
}

.h2SK77cQ {
    width: 40%;
    height: 16px;
    margin-bottom: 0.5rem;
}

.wt3gGCPz {
    width: 60%;
    height: 12px;
}

.k9qC0a6U {
    width: 80px;
    height: 60px;
    border-radius: 8px;
}

.PqMsxCss {
    width: 100px;
    height: 40px;
}

.dpFHdY8L {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

/* Groups Skeleton Header */
.iHSNeyqz {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.JbPRGrhf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.gZ38alfm {
    flex: 1 1;
}

.HN6c8jFq {
    width: 150px;
    height: 24px;
    margin-bottom: 0.5rem;
}

.hBNXbO46 {
    width: 200px;
    height: 14px;
}

.PIbE0er1 {
    width: 140px;
    height: 36px;
    border-radius: 8px;
}

.uGCnG847 {
    padding: 1rem;
}

.kfF2HlhE {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Guest Overview Styles */
.KGTZBb79 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.WtZdTzko {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.RE0ju_z0 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.g3tfRXH8 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--white);
    margin: 0;
}

.erydbpiK {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: rgba(13, 122, 199, 0.1);
    color: #0D7AC7;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    width: -webkit-fit-content;
    width: fit-content;
}

.erydbpiK i {
    font-size: 10px;
}

.hocO7T9N {
    display: flex;
    gap: 1.5rem;
}

.dMQ9tP8J {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.S3hrw_F3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0D7AC7;
}

._D0oJmal {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.YVpFHvM9 {
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background-color: rgba(255, 255, 255, 0.02);
}

.Inrgnksn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.Inrgnksn h5 {
    margin: 0;
    color: var(--white);
}

.OtADpSrX {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.OtADpSrX:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.WGr6D3Dy {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wf1rs8Vt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wf1rs8Vt i {
    color: #0D7AC7;
    width: 16px;
    font-size: 14px;
}

.DXZVPDQc {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1;
}

.d4BUGJF4 {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.TqyWf8IQ {
    color: var(--white);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.TqyWf8IQ:hover {
    color: #0D7AC7;
}

.ker33j_X h5 {
    margin: 0 0 0.75rem 0;
    color: var(--white);
}

.tcRfxTVi {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.X_wy2HdK {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.FEmp_N0Q {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #0D7AC7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fYBguM77 {
    color: var(--white);
    font-size: 0.75rem;
    font-weight: 600;
}

.GurIoeQi {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.YDx5ltJG {
    color: var(--white);
    font-weight: 500;
    font-size: 0.875rem;
}

.aTiuNYi5 {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
}

/* Spending Card Styles */
.EeWhj753 {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vUSmrxvN {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.y7r1OSlL {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ne8QIcuR {
    font-size: 1.25rem;
    font-weight: 700;
    color: #10b981;
}

.ZHwENybR {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.pHEuOcl9 {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sORcp1iU {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 0.5rem;
}

.sORcp1iU i {
    color: #0D7AC7;
    font-size: 14px;
}

.eEVsfOcr {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.nZzRzMSn {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

.UYhSzOws {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.EAJd9VnF {
    font-size: 0.875rem;
    color: var(--white);
    font-weight: 500;
}

.QRmJ61wI {
    font-size: 1rem;
    color: #10b981;
    font-weight: 600;
}

.V8Q8W922 {
    margin-bottom: 1rem;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.AI4J62_e {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.tEpBKHSD {
    background-color: rgba(16, 185, 129, 0.1);
    color: #10b981;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.nOHmejZW {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.tNbj2tT7 {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.tNbj2tT7:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--white);
}

.b5BA8ego {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
}

.FrahdKbn {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.GCSwS5Y4 {
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.vBJYpPZQ {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.JNVtrxgo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
}

.JNVtrxgo i {
    color: #0D7AC7;
    font-size: 12px;
}

.ujSEgOxz {
    font-size: 1.125rem;
    color: #10b981;
    font-weight: 600;
}

.CnAl8yYE {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.QfE9b0gw {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--white);
    font-weight: 500;
}

.QfE9b0gw i {
    color: #f59e0b;
    font-size: 12px;
}

.skVmjaIE {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.skVmjaIE i {
    color: rgba(255, 255, 255, 0.4);
    font-size: 10px;
}

.C_NGKE3a {
    margin-bottom: 0.5rem;
}

.MnqtdDvW {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
}

.MnqtdDvW i {
    color: #10b981;
    font-size: 12px;
}

.koF7BQxj {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.cHrV1Q6l {
    background-color: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    padding: 0.125rem 0.375rem;
    border-radius: 8px;
    font-size: 0.75rem;
}

._aHopvFy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

._aHopvFy i {
    color: #8b5cf6;
    font-size: 12px;
}

/* Basic Information Styles */
.Rg0COW5k,
.IKw80yWJ {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.C14_2Uiq {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    transition: background-color 0.2s;
}

.C14_2Uiq:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.C14_2Uiq i {
    width: 20px;
    text-align: center;
    color: var(--color-primary);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.focSXeC9 {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
    word-break: break-word;
}

/* Personal Information Styles (New Compact Layout) */
.PB5fn69n {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.AAzqttGo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    transition: background-color 0.2s;
    min-height: 72px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: calc(33.333% - 0.5rem);
    min-width: 140px;
}

.AAzqttGo:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.wqArO79G {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.wqArO79G i {
    width: 14px;
    text-align: center;
    color: #0D7AC7;
    font-size: 0.75rem;
    flex-shrink: 0;
}

._wdiMpVf {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    word-break: break-word;
    line-height: 1.3;
}

.U8fvRSAk {
    font-size: 0.875rem;
    color: #0D7AC7;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: color 0.2s;
    line-height: 1.3;
}

.U8fvRSAk:hover {
    color: #1a8fd9;
    text-decoration: underline;
}

.U8fvRSAk i {
    font-size: 0.75rem;
}

/* ========== RECOMMENDATIONS SECTION ========== */
.dXkoipoL {
    margin-bottom: 1.5rem;
}

.siVvstqF {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.Gb0OqUJo {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.AlwI8fa3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--white);
    font-weight: 600;
    margin: 0;
}

.AlwI8fa3 i {
    color: #F59E0B;
    font-size: 1rem;
}

.OmOV4IQj {
    color: #888;
    margin: 0;
    font-weight: 400;
}

.iIrE8o2g {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0.75rem;
    gap: 0.75rem;
}

/* ========== RECOMMENDATION CARD ========== */
.cpt0GlVk {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.2s ease;
}

.cpt0GlVk:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.SudA6i_4 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.XcyY9t29 {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.875rem;
}

.gIdh3KaI {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sI44mYwa {
    font-size: 0.75rem;
    font-weight: 500;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.WHwv6ZdQ {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.wUJYPBo3 {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.e1t8v4nt {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--white);
}

.NP0YtGwd {
    margin-bottom: 1rem;
}

.UujULIR2 {
    color: var(--white);
    font-weight: 600;
    margin: 0 0 0.375rem 0;
}

.IKJoJ2Ho {
    color: #ccc;
    margin: 0;
    line-height: 1.4;
}

.wCsLtYrv {
    display: flex;
    justify-content: flex-end;
}

.ofSfXs5N {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ofSfXs5N:hover:not(:disabled) {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
}

.ofSfXs5N:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ofSfXs5N i {
    font-size: 0.75rem;
}

/* Responsive */
@media (max-width: 768px) {
    .siVvstqF {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .cpt0GlVk {
        padding: 0.875rem;
    }

    .SudA6i_4 {
        gap: 0.625rem;
    }

    .wCsLtYrv {
        justify-content: stretch;
    }

    .ofSfXs5N {
        justify-content: center;
        width: 100%;
    }
}

/* ===== Smart Groups Styles ===== */

/* Group Type Selector */
.jBRwHseS {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.jMkssZui {
    flex: 1 1;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.jMkssZui:hover {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(13, 122, 199, 0.4);
}

.VV725hSD {
    flex: 1 1;
    padding: 1rem;
    background-color: rgba(13, 122, 199, 0.15);
    border: 1.5px solid #0D7AC7;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.aKI42QCg {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.aKI42QCg i {
    font-size: 1.25rem;
    color: #0D7AC7;
    margin-top: 0.125rem;
}

.YpzroBSp {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 0.25rem;
}

.tVzLC_cA {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.3;
}

/* Group Type Badges - Inline with Name */
.Zva3nxPD,
.OIsxgMW9 {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.125rem 0.5rem;
    border-radius: 3px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.Zva3nxPD {
    background-color: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: #a78bfa;
}

.Zva3nxPD i {
    font-size: 0.5625rem;
}

.OIsxgMW9 {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.6);
}

.OIsxgMW9 i {
    font-size: 0.5625rem;
}

/* Smart Group Logic Builder */
.TKJ0xb79 {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 1rem;
}

.fq34i51j {
    margin-bottom: 1.5rem;
}

.Nuc1WCaR {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0.75rem;
}

.Nuc1WCaR i {
    color: #0D7AC7;
    font-size: 0.875rem;
}

.K52SfE9I {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 0.5rem;
    gap: 0.5rem;
}

.EOL6CfG6 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.EOL6CfG6:hover {
    background-color: rgba(13, 122, 199, 0.1);
    border-color: rgba(13, 122, 199, 0.3);
    color: rgba(255, 255, 255, 0.95);
}

.EOL6CfG6 i {
    color: #0D7AC7;
    font-size: 0.8125rem;
}

/* Conditions Section */
.Pb2lxxxB {
    margin-bottom: 1rem;
}

.ehBkZd1e {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.KxODlCAp {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background-color: rgba(13, 122, 199, 0.15);
    border: 1px solid rgba(13, 122, 199, 0.3);
    border-radius: 6px;
    color: #0D7AC7;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.KxODlCAp:hover {
    background-color: rgba(13, 122, 199, 0.25);
    border-color: rgba(13, 122, 199, 0.5);
}

._LQ7yZ1E {
    text-align: center;
    padding: 2rem 1rem;
    color: rgba(255, 255, 255, 0.4);
}

._LQ7yZ1E i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.3;
}

._LQ7yZ1E p {
    font-size: 0.8125rem;
    margin: 0;
}

.yTQi6HFV {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.wOj2LQOz {
    position: relative;
}

.LGu3WRKI {
    text-align: center;
    margin-bottom: 0.5rem;
}

.HedN020y {
    padding: 0.375rem 0.75rem;
    background-color: rgba(13, 122, 199, 0.15);
    border: 1px solid rgba(13, 122, 199, 0.3);
    border-radius: 4px;
    color: #0D7AC7;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
}

.MNtMuWPz {
    position: relative;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.875rem;
}

.ccwodFIn {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.g0MzkDZk,
.BTdfDMID {
    padding: 0.5rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    cursor: pointer;
    flex: 1 1;
    min-width: 140px;
}

.g0MzkDZk {
    min-width: 180px;
}

.CFl6qepR {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.75rem;
    gap: 0.75rem;
    align-items: center;
}

.OVNn7VGQ {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.md_aBSWv {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.ryWQF2f0 {
    grid-column: 1 / -1;
}

.koGoZO3M {
    width: 80px;
    padding: 0.5rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    flex-shrink: 0;
}

/* Hide number input spinners */
.koGoZO3M::-webkit-outer-spin-button,
.koGoZO3M::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.koGoZO3M[type=number] {
    -moz-appearance: textfield;
}

.JTpyBheE {
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
}

.bZSVttFy,
.mgboX3EA {
    padding: 0.5rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    cursor: pointer;
}

.bZSVttFy {
    min-width: 140px;
}

.mgboX3EA {
    min-width: 80px;
}

.HsdjrAf6,
.zfAcJ2gR {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.zfAcJ2gR {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}

.cq_Oyhjs {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    font-weight: 600;
}

.dUfJYMDN {
    position: absolute;
    top: 0.875rem;
    right: 0.875rem;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 4px;
    color: #ef4444;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.dUfJYMDN:hover {
    background-color: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
}

/* Logic Summary */
.odctu_EE {
    background-color: rgba(13, 122, 199, 0.08);
    border: 1px solid rgba(13, 122, 199, 0.2);
    border-radius: 6px;
    padding: 0.875rem;
}

.BpNJHL2g {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #0D7AC7;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-bottom: 0.625rem;
}

.BpNJHL2g i {
    font-size: 0.875rem;
}

.VyyXbWOa {
    color: rgba(255, 255, 255, 0.8);
}

.TooazNqZ {
    font-size: 0.8125rem;
    margin: 0 0 0.5rem 0;
    line-height: 1.5;
}

.TooazNqZ strong {
    color: #0D7AC7;
    font-weight: 700;
}

.tS9S8oMq {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.tS9S8oMq li {
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.375rem;
}

/* Group Card Actions - Updated */
.U9Ny4N8N,
.W0lGRPPN {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s;
}

.U9Ny4N8N:hover {
    background-color: rgba(13, 122, 199, 0.15);
    border-color: rgba(13, 122, 199, 0.3);
    color: #0D7AC7;
}

.W0lGRPPN:hover {
    background-color: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.3);
    color: #22c55e;
}

.TeBfeZ3V {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: 1px solid rgba(147, 51, 234, 0.2);
    background: rgba(147, 51, 234, 0.05);
    color: #9333ea;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.TeBfeZ3V:hover {
    background-color: rgba(147, 51, 234, 0.15);
    border-color: rgba(147, 51, 234, 0.3);
    color: #7c3aed;
}

/* Responsive adjustments for Smart Groups */
@media (max-width: 768px) {
    .K52SfE9I {
        grid-template-columns: 1fr;
    }
    
    .ccwodFIn {
        flex-direction: column;
    }
    
    .g0MzkDZk,
    .BTdfDMID {
        min-width: 100%;
    }
    
    .CFl6qepR {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .koGoZO3M,
    .JTpyBheE,
    .bZSVttFy {
        width: 100%;
    }
}

/* ------------------------------------------------------
   Invite Group to Event Modal
------------------------------------------------------ */
.BPpvQFwG {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ePo6Gq0g {
    display: flex;
    flex-direction: column;
}

.VSoDPnj5 {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.QIM0GLkE {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wTTn6ITr {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.cQngoos0 {
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
}

.aN78UMeW {
    font-size: 20px;
    font-weight: 700;
    color: #0D7AC7;
}

.EwQZEngS {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 8px;
    color: #fbbf24;
    font-size: 13px;
    font-weight: 500;
}

.EwQZEngS i {
    font-size: 16px;
    color: #fbbf24;
}

/* Invite Group Confirm Modal */
.a4gOvLNz {
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

.nybeMfDI {
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
}

.j17Rj6h2 {
    max-height: 200px;
}

.OAuT77n0 {
    cursor: default;
    pointer-events: none;
}

/* Bulk Invite Modal */
.CngBWepL {
    max-width: 500px;
}

.MzsD4Txu {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    max-height: 300px;
    overflow-y: auto;
}

.L8nfgGMH {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}
/* ------------------------------------------------------
   Enhanced Guest Filters & Filter Chips
------------------------------------------------------ */

/* Filter Chips Bar */
.mnsAUieL {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0;
    margin-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.RZu6sUR_ {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex: 1 1;
}

.U2TyUmMk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background-color: rgba(13, 122, 199, 0.15);
    border: 1px solid rgba(13, 122, 199, 0.3);
    border-radius: 6px;
    color: #0D7AC7;
    font-size: 12px;
    font-weight: 500;
}

.YnPholJk {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: #0D7AC7;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    padding: 0;
}

.YnPholJk:hover {
    background-color: rgba(13, 122, 199, 0.2);
    color: #fff;
}

.YnPholJk i {
    font-size: 10px;
}

.n4d7A5hn {
    padding: 0.375rem 0.75rem;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.n4d7A5hn:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9);
}

/* Filter Toggle Button */
.KAez28Yc {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.KAez28Yc:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.l3Dskyf9 {
    background-color: rgba(13, 122, 199, 0.15);
    border-color: rgba(13, 122, 199, 0.3);
    color: #0D7AC7;
}

.l3Dskyf9:hover {
    background-color: rgba(13, 122, 199, 0.2);
    border-color: rgba(13, 122, 199, 0.4);
}

.BG7tkN4K {
    font-size: 12px;
    transition: transform 0.2s ease;
}

/* Guest Filters Container & Panel */
.y_aRXotl {
    width: 100%;
}

.LDtS5aSm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s ease;
    margin-bottom: 0.5rem;
}

.LDtS5aSm:hover {
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.15);
    background-color: rgba(255, 255, 255, 0.05);
}

.oC0BP733 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.oC0BP733 i {
    font-size: 12px;
}

.UAurHlcn {
    background-color: #0D7AC7;
    background-color: var(--accent-1, #0D7AC7);
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    padding: 0.1rem 0.45rem;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

.LDtS5aSm > i:last-child {
    font-size: 10px;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.LDtS5aSm:hover > i:last-child {
    opacity: 1;
}

.EpcydnH7 {
    margin-top: 0.5rem;
    padding: 1.25rem;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
}

.PBh0Zi57 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.c0Za_P0H {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.C3IndmYN {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Filter Range Input */
.Jq85lvu_ {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 200px;
}

.sRukXE4i {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

.T1w2n5fg {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.xO9OsX13 {
    flex: 1 1;
    position: relative;
}

.uxT5iJGo {
    width: 100%;
    padding: 0.625rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-family: var(--font-family);
    transition: all 0.2s ease;
}

.uxT5iJGo:focus {
    outline: none;
    border-color: #0D7AC7;
    background-color: rgba(255, 255, 255, 0.08);
}

.uxT5iJGo::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.fwTKAYrf {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    font-weight: 500;
}

.RzbP1m4G {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background-color: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.RzbP1m4G:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
}

.RzbP1m4G i {
    font-size: 12px;
}

/* Boolean Filter Buttons */
.ztKp8u48 {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 120px;
}

.XcNfKi8l {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

.DRMlwvmd {
    display: flex;
    gap: 0.5rem;
}

.Gz3JsE2C {
    flex: 1 1;
    padding: 0.5rem 0.75rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.L8nfgGMH:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.msneEKRi {
    background: rgba(58, 123, 213, 0.1);
    border-color: #3A7BD5;
}

.AtKFxWah {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: #3A7BD5;
}

.msneEKRi .AtKFxWah {
    color: #3A7BD5;
}

.eqgcP88M {
    flex: 1 1;
    min-width: 0;
}

.zLyganjD {
    text-align: center;
    margin-bottom: 1rem;
    padding: 0.5rem;
    background: rgba(58, 123, 213, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(58, 123, 213, 0.3);
}

.L2Ytl_2c {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.Gz3JsE2C:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

.DoYDl2fd {
    background-color: rgba(13, 122, 199, 0.15);
    border-color: rgba(13, 122, 199, 0.3);
    color: #0D7AC7;
}

.DoYDl2fd:hover {
    background-color: rgba(13, 122, 199, 0.2);
    border-color: rgba(13, 122, 199, 0.4);
}

/* Updated Search Toolbar Layout */
.waMnOjTv {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
}

.vTCnEXJJ {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .MVDE7MM_ {
        flex-direction: column;
    }
    
    .mnsAUieL {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .n4d7A5hn {
        align-self: flex-end;
    }
    
    .vTCnEXJJ {
        flex-wrap: wrap;
    }
    
    .T1w2n5fg {
        flex-wrap: wrap;
    }
    
    .DRMlwvmd {
        flex-direction: column;
    }
}


/* ═══════════════════════════════════════
   CRM Redesign v2 - Guestiis Section
   ═══════════════════════════════════════ */

/* ── Wrapper (no background) ── */
.jH2FzFZW {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    min-height: 0;
    gap: 0.75rem;
    width: 100%;
}

/* ── Search Bar (sidebar-matched) ── */
.cfUNR2za {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-shrink: 0;
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 15px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.xRTxjU3H {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1;
}

.xRTxjU3H i {
    color: #555;
    font-size: 13px;
    flex-shrink: 0;
}

.xRTxjU3H input {
    background: none;
    border: none;
    outline: none;
    color: var(--white);
    font-size: 14px;
    width: 100%;
    padding: 0;
    font-family: inherit;
}

.xRTxjU3H input::placeholder {
    color: #555;
}

.IppphU2S {
    background: none;
    border: none;
    color: #555;
    cursor: pointer;
    padding: 0;
    font-size: 12px;
    display: flex;
    align-items: center;
    transition: color 0.15s ease;
}

.IppphU2S:hover {
    color: var(--white);
}

.msM2cOU9 {
    font-size: 13px;
    color: #555;
    white-space: nowrap;
    font-weight: 500;
}

.qQTfosDd {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: #555;
    text-align: center;
}

.qQTfosDd i {
    font-size: 28px;
    color: #ef4444;
}

.qQTfosDd p {
    margin: 0;
    font-size: 14px;
    color: #888;
}

.qQTfosDd button {
    padding: 0.45rem 1rem;
    background: var(--accent-1);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.qQTfosDd button:hover {
    opacity: 0.85;
}

/* ── Main Layout (sidebar + grid) ── */
.rtCBgHNT {
    display: grid;
    grid-template-columns: 25% 1fr;
    grid-column-gap: 1.5rem;
    column-gap: 1.5rem;
    flex: 1 1;
    min-height: 0;
    overflow: hidden;
}

.aQyZBtIK {
    min-width: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.aQyZBtIK::-webkit-scrollbar {
    width: 6px;
}

.aQyZBtIK::-webkit-scrollbar-track {
    background: transparent;
}

.aQyZBtIK::-webkit-scrollbar-thumb {
    background: #2d2f39;
    border-radius: 3px;
}

/* ── Filter Sidebar (IndEvent-style) ── */
.sp3xmAD6 {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background-color: var(--sub-bg-dark);
    border: 1px solid #2d2f39;
    border-radius: 15px;
    padding: 1rem;
    box-sizing: border-box;
}

.sp3xmAD6::-webkit-scrollbar {
    width: 4px;
}

.sp3xmAD6::-webkit-scrollbar-track {
    background: transparent;
}

.sp3xmAD6::-webkit-scrollbar-thumb {
    background: #2d2f39;
    border-radius: 2px;
}

/* Filter header - matches ie_sb_filter_header */
.CTHSwIwE {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    padding: 0 0 0.75rem;
    margin: 0;
    transition: opacity 0.15s ease;
}

.CTHSwIwE:hover {
    opacity: 0.8;
}

.v9toXeLJ {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.v9toXeLJ i {
    font-size: 14px;
    color: var(--accent-1);
}

.v9toXeLJ p {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}

.CTHSwIwE > i:last-child {
    font-size: 12px;
    color: #555;
    transition: transform 0.2s ease;
}

.PP_cokr3 {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Filter body - sections with border like ie_sb_section */
.iFWYBRmb {
    display: flex;
    flex-direction: column;
}

/* Filter group - matches ie_sb_section */
.BUM_nnlW {
    display: flex;
    flex-direction: column;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(45, 47, 57, 0.5);
}

.BUM_nnlW:last-child {
    border-bottom: none;
}

/* Section title - matches ie_sb_section_title */
.WRjbaq9j {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.WRjbaq9j i {
    font-size: 12px;
    color: #555;
    width: 16px;
    text-align: center;
}

.WRjbaq9j p {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #555;
    margin: 0;
    flex: 1 1;
}

/* Filter options list */
.b9_7XMnK {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    max-height: 200px;
    overflow-y: auto;
}

.b9_7XMnK::-webkit-scrollbar {
    width: 3px;
}

.b9_7XMnK::-webkit-scrollbar-thumb {
    background: #2d2f39;
    border-radius: 2px;
}

/* Filter option - matches ie_sb_filter_option */
.ssLU3bMf {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.ssLU3bMf:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Styled checkbox - matches ie_sb_checkbox */
.CPA5Zlrv {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    border: 1px solid #2d2f39;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 10px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.12s ease;
    padding: 0;
}

.TPI5XAI2 {
    background-color: var(--accent-1);
    border-color: var(--accent-1);
}

.zSfjHgi7 {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Search within filter groups */
.fksxWdQe {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(45, 47, 57, 0.6);
    border-radius: 8px;
    padding: 0.4rem 0.65rem;
    color: var(--white);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.fksxWdQe:focus {
    border-color: var(--accent-1);
}

.fksxWdQe::placeholder {
    color: #444;
}

.QZw8L2kL {
    font-size: 12px;
    color: #555;
    padding: 0.25rem 0.5rem;
    margin: 0;
}

.dufN4TE8 {
    font-size: 10px;
    font-weight: 600;
    background: var(--accent-1);
    color: #fff;
    border-radius: 10px;
    padding: 1px 6px;
    min-width: 16px;
    text-align: center;
}

/* ── Event filter cards (vip_sidebar_card-style) ── */
.pnTN1JMi {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 240px;
    overflow-y: auto;
}

.pnTN1JMi::-webkit-scrollbar {
    width: 3px;
}

.pnTN1JMi::-webkit-scrollbar-thumb {
    background: #2d2f39;
    border-radius: 2px;
}

.CMfzJfFl {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(45, 47, 57, 0.5);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
    font-family: inherit;
    color: var(--white);
}

.CMfzJfFl:hover {
    background: rgba(13, 122, 199, 0.06);
    border-color: rgba(13, 122, 199, 0.2);
}

.ladk8sJS {
    background: rgba(13, 122, 199, 0.08);
    border-color: rgba(13, 122, 199, 0.3);
}

.Y2_KavsU {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 122, 199, 0.12);
    border-radius: 8px;
    color: var(--accent-1);
    font-size: 12px;
}

.vBi72p5n {
    flex: 1 1;
    min-width: 0;
}

.eUWJ8LDX {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dO7NaF4E {
    margin: 1px 0 0;
    font-size: 11px;
    color: #666;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Year range inputs ── */
.DXGM0gjc {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.YVLvODfS {
    flex: 1 1;
    background: transparent;
    border: 1px solid rgba(45, 47, 57, 0.6);
    border-radius: 8px;
    padding: 0.4rem 0.5rem;
    color: var(--white);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    text-align: center;
    -moz-appearance: textfield;
    transition: border-color 0.15s ease;
}

.YVLvODfS:focus {
    border-color: var(--accent-1);
}

.YVLvODfS::-webkit-inner-spin-button,
.YVLvODfS::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.YVLvODfS::placeholder {
    color: #555;
}

.UoXlTdSC {
    color: #555;
    font-size: 13px;
}

/* ── Clear all button ── */
.OoHhXhn_ {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background: none;
    border: 1px solid #2d2f39;
    border-radius: 8px;
    color: #888;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

.OoHhXhn_:hover {
    border-color: var(--accent-1);
    color: var(--accent-1);
}

.OoHhXhn_ i {
    font-size: 10px;
}

/* ── Guest Card v2 (Request-style) ── */
.ilnvKImw {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 0.75rem;
    gap: 0.75rem;
}

.fZ9QgILW {
    background-color: var(--sub-bg-dark);
    border: 1px solid #1e2030;
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fZ9QgILW:hover {
    border-color: #2d2f39;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.rh4T0E26 {
    display: flex;
    flex-direction: column;
    padding: 0.85rem;
    gap: 0.5rem;
}

.LSpKHzJX {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.WgqYKT7H {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.WgqYKT7H span {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.enhFbAeA {
    flex: 1 1;
    min-width: 0;
}

.gSIblv4R {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.klnraiAz {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.Of_3h1bG {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    white-space: nowrap;
}

.HuUEizXT {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    white-space: nowrap;
}

.dOUi49CW {
    margin: 1px 0 0;
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.dOUi49CW i {
    font-size: 10px;
    color: #555;
    width: 12px;
    text-align: center;
}

.HxG8sbPY {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
}

.HxG8sbPY span {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 12px;
    color: #666;
}

.HxG8sbPY span i {
    font-size: 10px;
    color: #555;
}

.ONRpkyw0 {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.Ge4bVTDk {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
    white-space: nowrap;
}

.J12PBcG8 {
    font-size: 10px;
    font-weight: 500;
    padding: 2px 5px;
    color: #555;
}

/* ── Skeleton Cards ── */
.P9I4WQYN {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem;
    background-color: var(--sub-bg-dark);
    border: 1px solid #1e2030;
    border-radius: 12px;
    animation: GybuUAwz 1.5s ease-in-out infinite;
}

.ylG0IO6Z {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #1e2030;
    flex-shrink: 0;
}

.PjUEMTcT {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.gowJ3Wjj {
    height: 10px;
    border-radius: 4px;
    background: #1e2030;
}

@keyframes GybuUAwz {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* ═══════════════════════════════════════
   Guest Detail Modal
   ═══════════════════════════════════════ */

.D6q5pB5u {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.engMOoxk {
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    background-color: var(--sub-bg-dark);
    border: 1px solid #1e2030;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    animation: t3fXQwum 0.2s ease-out;
}

@keyframes t3fXQwum {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.W7oIovel {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    color: #888;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    z-index: 1;
}

.W7oIovel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

/* ── Modal Top (Requests-style with Instagram) ── */
.WC7W0fLH {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 2rem 1rem;
    text-align: center;
}

/* Instagram avatar */
.qXchjRYh {
    position: relative;
    display: block;
    margin-bottom: 0.85rem;
}

.vf9FqjaK {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 2px solid #E1306C;
    object-fit: cover;
    display: block;
}

.dcUW8397 {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dcUW8397 i {
    color: #fff;
    font-size: 11px;
}

/* Instagram stats */
.xSiaxO16 {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.75rem;
}

.vGMREgur {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rSttEuYv {
    font-size: 15px;
    font-weight: 700;
    color: var(--white);
}

.gZWV7wo3 {
    font-size: 11px;
    color: #888;
}

.M3_He5Qz {
    font-size: 13px;
    color: #888;
    text-decoration: none;
    margin-top: 2px;
}

.M3_He5Qz:hover {
    color: #E1306C;
}

._62OOaSj {
    font-size: 12px;
    color: #888;
    margin: 0.6rem 0 0;
    max-width: 320px;
    line-height: 1.4;
}

.ONWqYO01 {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: #3b82f6;
    border-radius: 50%;
    margin-left: 4px;
    position: relative;
}

.ONWqYO01::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 8px;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.i4Pi2i7T {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.b6IT5HwF {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    color: #888;
}

/* ── Legacy Header (unused but kept for compat) ── */
.eUolplh2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.75rem 2rem 1rem;
}

.dPSUAjl4 {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 0.85rem;
}

.dPSUAjl4 span {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
}

.j3jjmR69 {
    flex: 1 1;
    min-width: 0;
}

.uDpH6Eqk {
    margin: 0 0 2px;
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.YhrOiSf_ {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
}

.fsvGjgzM {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.rHa38lOL {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.35rem;
}

.rHa38lOL span,
.rHa38lOL a {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 12px;
    color: #888;
    text-decoration: none;
}

.rHa38lOL a:hover {
    color: #E1306C;
}

.rHa38lOL i {
    font-size: 11px;
    color: #555;
}

/* ── Quick Stats Bar ── */
.seifEmmo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0.75rem 2rem;
    margin: 0 2rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
    border: 1px solid rgba(45, 47, 57, 0.5);
}

.ZTXLkYp1 {
    flex: 1 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.Rc_Rje3p {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
}

.k8ioqKg7 {
    font-size: 11px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.LUskC5vG {
    width: 1px;
    height: 28px;
    background: rgba(45, 47, 57, 0.8);
}

/* ── Tab Bar ── */
.Ug4bJ_Ip {
    display: flex;
    border-bottom: 1px solid #1e2030;
    padding: 0.5rem 2rem 0;
    flex-shrink: 0;
}

.gnaH_teg {
    flex: 1 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: #555;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s ease;
}

.gnaH_teg:hover {
    color: var(--white);
}

._ouDhNhh {
    color: var(--accent-1);
    border-bottom-color: var(--accent-1);
}

.gnaH_teg i {
    font-size: 12px;
}

.Qmb2DVPY {
    font-size: 10px;
    font-weight: 600;
    background: rgba(13, 122, 199, 0.15);
    color: var(--accent-1);
    border-radius: 8px;
    padding: 1px 5px;
    margin-left: 2px;
}

/* ── Tab Content ── */
.ho6LSjJj {
    flex: 1 1;
    overflow-y: auto;
    padding: 1.25rem 2rem 2rem;
}

.ho6LSjJj::-webkit-scrollbar {
    width: 4px;
}

.ho6LSjJj::-webkit-scrollbar-thumb {
    background: #2d2f39;
    border-radius: 2px;
}

/* ── Details Tab ── */
/* ── Info List (IndEvent sidebar-style rows) ── */
.puKbdO_O {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.k7tWHe_Z {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
}

.SjADGtYL {
    display: flex;
    align-items: center;
    color: #888;
    font-size: 14px;
    margin-right: auto;
}

.SjADGtYL i {
    font-size: 10px;
    width: 16px;
    text-align: center;
    color: #555;
    flex-shrink: 0;
    margin-right: 4px;
}

.xudnKFgq {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    max-width: 60%;
}

.qTe_ZID3 {
    font-size: 14px;
    font-weight: 500;
    color: var(--accent-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    text-align: right;
    margin: 0;
}

.kvtp151h {
    font-size: 14px;
    font-weight: 500;
    color: #E1306C;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.kvtp151h:hover {
    text-decoration: underline;
}

.jRHwY1fl {
    background: none;
    border: none;
    color: var(--accent-1);
    font-size: 11px;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.15s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    opacity: 0.7;
}

.jRHwY1fl:hover {
    opacity: 1;
    background: rgba(13, 122, 199, 0.1);
}

.GpmC2xWx {
    font-size: 10px;
    color: var(--accent-1);
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.k7tWHe_Z:hover .GpmC2xWx {
    opacity: 1;
}

/* Tags in modal */
.ff0ynoES {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.N49Ffp1e {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(99, 102, 241, 0.1);
    color: #818cf8;
    border: 1px solid rgba(99, 102, 241, 0.15);
}

/* Rating in modal */
.gyC3JMjk {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.nj0ZNLQw {
    margin-left: 0.5rem;
    font-size: 15px;
    font-weight: 600;
    color: var(--white);
}

/* ── Events Tab ── */
.pQxDKBmJ {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.HQPq24Hy {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(45, 47, 57, 0.5);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    transition: border-color 0.15s ease;
}

.HQPq24Hy:hover {
    border-color: #2d2f39;
}

.NclHJL5j {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.mpkbvIL1 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.btek5NY3 {
    flex: 1 1;
    min-width: 0;
}

.x0wPbzpe {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.I7uMVDPq {
    margin: 1px 0 0;
    font-size: 12px;
    color: #666;
}

.MPRKMeHJ {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.15);
}

.D_tB3yEZ {
    font-size: 11px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
    color: #666;
    border: 1px solid rgba(45, 47, 57, 0.5);
}

._0vblPgiw {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(45, 47, 57, 0.3);
}

._0vblPgiw span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 12px;
    color: #666;
}

._0vblPgiw i {
    font-size: 10px;
    color: #444;
    width: 14px;
    text-align: center;
}

.FxmFJzH_ {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    color: #3d4052;
}

.FxmFJzH_ i {
    font-size: 28px;
}

.FxmFJzH_ p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

/* ═══ Spending Tab ═══ */

.oubq0dgp {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.WD1lOSH7 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 0.5rem;
    gap: 0.5rem;
}

.yt7odjK4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.75rem 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(45, 47, 57, 0.5);
    border-radius: 10px;
}

.VVL9VizX {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
}

.cyAkv__p {
    font-size: 11px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

.smqAkUV8 {
    display: flex;
    flex-direction: column;
}

.uRsFmr2G {
    margin: 0 0 0.5rem;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #555;
}

/* Top items */
.rCSdcmVQ {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.Lujr_Ut8 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.X0oXdVST {
    font-size: 13px;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gdh9dHDI {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-1);
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* Transactions */
.co7HhAB1 {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.uGv_eB9P {
    padding: 0.65rem 0.7rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(45, 47, 57, 0.4);
    border-radius: 10px;
}

.PG5dK2ws {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.kR3jN_GB {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(13, 122, 199, 0.1);
    border-radius: 8px;
    color: var(--accent-1);
    font-size: 12px;
}

.okcC4hD2 {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.Z7r8DRrv {
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
}

.brL0gcZm {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(168, 85, 247, 0.1);
    color: #a855f7;
    border: 1px solid rgba(168, 85, 247, 0.15);
    flex-shrink: 0;
}

.EWT9bbqw {
    flex: 1 1;
    min-width: 0;
}

.xGD4Skw8 {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.R42vGD9M {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.15);
    flex-shrink: 0;
}

.lWlSuPCb {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ZPu2i8MV {
    margin: 1px 0 0;
    font-size: 11px;
    color: #666;
}

.ZPu2i8MV span {
    color: #555;
}

.bK0WRCjN {
    font-size: 15px;
    font-weight: 600;
    color: var(--accent-1);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Itemised list within a transaction */
.sAidTb_F {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(45, 47, 57, 0.3);
    margin-left: 2.4rem;
}

.Nwtbpx7H {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.2rem 0;
}

.hRAtq6uF {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.a7aPbygo {
    color: var(--accent-1);
    font-weight: 600;
}

.S9hb6M3m {
    font-size: 12px;
    font-weight: 500;
    color: #888;
    flex-shrink: 0;
    margin-left: 0.5rem;
}
/* ======================================================
   SHARED TOPBAR - V3 Dark Theme
====================================================== */

.s_ywL4mD {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	gap: 2rem;
	position: relative;
}

/* --- Greeting --- */
.jqoLWmpu {
	flex-shrink: 0;
}

.q8RkZ7b_ {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	color: var(--white);
	line-height: 1.2;
}

/* --- Tools (search + action btns) - DESKTOP --- */
.hIYIGWlG {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	position: relative;
}

/* --- Search Box --- */
.cVzuERuI {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	padding: 0 1rem;
	height: 38px;
	transition: border-color 0.2s ease;
	width: 280px;
	box-sizing: border-box;
}

.cVzuERuI:focus-within,
.Q4qO3DsT {
	border-color: var(--accent-1);
}

.GmnGHnEN {
	font-size: 14px;
	color: #555;
	flex-shrink: 0;
}

.dno9m_pH {
	background: none;
	border: none;
	outline: none;
	color: var(--white);
	font-size: 14px;
	flex: 1 1;
	padding: 0;
	min-width: 0;
}

.dno9m_pH::placeholder {
	color: #555;
}

.bjHruswA {
	background: none;
	border: none;
	color: #666;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	font-size: 12px;
	transition: color 0.15s ease;
	flex-shrink: 0;
}

.bjHruswA:hover {
	color: var(--white);
}

/* --- Results Dropdown --- */
.QNGMw1KA {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	width: 420px;
	max-height: 420px;
	overflow-y: auto;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
	z-index: 999;
	padding: 0.5rem 0;
}

.QNGMw1KA::-webkit-scrollbar {
	display: none;
}

/* --- Section --- */
.qa_j8CtO {
	padding: 0.25rem 0;
}

.qa_j8CtO:not(:last-child) {
	border-bottom: 1px solid rgba(45, 47, 57, 0.6);
	padding-bottom: 0.5rem;
	margin-bottom: 0.25rem;
}

.mxyeAwyH {
	margin: 0;
	padding: 0.4rem 1rem 0.3rem;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #666;
}

/* --- Result Item --- */
.R4cG4lVH {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.65rem 1rem;
	width: 100%;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	transition: background-color 0.12s ease;
	color: var(--white);
}

.R4cG4lVH:hover {
	background-color: rgba(255, 255, 255, 0.04);
}

.YpiH9hdI {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}

.Fg4JYlUV {
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
}

.YfkC5prU {
	background: rgba(60, 162, 89, 0.12);
	color: var(--success-green);
}

.JkKGbM6B {
	background: rgba(167, 139, 250, 0.12);
	color: #a78bfa;
}

.x9KaDxA_ {
	min-width: 0;
	flex: 1 1;
}

.QxhMMWgg {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.o1Gal7ip {
	margin: 0.15rem 0 0;
	font-size: 12px;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- No Results --- */
.TtAlg_IA {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 2rem 1rem;
	color: #555;
}

.TtAlg_IA i {
	font-size: 20px;
}

.TtAlg_IA p {
	margin: 0;
	font-size: 13px;
}

/* --- Unified action button (help, profile, etc.) --- */
.JIVyFDgb {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
	color: #888;
	font-size: 16px;
	flex-shrink: 0;
}

.JIVyFDgb:hover,
.lazqYnh_ {
	border-color: var(--accent-1);
	color: var(--white);
}

/* Avatar variant - initials instead of icon */
.Lzumro_K {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.3px;
	color: var(--accent-1);
}

.Lzumro_K:hover,
.lazqYnh_.Lzumro_K {
	color: var(--white);
}

/* Mobile profile active state (for tb_icon_btn) */
.e93PBpbp {
	border-color: var(--accent-1);
	color: var(--white);
}
/* --- Profile Wrapper (for dropdown positioning) --- */
.Nt87H9LI {
	position: relative;
}

/* --- Profile Dropdown --- */
.b5vDG20I {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	width: 280px;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
	z-index: 999;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	animation: xs08wRxf 0.18s ease-out;
}

.emiDZM1E {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(13, 122, 199, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.emiDZM1E span {
	font-size: 16px;
	font-weight: 700;
	color: var(--accent-1);
	letter-spacing: 0.5px;
}

.FNtQFI18 {
	text-align: center;
	min-width: 0;
	width: 100%;
}

.OKpGKGNd {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.xK_F59GB {
	margin: 0.2rem 0 0;
	font-size: 13px;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fhGuM9l0 {
	display: inline-block;
	margin-top: 0.6rem;
	padding: 0.25rem 0.75rem;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: var(--accent-1);
	background: rgba(13, 122, 199, 0.1);
	border-radius: 6px;
}

@keyframes xs08wRxf {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* ======================================================
   HELP MODAL
====================================================== */

.OGdYtRuF {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 2rem;
	animation: izXla1QY 0.2s ease-out;
}

.CyFYbcyl {
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 16px;
	width: 100%;
	max-width: 480px;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
	animation: y3LMxo6B 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow:
		0 24px 80px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.03);
}

.NMURsAiX {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	border: none;
	color: #666;
	font-size: 14px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	z-index: 2;
}

.NMURsAiX:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--white);
}

.VVoi0bRA {
	flex: 1 1;
	overflow-y: auto;
	min-height: 0;
}

.VVoi0bRA::-webkit-scrollbar {
	width: 4px;
}

.VVoi0bRA::-webkit-scrollbar-track {
	background: transparent;
}

.VVoi0bRA::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 4px;
}

.VVoi0bRA::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.15);
}

/* --- Help Header --- */
.XB208xth {
	padding: 2.5rem 2rem 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.QHNuYroC {
	width: 60px;
	height: 60px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
	font-size: 24px;
}

.XIsTeTlA {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--white);
	line-height: 1.2;
}

.zXdiOkYH {
	margin: 0.4rem 0 0;
	font-size: 14px;
	color: #888;
	line-height: 1.5;
}

/* --- Divider --- */
.AVcFGTVb {
	height: 1px;
	margin: 0 2rem;
	background: linear-gradient(
		90deg,
		transparent 0%,
		#2d2f39 20%,
		#2d2f39 80%,
		transparent 100%
	);
}

/* --- Sections --- */
.i9hpxJvB {
	padding: 1.25rem 1.5rem 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.SHqXlYEZ {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 0.85rem 0.65rem;
	border-radius: 10px;
	transition: background-color 0.15s ease;
}

.SHqXlYEZ:hover {
	background: rgba(255, 255, 255, 0.02);
}

.LfFdwVS2 {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 14px;
	margin-top: 1px;
}

.fBAyVNNs {
	flex: 1 1;
	min-width: 0;
}

.vCKR0x_O {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
	line-height: 1.3;
}

.pIckSJNU {
	margin: 0.3rem 0 0;
	font-size: 13px;
	color: #888;
	line-height: 1.55;
}

/* --- Footer --- */
.DR1abe3v {
	padding: 1.5rem 2rem 1.5rem;
	display: flex;
	justify-content: center;
}

.oy5b418f {
	padding: 0.6rem 2.5rem;
	background: var(--accent-1);
	border: none;
	border-radius: 9px;
	color: var(--white);
	font-size: 14px;
	font-weight: 600;
	font-family: var(--font-family);
	cursor: pointer;
	transition: all 0.2s ease;
}

.oy5b418f:hover {
	filter: brightness(1.12);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(13, 122, 199, 0.3);
}

.oy5b418f:active {
	transform: scale(0.97);
}

/* --- Help Modal Animations --- */
@keyframes izXla1QY {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes y3LMxo6B {
	from {
		opacity: 0;
		transform: translateY(-16px) scale(0.97);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* --- Hamburger (mobile only) --- */
.znouvJdr {
	display: none;
}

/* --- Mobile icon buttons (search + profile) - hidden on desktop --- */
.pqxdYuJ2 {
	display: none;
}

/* --- Mobile search overlay - hidden on desktop --- */
.b8JdiFza {
	display: none;
}


/* ======================================================
   RESPONSIVE
====================================================== */

@media (max-width: 768px) {
	.s_ywL4mD {
		gap: 0.75rem;
	}

	/* Show hamburger */
	.znouvJdr {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		aspect-ratio: 1;
		border-radius: 10px;
		background-color: var(--sub-bg-dark);
		border: 1px solid #2d2f39;
		color: var(--white);
		font-size: 17px;
		cursor: pointer;
		flex-shrink: 0;
		transition: border-color 0.2s ease;
	}

	.znouvJdr:hover {
		border-color: var(--accent-1);
	}

	/* Greeting fills middle */
	.jqoLWmpu {
		flex: 1 1;
		min-width: 0;
	}

	.q8RkZ7b_ {
		font-size: 18px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Hide desktop search + profile */
	.hIYIGWlG {
		display: none;
	}

	/* Show mobile icon buttons */
	.pqxdYuJ2 {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		flex-shrink: 0;
		position: relative;
	}

	.b5vDG20I {
		width: 260px;
	}

	.lDplXOwn {
		width: 40px;
		height: 40px;
		aspect-ratio: 1;
		border-radius: 10px;
		background-color: var(--sub-bg-dark);
		border: 1px solid #2d2f39;
		color: #888;
		font-size: 15px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		transition: border-color 0.2s ease, color 0.2s ease;
	}

	.lDplXOwn:hover,
	.lDplXOwn:active {
		border-color: var(--accent-1);
		color: var(--white);
	}

	.lDplXOwn:active {
		transform: scale(0.93);
	}

	.znouvJdr:active {
		transform: scale(0.93);
	}

	/* Mobile search overlay */
	.b8JdiFza {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		animation: zFkDgvi3 0.2s ease-out;
	}

	.muAO6h1M {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		background-color: var(--sub-bg-dark);
		border: 1px solid var(--accent-1);
		border-radius: 10px;
		padding: 0.6rem 1rem;
		height: 40px;
		box-sizing: border-box;
	}

	.IA7u6xuI {
		margin-top: 0.5rem;
		background-color: var(--sub-bg-dark);
		border: 1px solid #2d2f39;
		border-radius: 12px;
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
		max-height: 60vh;
		overflow-y: auto;
		padding: 0.5rem 0;
		animation: oOEeqNVY 0.2s ease-out;
	}

	.IA7u6xuI::-webkit-scrollbar {
		display: none;
	}

	@keyframes zFkDgvi3 {
		from {
			opacity: 0;
			transform: translateY(-8px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	@keyframes oOEeqNVY {
		from {
			opacity: 0;
			transform: translateY(-4px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

@media (max-width: 480px) {
	.znouvJdr {
		width: 36px;
		height: 36px;
		font-size: 15px;
		border-radius: 8px;
	}

	.lDplXOwn {
		width: 36px;
		height: 36px;
		font-size: 13px;
		border-radius: 8px;
	}

	.q8RkZ7b_ {
		font-size: 16px;
	}

	.pqxdYuJ2 {
		gap: 0.4rem;
	}

	/* Help modal mobile tweaks */
	.OGdYtRuF {
		padding: 1rem;
	}

	.XB208xth {
		padding: 2rem 1.5rem 1.25rem;
	}

	.QHNuYroC {
		width: 52px;
		height: 52px;
		font-size: 20px;
	}

	.XIsTeTlA {
		font-size: 20px;
	}

	.AVcFGTVb {
		margin: 0 1.5rem;
	}

	.i9hpxJvB {
		padding: 1rem 1rem 0.5rem;
	}

	.SHqXlYEZ {
		padding: 0.75rem 0.5rem;
	}

	.DR1abe3v {
		padding: 0.75rem 1.5rem 1.25rem;
	}
}

/* -----------------------------------------------------
    Form Input Styles
    Extracted from Hub.module.css
------------------------------------------------------ */

/* -----------------------------------------------------
    Event Name Input (Floating Label Style)
------------------------------------------------------ */

.SRWPtvfP {
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
    position: relative;
    animation: yTZKAWQ1 0.5s ease-in-out;
}

.tI3Vg3r9 {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    grid-gap: 1.25rem;
    gap: 1.25rem;
    padding-bottom: 0rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color 0.2s ease;
    cursor: pointer;
}

.tI3Vg3r9:hover {
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.tI3Vg3r9.b5mgmhjk {
    border-bottom-color: #0D7AC7;
    border-bottom-width: 2px;
}

.tI3Vg3r9.QG0f9x0e {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

._nIsPTw3 {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 20px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}

.tI3Vg3r9.b5mgmhjk ._nIsPTw3 {
    color: #0D7AC7;
}

.tI3Vg3r9.QG0f9x0e ._nIsPTw3 {
    color: rgba(255, 255, 255, 0.5);
}

.aANxioYG {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.BRR6eRE1 {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.4);
    pointer-events: none;
    transition: all 0.2s ease;
    transform-origin: left center;
}

.x4s1HEvM {
    top: -14px;
    font-size: 11px;
    font-weight: 700;
    color: #0D7AC7;
    letter-spacing: 0.6px;
    transform: translateY(0);
}

.AoQDrx_4 {
    top: -14px;
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.6px;
    transform: translateY(0);
}

.yNddPPZC {
    background: none;
    border: none;
    outline: none;
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    padding: 0.5rem 0;
    font-family: var(--font-family);
    width: 100%;
    min-height: 1.5rem;
}

.yNddPPZC:disabled,
.yNddPPZC[readonly] {
    cursor: not-allowed;
    opacity: 0.7;
}

.yNddPPZC::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.laGvmXwj {
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    padding: 0.5rem 0;
    font-family: var(--font-family);
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 1.5rem;
    display: flex;
    align-items: center;
}

/* -----------------------------------------------------
    Custom Select Arrows & Clear
------------------------------------------------------ */

.vByGOPJd {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    transition: all 0.2s ease;
    margin-left: 0.5rem;
}

.fIotYluC {
    color: #0D7AC7;
    transform: rotate(180deg);
}

.Cjq6Kljl {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    margin-left: 0.5rem;
}

.Cjq6Kljl:hover {
    color: rgba(255, 255, 255, 0.7);
}

/* -----------------------------------------------------
    Dropdown Menu
------------------------------------------------------ */

.Y3KlGJxy {
    max-height: 300px;
    overflow-y: scroll;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    border: 1px solid rgba(13, 122, 199, 0.3);
    border-radius: 8px;
    background-color: #161824;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    animation: QkHCUlQZ 0.2s ease;
}

.KWDtC6oW {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.25rem;
    border: none;
    background: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    font-weight: 400;
    font-family: var(--font-family);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.KWDtC6oW:hover {
    background-color: rgba(13, 122, 199, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.wNu8F99m {
    background-color: rgba(13, 122, 199, 0.08);
    color: #0D7AC7;
    font-weight: 500;
}

.wNu8F99m i {
    color: #0D7AC7;
    font-size: 12px;
}

.YymW9z2k {
    padding: 1rem 1.25rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
}

/* -----------------------------------------------------
    Validation Banners
------------------------------------------------------ */

.ASNWcBSC {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    pointer-events: none;
    z-index: 1000;
}

.oxJLPknh {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-gap: 1.25rem;
    gap: 1.25rem;
    align-items: center;
    padding: .75rem 1.5rem;
    border-radius: 12px;
    pointer-events: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    border: 1px solid;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}

.sZ0WqxB9 {
    border-color: rgba(255, 77, 77, 0.5);
    background: linear-gradient(135deg, rgba(255, 77, 77, 0.2) 0%, rgba(255, 77, 77, 0.1) 100%);
    animation: DvBNCF9J 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.sZ0WqxB9 .GebDs7Hv {
    background-color: rgba(255, 77, 77, 0.25);
    color: #ff6b6b;
    box-shadow: 0 0 20px rgba(255, 77, 77, 0.2);
}

.sZ0WqxB9 .tOly3gSO {
    color: #ff8080;
}

.HpIc_FfP {
    border-color: rgba(255, 165, 0, 0.5);
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.2) 0%, rgba(255, 165, 0, 0.1) 100%);
    animation: DvBNCF9J 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.HpIc_FfP .GebDs7Hv {
    background-color: rgba(255, 165, 0, 0.25);
    color: #ffb84d;
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.2);
}

.HpIc_FfP .tOly3gSO {
    color: #ffb84d;
}

.GebDs7Hv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.yxJmtRJx {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.tOly3gSO {
    margin: 0;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.MuH6puCY {
    margin: 0;
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    line-height: 1.4;
}

.gs2IN19S {
    padding: 0.65rem 1.25rem;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gs2IN19S:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.SEji5dyc {
    animation: DvBNCF9J 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.YdHt6p9Z {
    animation: tCVVTq_d 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* -----------------------------------------------------
    Form Container
------------------------------------------------------ */

.Stuyo4_g {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
}

/* -----------------------------------------------------
    Animations
------------------------------------------------------ */

@keyframes QkHCUlQZ {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes yTZKAWQ1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes DvBNCF9J {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tCVVTq_d {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-30px);
    }
}

/* -----------------------------------------------------
    Responsive
------------------------------------------------------ */

@media (max-width: 768px) {
    .tI3Vg3r9 {
        padding: 1rem 0;
        gap: 1rem;
    }

    ._nIsPTw3 {
        font-size: 18px;
    }

    .yNddPPZC {
        font-size: 15px;
    }
}

.vUGJY3yE {
	font-weight: 600;
}

._LgtpQbm {
	font-weight: 700;
}

.R1rnFIyK {
	font-size: 8px;
}

.sBlmhY7B {
	font-size: 10px;
}

.GFWgGhED {
	font-size: 12px;
}

.Gg1sjqgO {
	font-size: 14px;
}

.Ymk8Dzii {
	font-size: 15px;
}

.SElmvzaj {
	font-size: 17px;
}

.V0LLUaxq {
	font-size: 22px;
}

.Zjmo1Nun {
	font-size: 25px;
}


.diEnZuMc {
	font-size: 35px;
}

.wouiP0Y2 {
	font-size: 38px;
}

.KBO1BxPr {
	font-size: 42px;
}

/* -----------------------------------------------------
	Layout & Grid System
------------------------------------------------------ */

.nIuRxgKZ {
	position: relative;
}

.imLD_EV5 {
	height: 100vh;
	width: 100%;

/*	display: grid;
	grid-template-columns: 15% 1fr;*/
	display: flex;
    /*column-gap: 2rem;*/
	overflow: hidden;
	background-color: var(--bg-dark);

	/*padding: 40px;*/
	box-sizing: border-box;
	color: var(--white)
}

.sidqIyXe {
	height: 100%;
	width: 100%;
	position: relative;
	background-color: var(--bg-dark);
	transition: background-color 400ms ease
}

.Ka_7rcl0 {
	background-color: var(--white);
}

.rfInhsPI {
  	opacity: 0.7 !important;
  	pointer-events:none !important;
}

.K0vdEfQN {
    width: 100%;
    background-color: var(--accent-1);
    color: var(--white);
    border: none;
    border-radius: 10px;
    padding: 12.5px 0;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .75rem;
}


.Ue0Wsm3O {
	width: 100%;
	display: flex;
	flex-direction: column;

	padding: 40px 60px 40px 60px;
	row-gap: 2.5rem;
	box-sizing: border-box;
	overflow-y: scroll;
}

.DMp4ssbZ {
	/*height: 100%;*/
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
}

.Rzlw0rBn {
	height: 75%;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-column-gap: 1rem;
	column-gap: 1rem;
	position: relative;
}

.n5WxoGYw {
	width: 400px;
	box-sizing: border-box;
	border-radius: 50px;
	display: flex;
	align-items: center;
	background-color: var(--white)
}

.c0_pWv6K {
	padding: 0 15px;
	box-sizing: border-box;
	width: 100%;
	border: none;
	background: none;

	display: flex;
	position: relative;
	column-gap: 1rem;
}

.c0_pWv6K p,
.c0_pWv6K i {
	color: var(--bg-dark);
}

.c0_pWv6K input {
	position: absolute;
	background: none;
	border: none;
	margin-left: 2.5rem;
	width: calc(100% - (2.5rem + 60px));
}

.EFUOIYoB {
	height: 100%;
	aspect-ratio: 1;

	border-radius: 100%;
	background-color: var(--white);
	border: 1px solid var(--white);
}

.EFUOIYoB i {
	color: var(--bg-dark);
}

.zceIgbg5 {
	width: 100%;
	height: 100%;
	background-color: var(--sub-bg-dark);
	padding: 30px 30px 0 30px;
	box-sizing: border-box;
	position: relative;

    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid #2d2f39;
	border-radius: 15px;
}

.lNyxmxnu {
	display: grid;
	grid-template-columns: auto 1fr;
}

.PLZBOzu5 {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 auto;
	background: none;
	border: none;
	color: var(--white);
}

.uIX5BmvS {
	padding-right: 2.5rem;
}

.z4wZLKR2 {
	height: 30px;
	width: 30px;
	position: absolute;
	right: 30px;

	border: none;
	border-radius: 100%;
	background-color: var(--accent-1);

	display: flex;
	align-items: center;
	justify-content: center;
}

.z4wZLKR2 i {
	color: var(--white);
}

._bMVz_gD {
	margin-top: 1.5rem;
	height: calc(100% - 1.5rem);
}

.CnxHqHNq {
	height: 100%;
	width: 100%;
}

.GbN2cpFs {
	display: flex;
	column-gap: 1rem;
	margin-bottom: 1.5rem;
}

.GbN2cpFs button {
	border: none;
	background: none;
	color: var(--white);
	border-bottom: 1px solid var(--sub-bg-dark);
	padding: 0 5px 5px 5px
}

.DWaZ5hCl {
	border-bottom: 2px solid var(--accent-1) !important;
}


.Gv6ihOIQ {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: 1rem;
    row-gap: 1rem;
    grid-column-gap: 1rem;
    column-gap: 1rem;
}

.pkSN5rdm {
	background-color: var(--bg-dark);
	border: 1px solid var(--bg-dark);
	width: 100%;
	border-radius: 10px;
	padding: 1rem;
	box-sizing: border-box;
}

.pYnKrBPv {
	border: none;
	background-color: var(--accent-1);
	padding: 10px 0;
	box-sizing: border-box;
	width: 100%;
	color: var(--white);
	border-radius: 10px;
	margin-bottom: 30px
}

.jonzbO7E {
	background-color: var(--bg-dark);
	border: 1px solid var(--bg-dark);
	height: 60px;
	width: 100%;
	border-radius: 10px;
	padding: 1rem;
	box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
	color: var(--white);
}

.jonzbO7E p {
	text-align: center;
}

.dA0vnh7q {
	align-items: center;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-column-gap: 1rem;
	column-gap: 1rem;
}

.ReDOZHI1 {
	height: 35px;
	width: 35px;
	background-color: var(--white);
	color: var(--bg-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
}

.d66oY2DT {
	display: flex;
	flex-direction: column;
	color: var(--white);
	text-align: left;
	min-width: 0;
}



.J0t3x0VR {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: .75rem;
    row-gap: .75rem;
    grid-column-gap: .75rem;
    column-gap: .75rem;
}


.drdFAnMg {
	padding-bottom: 30px !important;
	box-sizing: border-box;
}

.vLa2ZprV {
    aspect-ratio: 1;
    height: 60%;
}

.VOMXR0zy {
	display: flex;
}



.fHb588Jv {
    column-gap: .5rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    row-gap: .5rem;
	height: calc(100% - 30px);
	overflow-y: scroll
}

.NcoETeji {
    align-items: center;
    border: none;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    padding: 0 10px;

    background-color:  var(--accent-1);
    color: var(--white);
}

.OTXjOINa {
	height: 50%;
	width: 50%;
	position: absolute;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	border-radius: 15px;

	background-color: var(--bg-dark);
}

.oH47_clY {
	padding: 25px;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-row-gap: 2.5rem;
	row-gap: 2.5rem;
	color: var(--white);
	overflow-y: scroll;
}

.N8MSRRED {
	display: grid;
	grid-template-columns: auto 1fr;
}

.STjI82RR {
	display: flex;
	flex-direction: column;
	row-gap: .25rem;
}

.ZsKOYdg6 {
	margin: 0 0 0 auto;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-column-gap: 1rem;
	column-gap: 1rem;
	position: relative;
}

.g4LqQRge { 
	display: flex;
	column-gap: 1rem;
}

.Cv5VLALE {
	width: 35px;
	aspect-ratio: 1;
	border: 1px solid var(--white);
	background-color: var(--bg-dark);
	border-radius: 100%;
	

	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.dLpFBhuT {
	border: 1px solid var(--accent-1);
	background-color: var(--accent-1);
}

.iSJYFGgo {
	width: 100%;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

.k4gDC3Ek {
	row-gap: 0 !important;
}

.agRoFbXi {
	width: 100%;
	height: 45px;
	padding: 0 15px;
	box-sizing: border-box;
	background-color: var(--sub-bg-dark);
	border: none;
	border-radius: 10px;

	display: flex;
	align-items: center;
	position: relative;
	column-gap: 1rem;
}

.agRoFbXi input {
	position: absolute;
	background: none;
	border: none;
	margin-left: 2rem;
	width: calc(100% - (2.5rem + 60px));
	color: var(--white)
}

.C1wVO2Ow {
	width: 100%;
	padding: 0 15px;
	box-sizing: border-box;
	background-color: var(--sub-bg-dark);
	border: none;
	border-radius: 10px;

	display: flex;
	align-items: center;
	position: relative;
	column-gap: 1rem;
}

.C1wVO2Ow input {
	position: absolute;
	background: none;
	border: none;
	margin-left: 2rem;
	width: calc(100% - (2.5rem + 60px));
	color: var(--white)
}

.XOj6ZxcK {
	width: calc(100% - 30px) !important;
	margin-left: 0 !important
}

.Xdui2y3z {
	margin: 0 0 0 auto !important;
}

.UsnXeLHt {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 1rem;
	column-gap: 1rem
}


.KJblVM48 {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 1rem;
	column-gap: 1rem
}

.bVAAI1KP {
	display: flex;
	margin-top: 1rem
}

.C7U992m_ {
	width: 40px;
	aspect-ratio: 1;
	background-color: var(--white);
	border: none;
	color: var(--bg-dark);
	border-radius: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
}

.zqKKLU5h {
	margin: 0 0 0 auto;
}

.XhynC4nI {
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr;
	margin-bottom: 1rem;
}

.TJHwPXSy {
	display: flex;
	column-gap: 1rem;
}

.XhynC4nI button {
	margin: 0 0 0 auto;
	border: none;
	background: none;
	color: var(--white);
	border-bottom: 1px solid var(--bg-dark);
	padding: 0 5px 5px 5px
}

.bRS9KrjG {
	border-bottom: 2px solid var(--accent-1) !important;
}

.Hx2ugfB7 {
	margin-right: 2.75rem;
}


.bxE2i3Tv {
	height: 100%;
	overflow-y: scroll;
	width: 100%;
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	grid-template-columns: repeat(4, 1fr);
	grid-row-gap: 10px;
	row-gap: 10px;
	grid-column-gap: 10px;
	column-gap: 10px;
	margin-top: .75rem;
}

.bxE2i3Tv div {
	background-color: var(--sub-bg-dark);
	border-radius: 10px;
}

.qPjxPeeB {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.dpM2VBv3 {
	display: flex;
	margin: 0 0 0 auto;
	column-gap: 1rem;
	margin-top: 1.5rem;
}

.dpM2VBv3 button {
	background: none;
	border: none;
	color: var(--white);
}

.bltYyvY6 {
/*	height: 55vh;*/
	width: 100%;
	position: relative
}

.eG1kOoHZ {
	width: 55%;
    height: calc(100% + 5rem);
    background-color: var(--white);
    position: absolute;
    top: 0;
	left: 50%;
	transform: translate(-50%, 0);
}

.TwYqlqy3 {
	height: 100%;
	width: 100%;
	position: relative;

	display: grid;
	grid-template-rows: auto 25% auto 1fr;
	grid-row-gap: 1rem;
	row-gap: 1rem;
	padding: 10px;
	box-sizing: border-box;
}

.bdDVkg65 {
	position: absolute;
    top: -15px;
	left: 50%;
	transform: translate(-50%, -15px);

	border-radius: 100%;
	height: 50px;
	width: 50px;
	background-color: var(--bg-dark)
}

.rye6pwIE {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: 30% 1fr;
	color: var(--bg-dark)
}

.rye6pwIE img {
	width: 100%;
}

.tmxLSkpW {
	margin: 0 0 0 auto;
	display: flex;
	flex-direction: column;
	text-align: right;
}

.gaUowZNb {
	width: calc(100% + 22px);
    margin: 0 -11px;
    background-color: var(--sub-bg-dark);
    color: var(--white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    row-gap: .25rem
}

.gaUowZNb img {
  width: 100%; /* Stretch to fit width */
  height: 100%; /* Stretch to fit height */
  object-fit: fill; /* Distorts the image */
}

.ivos7K1l {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 1rem;
	column-gap: 1rem;
	grid-row-gap: 1rem;
	row-gap: 1rem;
	color: var(--bg-dark)
}

.uYATx_Gh {
	display: flex;
	flex-direction: column;
	row-gap: .15rem
}

.BVSXVLWI {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.BVSXVLWI img {
	width: 40%;
}

.CelhKJZU {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr)
}

.kfCc9UD0 {
	width: 100%;
}

.kfCc9UD0 button {
	margin-top: 7.5px;
}

.CixGNGSb {
	border-left: 0.1px solid var(--white);
	padding-left: 2rem;
	box-sizing: border-box;
}

.tomtoODT {
	border-right: 0.1px solid var(--white);
	padding-right: 2rem;
	box-sizing: border-box;
}

.YKV34_LW {
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
	background-color: var(--sub-bg-dark);
	border: none;
	border-radius: 10px;
	height: 20%;
}

.YKV34_LW textarea {
	background: none;
	border: none;
	max-width: 100%;
	width: 100%;
	color: var(--white);
	height: 100%;
	max-height: 100%;
}

.an0ht1ug {
	display: flex;
	flex-direction: column;
	row-gap: .75rem;
}

.x6B3HKBq {
	width: 100%;
	padding: 5px 15px 5px 5px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	justify-content: center;
	grid-column-gap: .5rem;
	column-gap: .5rem;
	background-color: var(--sub-bg-dark);
	border-radius: 50px;

}

.spFa5wxh {
	height: 32px;
	aspect-ratio: 1;
	background-color: var(--white);
	color: var(--sub-bg-dark);
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hGu7buW3 {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.YZi2c5Rb {
	display: grid;
	grid-template-columns: repeat(4, calc(35px + 1.25rem));
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	padding: 0 2.5px;
	box-sizing: border-box;
}

.SGrzrVBX {
	width: 100%;
	border: 1px solid var(--white)
}

._V6J2ndt {
	width: 100%;
	border: 1px dashed var(--white)
}

.VjDsC8uj {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
}

.OIMbTIOD {
    background: none;
    border: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.pa7iFVNV {
    margin-top: 5px;
    position: absolute;
    width: 42%;
    padding: 5px 15px 15px 15px;
    box-sizing: border-box;
    background-color: var(--sub-bg-dark);
    border: none;
    border-radius: 10px;
    height: auto;
    min-height: 10%;
    max-height: 30%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

.NDRslB_O {
	background: none;
	border: none;
	border-bottom: 1px solid var(--bg-dark);
	padding: 10px 0;
	display: grid;
	grid-template-columns: 100px 1fr;
	align-items: center;
	justify-content: center;
	color: var(--white);
	text-align: left;
	margin-top: 0 !important;
}

.NDRslB_O:hover {
	background-color: white;
	color: var(--sub-bg-dark);
	margin: 0 -30px;
	padding: 10px 30px;
}

.KEilutit {
	display: grid;
	grid-template-rows: auto 1fr
}

.zetGJ0zx {
	text-align: center;
    margin: auto 0;
    padding-top: 5px;
}

.Wv0qofHV {
	display: flex;
	column-gap: 10px;
	margin-top: 5px;
	align-items: center
}

.ffdOyq_c {
	height: 8px;
	width: 8px;
	border-radius: 100%;
	background-color: var(--success-green);
}

.ueNnDMDR {
	background: var(--sub-bg-dark);;
	border: none;
	max-width: 100%;
	padding: 10px;
	width: 100%;
	color: var(--white);
	height: 35px;
	max-height: 35px;
	border-radius: 5px;
	margin-bottom: 5px;
}


.pa7iFVNV {
    z-index: 9999;
    max-width: 100%;
    width: 100%;
    padding: 5px 15px 15px 15px;
    box-sizing: border-box;
    background-color: var(--sub-bg-dark);
    border: none;
    border-radius: 5px;
    height: auto;
/*    min-height: 300px;*/
    max-height: 300px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

.NDRslB_O {
	background: none;
	border: none;
	border-bottom: 1px solid var(--bg-dark);
	padding: 10px 0;
	display: grid;
	grid-template-columns: 100px 1fr;
	align-items: center;
	justify-content: center;
	color: var(--white);
	text-align: left;
	margin-top: 0 !important;
}

.NDRslB_O:hover {
	background-color: white;
	color: var(--sub-bg-dark);
	margin: 0 -30px;
	padding: 10px 30px;
}

.tCmas0hU {
	display: flex;
	align-items: center;
	column-gap: 7.5px;
	margin-bottom: 10px
}

.HIdf_eQD {
	background: none;
	border: none;
	padding: 2.5px 10px;
	color: var(--white);
	border-bottom: 2px solid var(--bg-dark);
}

.ezbUW8Qa {
	border-bottom: 2px solid var(--accent-1);
}

/* ... (All your existing CSS definitions from the question remain unchanged) ... */

/* ----------------------------------------
   Additional RolePage styles
----------------------------------------- */
.v5BEvCQA {
  /* You can adjust this layout as desired */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
}

.FrV3agyV {
  padding: 1rem;
  background-color: var(--sub-bg-dark);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
  align-items: flex-start;
  border: 2px solid var(--sub-bg-dark);
}

.FrV3agyV:hover {
  background-color: var(--accent-1);
  color: var(--white);
}

.cPVr_LzS {
  border: 2px solid var(--accent-1);
}

.atmKQDx4 {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 5px;
}

.KqTMfmwO {
    position: absolute;
    bottom: 5rem;
    background-color: red;
    width: calc(100% - 50px);
    padding: 10px;
    border-radius: 5px;
}

.WgtK8sVo {
	position: absolute;
	width: 350px;
	height: 500px;
	background-color: white;
	top: 50px;
	z-index: 999;
	border-radius: 10px;
	overflow-y: scroll;
}

.nz_AVyNP {
	padding: 15px 20px;
	box-sizing: border-box;
	color: var(--bg-dark);
	display: grid;
	grid-template-columns: 20px 1fr;
	align-items: center;
	grid-column-gap: .5rem;
	column-gap: .5rem;

	background: none;
  	width: 100%;
  	border: none;
  	text-align: left;
}

.Ay0Wk59S {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.oKNASvH_ {
	width: 350px;
	box-sizing: border-box;
	border-radius: 50px;
	display: flex;
	align-items: center;
	box-sizing: border-box;

	display: flex;
	align-items: center;
	position: relative;
	column-gap: 1rem;
	color: var(--bg-dark);
	background-color: var(--white);
}

.oKNASvH_ input {
	position: absolute;
	background: none;
	border: none;
	margin-left: 15px;
	width: calc(100% - (2rem));
	color: var(--bg-dark)
}

.mS6qW5GA {
	display: flex;
	align-items: center;
	column-gap: .75rem;
	position: absolute;
	left: 10px;
	padding: 0 10px;
	box-sizing: border-box;
}

.Pke7WpPk {
	position: absolute;
	left: -16px;
	top: 20px;
	background-color: var(--bg-dark);
	border: none;
	border-radius: 12.5px;
	padding: 10px;
	color: white
}

.FzFuvtNF {
	position: absolute;
	right: 20px;
	top: 20px;
	color: white;
	background: none;
	border: none;
}

.TMzuVu08 {
	margin: 0 0 0 auto;
	background: none;
	border: none;
	color: white;
}

.TMzuVu08 i {
	font-size: 20px
}

.Go9cEnrs {
	height: 100%;
	overflow: hidden;
	width: 100%;
	display: flex;
	column-gap: 1.25rem;
}

.qpdQxrdf {
	height: 100%;
	width: 45%;
	display: flex;
	flex-direction: column;
	row-gap: 1.25rem;
}

.KpaIpaMs {
	display: flex;
	flex-direction: column;
	row-gap: 1rem
}

.q4h4Fw2l {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.3px;
}

.JMt33m8w {
	width: 100%;
	position: relative;

    display: flex;
    flex-direction: column;
    row-gap: 3rem
}

.LWHB9tvJ {
	height: 45vh;
	width: 100%;
	border-radius: 15px;
	background-color: var(--sub-bg-dark);
	padding: 30px;
	box-sizing: border-box;
	position: relative;

    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid #2d2f39;
    overflow-y: scroll;

    grid-row-gap: 1rem;

    row-gap: 1rem
}

.vljoZGhX {
	height: 85vh;
	width: 100%;
	border-radius: 15px;
	background-color: var(--sub-bg-dark);
	padding: 30px 30px 0 30px;
	box-sizing: border-box;
	position: relative;

    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid #2d2f39;
    overflow: hidden;
    min-height: 0;

    grid-row-gap: 1rem;

    row-gap: 1rem
}

.cyVT_TRt {
	height: 50vh;
	width: 100%;
	border-radius: 15px;
	background-color: var(--sub-bg-dark);
	padding: 30px;
	box-sizing: border-box;
	position: relative;

    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid #2d2f39;
    overflow: hidden;

    grid-row-gap: 1rem;

    row-gap: 1rem
}

.BHvF86oR {
	padding: 30px 30px 0 30px
}

.rP34ASxg {
	grid-template-rows: auto 1fr;
	row-gap: 1rem
}



.QkR2gLu1 {
	display: grid;
	grid-template-columns: auto 1fr;
}
.dlKQBti_ {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.yne80xCf {
	overflow-y: scroll !important;
}

.cfcBo0hP {
    position: absolute;
    top: 45px;
}

.oOA2TDoi {
    margin: auto 0 0 0;
    overflow-y: scroll;
    height: 165px;
    overflow-y: scroll;
    width: 100%;
}

.biZJF5YL {
	display: flex;
	align-items: center;
	column-gap: 7.5px;
	margin: 1.5rem 0 0.5rem 0
}

.fGOuLlfw {
	background: none;
	border: none;
	padding: 2.5px 10px;
	color: var(--white);
	border-bottom: 2px solid var(--sub-bg-dark);
}

.g46hHtsm {
	border-bottom: 2px solid var(--accent-1);
}

.BE64VcsV {
	height: calc(100% - 1.5rem);
	margin-top: 1.5rem;
	overflow-y: hidden;
}

.V0IyYszE {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	row-gap: 1.5rem;
	margin-bottom: -5rem;
	overflow-y: scroll;
}

.V0IyYszE::-webkit-scrollbar,
.pa7iFVNV::-webkit-scrollbar {
	display: none;
}


.vLa2ZprV {
    aspect-ratio: 1;
    height: 60%;
}

.VOMXR0zy {
	display: flex;
}

.DEBrfzTv {
	height: 60px;
	width: 60px;
	background-color: var(--white);
	color: var(--bg-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	margin: 0 auto;
}

.TRQx6bCm {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--white);
	text-align: center;
	margin-top: 1rem;
	width: 100%;
}

.s9vQO3O9 {
	max-width: 85%;
	align-self: center;
	justify-self: center;
}

.lwumh6xV {
    max-width: 75%;
    flex-wrap: wrap;
    display: flex;
    word-break: break-all;
    justify-content: center;
}

.UYNXUGGn {
	background: none;
	position: absolute;
	top: 20px;
	right: 50px;
	border: none;
	color: white;
}

.m1Q6hGIp {
	background: none;
	position: absolute;
	top: 20px;
	right: 20px;
	border: none;
	color: white;
}

.k8zZc4oy {
	border: 1px solid var(--accent-1)
}

.cfcBo0hP {
    position: absolute;
    top: 45px;
    width: 100%
}

.cp9hCHF5 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: .75rem;
  gap: .75rem;
  width: 100%;
  margin: auto 0 0 0;
}

.DW3X3Q7r {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap: 10px;
  transition: transform 0.2s ease-in-out;
}

.DW3X3Q7r:hover {
  transform: scale(1.05);
}

.mAGPVcQE {
  font-size: 20px;
}

.LL1MafFP {
  display: flex;
  flex-direction: column;
}

.z8hx4qJ1 {
  font-size: 11px;
  color: #ccc;
}

.M9p9k_WJ {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-1);

	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.RCKsUPpk {
	height: 20px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.RCKsUPpk button {
	background: none;
	border: none;
	color: var(--white);
	opacity: .7;
	transform: rotate(90deg)
}

.RCKsUPpk button:hover {
	opacity: 1;
	transition: opacity .25s
}

._lsTuMqT {
	transform: rotate(270deg) !important;
}

._Caoo_q_ {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: 999999;
}
.JD3iBED2 {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content:center;
  position: relative;
}

.L0zxlEAP {
  height: 2rem;
  cursor: pointer;
  transform: rotate(90deg);
}

.L0zxlEAP::after {
  content: '';
  position: absolute;
  top: -10px; 
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: transparent;
}

.PCGa54eQ {
  opacity: 0.5;
}

.p4T6RjPV {
  background: none;
  border: none;
  height: 1rem;
  width: 0.25rem;
  background-color: var(--accent-1);
  border-radius: 9999px;
}


.AYRsWb4C {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: .5rem
}

.AYRsWb4C p {
	text-align: center;
	padding: 0 30px;
	box-sizing: border-box
}

.F_OCP1yF {
	padding: 30px 30px 0 30px !important
}

.opDsi1yW {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.opDsi1yW img {
	height: 30%
}

.D518CMLw p {
	visibility: hidden
}

.D518CMLw .ReDOZHI1 {
	visibility: hidden
}

.O0wGJVr1 {
  height: calc(100% - 3rem);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.O0wGJVr1 p {
	margin-bottom: 3rem;
}

.U7t7JigX {
    column-gap: .6rem;
    display: flex;
    width: 100%;
}

.qMqnX0_t {
    background-color: var(--bg-dark);
    border: 1px solid var(--bg-dark);
    border-radius: 6px;
    align-items: center;
    box-sizing: border-box;
    column-gap: 7.5px;
    cursor: pointer;
    display: flex;
    padding: 5px 8px 5px 4px;
}

.M3u6AmEZ {
	background-color: var(--accent-1);
}

.M3u6AmEZ > .SlMOOnTs {
	background-color: var(--white)
}

.M3u6AmEZ > .SlMOOnTs i {
	color: var(--accent-1)
}
 
.SlMOOnTs {
	background-color: var(--sub-bg-dark);
	align-items: center;
    aspect-ratio: 1;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 5px;
}

.SlMOOnTs i,
.qMqnX0_t p {
	color: var(--white)
}

.pm9CqqEO {
  opacity: 0;
  animation: UiuQZ1Ko 200ms ease-out forwards;
}

.I0mhtRbQ {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 100%;
}

.GHvx9Fdb {
	display: flex;
	flex-direction: column;
	margin-top: 10px;
	row-gap: 5px;
}

.Cxs_jinf {
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    row-gap: .75rem;
    padding-bottom: 1rem;
}

.CaBljo3n {
	display: grid;
	grid-template-columns: 20px 1fr;
	grid-column-gap: 7.5px;
	column-gap: 7.5px;
	align-items: center
}

.CaBljo3n i {
	justify-self: center;
}

.LNZU3mAZ {
	width: 100%;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 1.5rem;
	column-gap: 1.5rem;
}

.gtnS2VQ5 {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 15px;
	background-color: var(--sub-bg-dark);
	padding: 30px;
	box-sizing: border-box;
	position: relative;

    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid #2d2f39;
    overflow: hidden;
}


._jwd5csJ {
	width: 100%;
	/*aspect-ratio: 2 / 1;*/
	min-height: 150px;
	border-radius: 15px;
	background-color: var(--sub-bg-dark);
	padding: 30px;
	box-sizing: border-box;
	position: relative;

    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid #2d2f39;
    overflow: hidden;

    justify-content: center;
    grid-row-gap: 1rem;
    row-gap: 1rem
}

.UalIrxGd {
	aspect-ratio: unset;
	grid-column-start: 3;
	grid-column-end: 5;
	grid-row-start: 1;
	grid-row-end: 1
}

.GM24vjMw {
	display: flex;
	align-items: center;
	column-gap: 1rem;
}

.i4qd7vxf {
	height: 40px;
	width: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0,191,255,0.15);
}

.i4qd7vxf i {
	color: #00bfff
}

.Aka6jtKg {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.yPfeKnBs {
	font-weight: 800
}

.wF2hwU8V {
	color: #3CA259;
	font-weight: 600
}

.BfoA_3Uc {
	display: flex;
	flex-direction: column;
	row-gap: 1.5rem;
}


.R_L063un {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	height: 45px;
	grid-column-gap: .5rem;
	column-gap: .5rem
}

.Yr7VVVBE {
	border-radius: 10px;
	border: none;
	background-color: var(--bg-dark);
	color: var(--white);
	display: flex;
	align-items: center;
	padding: 0 10px;
	box-sizing: border-box;
	column-gap: 15px
}

.Yr7VVVBE input {
	background: none;
	border: none;
	color: var(--white);
	width: 100%;
}

.Yr7VVVBE input::placeholder {
	font-size: 15px;
	color: #ffffff99
}

.R_L063un button {
	border: none;
	background-color: var(--accent-1);
	color: var(--white);
	border-radius: 10px;
	padding: 0 15px;
	box-sizing: border-box;
}

.R_L063un button p {
	font-weight: 600
}

.AcM9BKhq {
	column-gap: .5rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: .5rem;
}

.vkJi72H4 {
	background-color: var(--bg-dark);
    align-items: center;
    border: none;
    border-radius: 7.5px;
    display: flex;
    justify-content: center;
    margin: 0 0 auto;
    padding: 5px 10px;
}

.D6GxFSbe {
	display: flex;
	flex-direction: column;
	row-gap: .75rem
}

.QwRM5E1t {
	width: 100%;
	background-color: var(--bg-dark);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	grid-column-gap: 1rem;
	column-gap: 1rem;
	padding: 12.5px;
	box-sizing: border-box;
	border-radius: 10px;
}

.e97CnTgU {
	background-color: var(--accent-1);
	border-radius: 100%;
	width: 40px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.e97CnTgU p {
	font-weight: 800
}

.hkC7XVnB {
	display: flex;
	column-gap: .5rem
}

.qNn_p_Bo {
	background-color: #0D7AC733;
	color: var(--accent-1);
	padding: 4px 10px;
	box-sizing: border-box;
	border-radius: 5px
}

.qNn_p_Bo p {
	font-weight: 700;
}

.BKswcXpN {
	background-color: #3CA25933;
	color: #3CA259
}

.HejCqKsM {
	display: flex;
	align-items: center;
	column-gap: 1rem;
	margin-bottom: 1.5rem
}

/* ----------------------------------------------------------
   Reports filter row - three AntD Selects / DatePicker flowing
   inline, each restyled to match the .stat_box_v2 palette (dark
   sub-bg fill, #2d2f39 border, 16px radius, stat-box text
   colours). No wrapping card, no heading - the filter inputs
   themselves ARE the "boxes" visually. The 3 inputs share ~60%
   of the row width; the Refresh action is pinned to the far
   right via margin-left: auto.
----------------------------------------------------------- */
.b_JRusch {
	display: flex;
	align-items: stretch;
	margin-bottom: 0.5rem;
	column-gap: 1rem;
	row-gap: 0.85rem;
	flex-wrap: wrap;
	/* Permanent elevated stacking context - popups mounted inside
	   the filter fields (via getPopupContainer) sit above any later
	   DOM content (category tabs, stat boxes) for the full lifecycle
	   of the animation. Nothing toggles, so there's no flash on close. */
	position: relative;
	z-index: 10;
}

.gc950jKT {
	display: flex;
	column-gap: 0.9rem;
	flex: 0 0 54%;
	min-width: 0;
}

@media (max-width: 1100px) {
	.gc950jKT {
		flex: 1 1 100%;
	}
}

@media (max-width: 700px) {
	.gc950jKT {
		flex-wrap: wrap;
		row-gap: 0.85rem;
	}
}

/* Filter field - mirrors an inactive .category_nav_item: same
   --sub-bg-dark background, 1.5px cyan-tinted border, 12px radius.
   NO opacity is set - opacity < 1 creates a stacking context that
   traps AntD popups and causes z-index flash on close. Instead the
   dimmed look comes from the low-alpha border (0.15) and slightly
   muted icon chip. The field is position: relative so the icon chip
   can sit absolute-left and the Select/DatePicker spans full width
   (giving AntD popups the correct anchor width + position). */
.N7PX9mez {
	flex: 1 1;
	min-width: 0;
	position: relative;
	border-radius: 12px;
	background-color: var(--sub-bg-dark);
	border: 1.5px solid rgba(0, 191, 255, 0.15);
	min-height: 48px;
	cursor: pointer;
	transition: border-color 0.2s ease, transform 0.2s ease;
	/* align-items: stretch makes .reports_filters_field_input fill the
	   full 48px field height; the input wrapper itself then owns the
	   vertical-centering of the Select/DatePicker via its own flex. */
	display: flex;
	align-items: stretch;
}

.N7PX9mez:hover {
	border-color: rgba(0, 191, 255, 0.5);
	transform: translateY(-1px);
}

/* When a dropdown is open, brighten the border to indicate the
   active state. NO z-index toggling - the row itself owns the
   elevated stacking context permanently, so there's no flash
   when AntD strips the .ant-select-open class mid-close-animation. */
.N7PX9mez:has(.ant-select-open),
.N7PX9mez:has(.ant-picker-focused) {
	border-color: rgb(0, 191, 255);
}

.FUtpPOE7 {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	background-color: rgba(0, 191, 255, 0.12);
	color: rgb(0, 191, 255);
	pointer-events: none;
	z-index: 2;
}

.l2TWOmGN {
	width: 100%;
	min-width: 0;
	/* Full-height flex container - the Select/DatePicker inside is
	   auto-height (around 32-36px depending on chip presence), and
	   align-items: center puts it smack on the field midline. This
	   is simpler and more reliable than trying to centre through a
	   chain of auto-height ancestors. */
	display: flex;
	align-items: center;
}

@media (max-width: 700px) {
	.N7PX9mez {
		flex: 1 1 100%;
	}
}

/* Generate Report PDF - sits to the LEFT of Refresh, same silhouette
   so the row reads as one cohesive action cluster. Indigo-tinted to
   distinguish it from the cyan Refresh action. */
.sI3M5PHf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: 0.55rem;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 12px;
	border: 1.5px solid rgba(125, 211, 252, 0.32);
	background-color: rgba(77, 140, 255, 0.12);
	color: rgb(125, 211, 252);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.2s ease;
	white-space: nowrap;
	flex-shrink: 0;
	margin-left: auto;
	align-self: stretch;
	min-width: 175px;
}

.sI3M5PHf:hover:not(:disabled) {
	background-color: rgba(77, 140, 255, 0.22);
	border-color: rgba(125, 211, 252, 0.6);
	transform: translateY(-1px);
}

.sI3M5PHf:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.sI3M5PHf i {
	font-size: 12px;
}

/* Refresh action - cyan-tinted pill that tracks the 48px filter
   row and sits flush to the right edge. Matches 12px radius for
   silhouette continuity with the filter fields + category tabs.
   Note: when .reports_filters_pdf is present immediately before, the
   margin-left: auto on the PDF button takes the slack so Refresh
   sits directly next to it (with a small gap). */
.Da9bSG6w {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: 0.55rem;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 12px;
	border: 1.5px solid rgba(0, 191, 255, 0.35);
	background-color: rgba(0, 191, 255, 0.12);
	color: rgb(0, 191, 255);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.2s ease;
	white-space: nowrap;
	flex-shrink: 0;
	margin-left: 8px;
	align-self: stretch;
	min-width: 120px;
}

.Da9bSG6w:hover:not(:disabled) {
	background-color: rgba(0, 191, 255, 0.2);
	border-color: rgba(0, 191, 255, 0.6);
	transform: translateY(-1px);
}

.Da9bSG6w:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.Da9bSG6w i {
	font-size: 12px;
}

/* ----------------------------------------------------------
   Scoped AntD overrides - the Select .ant-select-selector and
   the .ant-picker are made fully transparent so the outer
   .reports_filters_field wrapper (styled to match
   .category_nav_item) supplies all the visual chrome.
----------------------------------------------------------- */
.l2TWOmGN .ant-select {
	width: 100% !important;
	/* Auto-height - don't force 100% of an ambiguous parent. The
	   Select will size to its selector (natural ~32px) and the
	   parent flex (.reports_filters_field_input) will centre it. */
	height: auto !important;
}

.l2TWOmGN .ant-picker {
	width: 100% !important;
	height: auto !important;
}

/* Selector / picker are transparent (outer field owns chrome) and
   carry enough left padding to clear the 30px icon chip (10px
   offset + 30px icon + 10px gap = 50px). Height is driven by the
   chip (24px) + 4px vertical padding = 32px. The outer
   .reports_filters_field_input flex-centres this 32px block
   inside the 48px field - equal 8px gap top/bottom. */
.l2TWOmGN .ant-select-selector,
.l2TWOmGN .ant-picker {
	background-color: transparent !important;
	border: none !important;
	border-radius: 12px !important;
	min-height: 32px !important;
	height: auto !important;
	padding: 4px 14px 4px 50px !important;
	box-shadow: none !important;
	display: flex !important;
	align-items: center !important;
	line-height: 24px !important;
}

.l2TWOmGN .ant-picker {
	padding: 4px 14px 4px 50px !important;
}

.l2TWOmGN .ant-select-multiple .ant-select-selector {
	padding: 4px 14px 4px 50px !important;
}

.l2TWOmGN .ant-select-focused .ant-select-selector,
.l2TWOmGN .ant-picker-focused {
	box-shadow: none !important;
}

/* ----------------------------------------------------------
   Custom placeholder overlay - ONE DOM element + ONE CSS rule
   shared across all 3 filters (venues/events/time). The JSX
   renders a <span class="reports_filters_field_label">…</span>
   inside each [data-filter-field] wrapper only when the filter
   has no value. AntD's native placeholder is bypassed entirely
   (placeholder="" is passed in), and we defensively hide any
   stray .ant-select-selection-placeholder span below.

   Since all 3 placeholders are now the same element with the
   same styling, they are guaranteed to look identical. No more
   fighting AntD's internal DOM differences between multi-select
   and DatePicker. */
.Dl7zp2WH {
	position: absolute;
	left: 50px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	color: rgb(151, 163, 180);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	z-index: 3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc(100% - 64px);
}

/* Kill AntD's native placeholder span so it can't render empty
   text that might still occupy space / interfere with layout. */
[data-filter-field] .ant-select-selection-placeholder {
	display: none !important;
}

/* Align the search input's caret/text with x = 50 (where the
   custom label sits). AntD's multi-select applies
   margin-inline-start on .ant-select-selection-search and the
   input itself has padding/margin that otherwise pull the caret
   ~4-7px to the left of the label's x-position. Strip all of it. */
[data-filter-field] .ant-select-selection-overflow {
	justify-content: flex-start !important;
	align-items: center !important;
	/* Fill the selector so align-items: center inside has the full
	   44px height to centre against (otherwise the overflow shrinks
	   to content height and gets centred itself, which interacts
	   unpredictably with the chip wrapper's baseline). */
	align-self: stretch !important;
	min-height: 100% !important;
	/* Zero all vertical margins on chip/search wrappers - AntD
	   ships margin-bottom: 2px on the search wrapper which was
	   shifting the flex baseline up 1px and making chips read high. */
	margin: 0 !important;
}

/* Each chip + the search input both live inside
   .ant-select-selection-overflow-item wrappers. Force them to
   align-self: center in the flex selector so they sit exactly on
   the midline regardless of their own height. */
[data-filter-field] .ant-select-selection-overflow-item {
	align-self: center !important;
	margin: 0 !important;
	padding: 0 !important;
}

[data-filter-field] .ant-select-selection-search {
	margin: 0 !important;
	padding: 0 !important;
	inset-inline-start: 0 !important;
	left: 0 !important;
	align-self: center !important;
}

[data-filter-field] .ant-select-selection-search-input {
	padding: 0 !important;
	margin: 0 !important;
	text-align: left !important;
	/* Match the selector height so the caret/typed text
	   vertically aligns with the chips that sit next to it. */
	height: 22px !important;
	line-height: 22px !important;
}

/* DatePicker input - still renders "Select week/month/quarter/year"
   as its native placeholder when rangeType !== 'all' (the custom
   overlay only covers the "All Time" case). Style those matchingly. */
[data-filter-field] .ant-picker-input > input {
	color: var(--white) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	text-align: left !important;
	-webkit-padding-start: 0 !important;
	        padding-inline-start: 0 !important;
	padding-left: 0 !important;
}

[data-filter-field] .ant-picker-input > input::placeholder {
	color: rgb(151, 163, 180) !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.07em !important;
	opacity: 1 !important;
	text-align: left !important;
}

.l2TWOmGN .ant-select-selection-item {
	background-color: rgba(0, 191, 255, 0.14) !important;
	border: 1px solid rgba(0, 191, 255, 0.35) !important;
	border-radius: 6px !important;
	color: rgb(0, 191, 255) !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	height: 22px !important;
	line-height: 20px !important;
	padding: 0 7px !important;
	/* No vertical margin - the selector is a flex container with
	   align-items: center, so the chip is already vertically
	   centred. Horizontal margin keeps chips spaced from each
	   other and from the overflow's right edge. */
	margin: 0 4px 0 0 !important;
	align-self: center !important;
}

.l2TWOmGN .ant-select-selection-item-remove {
	color: rgba(0, 191, 255, 0.8) !important;
	font-size: 10px !important;
}

.l2TWOmGN .ant-select-selection-item-remove:hover {
	color: rgb(0, 191, 255) !important;
}

.l2TWOmGN .ant-select-arrow,
.l2TWOmGN .ant-picker-suffix,
.l2TWOmGN .ant-picker-clear,
.l2TWOmGN .ant-select-clear {
	color: rgb(120, 132, 150) !important;
	background-color: transparent !important;
}

.l2TWOmGN .ant-select-selection-overflow-item-suffix .ant-select-selection-search-input {
	color: var(--white) !important;
}

/* ----------------------------------------------------------
   Reports filter dropdown popup - applied via popupClassName
   on the Select. GLOBAL because AntD mounts the popup to
   document.body, outside our CSS-module scope. Keeps the
   selected / hovered options cyan-tinted so the popup reads
   as part of the Reports dashboard.
----------------------------------------------------------- */
/* Popup root - mounted inside the filter field via
   getPopupContainer so width auto-matches the trigger (which
   fills the field). `top: calc(100% + 6px)` pins the popup 6px
   below the field's bottom edge, overriding AntD's inline `top`
   calculation (inline styles are beaten by CSS `!important`).
   This gives a *reliable* 6px gap - `margin-top` didn't win
   consistently because AntD's rc-trigger wraps the popup in
   motion containers during animation, and margins on the outer
   shell are sometimes stripped by the motion CSS.
   All accents are a single blue/cyan (#00bfff). */
.reports-filters-dropdown {
	background-color: var(--sub-bg-dark) !important;
	border: 1.5px solid rgba(0, 191, 255, 0.2) !important;
	border-radius: 12px !important;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55) !important;
	padding: 6px !important;
	top: calc(100% + 6px) !important;
	inset-block-start: calc(100% + 6px) !important;
	margin-top: 0 !important;
	z-index: 1050 !important;
}

.reports-filters-dropdown.ant-select-dropdown {
	background-color: var(--sub-bg-dark) !important;
}

.reports-filters-dropdown .ant-select-item {
	border-radius: 8px !important;
	color: #e5e7eb !important;
	padding: 8px 12px !important;
	margin-bottom: 2px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	min-height: 36px !important;
	transition: background-color 0.1s ease, color 0.1s ease !important;
}

.reports-filters-dropdown .ant-select-item-option-active {
	background-color: rgba(0, 191, 255, 0.12) !important;
	color: #ffffff !important;
}

.reports-filters-dropdown .ant-select-item-option-selected {
	background-color: rgba(0, 191, 255, 0.18) !important;
	color: rgb(0, 191, 255) !important;
	font-weight: 600 !important;
}

.reports-filters-dropdown .ant-select-item-option-selected .ant-select-item-option-state {
	color: rgb(0, 191, 255) !important;
}

.reports-filters-dropdown .ant-empty-description {
	color: rgb(120, 132, 150) !important;
	font-size: 12px !important;
}

/* ----------------------------------------------------------
   Date picker popup - mounted inside the filter field via
   getPopupContainer, so width: 100% = exact field width. The
   container is position: relative (.reports_filters_field), so
   left: 0 aligns the popup's left edge with the field's left
   edge. top is calculated by rc-trigger (bottom of the picker
   input). z-index raised so it floats above sibling fields.
----------------------------------------------------------- */
/* Same positioning logic as .reports-filters-dropdown above -
   top: calc(100% + 6px) pins the popup exactly 6px below the
   field's bottom edge regardless of the DatePicker input's
   internal padding/height. This keeps the gap visually identical
   across all 3 filters (venues, events, time). */
.reports-filters-date-popup {
	padding: 0 !important;
	/* Lock to the field's width - the inner calendar uses
	   `table-layout: fixed` + `width: 100%` (see panelRender in index.jsx)
	   so it flexes to whatever this wrapper is. Keeps the popup and the
	   filter box visually aligned at exactly the same left/right edges. */
	width: 100% !important;
	left: 0 !important;
	top: calc(100% + 6px) !important;
	inset-block-start: calc(100% + 6px) !important;
	margin-top: 0 !important;
	z-index: 1050 !important;
}

.reports-filters-date-popup .ant-picker-panel-container {
	background-color: var(--sub-bg-dark) !important;
	border: 1.5px solid rgba(0, 191, 255, 0.2) !important;
	border-radius: 12px !important;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55) !important;
	overflow: hidden !important;
	width: 100% !important;
	margin-top: 0 !important;
}

.reports-filters-date-popup .ant-picker-panel {
	background-color: transparent !important;
	border: none !important;
	width: 100% !important;
}

.reports-filters-date-popup .ant-picker-date-panel,
.reports-filters-date-popup .ant-picker-week-panel,
.reports-filters-date-popup .ant-picker-month-panel,
.reports-filters-date-popup .ant-picker-quarter-panel,
.reports-filters-date-popup .ant-picker-year-panel {
	width: 100% !important;
}


.VFDs7GoK {
    border: 1px solid #2d2f39;
    background-color: var(--accent-1);
    border-radius: 7.5px;
    height: 35px;
    /*width: 50px;*/
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    column-gap: .75rem;
    margin: 0 0 0 auto
}





/* ================================================
   PREMIUM INSIGHTS STYLING - MODERN DESIGN
   ================================================ */

.BfoA_3Uc {
  display: flex;
  flex-direction: column;
  row-gap: 2rem;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.5rem;
}

/* ================================================
   INPUT SECTION
   ================================================ */

.K1UcCRut {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  width: 100%;
}

.brHqvSW4 {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-column-gap: 0.75rem;
  column-gap: 0.75rem;
  align-items: center;
  width: 100%;
}

.kjF5jQ1y {
  display: flex;
  align-items: center;
  column-gap: 0.75rem;
  background: linear-gradient(135deg, rgba(0, 191, 255, 0.05) 0%, rgba(0, 191, 255, 0.02) 100%);
  border: 1px solid rgba(0, 191, 255, 0.2);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.kjF5jQ1y:focus-within {
  border-color: #00bfff;
  background: linear-gradient(135deg, rgba(0, 191, 255, 0.1) 0%, rgba(0, 191, 255, 0.05) 100%);
  box-shadow: 0 0 20px rgba(0, 191, 255, 0.15);
}

.KHcEnUZv {
  color: #00bfff;
  font-size: 16px;
  flex-shrink: 0;
}

.i552YVbQ {
  background: none;
  border: none;
  color: var(--white);
  font-size: 15px;
  width: 100%;
  outline: none;
}

.i552YVbQ::placeholder {
  color: #666;
}

.i552YVbQ:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.j3uxCODb {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.5rem;
  background: linear-gradient(135deg, #00bfff 0%, #0099cc 100%);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0, 191, 255, 0.2);
}

.j3uxCODb:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(0, 191, 255, 0.3);
}

.j3uxCODb:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.j3uxCODb.rJCUqvKl {
  background: linear-gradient(135deg, #0099cc 0%, #0077aa 100%);
}

.j3uxCODb i {
  font-size: 14px;
}

/* ================================================
   PROGRESS SECTION
   ================================================ */

.eOqCaJeS {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  width: 100%;
}

.OLI2tdbm {
  height: 3px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.cKFt9Lmd {
  height: 100%;
  background: linear-gradient(90deg, #00bfff 0%, #00eeff 100%);
  border-radius: 10px;
  transition: width 0.4s ease;
  box-shadow: 0 0 20px rgba(0, 191, 255, 0.6);
}

.OAUrdPzy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
  width: 100%;
}

.Xrgg06mA {
  display: flex;
  align-items: center;
  column-gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: rgba(0, 191, 255, 0.03);
  border: 1px solid rgba(0, 191, 255, 0.1);
  border-radius: 10px;
  transition: all 0.3s ease;
}

.Xrgg06mA.yaOX3x4T {
  opacity: 0.5;
}

.Xrgg06mA.QCYr48wm {
  border-color: #00bfff;
  background: rgba(0, 191, 255, 0.08);
}

.Xrgg06mA.R29t9KPD {
  border-color: #3CA259;
  background: rgba(60, 162, 89, 0.08);
}

.eyZ3K490 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  background: rgba(0, 191, 255, 0.2);
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: #00bfff;
}

.Xrgg06mA.QCYr48wm .eyZ3K490 {
  background: #00bfff;
  color: var(--bg-dark);
}

.Xrgg06mA.R29t9KPD .eyZ3K490 {
  background: #3CA259;
  color: var(--white);
}

.AOKqLV8y {
  font-size: 13px;
  font-weight: 500;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Xrgg06mA.yaOX3x4T .AOKqLV8y {
  color: #999;
}

/* Spinner animation */
.HcS9f3Sr {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: o37xFnif 0.8s linear infinite;
}

@keyframes o37xFnif {
  to { transform: rotate(360deg); }
}

/* ================================================
   ERROR BANNER
   ================================================ */

.JHvKct6U {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 1rem;
  gap: 1rem;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 77, 77, 0.1) 0%, rgba(255, 77, 77, 0.05) 100%);
  border: 1px solid rgba(255, 77, 77, 0.3);
  border-radius: 10px;
  padding: 1rem;
  box-sizing: border-box;
}

.JHvKct6U i {
  color: #ff4d4d;
  font-size: 18px;
}

.FYn5vq1E {
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
}

.Ig79EA_E {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}

.HY9VOJtJ {
  margin: 0;
  font-size: 13px;
  color: #ff9999;
  line-height: 1.4;
}

.BHDwnCbs {
  background: none;
  border: none;
  color: #ff4d4d;
  cursor: pointer;
  font-size: 16px;
  opacity: 0.6;
  transition: opacity 0.2s;
  padding: 0;
}

.BHDwnCbs:hover {
  opacity: 1;
}

/* ================================================
   RESPONSE SECTION
   ================================================ */

.OKyMbUOu {
  display: flex;
  flex-direction: column;
  width: 100%;
  animation: M3n3kab5 0.4s ease;
}

@keyframes M3n3kab5 {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Response Wrapper */
.h_3tcvSf {
  display: flex;
  flex-direction: column;
  row-gap: 2.5rem;
  width: 100%;
  padding-right: 0.5rem;
  padding-bottom: 2rem;
}

.h_3tcvSf::-webkit-scrollbar {
  width: 6px;
}

.h_3tcvSf::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.h_3tcvSf::-webkit-scrollbar-thumb {
  background: rgba(0, 191, 255, 0.3);
  border-radius: 10px;
}

.h_3tcvSf::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 191, 255, 0.5);
}

.ZNeetyJd {
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
  width: 100%;
}

.Gqs9hSTT {
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

.Gqs9hSTT h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.5px;
}

.Li8h1soK {
  height: 2px;
  flex: 1 1;
  background: linear-gradient(90deg, transparent 0%, #00bfff 100%);
  border-radius: 10px;
}

.qfT7S_90 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

/* Cards */
.NNSrzQTS {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 1rem;
  column-gap: 1rem;
  background: linear-gradient(135deg, rgba(0, 191, 255, 0.05) 0%, rgba(0, 191, 255, 0.02) 100%);
  border: 1px solid rgba(0, 191, 255, 0.15);
  border-radius: 12px;
  padding: 1.25rem;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.NNSrzQTS:hover {
  border-color: #00bfff;
  background: linear-gradient(135deg, rgba(0, 191, 255, 0.08) 0%, rgba(0, 191, 255, 0.04) 100%);
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 191, 255, 0.1);
}

.MXvA9eOl {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  background: linear-gradient(135deg, #00bfff 0%, #0099cc 100%);
  border-radius: 10px;
  color: var(--white);
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
}

.V2Rgldrd {
  display: flex;
  flex-direction: column;
  row-gap: 0.75rem;
}

.V2Rgldrd h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  line-height: 1.4;
}

.V2Rgldrd h4 strong {
  color: #00bfff;
}

.w8KlmzKD {
  margin: 0;
  font-size: 13px;
  color: #999;
  line-height: 1.4;
}

.BUxdYFTm {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 191, 255, 0.1);
}

.Nv8oLnfS {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 1rem;
  column-gap: 1rem;
  align-items: center;
  font-size: 13px;
}

.Ds3kADFv {
  color: #666;
  font-weight: 500;
  white-space: nowrap;
}

.l9plM8CB {
  color: var(--white);
  font-weight: 600;
  text-align: right;
}

/* Bullets */
.S_rwesdF {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 0.75rem;
  column-gap: 0.75rem;
  align-items: flex-start;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
  border-left: 2px solid #00bfff;
}

.hynSv_aa {
  display: inline-block;
  height: 6px;
  width: 6px;
  background: #00bfff;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
}

.S_rwesdF p {
  margin: 0;
  font-size: 14px;
  color: #ccc;
  line-height: 1.5;
}

.S_rwesdF p strong {
  color: var(--white);
  font-weight: 600;
}

/* Bullet Group (for multi-line event summaries) */
.BScA6Diy {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border-left: 3px solid #00bfff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.wvOu_ckB {
  margin: 0;
  font-size: 15px;
  color: var(--white);
  font-weight: 600;
  line-height: 1.4;
}

.wvOu_ckB strong {
  color: #00bfff;
  font-weight: 700;
}

.kGlO3hts {
  margin: 0;
  font-size: 14px;
  color: #ccc;
  line-height: 1.5;
  padding-left: 1rem;
}

.kGlO3hts strong {
  color: var(--white);
  font-weight: 600;
}

.gtYsOk8D {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding-left: 1rem;
}

.LDzKHB_R {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.75rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 191, 255, 0.05);
  border-radius: 6px;
  border-left: 2px solid rgba(0, 191, 255, 0.3);
}

.Ds3kADFv {
  font-size: 13px;
  color: #00bfff;
  font-weight: 600;
  white-space: nowrap;
}

.l9plM8CB {
  font-size: 14px;
  color: var(--white);
  font-weight: 700;
  text-align: left;
}

/* Text Items */
.CAHsoexm {
  margin: 0;
  font-size: 14px;
  color: #ccc;
  line-height: 1.6;
}

.CAHsoexm strong {
  color: var(--white);
  font-weight: 600;
}

/* ================================================
   SUGGESTIONS SECTION
   ================================================ */

.Ra4btWZL {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  width: 100%;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}

.iGxfS9pA {
  display: flex;
  align-items: center;
  column-gap: 0.75rem;
}

.iGxfS9pA i {
  color: #00bfff;
  font-size: 16px;
}

.iGxfS9pA h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}

.GD0y3rTj {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  width: 100%;
}

.CitJPpKk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 0.75rem;
  background: rgba(0, 191, 255, 0.05);
  border: 1px solid rgba(0, 191, 255, 0.2);
  border-radius: 8px;
  padding: 0.75rem 1rem;
  color: var(--white);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.CitJPpKk:hover {
  background: rgba(0, 191, 255, 0.1);
  border-color: #00bfff;
  transform: translateX(2px);
}

.CitJPpKk span {
  text-align: left;
}

.CitJPpKk i {
  color: #00bfff;
  font-size: 12px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s;
}

.CitJPpKk:hover i {
  opacity: 1;
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */

@media (max-width: 768px) {
  .OAUrdPzy {
    grid-template-columns: 1fr;
  }

  .qfT7S_90 {
    grid-template-columns: 1fr;
  }

  .GD0y3rTj {
    grid-template-columns: 1fr;
  }

  .brHqvSW4 {
    grid-template-columns: 1fr;
  }

  .j3uxCODb {
    width: 100%;
  }

  .NNSrzQTS {
    grid-template-columns: auto 1fr;
  }
}

@media (max-width: 480px) {
  .kjF5jQ1y {
    padding: 0.5rem 0.75rem;
  }

  .j3uxCODb {
    padding: 0.5rem 1rem;
    font-size: 13px;
  }

  .eOqCaJeS {
    row-gap: 0.75rem;
  }

  .OAUrdPzy {
    gap: 0.5rem;
  }

  .Xrgg06mA {
    padding: 0.5rem 0.75rem;
    flex-direction: column;
  }

  .AOKqLV8y {
    font-size: 11px;
  }

  .h_3tcvSf {
    row-gap: 1.5rem;
  }

  .Gqs9hSTT h3 {
    font-size: 16px;
  }

  .qfT7S_90 {
    gap: 0.75rem;
  }

  .NNSrzQTS {
    padding: 1rem;
  }

  .MXvA9eOl {
    height: 32px;
    width: 32px;
    font-size: 14px;
  }
}


/* ================================================
   RATE LIMIT DISPLAY STYLES
   ================================================ */

.QW_8CgCj {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  width: 100%;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid;
  background-color: rgba(255, 255, 255, 0.02);
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
}

/* Status-based styling */
.QW_8CgCj.JaZn4RBo {
  border-color: rgba(60, 162, 89, 0.3);
  background-color: rgba(60, 162, 89, 0.05);
}

.QW_8CgCj.IY49V_Pv {
  border-color: rgba(255, 165, 0, 0.3);
  background-color: rgba(255, 165, 0, 0.05);
}

.QW_8CgCj.z1hvGwad {
  border-color: rgba(255, 77, 77, 0.3);
  background-color: rgba(255, 77, 77, 0.05);
}

/* Main content area */
.WYlrZf0C {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
}

/* Left section: Icon and info */
.K63lv86U {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  gap: 1rem;
  align-items: center;
  min-width: 200px;
}

.JKSaa6bF {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  font-size: 18px;
  flex-shrink: 0;
}

.JaZn4RBo .JKSaa6bF {
  background-color: rgba(60, 162, 89, 0.2);
  color: #3CA259;
}

.IY49V_Pv .JKSaa6bF {
  background-color: rgba(255, 165, 0, 0.2);
  color: #ffa500;
}

.z1hvGwad .JKSaa6bF {
  background-color: rgba(255, 77, 77, 0.2);
  color: #ff4d4d;
}

.xKPUgqSB {
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
}

.djw8SGb9 {
  margin: 0;
  font-size: 12px;
  color: #999;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.vVuTainF {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--white);
}

.tRHdd9nE {
  margin: 0;
  font-size: 12px;
  color: #ffa500;
  font-weight: 500;
}

.z1hvGwad .tRHdd9nE {
  color: #ff4d4d;
}

/* Middle section: Progress bar */
.CTqVKH_Y {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1;
  min-width: 200px;
}

.ggCioeko {
  flex: 1 1;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.gC_BDZf8 {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
  box-shadow: 0 0 15px currentColor;
}

.gC_BDZf8.X584W3z0 {
  background: linear-gradient(90deg, #3CA259 0%, #6bc99f 100%);
}

.gC_BDZf8.nGd4rF2e {
  background: linear-gradient(90deg, #ffa500 0%, #ffb84d 100%);
}

.gC_BDZf8.cQjmedD4 {
  background: linear-gradient(90deg, #ff4d4d 0%, #ff8080 100%);
  animation: rIIcwPrc 1s ease-in-out infinite;
}

@keyframes rIIcwPrc {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.V9TfsYRB {
  min-width: 40px;
  font-size: 12px;
  font-weight: 600;
  color: var(--white);
  text-align: right;
}

/* Right section: Reset time */
.yv4CMhVM {
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
  align-items: flex-end;
  min-width: 100px;
}

.fzb1UCUz {
  margin: 0;
  font-size: 11px;
  color: #999;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

._pLkoOJG {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg, #00bfff 0%, #0099cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Stats section (optional) */
.RVbo0ujX {
  display: flex;
  gap: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.XtgIzChN {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.jcOgia41 {
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

.kw4a0AIX {
  font-size: 13px;
  color: var(--white);
  font-weight: 600;
}

/* ================================================
   RESPONSIVE DESIGN
   ================================================ */

@media (max-width: 1024px) {
  .WYlrZf0C {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .K63lv86U {
    min-width: auto;
  }

  .yv4CMhVM {
    align-items: flex-start;
  }

  ._pLkoOJG {
    background: none;
    -webkit-text-fill-color: unset;
    color: #00bfff;
  }
}

@media (max-width: 768px) {
  .QW_8CgCj {
    padding: 0.75rem;
    row-gap: 0.75rem;
  }

  .WYlrZf0C {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .CTqVKH_Y {
    min-width: auto;
  }

  .JKSaa6bF {
    height: 32px;
    width: 32px;
    font-size: 16px;
  }

  .vVuTainF {
    font-size: 14px;
  }

  .V9TfsYRB {
    min-width: 35px;
    font-size: 11px;
  }

  .yv4CMhVM {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
  }

  .fzb1UCUz {
    display: none;
  }

  .RVbo0ujX {
    flex-direction: column;
    gap: 0.75rem;
    padding-top: 0.5rem;
  }
}

@media (max-width: 480px) {
  .QW_8CgCj {
    padding: 0.5rem;
    row-gap: 0.5rem;
  }

  .WYlrZf0C {
    gap: 0.5rem;
  }

  .K63lv86U {
    gap: 0.75rem;
  }

  .JKSaa6bF {
    height: 28px;
    width: 28px;
    font-size: 14px;
  }

  .djw8SGb9,
  .fzb1UCUz {
    font-size: 10px;
  }

  .vVuTainF {
    font-size: 13px;
  }

  .ggCioeko {
    height: 4px;
  }

  .V9TfsYRB {
    font-size: 10px;
    min-width: 30px;
  }

  ._pLkoOJG {
    font-size: 14px;
  }

  .jcOgia41,
  .kw4a0AIX {
    font-size: 11px;
  }
}


.e_yEsnSR {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.bt5NK5d5 {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.5rem;
  background: linear-gradient(135deg, #0099cc 0%, #006699 100%);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0, 153, 204, 0.2);
}

.bt5NK5d5:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(0, 153, 204, 0.3);
}

.bt5NK5d5 i {
  font-size: 14px;
  transform: rotate(45deg);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .e_yEsnSR {
    gap: 0.5rem;
  }

  .bt5NK5d5 {
    padding: 0.5rem 1rem;
    font-size: 13px;
  }
}

/* -----------------------------------------------------
	Media Queries
------------------------------------------------------ */

@media (max-width: 768px) {
}

@media (max-width: 1200px) {
}



/* ================================================
   REPORTS V2 - PRODUCTION MODULE STYLES
   ================================================ */

/* Font size helper */
.SWCur85A {
	font-size: 13px;
}

/* ------------------------------------------------
   Shared widget heading (title + subtitle)
   ------------------------------------------------ */
.N30VfF1b {
	display: flex;
	align-items: baseline;
	column-gap: 0.75rem;
	flex-shrink: 0;
	flex-wrap: wrap;
	min-height: 0;
}

.N30VfF1b i {
	color: #00bfff;
	font-size: 18px;
}

.N30VfF1b p:last-child {
	color: rgb(120, 132, 150);
	font-weight: 400;
}

/* ------------------------------------------------
   Overview - Responsive 7-box KPI grid
   ------------------------------------------------ */
.pQDFRWOb {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
	grid-gap: 1.25rem;
	gap: 1.25rem;
}

/* ------------------------------------------------
   Shared helpers
   ------------------------------------------------ */
.m4GBT6CY {
	color: rgb(120, 132, 150);
	text-align: center;
	padding: 3rem 1rem;
	font-size: 14px;
}

.QCya1LBV {
	color: rgb(151, 163, 180);
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 0.75rem;
	letter-spacing: 0.2px;
}


/* ------------------------------------------------
   Layout grids - 2-col and 3-col
   ------------------------------------------------ */
.M7twxpo5 {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1.5rem;
	gap: 1.5rem;
}

.MxRyEb4w {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1.5rem;
	gap: 1.5rem;
}

/* ------------------------------------------------
   Chart container - fixed 350px, same pattern as
   inner_widget_container but shorter
   ------------------------------------------------ */
.FBTP8uK3 {
	height: 350px;
	width: 100%;
	border-radius: 15px;
	background-color: var(--sub-bg-dark);
	padding: 25px;
	box-sizing: border-box;
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	border: 1px solid #2d2f39;
	overflow: hidden;
	grid-row-gap: 0.5rem;
	row-gap: 0.5rem;
	min-height: 0;
}

/* ------------------------------------------------
   Category Navigation Strip
   ------------------------------------------------ */
.PssWKrE5 {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding-bottom: 6px;
}
.xzb8CrrR {
	display: flex;
	align-items: center;
	column-gap: 0.75rem;
	padding: 0.75rem 1.25rem;
	border-radius: 12px;
	background-color: var(--sub-bg-dark);
	border: 1.5px solid #2d2f39;
	cursor: pointer;
	transition: all 0.2s ease;
	flex: 1 1;
	min-width: 140px;
	opacity: 0.6;
	position: relative;
}
.xzb8CrrR:hover {
	opacity: 0.85;
	transform: translateY(-1px);
}
.TFdqWQjl {
	opacity: 1;
	border-width: 1.5px;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
	transform: translateY(-1px);
}
.TFdqWQjl::after {
	content: '';
	position: absolute;
	bottom: -9px;
	left: 50%;
	transform: translateX(-50%);
	width: 24px;
	height: 3px;
	border-radius: 3px;
	background-color: var(--nav-color);
}
.LqzbAhdT {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}
.hbZ6odR2 {
	font-size: 22px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.5px;
}
.KRQBddeM {
	font-size: 10px;
	color: rgb(120, 132, 150);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

/* ------------------------------------------------
   Section content - lightweight wrapper for active tab
   ------------------------------------------------ */
.psyBjxGw {
	display: flex;
	flex-direction: column;
	row-gap: 1.5rem;
}

/* ------------------------------------------------
   Section Divider - colored bar + heading
   ------------------------------------------------ */
.aGCfNNQI {
	display: flex;
	align-items: center;
	column-gap: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.6);
	margin-bottom: 0.25rem;
}
.HizYMP08 {
	width: 4px;
	height: 22px;
	border-radius: 2px;
	flex-shrink: 0;
}

/* ------------------------------------------------
   Data Completeness Bars (Invites section)
   ------------------------------------------------ */
.a59IjcRR {
	display: flex;
	align-items: center;
	column-gap: 1rem;
	padding: 6px 0;
}
._96xKZYQ {
	width: 100px;
	font-size: 12px;
	color: rgb(151, 163, 180);
}
.Ofpsxai2 {
	flex: 1 1;
	height: 8px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 4px;
	overflow: hidden;
}
.E7diDXHj {
	height: 100%;
	border-radius: 4px;
	transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.aAIdxJ3H {
	width: 40px;
	text-align: right;
	font-size: 12px;
	font-weight: 600;
	color: rgb(151, 163, 180);
}

/* ------------------------------------------------
   Insight row - key/value pairs in a subtle strip
   ------------------------------------------------ */
.frVuAtjg {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	grid-gap: 0.75rem;
	gap: 0.75rem;
}
.iskKvalt {
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 12px;
	padding: 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	row-gap: 0.25rem;
}
.lMhfFJom {
	font-size: 11px;
	color: rgb(120, 132, 150);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.SvGKXgbn {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}
.ry9x3Dvr {
	font-size: 11px;
	color: rgb(120, 132, 150);
	font-weight: 500;
	margin-top: 2px;
}

/* ------------------------------------------------
   Event Detail Popup
   ------------------------------------------------ */
.SB0POjgx {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 1rem;
	gap: 1rem;
	margin-bottom: 1.5rem;
}
.CekYDX7z {
	height: 8px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 4px;
	overflow: hidden;
	width: 100%;
	margin-top: 0.5rem;
}
.s2LK8K4e {
	height: 100%;
	border-radius: 4px;
	transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ================================================
   PROMOTER LEADERBOARD
   ================================================ */

.Kh_2Y7Lu {
	width: 100%;
	border-radius: 15px;
	background-color: var(--sub-bg-dark);
	padding: 30px;
	box-sizing: border-box;
	border: 1px solid #2d2f39;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	overflow: hidden;
}

.OdPPD9ls {
	overflow-y: auto;
	overflow-x: auto;
	flex: 1 1;
	min-height: 0;
	max-height: 50vh;
	border-radius: 10px;
	border: 1px solid #2d2f39;
}

.OdPPD9ls::-webkit-scrollbar {
	width: 5px;
	height: 5px;
}

.OdPPD9ls::-webkit-scrollbar-track {
	background: transparent;
}

.OdPPD9ls::-webkit-scrollbar-thumb {
	background: rgba(0, 191, 255, 0.2);
	border-radius: 10px;
}

.OdPPD9ls::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 191, 255, 0.4);
}

.qM2wW7Ic {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 13px;
}

.qM2wW7Ic thead {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 2;
}

.qM2wW7Ic th {
	background-color: #01000D;
	background-color: var(--bg-dark, #01000D);
	color: rgb(120, 132, 150);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 12px 14px;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	-webkit-user-select: none;
	        user-select: none;
	border-bottom: 1px solid #2d2f39;
	transition: color 0.2s ease;
}

.qM2wW7Ic th:hover {
	color: #00bfff;
}

.pkiUxyQf {
	color: #00bfff !important;
}

.pkiUxyQf::after {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 6px;
}

.OesG9Pa2 {
	min-width: 200px;
}

.qM2wW7Ic td {
	padding: 12px 14px;
	border-bottom: 1px solid rgba(45, 47, 57, 0.4);
	color: var(--white);
	white-space: nowrap;
	font-size: 13px;
}

.cWgHt1dt {
	cursor: pointer;
	transition: all 0.2s ease;
}

.cWgHt1dt:hover {
	background-color: rgba(13, 122, 199, 0.08);
}

.cWgHt1dt:hover td {
	border-bottom-color: rgba(13, 122, 199, 0.15);
}

.cWgHt1dt td:first-child {
	font-weight: 700;
	width: 52px;
	text-align: center;
}

/* Rank badges - top 3 with icon-style tinted bg */
.cWgHt1dt td:first-child span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 800;
	transition: transform 0.15s ease;
}

.cWgHt1dt:hover td:first-child span {
	transform: scale(1.1);
}

.ljaslaTz {
	background-color: rgba(255, 215, 0, 0.15) !important;
	color: #ffd700 !important;
	box-shadow: 0 0 12px rgba(255, 215, 0, 0.1);
}

.FrOUV6El {
	background-color: rgba(192, 192, 192, 0.15) !important;
	color: #c0c0c0 !important;
}

.ZB0djIDr {
	background-color: rgba(205, 127, 50, 0.15) !important;
	color: #cd7f32 !important;
}

.MGiWAz_A {
	display: flex;
	align-items: center;
	column-gap: 12px;
}

.dcdpb8l6 {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0a5f9e 100%);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 12px;
	flex-shrink: 0;
	letter-spacing: 0.5px;
}

.qEeKSAmk {
	color: rgb(120, 132, 150);
	font-size: 11px;
	margin-top: 1px;
}

.Rlb32EpZ {
	font-weight: 600;
	color: rgb(180, 190, 205);
}

.szf3A1kU {
	color: #3CA259 !important;
	font-weight: 700;
}


/* ================================================
   PROMOTER DETAIL PANEL (overlay modal)
   ================================================ */

.tM2_LaET {
	position: fixed;
	inset: 0;
	background-color: rgba(1, 0, 13, 0.75);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: bc55dWxu 0.2s ease;
}

@keyframes bc55dWxu {
	from { opacity: 0; }
	to { opacity: 1; }
}

.lnBD0YMV {
	width: 90%;
	max-width: 960px;
	max-height: 88vh;
	overflow-y: auto;
	background-color: #01000D;
	background-color: var(--bg-dark, #01000D);
	border: 1px solid #2d2f39;
	border-radius: 18px;
	padding: 2.25rem;
	box-sizing: border-box;
	color: var(--white);
	position: relative;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.05);
	animation: TbyV1js0 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes TbyV1js0 {
	from { opacity: 0; transform: translateY(16px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.lnBD0YMV::-webkit-scrollbar {
	width: 5px;
}

.lnBD0YMV::-webkit-scrollbar-track {
	background: transparent;
}

.lnBD0YMV::-webkit-scrollbar-thumb {
	background: rgba(0, 191, 255, 0.2);
	border-radius: 10px;
}

.hpI3V2X6 {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgb(151, 163, 180);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hpI3V2X6:hover {
	color: var(--white);
	background-color: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.15);
}

.szTV4pFJ {
	display: flex;
	align-items: center;
	column-gap: 1.25rem;
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid #2d2f39;
}

.yFqyTy4j {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0a5f9e 100%);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 18px;
	flex-shrink: 0;
	letter-spacing: 1px;
}

.oc_hmDVE {
	display: flex;
	flex-direction: column;
	row-gap: 0.2rem;
}

.oc_hmDVE p:first-child {
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -0.3px;
}

.oc_hmDVE p:last-child {
	color: rgb(120, 132, 150);
	font-size: 13px;
}

/* Summary stat cards - compact version of the main .stat_box_v2 used on
   every top-level Reports tab. Same visual language (icon chip top-left,
   label, huge value, subtext) just sized down to fit 4-up inside the
   modal at 960px max-width. */
.YWVBzYH6 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 0.75rem;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

@media (max-width: 720px) {
	.YWVBzYH6 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.U_wAKDmA {
	width: 100%;
	min-height: 120px;
	border-radius: 14px;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	padding: 14px 16px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	row-gap: 0.55rem;
	position: relative;
	transition: border-color 0.2s ease;
}

.U_wAKDmA:hover {
	border-color: rgba(0, 191, 255, 0.25);
}

.i4sPXvNN {
	display: flex;
	align-items: center;
	column-gap: 0.55rem;
}

.bKlxkC0d {
	height: 28px;
	width: 28px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 191, 255, 0.12);
	color: #00bfff;
	flex-shrink: 0;
}

.bKlxkC0d i {
	font-size: 12px;
}

.lnpK1ob4 {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgb(151, 163, 180);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.CFsjd1Kv {
	font-size: 22px;
	font-weight: 800;
	color: var(--white);
	line-height: 1;
	letter-spacing: -0.02em;
	display: flex;
	align-items: baseline;
	column-gap: 0.25rem;
}

.ZTi0IvN_ {
	font-size: 14px;
	font-weight: 600;
	color: rgb(151, 163, 180);
}

.QimNuq6l {
	display: flex;
	column-gap: 0.4rem;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.04em;
	margin: 0;
}

.GIrhbhAx {
	display: inline-flex;
	align-items: center;
	column-gap: 4px;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.pRlHqxcm {
	color: rgb(120, 132, 150);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 9px;
}

.mMh8i57F {
	color: var(--white);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

/* Detail - section separator */
.O0KdksZK {
	height: 1px;
	background: #2d2f39;
	margin: 1.25rem 0;
}

/* Detail - FREE / PAY badges */
.J_wkwr_E {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 0.75rem;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}
.BC_SJBhh {
	padding: 12px 14px;
	border-radius: 12px;
	text-align: center;
}
.zO7KPLvC {
	font-size: 11px;
	color: rgb(120, 132, 150);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}
.v4wwCrNh {
	font-size: 22px;
	font-weight: 700;
}

/* Detail - sub heading */
.ojpGTdsi {
	font-size: 13px;
	font-weight: 600;
	color: rgb(151, 163, 180);
	margin-bottom: 0.5rem;
}

/* Detail - info row (key/value) */
.neb0yiAT {
	padding: 10px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
}
.WxjJYlcB {
	font-size: 11px;
	color: rgb(120, 132, 150);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}
.Bq4xANXA {
	font-size: 14px;
	font-weight: 600;
}

/* Detail - fill rate bar section */
.yGmq_GAW {
	margin-bottom: 1.5rem;
}
.CsQCALIz {
	display: flex;
	justify-content: space-between;
	margin-bottom: 4px;
}
.hB5VdHoM {
	font-size: 12px;
	color: rgb(151, 163, 180);
}
.lTWw3x8A {
	font-size: 12px;
	font-weight: 600;
}
.ZqFNQhjJ {
	font-size: 11px;
	color: rgb(120, 132, 150);
	margin-top: 4px;
}

/* Detail - trend chart section
   Promoted to the same card-style container as the stat boxes so the
   Graph and Table match the elevated look above. */
.EQmMHx6C {
	margin-bottom: 1.5rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 14px;
	padding: 16px 18px 12px;
	box-sizing: border-box;
}

.EQmMHx6C > p:first-child {
	font-weight: 600;
	margin-bottom: 0.25rem;
}

.DNkBNAT6 {
	height: 220px;
	width: 100%;
	padding: 12px 0 0 0;
	box-sizing: border-box;
}

/* Detail - events table
   Same card treatment as the trend section above - single elevated
   surface with the heading sitting inside the card. */
.Ol0Cl0To {
	margin-top: 0.5rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 14px;
	padding: 16px 18px;
	box-sizing: border-box;
}

.Ol0Cl0To > p:first-child {
	font-weight: 600;
}

.udMSGvzz {
	overflow-x: auto;
	margin-top: 0.75rem;
}

.udMSGvzz::-webkit-scrollbar {
	height: 4px;
}

.udMSGvzz::-webkit-scrollbar-thumb {
	background: rgba(0, 191, 255, 0.2);
	border-radius: 10px;
}

.jL5BJ4P5 {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 13px;
}

.jL5BJ4P5 th {
	background-color: transparent;
	color: rgb(120, 132, 150);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 10px 12px;
	text-align: left;
	white-space: nowrap;
	border-bottom: 1px solid #2d2f39;
}

.jL5BJ4P5 td {
	padding: 10px 12px;
	border-bottom: 1px solid rgba(45, 47, 57, 0.4);
	color: var(--white);
	white-space: nowrap;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.jL5BJ4P5 td.WpfD59Pi {
	color: #3CA259;
	font-weight: 600;
}

.jL5BJ4P5 td.KidNNTno {
	color: #f59e0b;
	font-weight: 600;
}

.jL5BJ4P5 td.szf3A1kU {
	color: #00bfff;
	font-weight: 700;
}

.jL5BJ4P5 tbody tr {
	transition: background-color 0.15s ease;
}

.jL5BJ4P5 tbody tr:hover {
	background-color: rgba(13, 122, 199, 0.06);
}

.jL5BJ4P5 tbody tr:last-child td {
	border-bottom: none;
}

.dilprdrN {
	font-weight: 600;
	color: var(--white);
}

/* ================================================
   REPORTS V3 - redesigned stat boxes + chart boxes
   (used by the Events section)
   ================================================ */

/* Events section - 4-column stat grid that stretches full width on wide
   viewports and wraps responsively on narrower ones. Separate from
   .widget_overview_grid so other sections (revenue, vip, my-invites) keep
   their responsive auto-fill layout. */
.AGBzQp6x {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1.25rem;
	gap: 1.25rem;
}

@media (max-width: 900px) {
	.AGBzQp6x {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 520px) {
	.AGBzQp6x {
		grid-template-columns: 1fr;
	}
}

/* Stat box V2 - cleaner internals:
   row 1: icon chip + uppercase label
   row 2: big value
   row 3: tiny muted helper sub-text */
.jSfNoBUG {
	width: 100%;
	min-height: 160px;
	border-radius: 16px;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	padding: 22px 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	row-gap: 0.75rem;
	position: relative;
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.jSfNoBUG:hover {
	border-color: rgba(255, 255, 255, 0.08);
}

.gRMchViZ {
	display: flex;
	align-items: center;
	column-gap: 0.75rem;
}

.wz3I_jya {
	height: 36px;
	width: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(245, 158, 11, 0.12);
	color: #f59e0b;
	flex-shrink: 0;
}

.wz3I_jya i {
	font-size: 14px;
}

.piX9D2UY {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgb(151, 163, 180);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.IvSeqOWG {
	font-size: 32px;
	font-weight: 800;
	color: var(--white);
	line-height: 1;
	letter-spacing: -0.02em;
	display: flex;
	align-items: baseline;
	column-gap: 0.25rem;
}

.bmK_FrhR {
	font-size: 20px;
	font-weight: 600;
	color: rgb(151, 163, 180);
}

.LuPVm0L4 {
	font-size: 11px;
	font-weight: 500;
	line-height: 1.35;
	color: rgb(120, 132, 150);
	margin: 0;
	letter-spacing: 0.01em;
}

/* Chart/heatmap box shell - title + subtitle + body.
   min-height keeps the box from collapsing to nothing while the data is
   loading (the chart body is rendered conditionally on !isLoading, so
   without this rule an empty skeleton tile would be ~0px tall). */
.bh4k_qDi {
	width: 100%;
	min-height: 420px;
	border-radius: 16px;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	padding: 24px 26px 22px 26px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	position: relative;
	overflow: hidden;
}

.N9P40VEo {
	display: flex;
	flex-direction: column;
	row-gap: 0.2rem;
	flex-shrink: 0;
}

.W3gGcBHe {
	font-size: 16px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: -0.01em;
}

.lQxvSmr5 {
	font-size: 12px;
	font-weight: 500;
	color: rgb(120, 132, 150);
}

.kxXLvB2e {
	width: 100%;
	flex: 1 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

/* Fixed-height body for charts that need an explicit size (ResponsiveBar,
   ResponsiveHeatMap). Use alongside .chart_box_body or on its own. */
.A89j1erN {
	height: 340px;
	width: 100%;
	min-height: 0;
}

.KV0HZKbi {
	height: 400px;
	width: 100%;
	min-height: 0;
}

/* Legend row for the weekly stacked bar chart */
.jpBeH3l2 {
	display: flex;
	align-items: center;
	column-gap: 1.25rem;
	flex-wrap: wrap;
	margin-top: 0.25rem;
}

.lUtuYUqL {
	display: inline-flex;
	align-items: center;
	column-gap: 0.45rem;
	font-size: 12px;
	font-weight: 500;
	color: rgb(151, 163, 180);
}

.xnIvcF2o {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	display: inline-block;
}

/* Metric toggle pill - used on the promoters monthly chart to switch the
   same top-3 series between admissions and revenue. Sits inside a
   .chart_box_header next to the subtitle. */
.qqHyEk1F {
	display: inline-flex;
	align-items: center;
	padding: 3px;
	background-color: rgba(45, 47, 57, 0.5);
	border: 1px solid #2d2f39;
	border-radius: 999px;
	margin-top: 0.5rem;
	width: -webkit-fit-content;
	width: fit-content;
}

.om1KjRTa {
	background: none;
	border: none;
	color: rgb(151, 163, 180);
	font-size: 12px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
	font-family: inherit;
}

.om1KjRTa:hover {
	color: #ffffff;
}

.yhOmu0O8 {
	background-color: rgba(0, 191, 255, 0.15);
	color: rgb(0, 191, 255);
}

.yhOmu0O8:hover {
	color: rgb(0, 191, 255);
}

/* -----------------------------------------------------
	Revenue tab - chart + pie row, tier table polish
------------------------------------------------------ */

/* Two-column row: hourly revenue bar chart on the left (wider), donut
   on the right. Both use .chart_box_body_fixed (340px) for the inner
   chart area so the two outer cards end up the same total height -
   identical header + 340px body + padding on both sides. On narrow
   screens it stacks. */
.gXYmwH2K {
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
	grid-gap: 1.25rem;
	gap: 1.25rem;
	align-items: stretch;
}

@media (max-width: 1100px) {
	.gXYmwH2K {
		grid-template-columns: 1fr;
	}
}

/* Extra padding around the pie card - the donut + arc-link labels need
   more horizontal breathing room than the default .chart_box 26px side
   padding gives. */
.FTj1cmlG {
	padding: 24px 32px 22px 32px;
}

/* Pie body height matches .chart_box_body_fixed (340px) exactly so the
   pie card ends up the same total height as the hourly bar chart card
   (identical header + 340px body + identical padding). */
.Nfu3Gayu {
	width: 100%;
	height: 340px;
	min-height: 0;
	padding: 4px 0;
	box-sizing: border-box;
	display: flex;
}

/* Tier breakdown table - uses .leaderboard_table for the base shell but
   intentionally NOT .leaderboard_row (whose global first-child rules
   force a 52px centered rank cell and turn inner spans into 30×30 rank
   badges, which squish the Name column and break the LIVE pill). Each
   row gets .tier_row instead, and we scope numeric alignment via
   .tier_table so money columns don't drift. */
.pD2CXlWU ._7ceabNd {
	cursor: default;
	transition: background-color 0.15s ease;
}

.pD2CXlWU ._7ceabNd:hover {
	background-color: rgba(13, 122, 199, 0.05);
}

.pD2CXlWU ._7ceabNd td {
	padding: 14px 16px;
}

.pD2CXlWU ._7ceabNd td:first-child {
	min-width: 220px;
	font-weight: 500;
	max-width: 320px;
}

/* Right-align numeric columns (Price, Invited, Admitted, Cash, Card,
   Total Revenue) - index 3 onward. Tabular nums so digits align. */
.pD2CXlWU ._7ceabNd td:nth-child(n + 3) {
	text-align: right;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.pD2CXlWU th:nth-child(n + 3) {
	text-align: right;
}

/* Give numeric columns a tighter min-width so they don't squeeze the
   Name column but still have room for 5-digit dollar values. */
.pD2CXlWU th:nth-child(n + 3),
.pD2CXlWU ._7ceabNd td:nth-child(n + 3) {
	min-width: 92px;
}

/* Tier breakdown table - name cell hosts the Live badge inline */
.Ru0svqnv {
	display: flex;
	align-items: center;
	column-gap: 0.6rem;
	flex-wrap: nowrap;
	min-width: 0;
}

.Ru0svqnv > span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}

.BnPm8RsX {
	display: inline-flex;
	align-items: center;
	column-gap: 0.35rem;
	padding: 2px 8px;
	border-radius: 999px;
	background-color: rgba(239, 68, 68, 0.12);
	border: 1px solid rgba(239, 68, 68, 0.35);
	color: #ef4444;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.DPQYTC7j {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #ef4444;
	display: inline-block;
	box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6);
	animation: VDloEnEw 1.6s ease-in-out infinite;
}

@keyframes VDloEnEw {
	0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
	70% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
	100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.Cz1yrpzc {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
}


/* -----------------------------------------------------
	VIP Services tab - top-guests table polish
------------------------------------------------------ */

/* Same strategy as .tier_table: use .leaderboard_table as the shell but
   NOT .leaderboard_row (whose global first-child rules force a 52px
   centered rank cell that squishes the Guest Name column). Each row
   gets .vip_row and numeric columns are right-aligned via .vip_table. */
.Q0zV3Swr .P_mJU5l7 {
	cursor: default;
	transition: background-color 0.15s ease;
}

.Q0zV3Swr .P_mJU5l7:hover {
	background-color: rgba(236, 72, 153, 0.05);
}

.Q0zV3Swr .P_mJU5l7 td {
	padding: 14px 16px;
}

.Q0zV3Swr .P_mJU5l7 td:first-child {
	min-width: 220px;
	font-weight: 500;
	max-width: 360px;
}

/* Right-align numeric columns (Profile / Birthday / Booth / Approved)
   - index 2 onward. Tabular nums so digit counts line up. */
.Q0zV3Swr .P_mJU5l7 td:nth-child(n + 2) {
	text-align: right;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.Q0zV3Swr th:nth-child(n + 2) {
	text-align: right;
}

.Q0zV3Swr th:nth-child(n + 2),
.Q0zV3Swr .P_mJU5l7 td:nth-child(n + 2) {
	min-width: 120px;
}

.qpOE2hRs {
	display: flex;
	align-items: center;
	column-gap: 0.6rem;
	flex-wrap: nowrap;
	min-width: 0;
}

.qpOE2hRs > span:first-child {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}






@keyframes UiuQZ1Ko {
  to {
    opacity: 1;
  }
}
.FsDFvgTh {
	font-weight: 600;
}

.PgJ6M6wU {
	font-weight: 700;
}

.H83TN9tj {
	font-size: 8px;
}

.Mn0p_Rnz {
	font-size: 10px;
}

.taEIsir_ {
	font-size: 12px;
}

.GKakNken {
	font-size: 14px;
}

.Z302DtsH {
	font-size: 15px;
}

.FxX2a_T3 {
	font-size: 17px;
}

.kXujurKj {
	font-size: 22px;
}

.W8eMWdGF {
	font-size: 25px;
}


.NUHndA9X {
	font-size: 35px;
}

/* -----------------------------------------------------
	Layout & Grid System
------------------------------------------------------ */

.yvNbHkdV {
	position: relative;
}

._Jjgtqcd {
	height: 100vh;
	width: 100%;

/*	display: grid;
	grid-template-columns: 15% 1fr;*/
	display: flex;
    /*column-gap: 2rem;*/
	overflow: hidden;
	background-color: var(--bg-dark);

	/*padding: 40px;*/
	box-sizing: border-box;
	color: var(--white)
}

.wGEajP_x {
	height: 100%;
	width: 100%;
	position: relative;
	background-color: var(--bg-dark);
	transition: background-color 400ms ease
}

.RPagTUBE {
	background-color: var(--white);
}

.bvQUlOrO {
  	opacity: 0.7 !important;
  	pointer-events:none !important;
}

.hj4AF9qv {
    width: 100%;
    background-color: var(--accent-1);
    color: var(--white);
    border: none;
    border-radius: 10px;
    padding: 12.5px 0;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: .75rem;
}


.wGDshxK2 {
	height: 100%;
	width: 100%;
/*	display: grid;*/
/*	grid-template-rows: auto 1fr;*/
	display: flex;
	flex-direction: column;
	/*row-gap: 2rem;*/

	padding: 40px 60px;
	row-gap: 2.5rem;
	box-sizing: border-box;
}

.NbR795di {
	/*height: 100%;*/
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
}

.SKBv778g {
	height: 75%;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-column-gap: 1rem;
	column-gap: 1rem;
	position: relative;
}

.x5SboYRA {
	width: 400px;
	box-sizing: border-box;
	border-radius: 50px;
	display: flex;
	align-items: center;
	background-color: var(--white)
}

.Pscc4ikD {
	padding: 0 15px;
	box-sizing: border-box;
	width: 100%;
	border: none;
	background: none;

	display: flex;
	position: relative;
	column-gap: 1rem;
}

.Pscc4ikD p,
.Pscc4ikD i {
	color: var(--bg-dark);
}

.Pscc4ikD input {
	position: absolute;
	background: none;
	border: none;
	margin-left: 2.5rem;
	width: calc(100% - (2.5rem + 60px));
}

.ogtnehpw {
	height: 100%;
	aspect-ratio: 1;

	border-radius: 100%;
	background-color: var(--white);
	border: 1px solid var(--white);
}

.ogtnehpw i {
	color: var(--bg-dark);
}

.c9vBV2Wi {
	width: 100%;
	height: 100%;
	background-color: var(--sub-bg-dark);
	padding: 30px 30px 0 30px;
	box-sizing: border-box;
	position: relative;

    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid #2d2f39;
	border-radius: 15px;
}

.pYeatcFi {
	display: grid;
	grid-template-columns: auto 1fr;
}

.xnkCZ9ly {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 auto;
	background: none;
	border: none;
	color: var(--white);
}

.sVeeMyl6 {
	padding-right: 2.5rem;
}

.qjb8hKKU {
	height: 30px;
	width: 30px;
	position: absolute;
	right: 30px;

	border: none;
	border-radius: 100%;
	background-color: var(--accent-1);

	display: flex;
	align-items: center;
	justify-content: center;
}

.qjb8hKKU i {
	color: var(--white);
}

.UQP0hD6N {
	margin-top: 1.5rem;
	height: calc(100% - 1.5rem);
}

.YIqIFtGe {
	height: 100%;
	width: 100%;
}

.e_r9Wk5_ {
	display: flex;
	column-gap: 1rem;
	margin-bottom: 1.5rem;
}

.e_r9Wk5_ button {
	border: none;
	background: none;
	color: var(--white);
	border-bottom: 1px solid var(--sub-bg-dark);
	padding: 0 5px 5px 5px
}

.LROCsBfp {
	border-bottom: 2px solid var(--accent-1) !important;
}


._l0XSh8C {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, -webkit-max-content);
    grid-template-rows: repeat(2, max-content);
    grid-row-gap: 1rem;
    row-gap: 1rem;
    grid-column-gap: 1rem;
    column-gap: 1rem;
}

.Ou43FWgc {
	background-color: var(--bg-dark);
	border: 1px solid var(--bg-dark);
/*	height: 200px;*/
	width: 100%;
	border-radius: 10px;
	padding: 1.5rem;
	box-sizing: border-box;
}

.mBlYcM6H {
	border: none;
	background-color: var(--accent-1);
	padding: 10px 0;
	box-sizing: border-box;
	width: 100%;
	color: var(--white);
	border-radius: 10px;
	margin-bottom: 30px
}

.mm5vAbVS {
	background-color: var(--bg-dark);
	border: 1px solid var(--bg-dark);
	height: 60px;
	width: 100%;
	border-radius: 10px;
	padding: 1rem;
	box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
	color: var(--white);
	overflow: hidden
}

.mm5vAbVS p {
	text-align: center;
}

.B7V5j1f1 {
	align-items: center;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-column-gap: 1rem;
	column-gap: 1rem;
}

.oKvCLtSK {
	height: 35px;
	width: 35px;
	background-color: var(--white);
	color: var(--bg-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
}

.wUB2ozI7 {
	display: flex;
	flex-direction: column;
	color: var(--white);
	text-align: left;
}



.FGgcHN6i {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-row-gap: .75rem;
    row-gap: .75rem;
    grid-column-gap: .75rem;
    column-gap: .75rem;
}


.eHrz5Q2H {
	padding-bottom: 30px !important;
	box-sizing: border-box;
}

.xGOsKTgG {
    aspect-ratio: 1;
    height: 60%;
}

.OZT3Uxlx {
	display: flex;
}



.hrzHt2Sf {
    column-gap: .5rem;
    display: flex;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    row-gap: .5rem;
	height: calc(100% - 30px);
	overflow-y: scroll
}

.Q42LceRT {
    align-items: center;
    border: none;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    padding: 0 10px;

    background-color:  var(--accent-1);
    color: var(--white);
}

.aQLgyEtv {
	height: 50%;
}

.gZ7jNsQQ {
	/*height: 50%;*/
	width: 40%;
	position: absolute;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	border-radius: 15px;

	background-color: var(--bg-dark);
}

.CVo7hrb0 {
	padding: 25px;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-row-gap: 2.5rem;
	row-gap: 2.5rem;
	color: var(--white);
	overflow-y: scroll;
}

.oFiwZVV_ {
	display: grid;
	grid-template-columns: auto 1fr;
}

.RanUUk0s {
	display: flex;
	flex-direction: column;
	row-gap: .25rem;
}

.wVpumfXU {
	margin: 0 0 0 auto;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-column-gap: 1rem;
	column-gap: 1rem;
	position: relative;
}

.EhP81x7Q { 
	display: flex;
	column-gap: 1rem;
}

.xlFKfDWk {
	width: 35px;
	aspect-ratio: 1;
	border: 1px solid var(--white);
	background-color: var(--bg-dark);
	border-radius: 100%;
	

	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.o0iuIQJU {
	border: 1px solid var(--accent-1);
	background-color: var(--accent-1);
}

.kZBEoAES {
	width: 100%;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}

.fWzfvPqz {
	row-gap: 0 !important;
}

.BpKrvGPI {
	width: 100%;
	height: 45px;
	padding: 0 15px;
	box-sizing: border-box;
	background-color: var(--sub-bg-dark);
	border: none;
	border-radius: 10px;

	display: flex;
	align-items: center;
	position: relative;
	column-gap: 1rem;
}

.BpKrvGPI input {
	position: absolute;
	background: none;
	border: none;
	margin-left: 2rem;
	width: calc(100% - (2.5rem + 60px));
	color: var(--white)
}

.K9SBtfEk {
	width: 100%;
	padding: 0 15px;
	box-sizing: border-box;
	background-color: var(--sub-bg-dark);
	border: none;
	border-radius: 10px;

	display: flex;
	align-items: center;
	position: relative;
	column-gap: 1rem;
}

.K9SBtfEk input {
	position: absolute;
	background: none;
	border: none;
	margin-left: 2rem;
	width: calc(100% - (2.5rem + 60px));
	color: var(--white)
}

.gtACF0EC {
	width: calc(100% - 30px) !important;
	margin-left: 0 !important
}

.qFoomGyX {
	margin: 0 0 0 auto !important;
}

.Uj0iAT5C {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 1rem;
	column-gap: 1rem
}


.SJUQOao9 {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 1rem;
	column-gap: 1rem
}

.hv4oO5Yf {
	display: flex;
	margin-top: 1rem
}

.Y9d4f6wf {
	width: 40px;
	aspect-ratio: 1;
	background-color: var(--white);
	border: none;
	color: var(--bg-dark);
	border-radius: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
}

.oNL74Yjg {
	margin: 0 0 0 auto;
}

.EghpJyuE {
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr;
	margin-bottom: 1rem;
}

.Pf0oJzhy {
	display: flex;
	column-gap: 1rem;
}

.EghpJyuE button {
	margin: 0 0 0 auto;
	border: none;
	background: none;
	color: var(--white);
	border-bottom: 1px solid var(--bg-dark);
	padding: 0 5px 5px 5px
}

.FHHzZYl0 {
	border-bottom: 2px solid var(--accent-1) !important;
}

._3NQ4I0GY {
	margin-right: 2.75rem;
}


.UP5_Ijdj {
	height: 100%;
	overflow-y: scroll;
	width: 100%;
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	grid-template-columns: repeat(4, 1fr);
	grid-row-gap: 10px;
	row-gap: 10px;
	grid-column-gap: 10px;
	column-gap: 10px;
	margin-top: .75rem;
}

.UP5_Ijdj div {
	background-color: var(--sub-bg-dark);
	border-radius: 10px;
}

.AOHKBIy4 {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.Qcc_zrWW {
	display: flex;
	margin: 0 0 0 auto;
	column-gap: 1rem;
	margin-top: 1.5rem;
}

.Qcc_zrWW button {
	background: none;
	border: none;
	color: var(--white);
}

.jH6clfMY {
/*	height: 55vh;*/
	width: 100%;
	position: relative
}

.FR9GwXNm {
	width: 55%;
    height: calc(100% + 5rem);
    background-color: var(--white);
    position: absolute;
    top: 0;
	left: 50%;
	transform: translate(-50%, 0);
}

.chY7s8Da {
	height: 100%;
	width: 100%;
	position: relative;

	display: grid;
	grid-template-rows: auto 25% auto 1fr;
	grid-row-gap: 1rem;
	row-gap: 1rem;
	padding: 10px;
	box-sizing: border-box;
}

.bikeUbv8 {
	position: absolute;
    top: -15px;
	left: 50%;
	transform: translate(-50%, -15px);

	border-radius: 100%;
	height: 50px;
	width: 50px;
	background-color: var(--bg-dark)
}

.R_9jRIuP {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: 30% 1fr;
	color: var(--bg-dark)
}

.R_9jRIuP img {
	width: 100%;
}

.nateKe0Z {
	margin: 0 0 0 auto;
	display: flex;
	flex-direction: column;
	text-align: right;
}

.q70Y3F2N {
	width: calc(100% + 22px);
    margin: 0 -11px;
    background-color: var(--sub-bg-dark);
    color: var(--white);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    row-gap: .25rem
}

.q70Y3F2N img {
  width: 100%; /* Stretch to fit width */
  height: 100%; /* Stretch to fit height */
  object-fit: fill; /* Distorts the image */
}

.H8gb_VcP {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	grid-column-gap: 1rem;
	column-gap: 1rem;
	grid-row-gap: 1rem;
	row-gap: 1rem;
	color: var(--bg-dark)
}

.BnYxVP1G {
	display: flex;
	flex-direction: column;
	row-gap: .15rem
}

.rVwLHnqy {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.rVwLHnqy img {
	width: 40%;
}

.Nvfi9zhA {
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 1fr)
}

.rYrycMWn {
	width: 100%;
}

.rYrycMWn button {
	margin-top: 7.5px;
}

.bgXFeFXA {
	border-left: 0.1px solid var(--white);
	padding-left: 2rem;
	box-sizing: border-box;
}

.Z0DrNmTA {
	border-right: 0.1px solid var(--white);
	padding-right: 2rem;
	box-sizing: border-box;
}

.sn56R4bo {
	width: 100%;
	padding: 15px;
	box-sizing: border-box;
	background-color: var(--sub-bg-dark);
	border: none;
	border-radius: 10px;
	height: 20%;
}

.sn56R4bo textarea {
	background: none;
	border: none;
	max-width: 100%;
	width: 100%;
	color: var(--white);
	height: 100%;
	max-height: 100%;
}

.gV1THgH8 {
	display: flex;
	flex-direction: column;
	row-gap: .75rem;
}

.eB4t5N6q {
	width: 100%;
	padding: 5px 15px 5px 5px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	justify-content: center;
	grid-column-gap: .5rem;
	column-gap: .5rem;
	background-color: var(--sub-bg-dark);
	border-radius: 50px;

}

.sEcL9Moi {
	height: 32px;
	aspect-ratio: 1;
	background-color: var(--white);
	color: var(--sub-bg-dark);
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.WGyVY_fo {
	width: 100%;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.PLjYvHXx {
	display: grid;
	grid-template-columns: repeat(4, calc(35px + 1.25rem));
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 0;
	padding: 0 2.5px;
	box-sizing: border-box;
}

.vanODTbS {
	width: 100%;
	border: 1px solid var(--white)
}

.Veg2vqdg {
	width: 100%;
	border: 1px dashed var(--white)
}

.S6OQyhaH {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
}

.yB8_OmLc {
    background: none;
    border: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.IMlCpUxK {
    margin-top: 5px;
    position: absolute;
    width: 42%;
    padding: 5px 15px 15px 15px;
    box-sizing: border-box;
    background-color: var(--sub-bg-dark);
    border: none;
    border-radius: 10px;
    height: auto;
    min-height: 10%;
    max-height: 30%;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

.T62Wh_yM {
	background: none;
	border: none;
	border-bottom: 1px solid var(--bg-dark);
	padding: 10px 0;
	display: grid;
	grid-template-columns: 100px 1fr;
	align-items: center;
	justify-content: center;
	color: var(--white);
	text-align: left;
	margin-top: 0 !important;
}

.T62Wh_yM:hover {
	background-color: white;
	color: var(--sub-bg-dark);
	margin: 0 -30px;
	padding: 10px 30px;
}

.Ey2BHB83 {
	display: grid;
	grid-template-rows: auto 1fr
}

.FtGYOCQV {
	text-align: center;
    margin: auto 0;
    padding-top: 5px;
}

._2lvziN5 {
	display: flex;
	column-gap: 10px;
	margin-top: 5px;
	align-items: center
}

.i66yV4gn {
	height: 8px;
	width: 8px;
	border-radius: 100%;
	background-color: var(--success-green);
}

.OfsFqFKA {
	background: var(--sub-bg-dark);;
	border: none;
	max-width: 100%;
	padding: 10px;
	width: 100%;
	color: var(--white);
	height: 35px;
	max-height: 35px;
	border-radius: 5px;
	margin-bottom: 5px;
}


.IMlCpUxK {
    z-index: 9999;
    max-width: 100%;
    width: 100%;
    padding: 5px 15px 15px 15px;
    box-sizing: border-box;
    background-color: var(--sub-bg-dark);
    border: none;
    border-radius: 5px;
    height: auto;
/*    min-height: 300px;*/
    max-height: 300px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
}

.T62Wh_yM {
	background: none;
	border: none;
	border-bottom: 1px solid var(--bg-dark);
	padding: 10px 0;
	display: grid;
	grid-template-columns: 100px 1fr;
	align-items: center;
	justify-content: center;
	color: var(--white);
	text-align: left;
	margin-top: 0 !important;
}

.T62Wh_yM:hover {
	background-color: white;
	color: var(--sub-bg-dark);
	margin: 0 -30px;
	padding: 10px 30px;
}

.G3n6Uqy6 {
	display: flex;
	align-items: center;
	column-gap: 7.5px;
	margin-bottom: 10px
}

.mSyxwfao {
	background: none;
	border: none;
	padding: 2.5px 10px;
	color: var(--white);
	border-bottom: 2px solid var(--bg-dark);
}

.Z6zVz31f {
	border-bottom: 2px solid var(--accent-1);
}

/* ... (All your existing CSS definitions from the question remain unchanged) ... */

/* ----------------------------------------
   Additional RolePage styles
----------------------------------------- */
.KzK78wjA {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
}

.phLKo11N {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  gap: 1rem;
}


.gZOlxWqX {
  padding: 1rem;
  background-color: var(--sub-bg-dark);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
  align-items: flex-start;
  border: 2px solid var(--sub-bg-dark);
  position: relative;
}

.DvtkmD4z {
	position: absolute;
	bottom: 5px;
	right: 5px;
}

.gZOlxWqX:hover {
  background-color: var(--accent-1);
  color: var(--white);
}

.ZMLEbDLE {
  border: 2px solid var(--accent-1);
}

.vkqWm5tp {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 5px;
}

.fSTnFfyG {
    position: absolute;
    bottom: 5rem;
    background-color: red;
    width: calc(100% - 50px);
    padding: 10px;
    border-radius: 5px;
}

.e2cUD5Aw {
	position: absolute;
	width: 350px;
	height: 500px;
	background-color: white;
	top: 50px;
	z-index: 999;
	border-radius: 10px;
	overflow-y: scroll;
}

.hLVkzJ78 {
	padding: 15px 20px;
	box-sizing: border-box;
	color: var(--bg-dark);
	display: grid;
	grid-template-columns: 20px 1fr;
	align-items: center;
	grid-column-gap: .5rem;
	column-gap: .5rem;

	background: none;
  	width: 100%;
  	border: none;
  	text-align: left;
}

.VBtkwJaI {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.uC8C4QE7 {
	width: 350px;
	box-sizing: border-box;
	border-radius: 50px;
	display: flex;
	align-items: center;
	box-sizing: border-box;

	display: flex;
	align-items: center;
	position: relative;
	column-gap: 1rem;
	color: var(--bg-dark);
	background-color: var(--white);
}

.uC8C4QE7 input {
	position: absolute;
	background: none;
	border: none;
	margin-left: 15px;
	width: calc(100% - (2rem));
	color: var(--bg-dark)
}

.xajVMPiy {
	display: flex;
	align-items: center;
	column-gap: .75rem;
	position: absolute;
	left: 10px;
	padding: 0 10px;
	box-sizing: border-box;
}

.ewPLVWJF {
	position: absolute;
	left: -16px;
	top: 20px;
	background-color: var(--bg-dark);
	border: none;
	border-radius: 12.5px;
	padding: 10px;
	color: white
}

.XcmbgZsv {
	position: absolute;
	right: 20px;
	top: 20px;
	color: white;
	background: none;
	border: none;
}

.tVHYUkAZ {
	margin: 0 0 0 auto;
	background: none;
	border: none;
	color: white;
}

.tVHYUkAZ i {
	font-size: 20px
}

.bcJgoevq {
	height: 100%;
	overflow: hidden;
	width: 100%;
	display: flex;
	column-gap: 1.25rem;
}

.SmPmZ5qX {
	height: 100%;
	width: 45%;
	display: flex;
	flex-direction: column;
	/*row-gap: calc(0.625rem - 5px);*/
}

.h0z84NnL {
	height: 100%;
	width: 100%;
	border-radius: 15px;
	background-color: var(--sub-bg-dark);
	padding: 30px;
	box-sizing: border-box;
	position: relative;

    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid #2d2f39;
    overflow: hidden;
}

.CEwbnFMk {
	padding: 30px 30px 0 30px
}

.y51P7bUc {
	grid-template-rows: auto 1fr;
	row-gap: 1rem
}



.AkEeZMPp {
	display: grid;
	grid-template-columns: auto 1fr;
}
.bE7zK_Zo {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.v2PO0Sst {
    position: absolute;
    top: 45px;
}

.JJ4Du622 {
    margin: auto 0 0 0;
    overflow-y: scroll;
    height: 165px;
    overflow-y: scroll;
    width: 100%;
}

.suA03DpG {
	display: flex;
	align-items: center;
	column-gap: 7.5px;
	margin: 1.5rem 0 0.5rem 0
}

.HOx4ZTbC {
	background: none;
	border: none;
	padding: 2.5px 10px;
	color: var(--white);
	border-bottom: 2px solid var(--sub-bg-dark);
}

.zkR4pfHV {
	border-bottom: 2px solid var(--accent-1);
}

.Eiqua6Wz {
	height: calc(100% - 1.5rem);
	margin-top: 1.5rem;
	overflow-y: hidden;
}

.JHQcro41 {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	row-gap: 1.5rem;
	margin-bottom: -5rem;
	overflow-y: scroll;
}

.JHQcro41::-webkit-scrollbar,
.IMlCpUxK::-webkit-scrollbar {
	display: none;
}


.xGOsKTgG {
    aspect-ratio: 1;
    height: 60%;
}

.OZT3Uxlx {
	display: flex;
}

.ek7qo3Lp {
	height: 80px;
	width: 80px;
	background-color: var(--white);
	color: var(--bg-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 100%;
	margin: 0 auto;
}

.Pk7X2aaQ {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--white);
	text-align: center;
	margin-top: 1rem;
	width: 100%;
}

.dQDkzA3j {
    max-width: 75%;
    flex-wrap: wrap;
    display: flex;
    word-break: break-all;
    justify-content: center;
}

.UbS65_zs {
	background: none;
	position: absolute;
	top: 20px;
	right: 50px;
	border: none;
	color: white;
}

.gzbMnAOH {
	background: none;
	position: absolute;
	top: 20px;
	right: 20px;
	border: none;
	color: white;
}

.LaOz2C23 {
	border: 1px solid var(--accent-1)
}

.v2PO0Sst {
    position: absolute;
    top: 45px;
    width: 100%
}

.MYopfvQP {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: .75rem;
  gap: .75rem;
  width: 100%;
  margin: auto 0 0 0;
}

.MA7aeWfw {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap: 10px;
  transition: transform 0.2s ease-in-out;
}

.MA7aeWfw:hover {
  transform: scale(1.05);
}

.sFk3FzAg {
  font-size: 20px;
}

.pPXMhOlu {
  display: flex;
  flex-direction: column;
}

.DiWWlYAN {
  font-size: 11px;
  color: #ccc;
}

.Ewcck9dc {
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-1);

	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.qoROl3dJ {
	height: 20px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.qoROl3dJ button {
	background: none;
	border: none;
	color: var(--white);
	opacity: .7;
	transform: rotate(90deg)
}

.qoROl3dJ button:hover {
	opacity: 1;
	transition: opacity .25s
}

.uGnP4r5g {
	transform: rotate(270deg) !important;
}

.kITDuE22 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  z-index: 999999;
}
.lfZ3FyOd {
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content:center;
  position: relative;
}

.Qzhfn8_8 {
  height: 2rem;
  cursor: pointer;
  transform: rotate(90deg);
}

.Qzhfn8_8::after {
  content: '';
  position: absolute;
  top: -10px; 
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: transparent;
}

.pnr8AH9q {
  opacity: 0.5;
}

.l5s6U_Eq {
  background: none;
  border: none;
  height: 1rem;
  width: 0.25rem;
  background-color: var(--accent-1);
  border-radius: 9999px;
}


.epjLXkgi {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    row-gap: .5rem;
    height: 100%
}

.epjLXkgi p {
	text-align: center;
	padding: 0 30px;
	box-sizing: border-box
}

.V6MZd2eW {
	padding: 30px !important;
	overflow-y: scroll;
	display: flex;
	flex-direction: column
}

.rmLi9ivq {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rmLi9ivq img {
	height: 30%
}

.FfdOvVnm p {
	visibility: hidden
}

.FfdOvVnm .oKvCLtSK {
	visibility: hidden
}

.BFV7_V9e {
  height: calc(100% - 3rem);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.BFV7_V9e p {
	margin-bottom: 3rem;
}

.IdNSfvPb {
    column-gap: .6rem;
    display: flex;
    width: 100%;
}

.Qi_2FdSb {
    background-color: var(--bg-dark);
    border: 1px solid var(--bg-dark);
    border-radius: 6px;
    align-items: center;
    box-sizing: border-box;
    column-gap: 7.5px;
    cursor: pointer;
    display: flex;
    padding: 5px 8px 5px 4px;
}

.UBnhrHvz {
	background-color: var(--accent-1);
}

.UBnhrHvz > ._JZNQAD_ {
	background-color: var(--white)
}

.UBnhrHvz > ._JZNQAD_ i {
	color: var(--accent-1)
}
 
._JZNQAD_ {
	background-color: var(--sub-bg-dark);
	align-items: center;
    aspect-ratio: 1;
    border-radius: 5px;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 5px;
}

._JZNQAD_ i,
.Qi_2FdSb p {
	color: var(--white)
}

.Qi_2FdSb p {
	white-space: nowrap;
}

.BsdF7hn2 {
  opacity: 0;
  animation: f_pou7gC 200ms ease-out forwards;
}

.NtKIRjsr {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Card wrapper for each section */
.Cj0fSynM {
	margin-top: 7.5px;
} 

.K3GgJ_rI {
  background: rgba(255,255,255,0.03);
  border: 1px solid #2d2f39;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  height: -webkit-max-content;
  height: max-content;
}

/* Metadata form styling */
.Qw806CCs {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
  row-gap: 1rem;
  width: 100%;
}

.Qw806CCs p {
  margin-bottom: .25rem;
}

.Qw806CCs input,
.Qw806CCs select {
	width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #2d2f39;
  background: var(--bg-dark);
  color: var(--white);
  font-size: 0.9rem;
  transition: border-color .2s;
}

.Qw806CCs input:focus,
.Qw806CCs select:focus {
  border-color: var(--accent-1);
  outline: none;
}

.GJbxdMKH {
	border-color: red !important;
	border-width: 2px !important;
	outline: none
}

.bi7l94GA {
	position: relative;
}

.jd1KQx2T {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 15px;
	height: 2.5rem;
	background: none;
	border:none;
	color: white;
}

/* Actions */
._0n790WOJ {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.gtBUEEcY {
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  cursor: pointer;
  transition: background-color .2s;
}

.gtBUEEcY.URA58gCT {
  background: #3a3d48;
  color: #eee;
}

.gtBUEEcY.AZexNskN {
  background: var(--accent-1);
  color: #fff;
}

.gtBUEEcY.Jwn_VQWP {
  background: #c0392b;
  color: #fff;
}

.gtBUEEcY:hover {
  filter: brightness(1.1);
}


/* Space between cards (optional, if not already handled) */
.K3GgJ_rI + .K3GgJ_rI { margin-top: 1rem; }

/* Invited Events list */
.r_YEms3a {
  margin-top: .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.dPsGmABb {
  background: rgba(255,255,255,0.03);
  border: 1px solid #2d2f39;
  border-radius: 10px;
  padding: .75rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-row-gap: .35rem;
  row-gap: .35rem;
}

.llauhioZ {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.s1bLoTYf {
  color: var(--white);
  font-size: .95rem;
  font-weight: 600;
}

.iHmqerty {
  color: #bbb;
  font-size: .7rem;
}

.OLZSf90I {
  grid-column: 1 / -1;
  display: flex;
  gap: .5rem;
  align-items: baseline;
  margin-top: 10px
}

.OLZSf90I span {
	color: var(--accent-1)
}

.lDPt9quy {
  color: #9aa0a6;
  font-size: .75rem;
}

.euzkfTLj {
  color: var(--white);
  font-size: .8rem;
}

/* Quick Invite card */
.X3uNVtaZ {
  margin-top: .75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.UnkvglLt {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-height: 180px;      /* scrolls if long */
  overflow-y: auto;
  padding-right: 4px;
}

.cvtmzov4 {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  background: rgba(255,255,255,0.02);
  border: 1px solid #2d2f39;
  border-radius: 10px;
  padding: .6rem .75rem;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}

.yfpcuN1U {
  padding: .5rem .75rem;
  border: 1px solid #2d2f39;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: var(--white);
  font-size: .9rem;
  outline: none;
  transition: border-color .2s;
}
.yfpcuN1U:focus {
  border-color: var(--accent-1);
}


._7hsB_aAS {
	display: flex;
	align-items: center;
	column-gap: .75rem;
}

.cvtmzov4:hover { background: rgba(255,255,255,0.06); }
.cvtmzov4 input { margin-top: 2px; accent-color: var(--accent-1); }

.V2x1eaLr { display: flex; flex-direction: column; }
.Bj1MXayq { color: var(--white); font-size: .9rem; }
.tFg5hYh9 { color: #aaa; font-size: .75rem; }

/* Submit */
.aJWlVUW3 {
  align-self: flex-end;
  background: var(--accent-1);
  color: var(--white);
  border: none;
  border-radius: 10px;
  padding: .6rem 1.1rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter .2s;
}
.aJWlVUW3:disabled { opacity: .55; cursor: not-allowed; }
.aJWlVUW3:hover:not(:disabled) { filter: brightness(1.05); }


.znTAXl1g {
    border: 1px solid #2d2f39;
    background-color: var(--accent-1);
    border-radius: 10px;
    height: 40px;
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    column-gap: .75rem;
    margin-top: .75rem
}

._0n790WOJ {
  	display: flex;
  	flex-direction: column;
  	margin-top: 1rem;
}

.znTAXl1g {
    border: 1px solid #2d2f39;
    background-color: var(--accent-1);
    border-radius: 10px;
    height: 40px;
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    column-gap: .75rem;
    margin-top: .75rem
}

.JTd65Afz {
    border: 1px solid #2d2f39;
    background-color: #c0392b;
    border-radius: 10px;
    height: 40px;
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    column-gap: .75rem;
    margin-top: .75rem
}

/* -----------------------------------------------------
	Media Queries
------------------------------------------------------ */

@media (max-width: 768px) {
}

@media (max-width: 1200px) {
}



@keyframes f_pou7gC {
  to {
    opacity: 1;
  }
}


/* ======================================================
   TEAM V3 - Dark Theme (tm_ prefix)
====================================================== */

/* --- LAYOUT --- */
.x0asD6Ez {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	flex: 1 1;
	min-height: 0;
	overflow-y: auto;
}

.x0asD6Ez::-webkit-scrollbar {
	display: none;
}

/* --- STATS ROW --- */
.VO6pofRO {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
	gap: 1rem;
	flex-shrink: 0;
}

.EqH3WqgL {
	background-color: var(--sub-bg-dark);
	border-radius: 12px;
	border: 1px solid #2d2f39;
	padding: 1.1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.sj2rSCQn {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.wxb4wyp9 {
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
}

.wPaqePH2 {
	background: rgba(60, 162, 89, 0.12);
	color: var(--success-green);
}

.wrM_K8MG {
	background: rgba(167, 139, 250, 0.12);
	color: #a78bfa;
}

.kjM4OAM6 {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

._q3smHW_ {
	margin: 0;
	font-size: 12px;
	color: #888;
	font-weight: 500;
}

.JTosAT2Q {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--white);
}

/* --- CONTENT ROW --- */
.eGGtVZue {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
	gap: 1rem;
	flex: 1 1;
	min-height: 0;
}

/* --- TEAM LIST TILE --- */
.GyvjTwb6 {
	grid-column: span 2;
	display: flex;
	flex-direction: column;
	min-height: 0;
	background-color: var(--sub-bg-dark);
	border-radius: 12px;
	border: 1px solid #2d2f39;
	overflow: hidden;
}

.ii6Y0fih {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.5);
	flex-shrink: 0;
}

.JmlZw30r {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--white);
}

.IHypmmYi {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.jybiMBcj {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	padding: 0.45rem 0.75rem;
}

.jybiMBcj i {
	color: #555;
	font-size: 12px;
	flex-shrink: 0;
}

.jybiMBcj input {
	background: none;
	border: none;
	outline: none;
	color: var(--white);
	font-size: 13px;
	width: 140px;
	padding: 0;
}

.jybiMBcj input::placeholder {
	color: #555;
}

.hIFeg_79 {
	background: none;
	border: none;
	color: #666;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	font-size: 11px;
}

.hIFeg_79:hover {
	color: var(--white);
}

.oCd8oC9E {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 8px;
	color: var(--white);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.oCd8oC9E:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

.oCd8oC9E i {
	font-size: 11px;
}

/* --- FILTER SECTION --- */
.FTrd1csK {
	border-bottom: 1px solid rgba(45, 47, 57, 0.3);
	flex-shrink: 0;
}

.ur2zb1iQ {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.6rem 1.25rem;
	background: none;
	border: none;
	color: #888;
	cursor: pointer;
	font-size: 12px;
	font-weight: 500;
	transition: color 0.15s ease;
}

.ur2zb1iQ:hover {
	color: var(--white);
}

.N6i4sF9c {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.N6i4sF9c i:first-child {
	font-size: 11px;
}

.HJqjPyTk {
	background-color: var(--accent-1);
	color: var(--white);
	font-size: 10px;
	font-weight: 600;
	padding: 0.1rem 0.45rem;
	border-radius: 10px;
	min-width: 16px;
	text-align: center;
}

.ur2zb1iQ > i:last-child {
	font-size: 10px;
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

.ur2zb1iQ:hover > i:last-child {
	opacity: 1;
}

/* --- FILTER PILLS --- */
.uDF6r9LX {
	display: flex;
	gap: 0.5rem;
	padding: 0.5rem 1.25rem 0.75rem;
	flex-shrink: 0;
	flex-wrap: wrap;
}

.Ez5mYoLm {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.75rem;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 20px;
	color: #888;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}

.Ez5mYoLm i {
	font-size: 10px;
}

.Ez5mYoLm:hover {
	border-color: #3d3f49;
	color: var(--white);
}

.UrjMLURm {
	background-color: rgba(13, 122, 199, 0.12);
	border-color: var(--accent-1);
	color: var(--accent-1);
}

/* --- LIST BODY --- */
.zNTsun_S {
	flex: 1 1;
	overflow-y: auto;
}

.zNTsun_S::-webkit-scrollbar {
	width: 6px;
}

.zNTsun_S::-webkit-scrollbar-track {
	background: transparent;
}

.zNTsun_S::-webkit-scrollbar-thumb {
	background: #2d2f39;
	border-radius: 3px;
}

/* --- MEMBER CARD --- */
.d5oCc87M {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 1.25rem;
	width: 100%;
	background: none;
	border: none;
	border-left: 3px solid transparent;
	border-bottom: 1px solid rgba(45, 47, 57, 0.3);
	cursor: pointer;
	text-align: left;
	transition: background-color 0.12s ease, border-color 0.12s ease;
	color: var(--white);
}

.d5oCc87M:hover {
	background-color: rgba(255, 255, 255, 0.02);
}

.Bvh6n7Dm {
	background-color: rgba(13, 122, 199, 0.06);
	border-left-color: var(--accent-1);
}

.ClMpU3sa {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
	color: #888;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}

.sk6EbK_0 {
	flex: 1 1;
	min-width: 0;
}

.N210f8gU {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

._BzXyWAK {
	margin: 0.15rem 0 0;
	font-size: 12px;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.CJIeMh0V {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

.csQACjBO {
	padding: 0.25rem 0.6rem;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 500;
	background: rgba(255, 255, 255, 0.05);
	color: #888;
	white-space: nowrap;
}

.p3uLj568 {
	font-size: 11px;
	color: #555;
}

/* --- EMPTY STATE --- */
.NPAEzvJP {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 2rem;
	gap: 0.75rem;
	color: #555;
}

.lUpSHq0P {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.NPAEzvJP p {
	margin: 0;
	font-size: 13px;
}

/* --- SKELETON --- */
.u2JKU6Hx {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.3);
}

.ZVjRAaOR {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #2d2f39;
	flex-shrink: 0;
	animation: fALw_M_c 1.5s ease-in-out infinite;
}

.Zt1AM_Tl {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1 1;
}

.F64JBAfH {
	height: 10px;
	background: #2d2f39;
	border-radius: 4px;
	animation: fALw_M_c 1.5s ease-in-out infinite;
}

.uXtGA63q { width: 70%; }
.orQdicDr { width: 50%; }

@keyframes fALw_M_c {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 0.7; }
}


/* --- DETAIL TILE --- */
.M7SkyPuF {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background-color: var(--sub-bg-dark);
	border-radius: 12px;
	border: 1px solid #2d2f39;
	overflow-y: auto;
}

.M7SkyPuF::-webkit-scrollbar {
	width: 6px;
}

.M7SkyPuF::-webkit-scrollbar-track {
	background: transparent;
}

.M7SkyPuF::-webkit-scrollbar-thumb {
	background: #2d2f39;
	border-radius: 3px;
}

/* --- DETAIL PLACEHOLDER --- */
.U8QNd7Ni {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	color: #555;
	padding: 2rem;
}

.U8QNd7Ni i {
	font-size: 28px;
}

.U8QNd7Ni p {
	margin: 0;
	font-size: 13px;
}

/* --- DETAIL HEADER --- */
.WskrJ6me {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.5);
}

.zqY_8Fi6 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.SmBuzu_V {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
	color: #888;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}

.J8_bNpP6 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.zlwe20pc {
	margin: 0.15rem 0 0;
	font-size: 12px;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.DlShQgRD {
	padding: 0.3rem 0.75rem;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
	white-space: nowrap;
	flex-shrink: 0;
}

/* --- DETAIL SECTIONS --- */
.nphpVn1W {
	padding: 1rem 1.25rem;
}

.muZOktOe {
	margin: 0 0 0.75rem;
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.muZOktOe > i {
	font-size: 12px;
	color: #888;
}

.xbAAIVHX {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin-left: auto;
}

.xbAAIVHX > i {
	font-size: 12px;
	color: #555;
	cursor: help;
	transition: color 0.15s ease;
}

.xbAAIVHX:hover > i {
	color: #888;
}

.H0sY__vV {
	position: absolute;
	bottom: calc(100% + 10px);
	right: 0;
	transform: translateY(4px);
	background: #1a1b23;
	border: 1px solid #2d2f39;
	color: #ccc;
	font-size: 11px;
	font-weight: 400;
	line-height: 1.45;
	padding: 8px 12px;
	border-radius: 8px;
	width: 220px;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transition: all 0.15s ease;
	z-index: 10;
	pointer-events: none;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.xbAAIVHX:hover .H0sY__vV {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.H0sY__vV::after {
	content: '';
	position: absolute;
	top: 100%;
	right: 4px;
	border: 5px solid transparent;
	border-top-color: #2d2f39;
}

.N1gClHzz {
	font-size: 11px;
	font-weight: 600;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin: 0.75rem 0 0.25rem;
}

.vSlAktXh {
	height: 1px;
	background: rgba(45, 47, 57, 0.5);
	margin: 0;
}

.lKN7BXnS {
	margin: 0;
	font-size: 12px;
	color: #666;
}

/* --- DETAIL FORM --- */
.FrkY6HW_ {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.iR2wOZeP {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.AwUOHjWz {
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
	font-size: 10px;
	font-weight: 600;
}

.RNn9ZnKL {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	transition: border-color 0.2s ease;
}

.RNn9ZnKL:focus-within {
	border-color: var(--accent-1);
}

.RNn9ZnKL i {
	color: #666;
	font-size: 12px;
	flex-shrink: 0;
}

.RNn9ZnKL input {
	background: none;
	border: none;
	color: var(--white);
	font-size: 13px;
	width: 100%;
	outline: none;
	font-family: inherit;
}

.RNn9ZnKL input::placeholder {
	color: #555;
}

.Wai7hB3f {
	opacity: 0.5;
}

.Wai7hB3f input {
	cursor: not-allowed;
}

.xuU2Bw3B {
	margin: 0.2rem 0 0;
	font-size: 11px;
	color: #ef4444;
	font-weight: 600;
}

.ZDk1ggUS {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 8px;
	color: var(--white);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 0.25rem;
}

.ZDk1ggUS:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

.ZDk1ggUS i {
	font-size: 12px;
}

/* --- QUICK INVITE --- */
.uxd64D2S {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	padding: 0.45rem 0.75rem;
	margin-bottom: 0.75rem;
}

.uxd64D2S i {
	color: #555;
	font-size: 12px;
	flex-shrink: 0;
}

.uxd64D2S input {
	background: none;
	border: none;
	outline: none;
	color: var(--white);
	font-size: 13px;
	width: 100%;
	padding: 0;
}

.uxd64D2S input::placeholder {
	color: #555;
}

.MlQvR89e {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	max-height: 200px;
	overflow-y: auto;
}

.MlQvR89e::-webkit-scrollbar {
	width: 4px;
}

.MlQvR89e::-webkit-scrollbar-thumb {
	background: #2d2f39;
	border-radius: 2px;
}

.C_vr3YyO {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.75rem;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.C_vr3YyO:hover {
	border-color: #3d3f49;
}

.wLd4nv2T {
	background-color: rgba(13, 122, 199, 0.08);
	border-color: var(--accent-1);
}

.U6faPeGm {
	width: 18px;
	height: 18px;
	border: 2px solid #3d3f49;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.15s ease;
}

.wLd4nv2T .U6faPeGm {
	background-color: var(--accent-1);
	border-color: var(--accent-1);
}

.U6faPeGm i {
	font-size: 9px;
	color: var(--white);
}

.sFxcBjCf {
	font-size: 13px;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* --- TOGGLE ROW (Venues page style) --- */
.lt7PSAwY {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.6rem 0.75rem;
	border-radius: 8px;
	transition: background-color 0.12s ease;
}

.lt7PSAwY:hover {
	background-color: rgba(255, 255, 255, 0.02);
}

.XJ9lSJyn {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
	flex: 1 1;
}

.SPV2bY15 {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
}

.CYkAHarF {
	background: rgba(13, 122, 199, 0.1);
	color: var(--accent-1);
}

.xJDau2lk {
	background: rgba(167, 139, 250, 0.1);
	color: #a78bfa;
}

.dPHeNmna {
	background: rgba(34, 197, 94, 0.1);
	color: #22c55e;
}

.pGsxrK5C {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cUvTe6vg {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1;
}

.bqqMRxcm {
	margin: 0;
	font-size: 10px;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.bqqMRxcm i {
	font-size: 8px;
	color: #555;
}

.VXCRfuAO {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.65rem;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
	color: #888;
	font-size: 11px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}

.VXCRfuAO:hover {
	border-color: rgba(13, 122, 199, 0.3);
	color: var(--accent-1);
	background: rgba(13, 122, 199, 0.06);
}

.g2mJkf3Q {
	border-color: rgba(13, 122, 199, 0.3);
	background: rgba(13, 122, 199, 0.1);
	color: var(--accent-1);
}

.g2mJkf3Q:hover {
	border-color: rgba(239, 68, 68, 0.3);
	background: rgba(239, 68, 68, 0.06);
	color: #ef4444;
}

.IQXDLHRy {
	border-color: rgba(239, 68, 68, 0.4);
	background: rgba(239, 68, 68, 0.12);
	color: #ef4444;
	animation: skoW6tQQ 0.6s ease-in-out infinite alternate;
}

@keyframes skoW6tQQ {
	from { background: rgba(239, 68, 68, 0.08); }
	to { background: rgba(239, 68, 68, 0.18); }
}

/* --- RE-INVITE --- */
.p0b7x6Ab {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.hDyWx9bH {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	background: rgba(234, 179, 8, 0.08);
	border: 1px solid rgba(234, 179, 8, 0.2);
	border-radius: 8px;
	font-size: 12px;
	color: #eab308;
	line-height: 1.4;
}

.hDyWx9bH i {
	margin-top: 2px;
	font-size: 11px;
	flex-shrink: 0;
}

.Q0Bqbvob {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.55rem 1rem;
	background-color: rgba(99, 102, 241, 0.1);
	border: 1px solid rgba(99, 102, 241, 0.25);
	border-radius: 8px;
	color: #818cf8;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.Q0Bqbvob:hover {
	background-color: rgba(99, 102, 241, 0.18);
	border-color: rgba(99, 102, 241, 0.4);
}

.Q0Bqbvob:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.Q0Bqbvob i {
	font-size: 12px;
}

.E2V2k8uE {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 12px;
	font-weight: 500;
}

.E2V2k8uE i {
	font-size: 11px;
}

.zibT7oym {
	color: #22c55e;
}

.g6izVQ3f {
	color: #ef4444;
}

/* --- PROMOTER LIMITS --- */
.piHEa3TS {
	display: flex;
	flex-direction: column;
}

.bhgU9Nz2 {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-shrink: 0;
}

.WUiYDRts {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.03);
	color: #666;
	font-size: 11px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.WUiYDRts:hover {
	border-color: rgba(99, 102, 241, 0.3);
	background: rgba(99, 102, 241, 0.08);
	color: #818cf8;
}

.tbRfq2DV {
	border-color: rgba(99, 102, 241, 0.4);
	background: rgba(99, 102, 241, 0.12);
	color: #818cf8;
}

.ZsWOyH6S {
	padding: 0.5rem 0.6rem 0.6rem;
	margin-top: -2px;
	background: rgba(255, 255, 255, 0.02);
	border-top: 1px solid rgba(255, 255, 255, 0.04);
}

._so3BRTY {
	display: flex;
	gap: 0.35rem;
	margin-bottom: 0.5rem;
}

.HiMo2slu {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.6rem;
	border-radius: 6px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.03);
	color: #888;
	font-size: 11px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}

.HiMo2slu:hover {
	border-color: rgba(99, 102, 241, 0.3);
	color: #818cf8;
	background: rgba(99, 102, 241, 0.06);
}

.HiMo2slu i {
	font-size: 10px;
}

.Am5kIwKo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.4rem 0;
}

.Am5kIwKo + .Am5kIwKo {
	border-top: 1px solid rgba(255, 255, 255, 0.03);
}

.NHfHnTKO {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 12px;
	color: #aaa;
}

.NHfHnTKO i {
	font-size: 10px;
	color: #666;
}

.PaCInovp {
	font-size: 11px;
	color: #555;
}

.ruqufaQs {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.ewH5D6hC {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 5px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.03);
	color: #888;
	font-size: 10px;
	cursor: pointer;
	transition: all 0.15s ease;
	-webkit-user-select: none;
	        user-select: none;
}

.ewH5D6hC:hover {
	border-color: rgba(13, 122, 199, 0.3);
	color: var(--accent-1);
	background: rgba(13, 122, 199, 0.06);
}

.nBBE2kwo {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	font-size: 13px;
	font-weight: 600;
	color: #ccc;
	text-align: center;
}

.nBBE2kwo i {
	font-size: 12px;
	color: #818cf8;
}

.SD66DVV1 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	padding: 0.45rem;
	margin-top: 0.5rem;
	border-radius: 6px;
	border: 1px solid rgba(13, 122, 199, 0.3);
	background: rgba(13, 122, 199, 0.1);
	color: var(--accent-1);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}

.SD66DVV1:hover {
	background: rgba(13, 122, 199, 0.18);
	border-color: rgba(13, 122, 199, 0.4);
}

.SD66DVV1:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.SD66DVV1 i {
	font-size: 11px;
}

/* --- DELETE BUTTON --- */
.V2BVL7GQ {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.55rem 1rem;
	background-color: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.25);
	border-radius: 8px;
	color: #ef4444;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.V2BVL7GQ:hover {
	background-color: rgba(239, 68, 68, 0.18);
	border-color: rgba(239, 68, 68, 0.4);
}

.V2BVL7GQ i {
	font-size: 12px;
}


/* --- RESPONSIVE --- */

@media (max-width: 1024px) {
	.eGGtVZue {
		grid-template-columns: 1fr;
	}

	.GyvjTwb6 {
		grid-column: span 1;
	}

	.M7SkyPuF {
		max-height: 400px;
	}
}

@media (max-width: 768px) {
	.VO6pofRO {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}

	.ii6Y0fih {
		padding: 0.85rem 1rem;
	}

	.d5oCc87M {
		padding: 0.65rem 1rem;
	}

	.ClMpU3sa {
		width: 36px;
		height: 36px;
		font-size: 12px;
	}

	.uDF6r9LX {
		padding: 0.5rem 1rem;
	}
}

@media (max-width: 480px) {
	.VO6pofRO {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.jybiMBcj input {
		width: 100px;
	}
}


/* ======================================================
   TEAM MODAL - Dark Theme (tm_ prefix)
====================================================== */

.Pdj9D5Xt {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 2rem;
}

.nd1z86bU {
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 16px;
	width: 100%;
	max-width: 540px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: PfYADI27 0.2s ease-out;
}

@keyframes PfYADI27 {
	from { opacity: 0; transform: translateY(-20px); }
	to { opacity: 1; transform: translateY(0); }
}

.VIwQDf4U {
	padding: 1.5rem;
	border-bottom: 1px solid #2d2f39;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.ET6vzRou {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--white);
}

.r3T09YQR {
	width: 36px;
	height: 36px;
	background-color: rgba(255, 255, 255, 0.05);
	border: none;
	border-radius: 8px;
	color: #888;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: all 0.2s ease;
}

.r3T09YQR:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--white);
}

.qGqp3J7Q {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1 1;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.qGqp3J7Q > :first-child {
	margin-bottom: 0.35rem;
}

.pDudHTYs {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.IhNg5hN1 {
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
	font-size: 11px;
	font-weight: 600;
}

.hzMBmMn7 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	padding: 0.75rem 1rem;
	transition: border-color 0.2s ease;
}

.hzMBmMn7:focus-within {
	border-color: var(--accent-1);
}

.hzMBmMn7 i {
	color: #666;
	font-size: 14px;
	flex-shrink: 0;
}

.hzMBmMn7 input {
	background: none;
	border: none;
	color: var(--white);
	font-size: 14px;
	width: 100%;
	outline: none;
	font-family: inherit;
}

.hzMBmMn7 input::placeholder {
	color: #555;
}

.Pmzy0KmL {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1rem;
	gap: 1rem;
}

/* Permission checkbox */
.jVv2Unwn {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	cursor: pointer;
	transition: border-color 0.2s ease;
	margin-top: 0.25rem;
}

.jVv2Unwn:hover {
	border-color: #3d4052;
}

.DE3o6Xw_ {
	width: 20px;
	height: 20px;
	min-width: 20px;
	border-radius: 6px;
	border: 2px solid #3d4052;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	margin-top: 1px;
	font-size: 10px;
	color: transparent;
}

.I3cRCYQ_ {
	background: var(--accent-1);
	border-color: var(--accent-1);
	color: var(--white);
}

.taKv9Pth {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cdWsXKBJ {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
}

.OqsOFPof {
	margin: 0;
	font-size: 12px;
	color: #6b7280;
}

.sN8aIesK {
	margin: 0 1.5rem;
	padding: 0.6rem 0.85rem;
	border-radius: 8px;
	background: rgba(239, 68, 68, 0.12);
	border: 1px solid rgba(239, 68, 68, 0.3);
	color: #ef4444;
	font-size: 12px;
	margin-bottom: 1rem
}

.InU72394 {
	padding: 1.5rem;
	border-top: 1px solid #2d2f39;
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
}

.JqhGES1O {
	padding: 0.75rem 1.5rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: var(--white);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.JqhGES1O:hover {
	background-color: #2d2f39;
}

.YxlmErHw {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 8px;
	color: var(--white);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.YxlmErHw:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

.YxlmErHw:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* --- STEP 2 ASSIGNMENT UI --- */
.ZlKX7Vz1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 3rem 0;
	color: #888;
	font-size: 14px;
}

.ZlKX7Vz1 i {
	font-size: 20px;
	color: var(--accent-1);
}

.XiQHZe1j {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	padding: 0.65rem 1rem;
	transition: border-color 0.2s ease;
}

.XiQHZe1j:focus-within {
	border-color: var(--accent-1);
}

.XiQHZe1j i {
	color: #666;
	font-size: 13px;
	flex-shrink: 0;
}

.XiQHZe1j input {
	background: none;
	border: none;
	color: var(--white);
	font-size: 13px;
	width: 100%;
	outline: none;
	font-family: inherit;
}

.XiQHZe1j input::placeholder {
	color: #555;
}

.cB9MkJ4k {
	display: flex;
	flex-direction: column;
	gap: 0;
	max-height: 340px;
	overflow-y: auto;
}

.jqeJWXt1 {
	margin: 0;
	padding: 0.75rem 0 0.35rem;
	font-size: 11px;
	font-weight: 600;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.FKUMYwaZ {
	margin: 0;
	padding: 1.5rem 0;
	text-align: center;
	color: #666;
	font-size: 13px;
}

/* --- ROLE GRID --- */
.M4Qq2oFQ {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 0.5rem;
	gap: 0.5rem;
}

.AwxD_OXv {
	position: relative;
}

.w7_rt7rg {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.75rem 0.5rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	color: #888;
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: center;
	width: 100%;
}

.w7_rt7rg i {
	font-size: 16px;
}

.zCUhHSKY {
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
}

.w7_rt7rg:hover {
	border-color: #3d3f49;
	color: var(--white);
}

.zyFc1pT_ {
	border-color: var(--accent-1);
	color: var(--accent-1);
	background-color: rgba(13, 122, 199, 0.08);
}

.wpnB3nd5 {
	border-color: #f59e0b;
	color: #f59e0b;
	background-color: rgba(245, 158, 11, 0.08);
}

.W1E4pGZG {
	border-color: #14b8a6;
	color: #14b8a6;
	background-color: rgba(20, 184, 166, 0.08);
}

.Lbw54cnV {
	border-color: var(--accent-1);
	color: var(--accent-1);
	background-color: rgba(13, 122, 199, 0.08);
}

.HSrmrqrl {
	border-color: #ec4899;
	color: #ec4899;
	background-color: rgba(236, 72, 153, 0.08);
}

.l67Sl7Iu {
	border-color: var(--success-green);
	color: var(--success-green);
	background-color: rgba(60, 162, 89, 0.08);
}

.IihXwdyG {
	border-color: #a78bfa;
	color: #a78bfa;
	background-color: rgba(167, 139, 250, 0.08);
}

.M6N7e87Z {
	position: absolute;
	top: 6px;
	right: 6px;
	font-size: 13px !important;
	opacity: 0.5;
}

.lt41Latg {
	opacity: 0.35;
	pointer-events: none;
}

.AwxD_OXv:has(.lt41Latg) {
	cursor: not-allowed;
}

/* Ensure disabled buttons don't block wrapper hover for tooltip */
.w7_rt7rg:disabled {
	pointer-events: none;
}

.K4DnO1ax {
	position: absolute;
	bottom: 6px;
	right: 6px;
	font-size: 10px !important;
	color: #888;
	opacity: 0.8;
}

.wx7HId6F {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	transform: translateY(-4px);
	background: #1a1b23;
	border: 1px solid #2d2f39;
	color: #ccc;
	font-size: 11px;
	font-weight: 500;
	padding: 6px 10px;
	border-radius: 8px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: all 0.15s ease;
	z-index: 10;
	pointer-events: none;
}

.AwxD_OXv:hover .wx7HId6F {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.wx7HId6F::before {
	content: '';
	position: absolute;
	bottom: 100%;
	right: 12px;
	border: 5px solid transparent;
	border-bottom-color: #2d2f39;
}


/* --- ROLE COLORS --- */

/* SuperAdmin - gold/amber */
.yMy_j8Y3 {
	background: rgba(245, 158, 11, 0.12);
	color: #f59e0b;
}

/* Venue Manager - teal */
.MFcFmp4L {
	background: rgba(20, 184, 166, 0.12);
	color: #14b8a6;
}

/* Event Manager - blue */
.iK39pjfY {
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
}

/* Promoter - pink */
.qqZnmfHZ {
	background: rgba(236, 72, 153, 0.12);
	color: #ec4899;
}

/* Scanner - green */
.eJ9qdPdA {
	background: rgba(60, 162, 89, 0.12);
	color: var(--success-green);
}

/* Receptionist - purple */
.AQTyMG7t {
	background: rgba(167, 139, 250, 0.12);
	color: #a78bfa;
}


@media (max-width: 480px) {
	.nd1z86bU {
		max-width: 100%;
	}

	.Pmzy0KmL {
		grid-template-columns: 1fr;
	}

	.M4Qq2oFQ {
		grid-template-columns: repeat(2, 1fr);
	}
}
/* -----------------------------------------------------
	Split Layout
------------------------------------------------------ */

.LMzKUODF {
	height: 100vh;
	width: 100%;
	display: grid;
	grid-template-columns: 44% 1fr;
	overflow: hidden;
	background-color: var(--bg-dark);
}

/* -----------------------------------------------------
	Left - Form Side
------------------------------------------------------ */

.Crp1bMr8 {
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 4.5rem;
	z-index: 1;
}

.qoQ16CgY {
	width: 100%;
	max-width: 85%;
	display: flex;
	flex-direction: column;
}

.OBkTX2B_ {
	width: 140px;
	margin-bottom: 3.5rem;
	opacity: 0;
	animation: E7bqV5H7 0.6s ease forwards 0.1s;
}

.uBYiA2Io {
	font-size: 34px;
	font-weight: 700;
	color: var(--white);
	line-height: 1.2;
	margin-bottom: 0.5rem;
	opacity: 0;
	animation: E7bqV5H7 0.6s ease forwards 0.15s;
}

.uBYiA2Io span {
	color: var(--accent-1);
}

.oQmeip8p {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 2.75rem;
	opacity: 0;
	animation: E7bqV5H7 0.6s ease forwards 0.2s;
}

/* -----------------------------------------------------
	Form
------------------------------------------------------ */

.qhVSy5rp {
	display: flex;
	flex-direction: column;
	opacity: 0;
	animation: E7bqV5H7 0.6s ease forwards 0.25s;
}

.iLFfe9Dr {
	margin-bottom: 1.35rem;
}

.WmSZkEhA {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 0.5rem;
}

.OpiSl43t {
	width: 100%;
	height: 56px;
	padding: 0 1.15rem;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	display: flex;
	align-items: center;
	column-gap: 0.8rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.OpiSl43t:focus-within {
	border-color: var(--accent-1);
	box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.12);
}

.OpiSl43t i {
	color: rgba(255, 255, 255, 0.22);
	font-size: 15px;
	flex-shrink: 0;
	width: 16px;
	text-align: center;
	transition: color 0.2s ease;
}

.OpiSl43t:focus-within i {
	color: var(--accent-1);
}

.OpiSl43t input {
	flex: 1 1;
	background: none;
	border: none;
	outline: none;
	color: var(--white);
	font-size: 15px;
	font-family: var(--font-family);
	padding: 0;
}

.OpiSl43t input::placeholder {
	color: rgba(255, 255, 255, 0.18);
}

.I3DWCBDF {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.I3DWCBDF i {
	color: rgba(255, 255, 255, 0.22);
	font-size: 14px;
	transition: color 0.2s ease;
}

.I3DWCBDF:hover i {
	color: rgba(255, 255, 255, 0.45);
}

.goolU7r5 {
	width: 100%;
	height: 54px;
	margin-top: 2rem;
	background: var(--accent-1);
	border: none;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.1s ease;
}

.goolU7r5:hover {
	filter: brightness(1.12);
}

.goolU7r5:active {
	transform: scale(0.98);
}

.goolU7r5 p {
	color: var(--white);
	font-size: 16px;
	font-weight: 600;
}

.goolU7r5:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	filter: none;
	transform: none;
}

.Ev3Z0XZx {
	width: 100%;
	height: 54px;
	margin-top: 2rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.HSfVQZbS {
	height: 22px;
}

/* -----------------------------------------------------
	Login Link
------------------------------------------------------ */

.sV60eA3i {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1.5rem;
	gap: 0.25rem;
	opacity: 0;
	animation: E7bqV5H7 0.6s ease forwards 0.3s;
}

.sV60eA3i p {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.3);
}

.sV60eA3i button {
	background: none;
	border: none;
	color: var(--accent-1);
	font-size: 13px;
	font-family: var(--font-family);
	cursor: pointer;
	transition: color 0.2s ease;
}

.sV60eA3i button:hover {
	color: var(--white);
}

/* -----------------------------------------------------
	Right - Visual Panel
------------------------------------------------------ */

.CGeRhlx8 {
	height: 100%;
	position: relative;
	z-index: 1;
	background-color: var(--sub-bg-dark);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4rem;
	overflow: hidden;
}

.CGeRhlx8::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 30% 20%, rgba(13, 122, 199, 0.08) 0%, transparent 60%),
		radial-gradient(ellipse at 80% 80%, rgba(60, 162, 89, 0.04) 0%, transparent 50%);
	pointer-events: none;
}

/* Panel content */
.gB8pEYVe {
	position: relative;
	z-index: 1;
	opacity: 0;
	animation: vNbc8Em4 0.8s ease forwards 0.5s;
}

.mgYgyDiv {
	font-size: 28px;
	font-weight: 700;
	color: var(--white);
	line-height: 1.25;
	margin-bottom: 0.75rem;
}

.mgYgyDiv span {
	color: var(--accent-1);
}

.lPorvv1E {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.6;
	margin-bottom: 2.5rem;
	max-width: 400px;
}

/* Banner image */
.SyPUQXIm {
	position: relative;
	margin-bottom: 2.5rem;
	opacity: 0;
	animation: fOVfBSJ8 0.8s ease forwards 0.7s;
}

.flX36bEx {
	width: 100%;
	border-radius: 16px;
	display: block;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.4),
		0 0 0 1px rgba(255, 255, 255, 0.06);
}

.xP7lRSlu {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	pointer-events: none;
	background:
		linear-gradient(180deg, transparent 60%, rgba(22, 24, 36, 0.5) 100%);
}

/* Feature items */
.xeJbMs66 {
	display: flex;
	gap: 1.5rem;
	opacity: 0;
	animation: vNbc8Em4 0.8s ease forwards 0.9s;
}

.RyhD218d {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.PtZJgn2G {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 13px;
}

.zXlRvr1B {
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
}

.TTEWXRCq {
	background: rgba(60, 162, 89, 0.12);
	color: var(--success-green);
}

.sJKUWplJ {
	background: rgba(167, 139, 250, 0.12);
	color: #a78bfa;
}

.G4yV__Cb {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
}

/* -----------------------------------------------------
	Error Banner
------------------------------------------------------ */

.mUVblGkY {
	position: fixed;
	top: 1.25rem;
	left: 22%;
	transform: translateX(-50%);
	background: rgba(255, 60, 60, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 0.6rem 1.5rem;
	border-radius: 8px;
	animation: x7jbyvet 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 10;
}

.EAAknp1V {
	font-size: 13px;
	margin: 0;
	color: white;
	font-weight: 600;
	white-space: nowrap;
}

/* -----------------------------------------------------
	Animations
------------------------------------------------------ */

@keyframes E7bqV5H7 {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes vNbc8Em4 {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes fOVfBSJ8 {
	from { opacity: 0; transform: translateY(25px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes x7jbyvet {
	from { transform: translate(-50%, -120%); opacity: 0; }
	to { transform: translate(-50%, 0); opacity: 1; }
}

/* -----------------------------------------------------
	Media Queries
------------------------------------------------------ */

@media (max-width: 1024px) {
	.LMzKUODF {
		grid-template-columns: 50% 1fr;
	}

	.Crp1bMr8 {
		padding: 3rem 3rem;
	}

	.CGeRhlx8 {
		padding: 3rem;
	}

	.xeJbMs66 {
		gap: 1rem;
	}
}

@media (max-width: 768px) {
	.LMzKUODF {
		grid-template-columns: 1fr;
	}

	.CGeRhlx8 {
		display: none;
	}

	.Crp1bMr8 {
		padding: 3rem 2rem;
	}
}

@media (max-width: 480px) {
	.Crp1bMr8 {
		padding: 2rem 1.5rem;
	}

	.uBYiA2Io {
		font-size: 28px;
	}

	.OBkTX2B_ {
		width: 95px;
		margin-bottom: 2.5rem;
	}
}

.X801Mdwy {
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #01000D;
}

.AMJ0Xc4X {
  width: 35%;
}
/* -----------------------------------------------------
   404 Not Found Page Styling
------------------------------------------------------ */

.eyykdgpV {
	height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: var(--bg-dark);
	color: var(--white);
	text-align: center;
	row-gap: 1.25rem;
	animation: WFOXajyg 0.8s ease-in-out;
}

.WqcLfo24 {
	font-size: 6rem;
	font-weight: 800;
	color: var(--accent-1);
	margin: 0;
}

.gJQ9ekuH {
	font-size: 1.75rem;
	font-weight: 600;
	margin: 0;
}

._AuSVpSE {
	font-size: 15px;
	max-width: 500px;
	line-height: 1.6;
	opacity: 0.8;
}

.kVjVHH3E {
	background-color: var(--accent-1);
	color: var(--white);
	border: none;
	border-radius: 10px;
	padding: 12.5px 0;
	width: 200px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 0.75rem;
	font-weight: 600;
	font-size: 15px;
	transition: background-color 0.3s ease, transform 0.25s ease;
}

.kVjVHH3E:hover {
	background-color: #3d90c7;
	transform: translateY(-2px);
}

.NJz_6lAD {
	font-size: 12px;
	margin-top: 2rem;
	opacity: 0.5;
}

/* Optional animated icon container */
.FsE9_mkR {
	font-size: 5rem;
	color: var(--accent-1);
	animation: KdmLBgVs 2s ease-in-out infinite;
}

/* Animations */
@keyframes WFOXajyg {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes KdmLBgVs {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-8px);
	}
}

.QPSDmphA {
	font-weight: 600;
}

.D7qxFWFy {
	font-weight: 700;
}

._9kJWJYGz {
	font-size: 8px;
}

.fPZ16p_6 {
	font-size: 10px;
}

.X7ch6o0x {
	font-size: 12px;
}

.uyLiM87v {
	font-size: 14px;
}

.H0Hr7bdV {
	font-size: 15px;
}

.NhX92Ljl {
	font-size: 17px;
}

.LK15PCmp {
	font-size: 22px;
}

.W_4IFpxf {
	font-size: 25px;
}

.KYLyEZ4y {
	font-size: 35px;
}

._9JCoObKE {
	font-size: 38px;
}

.dVo9YCwC {
	font-size: 42px;
}

/* -----------------------------------------------------
	Layout & Grid System
------------------------------------------------------ */

.w49efau0 {
	position: relative;
}

.VRtUaLqC {
	height: 100vh;
	width: 100%;
	display: flex;
	overflow: hidden;
	background-color: var(--bg-dark);
	box-sizing: border-box;
	color: var(--white)
}

.DhrYlNtd {
	height: 100%;
	width: 100%;
	position: relative;
	background-color: var(--bg-dark);
	transition: background-color 400ms ease
}

.mjLnZnrm {
  opacity: 0;
  animation: qAWvSxXT 200ms ease-out forwards;
}

.I1d7Civ_ {
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 40px 60px 40px 60px;
	row-gap: 2.5rem;
	box-sizing: border-box;
	overflow-y: scroll;
}

.ugtIGhlZ {
	height: 100%;
	overflow: hidden;
	width: 100%;
	display: flex;
	column-gap: 1.25rem;
	flex-direction: column;
}

/* -----------------------------------------------------
	Banner
------------------------------------------------------ */

.toSGw07T {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
}

.aPzlfy4K h3 {
	margin: 0 0 0.25rem 0;
}

.aPzlfy4K p {
	margin: 0;
	opacity: 0.7;
}

.oZZWSm87 {
	height: 75%;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-column-gap: 1rem;
	column-gap: 1rem;
	position: relative;
}

.oQmS1i3I {
	width: 350px;
	box-sizing: border-box;
	border-radius: 50px;
	display: flex;
	align-items: center;
	position: relative;
	column-gap: 1rem;
	color: var(--bg-dark);
	background-color: var(--white);
}

.oQmS1i3I input {
	position: absolute;
	background: none;
	border: none;
	margin-left: 15px;
	width: calc(100% - (2rem));
	color: var(--bg-dark)
}

.wwK5Ip0F {
	display: flex;
	align-items: center;
	column-gap: .75rem;
	position: absolute;
	left: 10px;
	padding: 0 10px;
	box-sizing: border-box;
}

.fyftpf1p {
	position: absolute;
	width: 350px;
	height: 500px;
	background-color: white;
	top: 50px;
	z-index: 999;
	border-radius: 10px;
	overflow-y: scroll;
}

.aelJKfOM {
	padding: 15px 20px;
	box-sizing: border-box;
	color: var(--bg-dark);
	display: grid;
	grid-template-columns: 20px 1fr;
	align-items: center;
	grid-column-gap: .5rem;
	column-gap: .5rem;
	background: none;
  	width: 100%;
  	border: none;
  	text-align: left;
}

.Wud5g932 {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.bD2CUeg0 {
	height: 100%;
	aspect-ratio: 1;
	border-radius: 100%;
	background-color: var(--white);
	border: 1px solid var(--white);
}

.bD2CUeg0 i {
	color: var(--bg-dark);
}

/* -----------------------------------------------------
	Widget Container
------------------------------------------------------ */

.R0qES_wc {
	height: 100%;
	width: 100%;
	position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

.COZeW_fj {
	display: flex;
	flex-direction: column;
	row-gap: .5rem;
	height: 100%;
}

/* -----------------------------------------------------
	Stats Row
------------------------------------------------------ */

.Dfd8JpNO {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 1rem;
	gap: 1rem;
}

.BrycIHLc {
	background-color: var(--sub-bg-dark);
	border-radius: 12px;
	padding: 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	border: 1px solid #2d2f39;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.hkCvGD5N {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	background-color: rgba(255, 255, 255, 0.05);
	color: var(--white);
}

.HWzEac5S {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.HWzEac5S p {
	margin: 0;
}

.HWzEac5S p:first-child {
	color: #666;
}

.HWzEac5S p:last-child {
	color: var(--white);
}

/* -----------------------------------------------------
	Main Widget
------------------------------------------------------ */

.tt5vBZYP {
	flex: 1 1;
	background-color: var(--sub-bg-dark);
	border-radius: 15px;
	border: 1px solid #2d2f39;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}

.FFSAwtDv {
	padding: 1.25rem 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #2d2f39;
	flex-wrap: wrap;
	gap: 1rem;
}

.tcpzAfWv {
	display: flex;
	gap: 0.5rem;
}

.AFlI8VZq {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background-color: var(--bg-dark);
	border: 1px solid var(--bg-dark);
	border-radius: 8px;
	color: var(--white);
	cursor: pointer;
	transition: all 0.2s ease;
}

.AFlI8VZq:hover {
	background-color: rgba(255, 255, 255, 0.05);
}

.F_SEyrwH {
	background-color: var(--accent-1) !important;
	border-color: var(--accent-1) !important;
}

.ZwjvKIm0 {
	width: 28px;
	height: 28px;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.F_SEyrwH .ZwjvKIm0 {
	background-color: rgba(255, 255, 255, 0.2);
}

.hWN0eW41 {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.MutpTGhM {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	padding: 0.5rem 1rem;
	min-width: 220px;
}

.MutpTGhM i {
	color: #666;
	font-size: 14px;
}

.MutpTGhM input {
	background: none;
	border: none;
	color: var(--white);
	font-size: 14px;
	width: 100%;
	outline: none;
}

.MutpTGhM input::placeholder {
	color: #666;
}

.SedxU5Tn {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.25rem;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 8px;
	color: var(--white);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.SedxU5Tn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

.SedxU5Tn i {
	font-size: 12px;
}

/* -----------------------------------------------------
	Widget Content
------------------------------------------------------ */

.bduxtEyc {
	flex: 1 1;
	padding: 1.5rem;
	overflow-y: auto;
	min-height: 0;
}

.CVN2B6jt {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	grid-gap: 1rem;
	gap: 1rem;
}

/* -----------------------------------------------------
	Item Cards (Tags & Tickets)
------------------------------------------------------ */

.wGTB1Np7 {
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 12px;
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	transition: all 0.2s ease;
}

.wGTB1Np7:hover {
	border-color: #3d3f49;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.QI4jDAB1 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.dVoola8L {
	width: 12px;
	height: 40px;
	border-radius: 6px;
	flex-shrink: 0;
}

.hv9PAKka {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.Ss3qnxUR {
	background-color: rgba(34, 197, 94, 0.15);
	color: #22c55e;
}

.r7_C6iqc {
	background-color: rgba(59, 130, 246, 0.15);
	color: #3b82f6;
}

.WOZw1CYe {
	background-color: rgba(245, 158, 11, 0.15);
	color: #f59e0b;
}

.TZ379gC3 {
	flex: 1 1;
	min-width: 0;
}

.TZ379gC3 p {
	margin: 0;
}

.TZ379gC3 p:first-child {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.TZ379gC3 p:last-child {
	color: #888;
	margin-top: 0.25rem;
}

/* Title Row with Default Badge */
.kELV0hND {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.bnZUmpdJ {
	background-color: rgba(34, 197, 94, 0.15);
	color: #22c55e;
	font-size: 10px;
	font-weight: 600;
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Default Toggle */
.HqHuuowu {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.875rem 1rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	color: #888;
	cursor: pointer;
	transition: all 0.2s ease;
	width: 100%;
	text-align: left;
}

.HqHuuowu:hover {
	border-color: #3d3f49;
}

.h8COjmnY {
	background-color: rgba(34, 197, 94, 0.1);
	border-color: #22c55e;
	color: var(--white);
}

.hKONK9QQ {
	width: 20px;
	height: 20px;
	border: 2px solid #3d3f49;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.h8COjmnY .hKONK9QQ {
	background-color: #22c55e;
	border-color: #22c55e;
}

.hKONK9QQ i {
	font-size: 10px;
	color: var(--white);
}

.ID0JARO5 {
	opacity: 0.7;
	cursor: not-allowed;
}

.MFGhtd9v {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	background-color: #1a1b23;
	color: #fff;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	font-size: 11px;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	z-index: 100;
	border: 1px solid #2d2f39;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.QJIXRCcZ:hover .MFGhtd9v {
	opacity: 1;
	visibility: visible;
}

.ZL9BJd6y {
	color: #22c55e !important;
}

.OmtH2XMR {
	color: #3b82f6 !important;
	font-weight: 600;
}

.i0KkKzpY {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.25rem;
}

.i0KkKzpY p {
	margin: 0 !important;
}

.yqIje8PC {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	background-color: rgba(245, 158, 11, 0.15);
	color: #f59e0b;
	font-size: 9px;
	font-weight: 600;
	padding: 0.15rem 0.45rem;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.yqIje8PC i {
	font-size: 8px;
}

.K7F74gTt {
	display: flex;
	gap: 0.5rem;
}

.ZgkDAi0u {
	width: 32px;
	height: 32px;
	background-color: rgba(255, 255, 255, 0.05);
	border: none;
	border-radius: 6px;
	color: #888;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.ZgkDAi0u:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--white);
}

.ocMx3Wpx:hover {
	background-color: rgba(239, 68, 68, 0.15);
	color: #ef4444;
}

/* Disabled Action Buttons & Tooltips */
.QJIXRCcZ {
	position: relative;
	display: inline-block;
}

.LHJhFrM4 {
	opacity: 0.35;
	cursor: not-allowed !important;
	pointer-events: none;
}

.QJIXRCcZ:has(.LHJhFrM4) {
	cursor: not-allowed;
	pointer-events: auto;
}

.QJIXRCcZ:has(.LHJhFrM4) .LHJhFrM4 {
	pointer-events: none;
}

.zJ0cbtnS {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	background-color: #1a1b23;
	color: #fff;
	padding: 0.5rem 0.75rem;
	border-radius: 6px;
	font-size: 11px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	z-index: 100;
	border: 1px solid #2d2f39;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.zJ0cbtnS::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: #1a1b23;
}

.QJIXRCcZ:hover .zJ0cbtnS {
	opacity: 1;
	visibility: visible;
}

.EHvZSuLl {
	display: flex;
	gap: 1.5rem;
}

.UwiUcDY8 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #888;
}

.UwiUcDY8 i {
	font-size: 12px;
}

.AHeaQcLY {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid #2d2f39;
}

.SIK_DORU {
	background-color: rgba(255, 255, 255, 0.08);
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 11px;
	color: #aaa;
}

.Up8NNFDw {
	background-color: rgba(0, 191, 255, 0.15);
	color: #00bfff;
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 11px;
}

/* -----------------------------------------------------
	Empty State
------------------------------------------------------ */

.Mj_lM_aW {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
	text-align: center;
}

.TX19KOGb {
	width: 80px;
	height: 80px;
	background: linear-gradient(135deg, rgba(0, 191, 255, 0.1) 0%, rgba(0, 191, 255, 0.05) 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.TX19KOGb i {
	font-size: 32px;
	color: #00bfff;
}

.Mj_lM_aW h3 {
	margin: 0 0 0.5rem 0;
	color: var(--white);
}

.Mj_lM_aW p {
	margin: 0 0 1.5rem 0;
	color: #888;
}

.QxheevBF {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 8px;
	color: var(--white);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.QxheevBF:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

/* -----------------------------------------------------
	Loading State
------------------------------------------------------ */

.eFoWw8gJ {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem;
	gap: 1rem;
}

.wgx3PnDF {
	width: 40px;
	height: 40px;
	border: 3px solid #2d2f39;
	border-top-color: var(--accent-1);
	border-radius: 50%;
	animation: lFTVVjrb 1s linear infinite;
}

@keyframes lFTVVjrb {
	to { transform: rotate(360deg); }
}

/* -----------------------------------------------------
	Modal Styles
------------------------------------------------------ */

.WojJ2FiM {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 2rem;
}

.U__Qtrro {
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 16px;
	width: 100%;
	max-width: 580px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: rbWZexjK 0.2s ease-out;
}

@keyframes rbWZexjK {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.WRsjaPpm {
	padding: 1.5rem;
	border-bottom: 1px solid #2d2f39;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.WRsjaPpm h3 {
	margin: 0;
	color: var(--white);
}

.bxK6jplB {
	width: 36px;
	height: 36px;
	background-color: rgba(255, 255, 255, 0.05);
	border: none;
	border-radius: 8px;
	color: #888;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: all 0.2s ease;
}

.bxK6jplB:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--white);
}

.lulI3Dyj {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1 1;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.IsEj5o1Y {
	height: 1px;
	background-color: #2d2f39;
	margin: 0 -1.5rem;
	width: calc(100% + 3rem);
}

.lZDd5Mpd {
	padding: 1.5rem;
	border-top: 1px solid #2d2f39;
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
}

/* -----------------------------------------------------
	Form Styles
------------------------------------------------------ */

.yZQaTt36 {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.JJmZ5O4a {
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
}

.I3yvy9DV {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

._5XFL4nc {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	padding: 0.875rem 1rem;
	transition: border-color 0.2s ease;
}

._5XFL4nc:focus-within {
	border-color: var(--accent-1);
}

._5XFL4nc i {
	color: #666;
	font-size: 14px;
}

._5XFL4nc input {
	background: none;
	border: none;
	color: var(--white);
	font-size: 14px;
	width: 100%;
	outline: none;
}

._5XFL4nc input::placeholder {
	color: #666;
}

/* Color Picker */
.ngh6IBMD {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	grid-gap: 0.5rem;
	gap: 0.5rem;
}

.acwXV986 {
	width: 100%;
	aspect-ratio: 1;
	border-radius: 8px;
	border: 2px solid transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
}

.acwXV986:hover {
	transform: scale(1.1);
}

.eRY0RUHG {
	border-color: var(--white) !important;
	box-shadow: 0 0 0 2px var(--bg-dark);
}

.acwXV986 i {
	color: var(--white);
	font-size: 12px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.Os5EBWR0 {
	margin-top: 0.5rem;
}

.CQdwUXua {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem 1rem;
	border-radius: 20px;
	color: var(--white);
	font-size: 13px;
	font-weight: 500;
}

/* Pricing Toggle */
.n9Vucw4C {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 0.75rem;
	gap: 0.75rem;
}

.kqBz12S2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	color: #888;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.kqBz12S2:hover {
	border-color: #3d3f49;
}

.RgWUCTaQ {
	background-color: rgba(0, 191, 255, 0.1);
	border-color: var(--accent-1);
	color: var(--white);
}

.RgWUCTaQ i {
	color: var(--accent-1);
}

.OHQObN2e {
	display: flex;
	flex-direction: column;
}

.xBQ2_eHZ {
	margin: 10px 0 0 auto;
	color: #ef4444;
	font-size: 12px;
}

.UO7OgRxE {
	display: flex;
	align-items: center;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	padding: 0 1rem;
	margin-top: 0.75rem;
	transition: border-color 0.2s ease;
}

.UO7OgRxE:focus-within {
	border-color: var(--accent-1);
}

.Cdfd6kYo {
	color: #666;
	font-size: 16px;
	font-weight: 500;
}

.sOp99zPO {
	background: none;
	border: none;
	color: var(--white);
	font-size: 18px;
	font-weight: 500;
	padding: 0.875rem 0.5rem;
	width: 100%;
	outline: none;
}

.sOp99zPO::placeholder {
	color: #444;
}

/* Venue Selection */
.wy2MtDbu {
	background: none;
	border: none;
	color: #00bfff;
	font-size: 12px;
	cursor: pointer;
	padding: 0;
}

.wy2MtDbu:hover {
	text-decoration: underline;
}

.kpq2jnno {
	max-height: 200px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding-right: 0.5rem;
}

.kpq2jnno::-webkit-scrollbar {
	width: 6px;
}

.kpq2jnno::-webkit-scrollbar-track {
	background: var(--sub-bg-dark);
	border-radius: 3px;
}

.kpq2jnno::-webkit-scrollbar-thumb {
	background: #3d3f49;
	border-radius: 3px;
}

.on7m9WEO {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: var(--white);
	cursor: pointer;
	transition: all 0.2s ease;
	width: 100%;
	text-align: left;
}

.on7m9WEO:hover {
	border-color: #3d3f49;
}

.H7fYADmx {
	background-color: rgba(0, 191, 255, 0.1);
	border-color: var(--accent-1);
}

.jhb3uV4k {
	width: 20px;
	height: 20px;
	border: 2px solid #3d3f49;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.H7fYADmx .jhb3uV4k {
	background-color: var(--accent-1);
	border-color: var(--accent-1);
}

.jhb3uV4k i {
	font-size: 10px;
	color: var(--white);
}

.C0AltI7L {
	color: #666;
	text-align: center;
	padding: 2rem;
	margin: 0;
}

/* Locked/Disabled Field Styles */
.j7m5Avvb {
	color: #f59e0b;
	font-size: 10px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}

.bfXNcboi {
	opacity: 0.5;
	pointer-events: none;
}

.srkQzLNO {
	cursor: not-allowed;
	opacity: 0.5;
}

.srkQzLNO .jhb3uV4k {
	background-color: #2d2f39 !important;
	border-color: #2d2f39 !important;
	color: #555 !important;
}

/* Modal Buttons */
.O2_TtI0w {
	padding: 0.75rem 1.5rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: var(--white);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.O2_TtI0w:hover {
	background-color: #2d2f39;
}

.gUv2OiOD {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 8px;
	color: var(--white);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.gUv2OiOD:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

.gUv2OiOD:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* -----------------------------------------------------
	Delete Modal
------------------------------------------------------ */

.PfSB3rH1 {
	max-width: 400px;
	text-align: center;
	padding: 2rem;
}

.yOQS4aVf {
	width: 64px;
	height: 64px;
	background-color: rgba(239, 68, 68, 0.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
}

.yOQS4aVf i {
	font-size: 28px;
	color: #ef4444;
}

.PfSB3rH1 h3 {
	margin: 0 0 0.75rem 0;
	color: var(--white);
}

.PfSB3rH1 p {
	margin: 0 0 1.5rem 0;
	color: #888;
	line-height: 1.5;
}

.LMiF2fEh {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
}

.Eid8B_vg {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background-color: #ef4444;
	border: none;
	border-radius: 8px;
	color: var(--white);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.Eid8B_vg:hover {
	background-color: #dc2626;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* -----------------------------------------------------
	Animations
------------------------------------------------------ */

@keyframes qAWvSxXT {
  to {
    opacity: 1;
  }
}

/* -----------------------------------------------------
	Ticket Mode Selection
------------------------------------------------------ */

.SqwbfsYh {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 0.75rem;
	gap: 0.75rem;
}

.genp9xig {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 1.1rem 1rem;
	background-color: var(--sub-bg-dark);
	border: 1.5px solid #2d2f39;
	border-radius: 12px;
	color: #888;
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
}

.genp9xig:hover {
	border-color: #3d3f49;
	color: var(--white);
}

.XxwCiXoZ {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	background-color: rgba(255, 255, 255, 0.06);
	transition: all 0.2s ease;
}

.Bf6Pp_qs {
	font-size: 15px;
	font-weight: 600;
}

.dPBoVFik {
	font-size: 11px;
	opacity: 0.6;
}

.m9jNBwQh {
	border-color: var(--accent-1);
	color: var(--white);
	background-color: rgba(13, 122, 199, 0.08);
}

.m9jNBwQh .XxwCiXoZ {
	background-color: rgba(13, 122, 199, 0.15);
	color: var(--accent-1);
}

.pUMV7DLI {
	border-color: #f59e0b;
	color: var(--white);
	background-color: rgba(245, 158, 11, 0.08);
}

.pUMV7DLI .XxwCiXoZ {
	background-color: rgba(245, 158, 11, 0.15);
	color: #f59e0b;
}

/* -----------------------------------------------------
	Pricing Rules Builder (Live mode)
------------------------------------------------------ */

.jHBHmii1 {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.uWL32Gat {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	padding: 0.875rem 1rem;
	transition: border-color 0.2s ease;
}

.uWL32Gat:hover {
	border-color: #3d3f49;
}

.DsZ_MoJR {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
}

.GWbJDaIj {
	font-size: 10px;
	font-weight: 600;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.JWFTj8RU {
	margin: -4px 0 8px 0;
	font-size: 12px;
	color: #555;
}

.IKqgOkzS {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: rgba(245, 158, 11, 0.15);
	color: #f59e0b;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	flex-shrink: 0;
}

.ZRqHAPAP {
	background-color: rgba(99, 102, 241, 0.15);
	color: #818cf8;
}

.UuOTpkWH {
	border-color: rgba(99, 102, 241, 0.2);
}

.zZkWU0V3 {
	border-color: var(--accent-1);
	background-color: rgba(13, 122, 199, 0.04);
}

.zZkWU0V3 .IKqgOkzS {
	background-color: rgba(13, 122, 199, 0.2);
	color: var(--accent-1);
}

.Usz9H7Ab {
	flex: 1 1;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.bAO_JqK1 {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	width: 100px;
	flex-shrink: 0;
	transition: border-color 0.2s ease;
}

.bAO_JqK1:focus-within {
	border-color: var(--accent-1);
}

.sgRySGYs {
	background: none;
	border: none;
	color: var(--white);
	font-size: 15px;
	font-weight: 500;
	width: 100%;
	min-width: 0;
	outline: none;
	padding: 0 0 0 0.25rem;
}

.sgRySGYs::placeholder {
	color: #444;
}

.Usz9H7Ab > .ZL9BJd6y {
	color: var(--success-green);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	flex-shrink: 0;
}

.evPn_yqA {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex: 1 1;
	min-width: 0;
}

.Lufnn5zx {
	color: #888;
	font-size: 13px;
	white-space: nowrap;
}

.EU878SPm {
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: var(--white);
	font-size: 14px;
	padding: 0.5rem 0.75rem;
	outline: none;
	flex: 1 1;
	min-width: 0;
	transition: border-color 0.2s ease;
	color-scheme: dark;
}

.EU878SPm:focus {
	border-color: var(--accent-1);
}

.sgvBz3tI {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #f59e0b;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
}

.sgvBz3tI i {
	font-size: 12px;
}

.esz1ngmh {
	width: 32px;
	height: 32px;
	background-color: rgba(255, 255, 255, 0.05);
	border: none;
	border-radius: 6px;
	color: #888;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.esz1ngmh:hover {
	background-color: rgba(239, 68, 68, 0.15);
	color: #ef4444;
}

.PjJRsmDJ {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem;
	background: none;
	border: 1.5px dashed #2d2f39;
	border-radius: 10px;
	color: #888;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 0.25rem;
}

.PjJRsmDJ:hover {
	border-color: #f59e0b;
	color: #f59e0b;
	background-color: rgba(245, 158, 11, 0.05);
}

._7bu3wyi {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0.5rem 0 0 0;
	font-size: 12px;
	color: #555;
}

._7bu3wyi i {
	font-size: 11px;
}

/* -----------------------------------------------------
   VIP Services Tab
------------------------------------------------------ */

.HMOCEnk0 {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.GlJeQiGj {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.qi0M86tv {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.TjLYWCQd {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--white);
}

.TjLYWCQd i {
	font-size: 18px;
	color: #888;
}

.TjLYWCQd h3 {
	margin: 0;
}

.AYIm3pvS {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 2.5rem 2rem;
	color: #888;
	background-color: var(--bg-dark);
	border: 1px dashed #2d2f39;
	border-radius: 12px;
	gap: 0.5rem;
}

.AYIm3pvS p:last-of-type {
	color: #555;
	max-width: 280px;
	line-height: 1.4;
}

.nAca35LD {
	margin-bottom: 0.5rem;
}

.vfPbl381 {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}

.LpBzLXBl {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	padding: 0.6rem 1.25rem;
	border: none;
	border-radius: 8px;
	color: var(--white);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.LpBzLXBl:hover {
	transform: translateY(-1px);
}

.uLt8zv7g {
	background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.uLt8zv7g:hover {
	box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.mA5Rj1iQ {
	background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.mA5Rj1iQ:hover {
	box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

/* VIP Card Icons */
.tZk9oSol {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.GFGmAG_W {
	background-color: rgba(245, 158, 11, 0.15);
	color: #f59e0b;
}

.yV3KmlPV {
	background-color: rgba(236, 72, 153, 0.15);
	color: #ec4899;
}

/* VIP Modal Textarea */
.nNTZ72Mh {
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	padding: 0.875rem 1rem;
	color: var(--white);
	font-size: 14px;
	font-family: inherit;
	resize: vertical;
	outline: none;
	transition: border-color 0.2s ease;
	min-height: 80px;
	width: 100%;
	box-sizing: border-box;
}

.nNTZ72Mh:focus {
	border-color: var(--accent-1);
}

.nNTZ72Mh::placeholder {
	color: #666;
}

/* -----------------------------------------------------
	Responsive Design
------------------------------------------------------ */

@media (max-width: 1200px) {
	.Dfd8JpNO {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.I1d7Civ_ {
		padding: 20px 30px;
	}

	.Dfd8JpNO {
		grid-template-columns: 1fr;
	}

	.FFSAwtDv {
		flex-direction: column;
		align-items: stretch;
	}

	.tcpzAfWv {
		justify-content: center;
	}

	.hWN0eW41 {
		flex-direction: column;
	}

	.MutpTGhM {
		min-width: 100%;
	}

	.SedxU5Tn {
		width: 100%;
		justify-content: center;
	}

	.CVN2B6jt {
		grid-template-columns: 1fr;
	}

	.ngh6IBMD {
		grid-template-columns: repeat(6, 1fr);
	}

	.oZZWSm87 {
		display: none;
	}

	.zJ0cbtnS {
		left: auto;
		right: 0;
		transform: none;
	}

	.zJ0cbtnS::after {
		left: auto;
		right: 10px;
		transform: none;
	}
}

@media (max-width: 480px) {
	.U__Qtrro {
		margin: 1rem;
		max-height: calc(100vh - 2rem);
	}

	.n9Vucw4C {
		grid-template-columns: 1fr;
	}

	.SqwbfsYh {
		grid-template-columns: 1fr;
	}

	.Usz9H7Ab {
		flex-direction: column;
		align-items: stretch;
	}

	.bAO_JqK1 {
		width: 100%;
	}
}

/* ──────────────────────────────────────────────────────────────
   Products page v2 - Venues-style chrome + left filter sidebar
   + editable drawer. The classes below are scoped to the new
   layout; everything above this banner is the legacy modal /
   card form styling that the drawer still reuses for its form
   fields (form_group, input_container, venue_list, etc.).
   ────────────────────────────────────────────────────────────── */

.yLWF7OXY {
	height: 100vh;
	width: 100%;
	display: flex;
	overflow: hidden;
	background-color: var(--bg-dark);
	box-sizing: border-box;
	color: var(--white);
}

.M9xOxSBx {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 40px 60px 0;
	row-gap: 2.5rem;
	box-sizing: border-box;
}

.ZUF6eiaJ {
	flex: 1 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.C58hdS9W {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

/* Toolbar - tab strip on the left, search + add on the right */
.bIefa8AG {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	flex-shrink: 0;
}

.jaxOy2zw {
	display: inline-flex;
	border-radius: 10px;
	border: 1px solid var(--border-soft);
	background: rgba(255,255,255,0.02);
	overflow: hidden;
	flex-shrink: 0;
}

.jhWwB4hp {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	background: transparent;
	border: none;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}

.jhWwB4hp:hover { color: var(--white); }

.lVpeBtI9 {
	background: rgba(13,122,199,0.18);
	color: var(--white);
}

.cK0gZfzI {
	font-size: 11px;
	background: rgba(255,255,255,0.08);
	color: var(--text-muted);
	border-radius: 999px;
	padding: 1px 7px;
	font-weight: 700;
}

.lVpeBtI9 .cK0gZfzI {
	background: rgba(13,122,199,0.3);
	color: var(--white);
}

._MBYdJpi { flex: 1 1; }

.CjbyIZ9Z {
	position: relative;
	flex: 1 1;
	max-width: 340px;
}

.CjbyIZ9Z i {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	font-size: 13px;
	pointer-events: none;
}

.CjbyIZ9Z input {
	width: 100%;
	padding: 8px 12px 8px 34px;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	color: var(--white);
	font-family: inherit;
	font-size: 13px;
	outline: none;
	transition: border-color 0.15s ease;
	box-sizing: border-box;
}

.CjbyIZ9Z input:focus { border-color: rgba(13,122,199,0.5); }
.CjbyIZ9Z input::placeholder { color: var(--text-muted); }

.CKQ2IeNL {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	background: var(--accent-1);
	color: var(--white);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease;
	flex-shrink: 0;
}

.CKQ2IeNL:hover { background: #1389d8; }

/* Body - filter sidebar on the left, list column on the right */
.U_HacZIC {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	grid-gap: 16px;
	gap: 16px;
	flex: 1 1;
	min-height: 0;
	overflow: hidden;
}

/* ── Filter sidebar (left rail) ────────────────────────── */
.WtpMNVD7 {
	background: var(--sub-bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 14px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	overflow-y: auto;
	min-width: 0;
	margin-bottom: 40px;
}

.WtpMNVD7::-webkit-scrollbar { width: 4px; }
.WtpMNVD7::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

.LHfRhfCH {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--white);
	font-size: 13px;
	font-weight: 700;
}

.LHfRhfCH i { color: var(--accent-1); font-size: 11px; }

.S1FzMK8A {
	margin-left: auto;
	background: transparent;
	border: none;
	color: var(--text-muted);
	font-family: inherit;
	font-size: 11px;
	cursor: pointer;
	padding: 2px 6px;
	border-radius: 6px;
	transition: all 0.15s ease;
}

.S1FzMK8A:hover { color: var(--white); background: rgba(255,255,255,0.05); }

.ODXQ6sYC {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 8px;
}

.uDvTKHZp { display: flex; flex-direction: column; gap: 4px; }

.BVc6ftya {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
	width: 100%;
	text-align: left;
	transition: all 0.15s ease;
}

.BVc6ftya:hover {
	color: var(--white);
	background: rgba(255, 255, 255, 0.025);
}

.fB0CVDUv {
	color: var(--white);
	background: rgba(13, 122, 199, 0.12);
	border-color: rgba(13, 122, 199, 0.4);
}

.MfTR0xfg {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	color: var(--text-muted);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.fB0CVDUv .MfTR0xfg { color: var(--white); }

.G6Nd3fAp {
	width: 14px;
	height: 14px;
	border-radius: 4px;
	border: 1.5px solid rgba(255,255,255,0.18);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	font-size: 8px;
	flex-shrink: 0;
}

.fB0CVDUv .G6Nd3fAp {
	background: var(--accent-1);
	border-color: var(--accent-1);
}

.eZAMFbTo {
	margin: 0;
	font-size: 11px;
	color: var(--text-muted);
	padding: 4px 10px;
}

.I_Liugnc {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	background: transparent;
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
	width: 100%;
	text-align: left;
	transition: all 0.15s ease;
}

.I_Liugnc:hover { color: var(--white); border-color: rgba(255,255,255,0.12); }

.T8JAeen0 {
	color: var(--white);
	border-color: rgba(13, 122, 199, 0.5);
	background: rgba(13, 122, 199, 0.08);
}

.XqOEVQUS {
	margin-left: auto;
	width: 28px;
	height: 16px;
	border-radius: 999px;
	background: rgba(255,255,255,0.1);
	position: relative;
	transition: background 0.15s ease;
	flex-shrink: 0;
}

.XqOEVQUS::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--white);
	transition: transform 0.15s ease;
}

.T8JAeen0 .XqOEVQUS { background: var(--accent-1); }
.T8JAeen0 .XqOEVQUS::after { transform: translateX(12px); }

/* ── List column ───────────────────────────────────────── */
.iTRejGi4 {
	display: flex;
	flex-direction: column;
	gap: 1px;
	overflow-y: auto;
	padding-right: 2px;
	padding-bottom: 40px;
}

.iTRejGi4::-webkit-scrollbar { width: 4px; }
.iTRejGi4::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

/* Product row (mirrors Venues row exactly) */
.H4Vv64te {
	display: grid;
	grid-template-columns: 44px minmax(0,1fr) auto auto;
	align-items: center;
	grid-gap: 14px;
	gap: 14px;
	padding: 14px 16px;
	background: var(--sub-bg-dark);
	border: 1px solid rgba(255,255,255,0.04);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.15s ease;
	margin-bottom: 6px;
}

.H4Vv64te:hover { border-color: rgba(255,255,255,0.1); background: rgba(22,24,36,0.9); }

.Ub4zPWW6 {
	border-color: rgba(13,122,199,0.55) !important;
	background: rgba(13,122,199,0.06) !important;
}

.LstNEhZj {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--white);
	flex-shrink: 0;
}

.v9dkL41Q { min-width: 0; }

.onT0Veyc {
	font-size: 14px;
	font-weight: 700;
	color: var(--white);
	margin: 0 0 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 6px;
}

.vmuh_C2L {
	font-size: 12px;
	color: var(--text-muted);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.InkOTBmZ { display: inline-flex; gap: 4px; flex-shrink: 0; }

.WKWnSbxi {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	flex-shrink: 0;
}

.PuhHg2ot {
	background: rgba(13,122,199,0.15);
	color: #6db8ed;
	border: 1px solid rgba(13,122,199,0.2);
}

.Z9ICEyqa {
	background: rgba(34,197,94,0.12);
	color: #4ade80;
	border: 1px solid rgba(34,197,94,0.2);
}

.AHEsYxSH {
	background: rgba(34,197,94,0.12);
	color: #4ade80;
	border: 1px solid rgba(34,197,94,0.2);
}

.UqMkobmW {
	background: rgba(245,158,11,0.12);
	color: #fbbf24;
	border: 1px solid rgba(245,158,11,0.2);
}

.e5fulQ_0 {
	background: rgba(139,92,246,0.15);
	color: #a78bfa;
	border: 1px solid rgba(139,92,246,0.2);
}

.pbXiNOEm {
	color: var(--text-muted);
	font-size: 11px;
}

.gwU1exMI {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 60px 20px;
	color: var(--text-muted);
	text-align: center;
}

.gwU1exMI i { font-size: 32px; opacity: 0.4; }
.gwU1exMI p { margin: 0; font-size: 13px; }

.sZejR9gM {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--accent-1);
	color: var(--white);
	border: none;
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 6px;
}

.sZejR9gM:hover { background: #1389d8; }

/* ── Drawer ────────────────────────────────────────────── */
.KEmnVOzU {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 1000;
	animation: CocaFEqV 0.2s ease;
}

.T6wCXxQb {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 640px;
	max-width: 92vw;
	background: rgba(20, 22, 30, 0.78);
	backdrop-filter: blur(24px) saturate(170%);
	-webkit-backdrop-filter: blur(24px) saturate(170%);
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	z-index: 1001;
	display: flex;
	flex-direction: column;
	box-shadow: -16px 0 40px rgba(0, 0, 0, 0.4);
	animation: Xw6ZGYYc 0.28s ease;
}

@keyframes CocaFEqV    { from { opacity: 0; }    to { opacity: 1; } }
@keyframes qmKjpy4C { from { opacity: 1; }    to { opacity: 0; } }
@keyframes Xw6ZGYYc   { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes EoUxX_kv{ from { transform: translateX(0); } to   { transform: translateX(100%); } }

.NtAwh6Fg          { animation: EoUxX_kv 0.26s cubic-bezier(0.4, 0, 1, 1) forwards; }
.LCS7yYyy { animation: qmKjpy4C 0.22s ease forwards; }

.MEQdtlg4 {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.4rem 1.5rem;
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.045) 0%,
			rgba(255, 255, 255, 0.012) 100%),
		rgba(20, 22, 30, 0.55);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
}

.Kwxwzmkz {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 1px solid #2d2f39;
	background: rgba(255, 255, 255, 0.02);
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-family: inherit;
	transition: all 0.15s ease;
}

.Kwxwzmkz:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
	border-color: #3d4052;
}

.pBRLm5cr { flex: 1 1; min-width: 0; }

.lOiUM0EH {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--white);
}

.E0gVug4F {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
	font-size: 12px;
	color: var(--text-muted);
	flex-wrap: wrap;
}

.s2JweAqV {
	flex: 1 1;
	overflow-y: auto;
	padding: 24px 28px;
	background: var(--bg-dark);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.s2JweAqV::-webkit-scrollbar { width: 4px; }
.s2JweAqV::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

/* ── Drawer-scoped form-widget overrides ───────────────────
   The drawer reuses the legacy modal form classes (form_group,
   input_container, mode_card, venue_option, default_toggle,
   pricing_toggle, color_grid, vip_textarea, price_input, etc.)
   but those were sized for a big centered modal. Inside the
   drawer we slim them down to match the venue-edit drawer's
   proportions: 11px uppercase labels, 13px input font, 9-10px
   vertical padding, subtle 4% backgrounds and 8-9px radii. */

.s2JweAqV .yZQaTt36 { gap: 4px; }

/* Zero out per-input baseline margins so the form-group `gap` is the
   only thing that contributes to label→input spacing. The legacy
   modal styles bake non-trivial margins onto a few inputs (price
   container, color preview, mode grid, etc.); inside the drawer we
   strip them so every label sits exactly the form-group gap above
   its input. */
.s2JweAqV .yZQaTt36 > * {
	margin-top: 0;
	margin-bottom: 0;
}

.s2JweAqV .JJmZ5O4a,
.s2JweAqV .X7ch6o0x.JJmZ5O4a,
.s2JweAqV label.JJmZ5O4a {
	font-size: 11px !important;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.45);
}

.s2JweAqV .I3yvy9DV { align-items: center; }

.s2JweAqV ._5XFL4nc {
	gap: 0.6rem;
	padding: 9px 12px;
	background: rgba(255,255,255,0.04);
	border-radius: 9px;
}
.s2JweAqV ._5XFL4nc i { font-size: 12px; }
.s2JweAqV ._5XFL4nc input {
	font-size: 13px;
}
.s2JweAqV ._5XFL4nc .uyLiM87v { font-size: 13px !important; }

.s2JweAqV .nNTZ72Mh {
	background: rgba(255,255,255,0.04);
	border-radius: 9px;
	padding: 9px 12px;
	font-size: 13px;
	min-height: 88px;
	line-height: 1.55;
}

/* Pricing toggle (Free / Paid) */
.s2JweAqV .n9Vucw4C { gap: 6px; }
.s2JweAqV .kqBz12S2 {
	padding: 9px 12px;
	font-size: 13px;
	border-radius: 9px;
	background: rgba(255,255,255,0.04);
}
.s2JweAqV .kqBz12S2 i { font-size: 12px; }

/* Price input (regular ticket / VIP booth) */
.s2JweAqV .UO7OgRxE {
	background: rgba(255,255,255,0.04);
	border-radius: 9px;
	padding: 0 12px;
	margin-top: 0;
}
.s2JweAqV .Cdfd6kYo { font-size: 14px; }
.s2JweAqV .sOp99zPO {
	font-size: 14px;
	padding: 10px 6px;
}

/* Mode picker / VIP category picker (the two big cards) */
.s2JweAqV .SqwbfsYh { gap: 10px; }
.s2JweAqV .genp9xig {
	padding: 12px 14px;
	gap: 6px;
	border-radius: 10px;
}
.s2JweAqV .XxwCiXoZ {
	width: 30px;
	height: 30px;
	font-size: 13px;
}
.s2JweAqV .Bf6Pp_qs { font-size: 13px; }
.s2JweAqV .dPBoVFik  { font-size: 11px; }

/* "Set as default" check row */
.s2JweAqV .HqHuuowu {
	padding: 10px 12px;
	gap: 0.6rem;
	border-radius: 9px;
	background: rgba(255,255,255,0.04);
}
.s2JweAqV .HqHuuowu .uyLiM87v { font-size: 13px !important; }
.s2JweAqV .hKONK9QQ {
	width: 18px;
	height: 18px;
	border-radius: 5px;
}

/* Color grid (tag color picker) */
.s2JweAqV .ngh6IBMD {
	grid-template-columns: repeat(9, 1fr);
	gap: 6px;
}
.s2JweAqV .acwXV986 { border-radius: 6px; }
.s2JweAqV .Os5EBWR0 { margin-top: 4px; }
.s2JweAqV .CQdwUXua { font-size: 12px; padding: 4px 10px; }

/* Venue list (all three product types). The drawer body already
   provides the scroll viewport, so we drop the legacy max-height
   and let the list grow to its natural height - otherwise venues
   past the inner cap get cut off. */
.s2JweAqV .kpq2jnno {
	gap: 4px;
	max-height: none;
	overflow: visible;
	padding-right: 0;
}

/* Search input above the venue picker */
.gPrzXUpP {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--border-soft);
	border-radius: 9px;
	transition: border-color 0.15s ease;
}
.gPrzXUpP:focus-within { border-color: rgba(13,122,199,0.55); }
.gPrzXUpP > i {
	color: var(--text-muted);
	font-size: 12px;
}
.gPrzXUpP input {
	flex: 1 1;
	min-width: 0;
	background: transparent;
	border: none;
	color: var(--white);
	font-family: inherit;
	font-size: 13px;
	outline: none;
	padding: 0;
}
.gPrzXUpP input::placeholder { color: var(--text-muted); }
.QNpmLdK0 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 11px;
	transition: all 0.15s ease;
}
.QNpmLdK0:hover { background: rgba(255,255,255,0.06); color: var(--white); }
.s2JweAqV .on7m9WEO {
	padding: 8px 12px;
	gap: 10px;
	border-radius: 8px;
	background: rgba(255,255,255,0.04);
}
.s2JweAqV .on7m9WEO .uyLiM87v { font-size: 13px !important; }
.s2JweAqV .jhb3uV4k {
	width: 16px;
	height: 16px;
	border-radius: 4px;
}
.s2JweAqV .jhb3uV4k i { font-size: 9px; }
.s2JweAqV .wy2MtDbu { font-size: 11px; }

/* Live-pricing rule rows */
.s2JweAqV .jHBHmii1 { gap: 8px; }
.s2JweAqV .uWL32Gat {
	padding: 10px 12px;
	gap: 10px;
	border-radius: 9px;
	background: rgba(255,255,255,0.04);
}
.s2JweAqV .IKqgOkzS {
	width: 22px;
	height: 22px;
	font-size: 11px;
}
.s2JweAqV .Usz9H7Ab { gap: 8px; }
.s2JweAqV .bAO_JqK1 {
	width: 90px;
	padding: 6px 10px;
	border-radius: 7px;
}
.s2JweAqV .sgRySGYs { font-size: 13px; }
.s2JweAqV .EU878SPm { font-size: 13px; padding: 6px 8px; }
.s2JweAqV .Lufnn5zx { font-size: 11px; }
.s2JweAqV .sgvBz3tI { font-size: 12px; }
.s2JweAqV .JWFTj8RU { font-size: 11px; }
.s2JweAqV ._7bu3wyi { font-size: 11px; }
.s2JweAqV .PjJRsmDJ { font-size: 12px; padding: 6px 12px; }

/* Modal divider - its negative margin needs to match the new
   drawer body padding (24px 28px), not the old 1.5rem. */
.s2JweAqV .IsEj5o1Y {
	margin: 0 -28px;
	width: calc(100% + 56px);
}

.CUd9FLNm {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	background:
		linear-gradient(0deg,
			rgba(255, 255, 255, 0.045) 0%,
			rgba(255, 255, 255, 0.012) 100%),
		rgba(20, 22, 30, 0.55);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
}

.zJZ_rVeE { flex: 1 1; }

.bJ26xJKb {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.65rem 1.1rem;
	background: var(--accent-1);
	color: var(--white);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}
.bJ26xJKb:hover:not(:disabled) { background: #1389d8; }
.bJ26xJKb:disabled { opacity: 0.4; cursor: not-allowed; }

.Jo1D9VYf {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.65rem 1rem;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}
.Jo1D9VYf:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
}

.vBM5t4ut {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.65rem 1rem;
	background: rgba(239, 68, 68, 0.08);
	color: #f87171;
	border: 1px solid rgba(239, 68, 68, 0.25);
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
}
.vBM5t4ut:hover:not(:disabled) {
	background: rgba(239, 68, 68, 0.16);
	border-color: rgba(239, 68, 68, 0.4);
}
.vBM5t4ut:disabled { opacity: 0.35; cursor: not-allowed; }

.Ezww5jg9 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
	gap: 10px;
}

.LbmMpf4i {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 10px;
	padding: 10px 12px;
}

.axWWKxMZ {
	font-size: 15px;
	font-weight: 700;
	color: var(--white);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.KC_M0Z0z {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-muted);
	margin-top: 2px;
}

.MVhLiGiQ {
	display: flex;
	gap: 10px;
	align-items: center;
	background: rgba(99, 102, 241, 0.08);
	border: 1px solid rgba(99, 102, 241, 0.2);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 12px;
	color: #94a3b8;
	line-height: 1.4;
}

.MVhLiGiQ i { color: #6366f1; font-size: 14px; flex-shrink: 0; }

/* Toggle rows used by the booth booking-economics options. Identical
   chrome to the venue editor's Auto-Approve Requests toggle so the
   two surfaces feel like one family. */
.uz_eZYK6 {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 10px;
}
.QTUlh2yI {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(13,122,199,0.12);
	color: var(--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}
.bsOtiQme  { flex: 1 1; min-width: 0; }
.SK7bv6PA { font-size: 13px; font-weight: 600; color: var(--white); }
.Wwjwyzgm  { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.45; }
.o6ob2hIa {
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: rgba(255,255,255,0.1);
	border: none;
	cursor: pointer;
	position: relative;
	transition: background 0.2s ease;
	flex-shrink: 0;
}
.YXr8J4Ei { background: var(--accent-1); }
.o6ob2hIa::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--white);
	top: 3px;
	left: 3px;
	transition: transform 0.2s ease;
}
.YXr8J4Ei::after { transform: translateX(18px); }

/* Sub-control that reveals beneath the deposit toggle once it's on. */
.ud8dVkGW {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px 4px 60px;       /* aligns with the toggle row text column */
	margin-top: -6px;
}
.UQbnEyTg {
	font-size: 12px;
	color: var(--text-muted);
}
.rRgZ7W4B {
	width: 70px;
	padding: 7px 10px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	color: var(--white);
	font-family: inherit;
	font-size: 13px;
	outline: none;
	transition: border-color 0.15s ease;
}
.rRgZ7W4B:focus { border-color: rgba(13,122,199,0.5); }

@media (max-width: 980px) {
	.U_HacZIC {
		grid-template-columns: 1fr;
	}
	.WtpMNVD7 {
		max-height: 240px;
	}
}

@media (max-width: 600px) {
	.T6wCXxQb { width: 100vw; max-width: 100vw; }
	.MEQdtlg4 { padding: 1.1rem; }
	.s2JweAqV   { padding: 1.1rem; }
	.CUd9FLNm { padding: 0.85rem 1.1rem; flex-wrap: wrap; }
	.bIefa8AG { flex-wrap: wrap; }
	.CjbyIZ9Z { max-width: 100%; }
}
.kwdpmf5v {
	font-weight: 600;
}

.er_XpIw1 {
	font-weight: 700;
}

.IC6P2w1s {
	font-size: 8px;
}

.BEI_HTUf {
	font-size: 10px;
}

.R0MCYe8N {
	font-size: 12px;
}

.AENduY9G {
	font-size: 14px;
}

.EvqeKZ7z {
	font-size: 15px;
}

.uD26phtt {
	font-size: 17px;
}

.KRYzSIQM {
	font-size: 22px;
}

.k4GrH5oa {
	font-size: 25px;
}

.hsdBjLAK {
	font-size: 35px;
}

.glh1Nqvz {
	font-size: 38px;
}

.aMKOhzvv {
	font-size: 42px;
}

/* -----------------------------------------------------
	Layout & Grid System
------------------------------------------------------ */

.wVNUFrA1 {
	position: relative;
}

.SYfGDNsr {
	height: 100vh;
	width: 100%;
	display: flex;
	overflow: hidden;
	background-color: var(--bg-dark);
	box-sizing: border-box;
	color: var(--white)
}

.p7WLwoWf {
	height: 100%;
	width: 100%;
	position: relative;
	background-color: var(--bg-dark);
	transition: background-color 400ms ease
}

.EsG4X1A2 {
  opacity: 0;
  animation: trGIQmnS 200ms ease-out forwards;
}

.DDB3H4JZ {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 40px 60px 40px 60px;
	row-gap: 2.5rem;
	box-sizing: border-box;
	overflow: hidden;
	min-height: 0;
}

.CRYKKMl0 {
	flex: 1 1;
	min-height: 0;
	overflow: hidden;
	width: 100%;
	display: flex;
	column-gap: 1.25rem;
	flex-direction: column;
}

/* -----------------------------------------------------
	Banner
------------------------------------------------------ */

.PcOiDmjF {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
}

.T21R5ElA h3 {
	margin: 0 0 0.25rem 0;
}

.T21R5ElA p {
	margin: 0;
	opacity: 0.7;
}

.RVe1HC54 {
	height: 75%;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-column-gap: 1rem;
	column-gap: 1rem;
	position: relative;
}

.Vx4j86ig {
	width: 350px;
	box-sizing: border-box;
	border-radius: 50px;
	display: flex;
	align-items: center;
	position: relative;
	column-gap: 1rem;
	color: var(--bg-dark);
	background-color: var(--white);
}

.Vx4j86ig input {
	position: absolute;
	background: none;
	border: none;
	margin-left: 15px;
	width: calc(100% - (2rem));
	color: var(--bg-dark)
}

.O66jZ2gV {
	display: flex;
	align-items: center;
	column-gap: .75rem;
	position: absolute;
	left: 10px;
	padding: 0 10px;
	box-sizing: border-box;
}

.vogeJCdM {
	position: absolute;
	width: 350px;
	height: 500px;
	background-color: white;
	top: 50px;
	z-index: 999;
	border-radius: 10px;
	overflow-y: scroll;
}

.vGgkRTHm {
	padding: 15px 20px;
	box-sizing: border-box;
	color: var(--bg-dark);
	display: grid;
	grid-template-columns: 20px 1fr;
	align-items: center;
	grid-column-gap: .5rem;
	column-gap: .5rem;
	background: none;
  	width: 100%;
  	border: none;
  	text-align: left;
}

.Z5qOG60z {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.TUDaDgnZ {
	height: 100%;
	aspect-ratio: 1;
	border-radius: 100%;
	background-color: var(--white);
	border: 1px solid var(--white);
}

.TUDaDgnZ i {
	color: var(--bg-dark);
}

/* -----------------------------------------------------
	Widget Container
------------------------------------------------------ */

.X0zTyO1e {
	height: 100%;
	width: 100%;
	position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

/* -----------------------------------------------------
	Connections Layout
------------------------------------------------------ */

.vSyUeILh {
	display: grid;
	grid-template-columns: 1fr 380px;
	grid-template-rows: minmax(0, 1fr);
	grid-gap: 1.5rem;
	gap: 1.5rem;
	flex: 1 1;
	min-height: 0;
}

.YyBXSFGl {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: 0;
}

.Xt2GAnJW {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.5rem;
}

/* List Header */
.CdDn4Qgs {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
}

.vx1OKTey {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.vx1OKTey h3 {
	margin: 0;
}

.YAnkQI8W {
	background-color: rgba(34, 197, 94, 0.15);
	color: #22c55e;
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
}

.oROKg8N8 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 8px;
	color: var(--white);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.oROKg8N8:hover {
	box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

.oROKg8N8 i {
	font-size: 11px;
}

/* Empty State */
.rdJPgCRc {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
	text-align: center;
	background-color: var(--sub-bg-dark);
	border: 1px dashed #2d2f39;
	border-radius: 16px;
}

.yz_kM9cv {
	width: 64px;
	height: 64px;
	background: linear-gradient(135deg, rgba(0, 191, 255, 0.1) 0%, rgba(0, 191, 255, 0.05) 100%);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.25rem;
}

.yz_kM9cv i {
	font-size: 24px;
	color: var(--accent-1);
}

.rdJPgCRc h3 {
	margin: 0 0 0.5rem 0;
	color: var(--white);
}

.rdJPgCRc > p {
	margin: 0 0 1.5rem 0;
	color: #888;
}

.NtxJtfxJ {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 10px;
	color: var(--white);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.NtxJtfxJ:hover {
	box-shadow: 0 4px 16px rgba(0, 191, 255, 0.35);
}

/* -----------------------------------------------------
	Connection Card
------------------------------------------------------ */

.mffgfmQq {
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 16px;
	overflow: hidden;
	transition: all 0.2s ease;
}

.mffgfmQq:hover {
	border-color: #3d3f49;
}

.Z2gnPsDA {
	padding: 1.25rem;
	display: flex;
	gap: 1rem;
	align-items: center;
}

.HzNFJcDa {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--white);
	flex-shrink: 0;
}

.aCIumX8K {
	flex: 1 1;
	min-width: 0;
}

.oxycCDqZ {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.125rem;
}

.aCIumX8K h4 {
	margin: 0;
}

.aCIumX8K p {
	margin: 0;
	color: #666;
}

.d6sJhEaU {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.6rem;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.sjdrQl6z {
	width: 5px;
	height: 5px;
	border-radius: 50%;
}

.eXsZTAss {
	display: flex;
	gap: 0.5rem;
}

.BH0Lyqq7 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: #888;
	cursor: pointer;
	transition: all 0.2s ease;
}

.BH0Lyqq7:hover {
	border-color: var(--accent-1);
	color: var(--accent-1);
}

.m44LHGMP {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background-color: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.2);
	border-radius: 8px;
	color: #ef4444;
	cursor: pointer;
	transition: all 0.2s ease;
}

.m44LHGMP:hover {
	background-color: rgba(239, 68, 68, 0.15);
}

.nl8d9gRC {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: #888;
	cursor: pointer;
	transition: all 0.2s ease;
}

.nl8d9gRC:hover {
	border-color: #ef4444;
	color: #ef4444;
	background-color: rgba(239, 68, 68, 0.1);
}

/* Venue Assignment Section */
.LM9pojzP {
	padding: 1rem 1.25rem;
	background-color: var(--bg-dark);
	border-top: 1px solid #2d2f39;
}

.YKL3_SQs {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
}

.YKL3_SQs label {
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
}

.u6RF32fV {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.MA8POYxL {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.75rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: #888;
	font-size: 12px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.MA8POYxL:hover {
	border-color: #3d3f49;
	color: var(--white);
}

.ka2Ggqkn {
	background-color: rgba(0, 191, 255, 0.1);
	border-color: var(--accent-1);
	color: var(--white);
}

.ka2Ggqkn i {
	color: var(--accent-1);
}

.qw07G8rL {
	opacity: 0.5;
	cursor: not-allowed;
	background-color: rgba(255, 255, 255, 0.03);
}

.qw07G8rL:hover {
	border-color: #2d2f39;
	color: #888;
}

.qw07G8rL i {
	color: #666;
	font-size: 10px;
}

.oeDaTFnr {
	color: #666;
	font-size: 12px;
	margin: 0;
}

/* Manage button in venue assignment header */
.bxTqxNqT {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.65rem;
	background: transparent;
	border: 1px solid #2d2f39;
	border-radius: 6px;
	color: #888;
	font-size: 11px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.bxTqxNqT:hover {
	border-color: #3d3f49;
	color: var(--white);
}

.bxTqxNqT i {
	font-size: 10px;
}

/* Venue list for connected connections */
.znuTfoTK {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-height: 200px;
	overflow-y: auto;
}

.jWQ0fJzv {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.45rem 0.6rem;
	background: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
}

.PTMssnCS {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	background: rgba(0, 191, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.PTMssnCS i {
	font-size: 12px;
	color: var(--accent-1);
}

.yN0k__aM {
	min-width: 0;
	flex: 1 1;
}

.FunBOtwy {
	margin: 0;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.QjS5uImE {
	margin: 0;
	font-size: 10.5px;
	color: #4da6ff;
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.QjS5uImE i {
	font-size: 8px;
}

/* Remove Connection Button */
.Byym0IWc {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background-color: transparent;
	border: 1px solid rgba(239, 68, 68, 0.3);
	border-radius: 10px;
	color: #ef4444;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 0.5rem;
}

.Byym0IWc:hover {
	background-color: rgba(239, 68, 68, 0.1);
	border-color: #ef4444;
}

.Byym0IWc i {
	font-size: 12px;
}

/* Connection Footer */
.dPq2hjJk {
	padding: 1rem 1.25rem;
	border-top: 1px solid #2d2f39;
}

.Z7s_wZLn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.5rem;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 10px;
	color: var(--white);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.Z7s_wZLn:hover:not(:disabled) {
	box-shadow: 0 4px 16px rgba(0, 191, 255, 0.35);
}

.IfBa5UR6 {
	background: #2d2f39;
	color: #666;
	cursor: not-allowed;
}

.IfBa5UR6:hover {
	box-shadow: none;
}

/* -----------------------------------------------------
	GuestLine Banner (full-width, top of page)
------------------------------------------------------ */

.rnk5NtNM {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.fS0ILyvX {
	background-color: rgba(20, 184, 166, 0.15);
	color: #14b8a6;
	padding: 0.25rem 0.75rem;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
}

.dVP4W89S {
	background-color: #1a2332;
	border: 1px solid #2d2f39;
	border-radius: 16px;
	overflow: hidden;
	transition: all 0.2s ease;
}

.dVP4W89S:hover {
	border-color: #3d3f49;
}

.vbPEjeKG {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
	background-color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vbPEjeKG img {
	width: 22px;
	height: 22px;
	object-fit: contain;
}

.RKEDYAtk {
	width: 100%;
}

.jVcgfJip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, rgba(20, 184, 166, 0.08), rgba(13, 122, 199, 0.06));
	border: 1px solid rgba(20, 184, 166, 0.2);
	border-radius: 12px;
}

.OLLQ5ZTs {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.zo9pJvdi {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.zo9pJvdi h4 {
	margin: 0;
	color: var(--white);
}

.zo9pJvdi p {
	margin: 0;
	color: #888;
}

.mmiPjHaQ {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 1rem;
	border-radius: 8px;
	border: none;
	background: rgba(20, 184, 166, 0.15);
	color: #14b8a6;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	text-decoration: none;
	transition: all 0.15s ease;
}

.mmiPjHaQ:hover {
	background: rgba(20, 184, 166, 0.25);
	color: #2dd4bf;
}


/* ═══════════════════════════════════════
   Me&U Setup Modal
   ═══════════════════════════════════════ */

.g3K7w9pp {
	width: 520px;
	max-width: 95vw;
	max-height: 85vh;
	background: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.KoYVFvL8 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.5);
}

.V0qUOdwH {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.V0qUOdwH h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--white);
}

.V0qUOdwH i {
	font-size: 16px;
}

.pFHaVuD6 {
	background: none;
	border: none;
	color: #555;
	cursor: pointer;
	font-size: 16px;
	padding: 4px;
	transition: color 0.15s ease;
}

.pFHaVuD6:hover {
	color: var(--white);
}

.RPwqedg_ {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.3);
}

.t_PlSSV8 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	cursor: default;
}

.t_PlSSV8 span {
	font-size: 13px;
	color: #555;
	font-weight: 500;
}

.DODYloqG {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid #2d2f39;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	color: #555;
}

.Y9wBU4P_ .DODYloqG {
	background: rgba(249, 115, 22, 0.15);
	border-color: #f97316;
	color: #f97316;
}

.Y9wBU4P_ span {
	color: var(--white);
}

.uzUpIkap {
	cursor: pointer;
}

.uzUpIkap .DODYloqG {
	background: rgba(34, 197, 94, 0.15);
	border-color: #22c55e;
	color: #22c55e;
}

.uzUpIkap span {
	color: #22c55e;
}

.KVzo_gFf {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1 1;
}

.geDPXQ89 {
	margin: 0 0 1.25rem;
	font-size: 14px;
	color: #888;
	line-height: 1.5;
}

.yi3o7yzy {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

.a44Biioh {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
}

.a44Biioh p {
	margin: 0;
	font-size: 13px;
	color: #ccc;
	line-height: 1.5;
}

.a44Biioh a {
	color: #f97316;
	text-decoration: none;
	font-weight: 500;
}

.a44Biioh a:hover {
	text-decoration: underline;
}

.a44Biioh strong {
	color: var(--white);
}

._eigjlLR {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: rgba(249, 115, 22, 0.12);
	color: #f97316;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	flex-shrink: 0;
	margin-top: 1px;
}

.WioULBgG {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
	padding: 0.5rem 0.75rem;
	background: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
}

.WioULBgG code {
	font-size: 12px;
	color: #f97316;
	flex: 1 1;
	word-break: break-all;
}

.WioULBgG button {
	background: none;
	border: none;
	color: #555;
	cursor: pointer;
	padding: 2px;
	font-size: 13px;
	transition: color 0.15s ease;
}

.WioULBgG button:hover {
	color: var(--white);
}

.Lt82cHCf {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.75rem;
	background: rgba(249, 115, 22, 0.15);
	border: 1px solid rgba(249, 115, 22, 0.3);
	border-radius: 10px;
	color: #f97316;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}

.Lt82cHCf:hover {
	background: rgba(249, 115, 22, 0.25);
}

.YBC11YrA {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.OHTInwb6 {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.OHTInwb6 label {
	font-size: 12px;
	font-weight: 600;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.OHTInwb6 input {
	padding: 0.65rem 0.85rem;
	background: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: var(--white);
	font-size: 14px;
	font-family: inherit;
	outline: none;
	transition: border-color 0.15s ease;
}

.OHTInwb6 input:focus {
	border-color: #f97316;
}

.OHTInwb6 input::placeholder {
	color: #444;
}

.j_fgyPkw {
	margin: 4px 0 0;
	font-size: 11px;
	color: #555;
	line-height: 1.4;
}

.wean2DWf {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
}

.IskXIy7M {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1rem;
	background: none;
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: #888;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}

.IskXIy7M:hover {
	border-color: #555;
	color: var(--white);
}

.GezYcsyR {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1.25rem;
	background: #f97316;
	border: none;
	border-radius: 8px;
	color: var(--white);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}

.GezYcsyR:hover {
	background: #ea580c;
}

.GezYcsyR:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.mmiPjHaQ i {
	font-size: 11px;
}

/* -----------------------------------------------------
	Info Panel
------------------------------------------------------ */

.ieAINUdI {
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 16px;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	height: 100%;
	overflow-y: auto;
	box-sizing: border-box;
}

.ieAINUdI::-webkit-scrollbar {
	width: 6px;
}

.ieAINUdI::-webkit-scrollbar-track {
	background: var(--sub-bg-dark);
	border-radius: 3px;
}

.ieAINUdI::-webkit-scrollbar-thumb {
	background: #3d3f49;
	border-radius: 3px;
}

.ieAINUdI::-webkit-scrollbar-thumb:hover {
	background: #4d4f59;
}

.sVwahwa8 {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding-bottom: 1rem;
	border-bottom: 1px solid #2d2f39;
}

.X59nZP_r {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--white);
	flex-shrink: 0;
}

.sVwahwa8 h3 {
	margin: 0;
	color: var(--white);
}

.sVwahwa8 p {
	margin: 0.25rem 0 0 0;
	color: #888;
}

.cLsZOdzR {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.PbMuRUdD {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.PbMuRUdD h4 {
	margin: 0;
	color: var(--white);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.PbMuRUdD h4 i {
	color: var(--accent-1);
	font-size: 14px;
}

.PbMuRUdD > p {
	margin: 0;
	color: #aaa;
	line-height: 1.6;
}

.PQY33D_N {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.M3jzh6CY {
	display: flex;
	gap: 0.875rem;
	padding: 1rem;
	background-color: var(--bg-dark);
	border-radius: 10px;
}

.CdmAR8ua {
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, rgba(0, 191, 255, 0.15) 0%, rgba(0, 191, 255, 0.05) 100%);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.CdmAR8ua i {
	color: var(--accent-1);
	font-size: 14px;
}

.BfnPx6ut p:first-child {
	margin: 0 0 0.25rem 0;
	color: var(--white);
}

.BfnPx6ut p:last-child {
	margin: 0;
	color: #888;
	line-height: 1.4;
}

.ywnMzOzO {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ywnMzOzO li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #aaa;
}

.ywnMzOzO li i {
	color: #22c55e;
	font-size: 10px;
}

/* -----------------------------------------------------
	Modal Styles
------------------------------------------------------ */

.mCLyXEuH {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 2rem;
}

.un9u14WV {
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 16px;
	width: 100%;
	max-width: 500px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: SWEkBGH8 0.2s ease-out;
}

@keyframes SWEkBGH8 {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.MMBdRiq1 {
	padding: 1.5rem;
	border-bottom: 1px solid #2d2f39;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.MMBdRiq1 h3 {
	margin: 0;
	color: var(--white);
}

.cKvGOL_j {
	width: 36px;
	height: 36px;
	background-color: rgba(255, 255, 255, 0.05);
	border: none;
	border-radius: 8px;
	color: #888;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: all 0.2s ease;
}

.cKvGOL_j:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--white);
}

.ZX5NrRBL {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1 1;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.YHwIIwd7 {
	padding: 1.5rem;
	border-top: 1px solid #2d2f39;
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
}

/* -----------------------------------------------------
	Manage Modal Specific
------------------------------------------------------ */

._WIc8eV9 {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background-color: rgba(34, 197, 94, 0.08);
	border: 1px solid rgba(34, 197, 94, 0.2);
	border-radius: 12px;
}

.dIb6_YqL {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--white);
	flex-shrink: 0;
}

.OrmeaVkM {
	flex: 1 1;
}

.OrmeaVkM p:first-child {
	margin: 0;
	color: #22c55e;
}

.OrmeaVkM p:last-child {
	margin: 0.25rem 0 0 0;
	color: #888;
}

.rPRnu_ML {
	display: flex;
	align-items: center;
}

.EpQ6dkwe {
	width: 12px;
	height: 12px;
	background-color: #22c55e;
	border-radius: 50%;
	animation: yoBXOK4g 2s ease-in-out infinite;
}

@keyframes yoBXOK4g {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.D3ZMnwui {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.eaM2norZ {
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
}

.oo03G00a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	padding: 0.875rem 1rem;
	color: var(--white);
}

.oo03G00a i {
	color: #666;
	font-size: 14px;
}

.TdND6X4t {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.lnWxzGsK {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background-color: var(--sub-bg-dark);
	border-radius: 8px;
	color: var(--white);
}

.lnWxzGsK i {
	color: #22c55e;
	font-size: 14px;
}

.jkp9JNRf {
	padding: 1rem;
	background-color: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.2);
	border-radius: 12px;
	margin-top: 0.5rem;
}

.jkp9JNRf h4 {
	margin: 0 0 0.5rem 0;
	color: #ef4444;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.jkp9JNRf h4 i {
	font-size: 14px;
}

.jkp9JNRf > p {
	margin: 0 0 1rem 0;
	color: #888;
}

.DpeyNabb {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.25rem;
	background-color: #ef4444;
	border: none;
	border-radius: 8px;
	color: var(--white);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	width: 100%;
}

.DpeyNabb:hover {
	background-color: #dc2626;
}

/* Venue grid inside manage modal */
.p8AspdOP {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-height: 180px;
	overflow-y: auto;
	padding-right: 0.25rem;
}

.pirSSK90 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	margin-top: 0.5rem;
	background-color: transparent;
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: #888;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	width: -webkit-fit-content;
	width: fit-content;
}

.pirSSK90:hover {
	border-color: #006aff;
	color: #006aff;
}

.r9TxA0CG {
	padding: 0.75rem 1.5rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: var(--white);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.2s ease;
}

.r9TxA0CG:hover {
	background-color: #2d2f39;
}

/* -----------------------------------------------------
	Disconnect Modal
------------------------------------------------------ */

.RECnbdWS {
	max-width: 420px;
	text-align: center;
	padding: 2rem;
}

.XV08CNmX {
	width: 64px;
	height: 64px;
	background-color: rgba(239, 68, 68, 0.15);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.5rem;
}

.XV08CNmX i {
	font-size: 28px;
	color: #ef4444;
}

.RECnbdWS h3 {
	margin: 0 0 0.75rem 0;
	color: var(--white);
}

.RECnbdWS > p {
	margin: 0 0 1rem 0;
	color: #888;
	line-height: 1.5;
}

.GACmJuqy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background-color: rgba(245, 158, 11, 0.1);
	border-radius: 8px;
	margin-bottom: 1.5rem;
}

.GACmJuqy i {
	color: #f59e0b;
	font-size: 14px;
}

.GACmJuqy span {
	color: #f59e0b;
}

.EEPBDloB {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
}

.W8fOppbv {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background-color: #ef4444;
	border: none;
	border-radius: 8px;
	color: var(--white);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.W8fOppbv:hover:not(:disabled) {
	background-color: #dc2626;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.wRzcHK3C {
	opacity: 0.4;
	cursor: not-allowed;
}

.wRzcHK3C:hover {
	background-color: #ef4444;
	transform: none;
	box-shadow: none;
}

/* GuestLine Disconnect Modal */
.ojgnXebF {
	text-align: center;
}

.pZj__7Ei {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	text-align: left;
	margin-bottom: 1.5rem;
}

.pZj__7Ei label {
	color: #888;
	margin: 0;
}

.pZj__7Ei label strong {
	color: var(--white);
}

.R7piidYb {
	width: 100%;
	padding: 0.75rem 1rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: var(--white);
	font-size: 14px;
	font-family: inherit;
	letter-spacing: 1px;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.2s ease;
}

.R7piidYb::placeholder {
	color: #444;
	letter-spacing: 1px;
}

.R7piidYb:focus {
	border-color: #ef4444;
}

/* -----------------------------------------------------
	Location Mapping Banner
------------------------------------------------------ */

.ljuzi_a0 {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.25rem 1.5rem;
	background: linear-gradient(135deg, rgba(0, 106, 255, 0.12) 0%, rgba(0, 191, 255, 0.08) 100%);
	border: 1px solid rgba(0, 106, 255, 0.25);
	border-left: 4px solid #006aff;
	border-radius: 12px;
}

.tBMR7AhN {
	width: 44px;
	height: 44px;
	background: linear-gradient(135deg, rgba(0, 106, 255, 0.25) 0%, rgba(0, 191, 255, 0.15) 100%);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tBMR7AhN i {
	color: #4da6ff;
	font-size: 20px;
}

.DZf3WpqN {
	margin: 0 0 0.375rem 0;
	color: var(--white);
	font-size: 15px;
	font-weight: 600;
}

.OCjdcOtj {
	margin: 0;
	color: #aaa;
	font-size: 12px;
	line-height: 1.6;
}

/* -----------------------------------------------------
	Location Mapping Display (Connection Card)
------------------------------------------------------ */

.TJHVdMGk {
	padding: 0.75rem 1.25rem;
	border-top: 1px solid #2d2f39;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.TJHVdMGk label {
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
}

.S7_VvxpG {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background-color: var(--bg-dark);
	border-radius: 8px;
	font-size: 12px;
}

.S7_VvxpG i {
	font-size: 10px;
	color: #666;
}

.e0sgC4Aj {
	color: var(--white);
	font-weight: 500;
}

.Zj85X0PV {
	color: #555;
}

.USTJMfez {
	color: #4da6ff;
}

/* -----------------------------------------------------
	Integration Sections (unified card style)
------------------------------------------------------ */

.fcF6XZA2 {
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 16px;
	transition: border-color 0.2s ease;
	flex: 1 1;
	min-height: 0;
	overflow-y: auto;
	box-sizing: border-box;
}

.fcF6XZA2:hover {
	border-color: #3d3f49;
}

.fcF6XZA2::-webkit-scrollbar {
	width: 6px;
}

.fcF6XZA2::-webkit-scrollbar-track {
	background: var(--sub-bg-dark);
	border-radius: 3px;
}

.fcF6XZA2::-webkit-scrollbar-thumb {
	background: #3d3f49;
	border-radius: 3px;
}

.fcF6XZA2::-webkit-scrollbar-thumb:hover {
	background: #4d4f59;
}

.vsbgB2KM {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	transition: background-color 0.15s ease;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.vsbgB2KM:hover {
	background-color: rgba(255, 255, 255, 0.02);
}

.lY0fm2Lr {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.lY0fm2Lr h3 {
	margin: 0;
}

.OENcZoT0 {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	color: var(--white);
	flex-shrink: 0;
}

.sJ_vuHon {
	padding: 1.5rem;
}

.icZzPA4D {
	padding: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.icZzPA4D p {
	margin: 0;
	color: #666;
}

.N72eOL4J {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	background-color: var(--bg-dark);
	border-radius: 10px;
}

._O3mQDg2 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.niehFE1v {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.P2OqOliq {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.55rem 1.1rem;
	border-radius: 8px;
	border: none;
	color: var(--white);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: all 0.2s ease;
}

.P2OqOliq:hover {
	opacity: 0.9;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.P2OqOliq:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.P2OqOliq i {
	font-size: 12px;
}

/* -----------------------------------------------------
	Info Panel Tabs
------------------------------------------------------ */

/* Top-level integration tabs - sit at the top of the Connections
   page and switch the entire view (which integration's box and About
   panel render). Replaces the old in-About tab strip. */
.wOshRSoy {
	display: flex;
	gap: 0.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #2d2f39;
	flex-shrink: 0;
}

.hiaALzJK {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1rem 0.7rem;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: #888;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.hiaALzJK:hover {
	color: #ccc;
}

._9xelBh6l {
	color: #fff;
}

.hiaALzJK i {
	font-size: 13px;
}

.xNYvSfJx {
	display: flex;
	gap: 0.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #2d2f39;
}

.MdHfALzm {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem 0.55rem;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	color: #666;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}

.MdHfALzm:hover {
	color: #aaa;
}

.yW1H8PpB {
	border-bottom-color: currentColor;
}

.MdHfALzm i {
	font-size: 12px;
}

/* -----------------------------------------------------
	Loading State
------------------------------------------------------ */

.sIkqogJe {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem;
	gap: 1rem;
}

.LnV3vCUq {
	width: 40px;
	height: 40px;
	border: 3px solid #2d2f39;
	border-top-color: var(--accent-1);
	border-radius: 50%;
	animation: k3h8haFY 1s linear infinite;
}

@keyframes k3h8haFY {
	to { transform: rotate(360deg); }
}

/* -----------------------------------------------------
	Animations
------------------------------------------------------ */

@keyframes trGIQmnS {
  to {
    opacity: 1;
  }
}

/* -----------------------------------------------------
	Responsive Design
------------------------------------------------------ */

@media (max-width: 1200px) {
	.vSyUeILh {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}

	.YyBXSFGl {
		overflow-y: visible;
		min-height: auto;
		padding-right: 0;
	}

	.ieAINUdI {
		height: auto;
		max-height: 400px;
	}
}

@media (max-width: 768px) {
	.DDB3H4JZ {
		padding: 20px 30px;
	}

	.CdDn4Qgs {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.oROKg8N8 {
		width: 100%;
		justify-content: center;
	}

	.Z2gnPsDA {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.75rem;
	}

	.eXsZTAss {
		width: 100%;
		justify-content: flex-end;
	}

	.u6RF32fV {
		flex-direction: column;
	}

	.MA8POYxL {
		width: 100%;
		justify-content: center;
	}

	.Z7s_wZLn {
		font-size: 13px;
		padding: 0.75rem 1rem;
	}

	.RVe1HC54 {
		display: none;
	}
}

@media (max-width: 480px) {
	.un9u14WV {
		margin: 1rem;
		max-height: calc(100vh - 2rem);
	}

	.EEPBDloB {
		flex-direction: column;
	}

	.EEPBDloB button {
		width: 100%;
	}
}
/* ══════════════════════════════════════
   Commission Page
   ══════════════════════════════════════ */

.CFWnMKVk {
	position: relative;
}

.MDYrA3N0 {
	height: 100vh;
	width: 100%;
	display: flex;
	overflow: hidden;
	background-color: var(--bg-dark);
}

.oHZBRGA9 {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 40px 60px;
	row-gap: 2.5rem;
	box-sizing: border-box;
}

/* ── Layout ── */
.oGCeZpiW {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	flex: 1 1;
	min-height: 0;
	overflow-y: auto;
}

.oGCeZpiW::-webkit-scrollbar {
	display: none;
}

/* ── Stats Row ── */
.LPy1PpTK {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
	gap: 1rem;
	flex-shrink: 0;
}

.WSnn_sCS {
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 12px;
	padding: 1.15rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.TZD4mwpG {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.M0kLHXIz { background: rgba(13, 122, 199, 0.12); color: var(--accent-1); }
.a26N1WDJ { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.UDaMB77T { background: rgba(139, 92, 246, 0.12); color: #8b5cf6; }
.XoE10qhI { background: rgba(245, 158, 11, 0.12); color: #f59e0b; }

._khLLUdD {
	display: flex;
	flex-direction: column;
}

.SKB_sRCx {
	margin: 0;
	font-size: 12px;
	color: #888;
	font-weight: 500;
}

.veQMBbnz {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--white);
}

/* ── Content Row (list + detail) ── */
.IluNWY6m {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1rem;
	gap: 1rem;
	flex: 1 1;
	min-height: 0;
}

/* ── List Panel ── */
.Dyiy0bdu {
	grid-column: span 2;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.pv651_qh {
	padding: 1rem 1.25rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #2d2f39;
	flex-shrink: 0;
	gap: 1rem;
	flex-wrap: wrap;
}

/* Tabs - match Venues vn_tab_nav */
.E1b861sm {
	display: flex;
	gap: 0.4rem;
}

.xifonaar {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.4rem 0.85rem;
	background-color: var(--bg-dark);
	border: 1px solid var(--bg-dark);
	border-radius: 8px;
	color: #888;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}

.xifonaar:hover {
	color: var(--white);
}

.bDhKwUnX {
	background-color: var(--accent-1) !important;
	border-color: var(--accent-1) !important;
	color: var(--white);
}

.bDhKwUnX .oPBD5RAm {
	background-color: rgba(255, 255, 255, 0.2);
	color: var(--white);
}

.oPBD5RAm {
	width: 24px;
	height: 24px;
	background-color: rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	transition: all 0.2s ease;
}

/* Search + actions - match Venues */
.dOD3ok2r {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.Z3khwwq3 {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	padding: 0.45rem 0.75rem;
	transition: border-color 0.2s ease;
}

.Z3khwwq3:focus-within {
	border-color: var(--accent-1);
}

.Z3khwwq3 i {
	font-size: 12px;
	color: #555;
	flex-shrink: 0;
}

.Z3khwwq3 input {
	background: none;
	border: none;
	outline: none;
	color: var(--white);
	font-size: 12px;
	width: 160px;
	padding: 0;
	font-family: inherit;
}

.Z3khwwq3 input::placeholder {
	color: #555;
}

.uy02F5Ef {
	background: none;
	border: none;
	color: #666;
	cursor: pointer;
	padding: 0;
	font-size: 10px;
	display: flex;
	align-items: center;
	transition: color 0.15s ease;
}

.uy02F5Ef:hover {
	color: var(--white);
}

.AA9EAcMW {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem;
	border-radius: 8px;
	border: none;
	background-color: var(--accent-1);
	color: var(--white);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: opacity 0.15s ease;
	white-space: nowrap;
	font-family: inherit;
}

.AA9EAcMW:hover {
	opacity: 0.85;
}

.AA9EAcMW i {
	font-size: 11px;
}

/* List body */
.kKlDS3Di {
	flex: 1 1;
	overflow-y: auto;
}

.kKlDS3Di::-webkit-scrollbar {
	width: 6px;
}

.kKlDS3Di::-webkit-scrollbar-track {
	background: transparent;
}

.kKlDS3Di::-webkit-scrollbar-thumb {
	background: #2d2f39;
	border-radius: 3px;
}

.DH3_gaJ7 {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.3);
}

.TCHfIl3m {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: #2d2f39;
	flex-shrink: 0;
}

.Re7PaWz5 {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1 1;
}

.uQTsHLfo {
	height: 10px;
	background: #2d2f39;
	border-radius: 4px;
	animation: czpRi269 1.5s ease-in-out infinite;
}

.Su9Om6Y_ { width: 60%; }
.Xh7kCSWP { width: 40%; }

@keyframes czpRi269 {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 0.7; }
}

.mp7uNvhs {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 3rem 1rem;
	color: #3d4052;
}

.mp7uNvhs i {
	font-size: 28px;
}

.mp7uNvhs p {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
}

/* ── Tier Card ── */
.aM2pT5uO {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 1.25rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
	border-bottom: 1px solid rgba(45, 47, 57, 0.3);
}

.aM2pT5uO:hover {
	background-color: rgba(255, 255, 255, 0.02);
}

.j_nN0h1z {
	background-color: rgba(13, 122, 199, 0.08);
	border-left: 3px solid var(--accent-1);
}

.NxEiY8B_ {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	min-width: 0;
}

.uIFMtfRd {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}

.Obk8XuoA {
	min-width: 0;
}

.vtfeRkKY {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.p84jFVap {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.JsAdw3sL {
	padding: 2px 8px;
	background: rgba(245, 158, 11, 0.12);
	color: #f59e0b;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
}

.LIagh4WG {
	margin: 2px 0 0;
	font-size: 12px;
	color: #555;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.JW7Sa6Vv {
	text-align: right;
	flex-shrink: 0;
}

.SVvvX564 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #22c55e;
}

.Hj1WWo5U {
	margin: 0;
	font-size: 11px;
	color: #555;
}

/* ── Detail Panel ── */
.m2FIGgIE {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.Bk8g8odA {
	display: flex;
	flex-direction: column;
	min-height: 0;
	background-color: var(--sub-bg-dark);
	border-radius: 12px;
	border: 1px solid #2d2f39;
	height: 100%;
}

.g9zboWEX {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 0.75rem;
	color: #3d4052;
}

.g9zboWEX i {
	font-size: 32px;
}

.g9zboWEX p {
	margin: 0;
	font-size: 14px;
	font-weight: 500;
}

.zuRLGdPl {
	padding: 1.25rem;
	border-bottom: 1px solid #2d2f39;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.RGo4YmbQ {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

.yZqrr8sf {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.YcH8ydb9 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.J4IZChdZ {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--white);
}

.s20rpyay {
	margin: 2px 0 0;
	font-size: 12px;
	color: #888;
}

.XPW3ORSr {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.KQ0_U3Jf {
	width: 34px;
	height: 34px;
	background: none;
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: #888;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	transition: all 0.2s ease;
}

.KQ0_U3Jf:hover {
	border-color: var(--accent-1);
	color: var(--accent-1);
}

.JPCq6gqa:hover {
	border-color: #ef4444;
	color: #ef4444;
}

.IrFQCkcW {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid #2d2f39;
}

.tgupbb1e {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 13px;
	color: #888;
}

.tgupbb1e i {
	font-size: 12px;
	color: var(--accent-1);
}

.YRHb9SYR {
	padding: 1rem 1.25rem;
}

.gReB9FX0 {
	margin: 0 0 0.35rem;
	font-size: 11px;
	font-weight: 600;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.gReB9FX0 i {
	font-size: 10px;
}

.e6U4mh5u {
	margin: 0;
	font-size: 14px;
	color: var(--white);
	font-weight: 500;
}

/* ══════════════════════════════════════
   Modal
   ══════════════════════════════════════ */

.tAhXldcP {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 2rem;
}

.gvBbVjOt {
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 16px;
	width: 100%;
	max-width: 540px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: _pQPE0rS 0.2s ease-out;
}

@keyframes _pQPE0rS {
	from { opacity: 0; transform: translateY(-20px); }
	to { opacity: 1; transform: translateY(0); }
}

.h7bwmQcN {
	padding: 1.5rem;
	border-bottom: 1px solid #2d2f39;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.DJe4eyJB {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--white);
}

.thqPRuNw {
	width: 36px;
	height: 36px;
	background-color: rgba(255, 255, 255, 0.05);
	border: none;
	border-radius: 8px;
	color: #888;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	transition: all 0.2s ease;
}

.thqPRuNw:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--white);
}

._tczIEsN {
	padding: 1.5rem;
	overflow-y: auto;
	flex: 1 1;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.JhZcxw6c {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.Hom6Oc3h {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.5);
}

.Hom6Oc3h i {
	font-size: 14px;
	color: var(--accent-1);
}

.Hom6Oc3h h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: var(--white);
}

.ggsS1tP3 {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.hX6ne4xY {
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	margin: 0;
	font-size: 11px;
	font-weight: 600;
}

.otsWnssp {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	padding: 0.75rem 1rem;
	transition: border-color 0.2s ease;
}

.otsWnssp:focus-within {
	border-color: var(--accent-1);
}

.otsWnssp i {
	color: #666;
	font-size: 14px;
	flex-shrink: 0;
}

.otsWnssp input {
	background: none;
	border: none;
	color: var(--white);
	font-size: 14px;
	width: 100%;
	outline: none;
	font-family: inherit;
}

.otsWnssp input::placeholder {
	color: #555;
}

/* Remove number input spinners */
.otsWnssp input[type="number"]::-webkit-inner-spin-button,
.otsWnssp input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.otsWnssp input[type="number"] {
	-moz-appearance: textfield;
}

.duUGETgs {
	align-items: flex-start;
}

.duUGETgs textarea {
	background: none;
	border: none;
	color: var(--white);
	font-size: 14px;
	width: 100%;
	outline: none;
	font-family: inherit;
	resize: vertical;
	min-height: 60px;
}

.duUGETgs textarea::placeholder {
	color: #555;
}

/* Toggle */
.oCRo9XSK {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 1rem;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid #2d2f39;
	border-radius: 10px;
}

.QI8_2Cp8 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.EOEszvdS {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(245, 158, 11, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #f59e0b;
	font-size: 14px;
	flex-shrink: 0;
}

.Pxjerskk {
	display: flex;
	flex-direction: column;
}

.oZdkzpxx {
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
}

.tRwcSTf1 {
	font-size: 11px;
	color: #555;
}

.OxENqcmd {
	width: 40px;
	height: 22px;
	background-color: #2d2f39;
	border: none;
	border-radius: 11px;
	cursor: pointer;
	position: relative;
	transition: background-color 0.2s ease;
	flex-shrink: 0;
}

.nxUkuYqF {
	background-color: var(--accent-1);
}

.rsLIkxW4 {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	background-color: var(--white);
	border-radius: 50%;
	transition: left 0.2s ease;
}

.nxUkuYqF .rsLIkxW4 {
	left: 20px;
}

/* Footer */
.C43uQuMs {
	margin: 0 1.5rem 1rem;
	padding: 0.6rem 0.85rem;
	background-color: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.2);
	border-radius: 8px;
	color: #ef4444;
	font-size: 13px;
}

.DqW0vqRQ {
	padding: 1.25rem 1.5rem;
	border-top: 1px solid #2d2f39;
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
}

.eV1U9XCP {
	padding: 0.6rem 1.15rem;
	background: none;
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: #888;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: inherit;
}

.eV1U9XCP:hover {
	border-color: #555;
	color: var(--white);
}

.rUrSAWrM {
	padding: 0.6rem 1.15rem;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 8px;
	color: var(--white);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: inherit;
}

.rUrSAWrM:hover:not(:disabled) {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

.rUrSAWrM:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ══════════════════════════════════════
   Campaigns Page - Redesigned
   ══════════════════════════════════════ */

/* ─── Layout Shell ─── */
.Us4kjJoz { position: relative; }

.RqRW5M_v {
	height: 100vh;
	width: 100%;
	display: flex;
	overflow: hidden;
	background-color: var(--bg-dark);
}

._UpVEcj5 {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 40px 60px;
	row-gap: 2.5rem;
	box-sizing: border-box;
	overflow-y: auto;
}

.NKRcmQVE {
	height: 100%;
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.TvZisaa7 {
	display: grid;
	grid-template-columns: 1fr 380px;
	grid-gap: 1.5rem;
	gap: 1.5rem;
	flex: 1 1;
	min-height: 0;
	height: 100%;
}


/* ═══════════════════════════════════════
   Left Panel - Campaign List
   ═══════════════════════════════════════ */

.PTXJL6YT {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: 0;
}

.fevyqyAg {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.Lw_CcerD {
	flex: 1 1;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.85rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	transition: border-color 0.15s ease;
}

.Lw_CcerD:focus-within {
	border-color: var(--accent-1);
}

.Lw_CcerD i {
	color: #666;
	font-size: 13px;
	flex-shrink: 0;
}

.Lw_CcerD input {
	background: none;
	border: none;
	outline: none;
	color: var(--white);
	font-size: 13px;
	width: 100%;
}

.Lw_CcerD input::placeholder {
	color: #555;
}

.UnGemPha {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 10px;
	color: var(--white);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.UnGemPha:hover {
	box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

.UnGemPha i {
	font-size: 11px;
}

.nLeLFNcE {
	flex: 1 1;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.nLeLFNcE::-webkit-scrollbar { width: 6px; }
.nLeLFNcE::-webkit-scrollbar-track { background: transparent; }
.nLeLFNcE::-webkit-scrollbar-thumb { background: #3d3f49; border-radius: 3px; }
.nLeLFNcE::-webkit-scrollbar-thumb:hover { background: #4d4f59; }

.nGj0wlf1 {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.MRivPR9X {
	margin: 0;
	padding: 0 0.25rem;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.75px;
	color: #666;
}

.pPW4QUYy {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
	text-align: center;
	background-color: var(--sub-bg-dark);
	border: 1px dashed #2d2f39;
	border-radius: 16px;
	gap: 1rem;
}

.pPW4QUYy i {
	font-size: 28px;
	color: #444;
}

.pPW4QUYy p {
	margin: 0;
	color: #666;
	font-size: 13px;
}


/* ═══════════════════════════════════════
   Campaign Card
   ═══════════════════════════════════════ */

.E6kBqbMS {
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 14px;
	padding: 1rem 1.1rem;
	cursor: pointer;
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.E6kBqbMS:hover {
	border-color: #3d3f49;
	background-color: rgba(255, 255, 255, 0.02);
}

.yFhdX_Iz {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.xyC01jCm {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
}

.vIBgwcja {
	flex: 1 1;
	min-width: 0;
}

.mLaKR4RP {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.Qwytq3dQ {
	margin: 0.15rem 0 0 0;
	font-size: 11.5px;
	color: #777;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.YhtbBru8 {
	padding: 0.2rem 0.6rem;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	flex-shrink: 0;
}

.jQX0GAeI {
	background-color: rgba(0, 191, 255, 0.1);
	color: #00bfff;
}

.fXBeKVl_ {
	background-color: rgba(34, 197, 94, 0.1);
	color: #22c55e;
}

.Q2DTMCif {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.rvMdO7G5 {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.2rem 0.55rem;
	background-color: rgba(255, 255, 255, 0.04);
	border-radius: 6px;
	font-size: 11px;
	color: #aaa;
}

.rvMdO7G5 i {
	font-size: 10px;
}

.oyuduV1U {
	margin-left: auto;
	font-size: 11px;
	color: #666;
}


/* ═══════════════════════════════════════
   Right Panel - Info
   ═══════════════════════════════════════ */

.NGGGsw9N {
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 16px;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	height: 100%;
	overflow-y: auto;
	box-sizing: border-box;
}

.NGGGsw9N::-webkit-scrollbar { width: 6px; }
.NGGGsw9N::-webkit-scrollbar-track { background: var(--sub-bg-dark); border-radius: 3px; }
.NGGGsw9N::-webkit-scrollbar-thumb { background: #3d3f49; border-radius: 3px; }
.NGGGsw9N::-webkit-scrollbar-thumb:hover { background: #4d4f59; }

.YugiPeEl {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding-bottom: 1rem;
	border-bottom: 1px solid #2d2f39;
}

.gB3Thi0j {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(0, 191, 255, 0.15) 0%, rgba(0, 191, 255, 0.05) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: var(--accent-1);
	flex-shrink: 0;
}

.YugiPeEl h3 {
	margin: 0;
	color: var(--white);
	font-size: 16px;
}

.q7l5Xvpk {
	margin: 0.25rem 0 0 0;
	color: #888;
	font-size: 12.5px;
}

.RJaWb0sM {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.RJaWb0sM h4 {
	margin: 0;
	color: var(--white);
	font-size: 13.5px;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.RJaWb0sM h4 i {
	color: var(--accent-1);
	font-size: 13px;
}

.RJaWb0sM > p {
	margin: 0;
	color: #aaa;
	font-size: 12.5px;
	line-height: 1.6;
}

.fbt1fZOw {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.OmpEM79U {
	display: flex;
	gap: 0.75rem;
	padding: 0.85rem;
	background-color: var(--bg-dark);
	border-radius: 10px;
}

.S_42VsXT {
	width: 34px;
	height: 34px;
	background: linear-gradient(135deg, rgba(0, 191, 255, 0.15) 0%, rgba(0, 191, 255, 0.05) 100%);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.S_42VsXT i {
	color: var(--accent-1);
	font-size: 13px;
}

._30QBO3NA {
	margin: 0 0 0.2rem 0;
	color: var(--white);
	font-size: 12.5px;
	font-weight: 600;
}

.z9oLaO8x {
	margin: 0;
	color: #888;
	font-size: 11.5px;
	line-height: 1.45;
}

.dedqhHZO {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dedqhHZO li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: #aaa;
	font-size: 12.5px;
}

.dedqhHZO li i {
	color: #22c55e;
	font-size: 11px;
}


/* ═══════════════════════════════════════
   Shared Modal Overlay
   ═══════════════════════════════════════ */

.KENaGv3X {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.75);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 2rem;
	animation: DaeXuly2 0.15s ease;
}

@keyframes DaeXuly2 {
	from { opacity: 0; }
	to { opacity: 1; }
}


/* ═══════════════════════════════════════
   Campaign Detail Modal
   ═══════════════════════════════════════ */

._ano102p {
	width: 720px;
	max-width: 100%;
	max-height: 88vh;
	background-color: #111216;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.03),
		0 24px 80px rgba(0, 0, 0, 0.6),
		0 8px 32px rgba(0, 0, 0, 0.4);
}

/* ─── Header ─── */
.MyLc8y1r {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1.5rem 1.75rem 1.25rem;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, transparent 100%);
}

.UE1hc01k {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-width: 0;
}

.DhyS2I5U {
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: linear-gradient(135deg, rgba(0, 191, 255, 0.18) 0%, rgba(0, 191, 255, 0.05) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	color: var(--accent-1);
	flex-shrink: 0;
}

.OnCm7v5l {
	margin: 0;
	font-size: 18px;
	font-weight: 650;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	letter-spacing: -0.2px;
}

.md56_nU2 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
	margin-top: 0.35rem;
}

.md56_nU2 span {
	font-size: 12px;
	color: #777;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.md56_nU2 span i {
	font-size: 10px;
	opacity: 0.7;
}

.f9oWpBJz {
	padding: 0.2rem 0.6rem;
	border-radius: 20px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

._GWu3rLA {
	background-color: rgba(0, 191, 255, 0.1);
	color: #00bfff;
}

.Rm_vhlNE {
	background-color: rgba(34, 197, 94, 0.1);
	color: #22c55e;
}

.GVjg1rPe {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	color: #666;
	font-size: 14px;
	cursor: pointer;
	transition: all 0.15s ease;
	flex-shrink: 0;
	margin-top: 2px;
}

.GVjg1rPe:hover {
	color: var(--white);
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.1);
}

/* ─── Tabs ─── */
.nR528QII {
	display: flex;
	gap: 0.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding: 0 1.75rem;
}

.FUoQxdWw {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 0.7rem 1.1rem;
	color: #555;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	transition: all 0.15s ease;
	position: relative;
}

.FUoQxdWw:hover {
	color: #999;
}

.FUoQxdWw i {
	font-size: 12px;
}

.RVTVbdA4 {
	color: var(--white);
	border-bottom-color: var(--accent-1);
}

/* ─── Body ─── */
.kXN2eXYG {
	flex: 1 1;
	overflow-y: auto;
	padding: 1.5rem 1.75rem;
}

.kXN2eXYG::-webkit-scrollbar { width: 5px; }
.kXN2eXYG::-webkit-scrollbar-track { background: transparent; }
.kXN2eXYG::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 3px; }
.kXN2eXYG::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.12); }

.DM8jsuZg {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	color: #555;
	padding: 4rem;
	font-size: 13px;
}

.IQebKLQv {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
	text-align: center;
	gap: 1rem;
	color: #444;
}

.IQebKLQv i {
	font-size: 32px;
	color: #333;
}

.IQebKLQv p {
	margin: 0;
	font-size: 13px;
	color: #555;
}


/* ═══════════════════════════════════════
   Overview Tab
   ═══════════════════════════════════════ */

.DUixXsVU {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Stats strip */
.LLXY3fWS {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	grid-gap: 0.65rem;
	gap: 0.65rem;
}

.yyLctsts {
	background-color: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 14px;
	padding: 1.15rem 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	transition: border-color 0.15s ease;
}

.yyLctsts:hover {
	border-color: rgba(255, 255, 255, 0.08);
}

.zM1RJ_vA {
	font-size: 26px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: -0.5px;
	line-height: 1;
}

.v992jv28 {
	font-size: 10.5px;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	font-weight: 500;
}

.H4ocizl0 {
	border-color: rgba(0, 191, 255, 0.15);
	background: linear-gradient(160deg, rgba(0, 191, 255, 0.07) 0%, rgba(0, 191, 255, 0.02) 100%);
}

.H4ocizl0 .zM1RJ_vA {
	color: var(--accent-1);
}

/* Section box */
.wg06q7QX {
	background-color: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 14px;
	padding: 1.15rem 1.25rem;
}

.OCEDAZ4_ {
	margin: 0 0 0.85rem 0;
	font-size: 12.5px;
	font-weight: 600;
	color: #bbb;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.OCEDAZ4_ i {
	color: var(--accent-1);
	font-size: 13px;
}

/* Tiers */
.jCbd3eUB {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.__Hpjtaw {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.6rem 0.75rem;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.02);
	transition: background-color 0.15s ease;
}

.__Hpjtaw:hover {
	background-color: rgba(255, 255, 255, 0.04);
}

.Pl8VKo3N {
	font-size: 12.5px;
	color: #999;
}

.rhgl58cq {
	font-size: 13.5px;
	font-weight: 700;
	color: var(--accent-1);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

/* Actions */
.lQrdkbuH {
	display: flex;
	gap: 0.65rem;
	padding-top: 0.25rem;
}

.ijhVhAwX {
	flex: 1 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	color: #ccc;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
}

.ijhVhAwX:hover {
	border-color: rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.05);
	color: var(--white);
}

.ijhVhAwX i {
	font-size: 13px;
}

.ofqR9HTP {
	color: #ef4444;
	border-color: rgba(239, 68, 68, 0.15);
	background: rgba(239, 68, 68, 0.04);
}

.ofqR9HTP:hover {
	background-color: rgba(239, 68, 68, 0.1);
	border-color: rgba(239, 68, 68, 0.3);
	color: #f87171;
}


/* ═══════════════════════════════════════
   Promoters Tab
   ═══════════════════════════════════════ */

.z4fLn1Q7 {
	display: flex;
	flex-direction: column;
}

.pyBwoAUj {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.DbPZGxpN {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 14px;
	padding: 1.1rem 1.2rem;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	transition: all 0.15s ease;
}

.DbPZGxpN:hover {
	border-color: rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
}

.euUreL6U {
	display: flex;
	align-items: center;
	gap: 0.85rem;
}

._KPEqlwU {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(0, 191, 255, 0.12) 0%, rgba(0, 191, 255, 0.04) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: rgba(0, 191, 255, 0.7);
	flex-shrink: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.Ol_fOwSV {
	flex: 1 1;
	min-width: 0;
}

.LnISbpeX {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
	letter-spacing: -0.1px;
}

.De156NF3 {
	margin: 0.2rem 0 0 0;
	font-size: 12px;
	color: #666;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.FiR9lLro {
	padding: 0.2rem 0.65rem;
	border-radius: 20px;
	font-size: 10.5px;
	font-weight: 600;
	text-transform: capitalize;
	flex-shrink: 0;
	letter-spacing: 0.2px;
}

/* Compliance badges */
.EvKmR1v8 {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.x2DB_Y7e {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.3rem 0.65rem;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 500;
}

.x2DB_Y7e i {
	font-size: 9px;
}

.HIs0QMTb {
	background-color: rgba(34, 197, 94, 0.08);
	color: #4ade80;
}

.E7qn_yBl {
	background-color: rgba(239, 68, 68, 0.06);
	color: #f87171;
}

/* Promoter stats */
.OYsjLuGF {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 0.5rem;
	gap: 0.5rem;
	padding: 0.75rem 0 0.1rem;
	margin-top: 0.1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.eaFCJeql {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
}

.qLExWPSK {
	font-size: 17px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: -0.3px;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.wNBKRBWE {
	color: #4ade80;
}

.RxVb3v6O {
	font-size: 10px;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 500;
}


/* ═══════════════════════════════════════
   Payout Tab
   ═══════════════════════════════════════ */

.jyjkfWO0 {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
}

/* Toolbar */
.rS5sWC93 {
	display: flex;
	gap: 0.65rem;
	align-items: center;
}

.acKVELGY {
	flex: 1 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.8rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 9px;
	transition: border-color 0.15s ease;
}

.acKVELGY:focus-within {
	border-color: rgba(0, 191, 255, 0.4);
	background: rgba(255, 255, 255, 0.04);
}

.acKVELGY i {
	color: #444;
	font-size: 12px;
}

.acKVELGY input {
	background: none;
	border: none;
	outline: none;
	color: var(--white);
	font-size: 12.5px;
	width: 100%;
}

.acKVELGY input::placeholder {
	color: #444;
}

.sNGpOYSy {
	display: flex;
	gap: 0.3rem;
}

.mhoE1MM8 {
	padding: 0.45rem 0.75rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	color: #666;
	font-size: 11.5px;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}

.mhoE1MM8:hover {
	border-color: rgba(255, 255, 255, 0.1);
	color: #999;
}

.jpiaxlHB {
	border-color: rgba(0, 191, 255, 0.3);
	color: var(--accent-1);
	background: rgba(0, 191, 255, 0.06);
}

/* Payout list */
.HwNaqz6Q {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.bPDv6ZbR {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.8rem 1rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 11px;
	transition: all 0.15s ease;
}

.bPDv6ZbR:hover {
	background: rgba(255, 255, 255, 0.035);
	border-color: rgba(255, 255, 255, 0.07);
}

.HRbBFtSS {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	flex: 1 1;
}

.dfvf8HR8 {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: linear-gradient(135deg, rgba(0, 191, 255, 0.1), rgba(0, 191, 255, 0.03));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: rgba(0, 191, 255, 0.6);
	flex-shrink: 0;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.JxGM7Nka {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
}

.UA6MSwEJ {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.2rem;
	flex-wrap: wrap;
}

.UA6MSwEJ span {
	font-size: 11px;
	color: #666;
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.cSGiKnh3 {
	color: #4ade80 !important;
}

.fNeCfnbm {
	color: #f87171 !important;
}

.VWSoJrgf {
	color: #4ade80 !important;
}

.VWSoJrgf i {
	font-size: 10px;
}

.l6wNnqSS {
	color: #f87171 !important;
}

.l6wNnqSS i {
	font-size: 10px;
}

.nDl25y4r {
	font-size: 15px;
	font-weight: 700;
	color: #555;
	flex-shrink: 0;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.m8N02KFe {
	color: #4ade80;
}

.YVqGTMvf {
	padding: 2.5rem;
	text-align: center;
	color: #444;
	font-size: 12.5px;
}

/* Footer */
.O8QIsHMH {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.a2re9nyC {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.85rem 1rem;
	background: rgba(0, 191, 255, 0.04);
	border: 1px solid rgba(0, 191, 255, 0.1);
	border-radius: 12px;
	font-size: 13px;
	color: #999;
	font-weight: 500;
}

.X0VMXNF9 {
	font-size: 20px;
	font-weight: 700;
	color: var(--accent-1);
	letter-spacing: -0.3px;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.tTq9V6Ia {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8rem 1.25rem;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 10px;
	color: var(--white);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.25s ease;
}

.tTq9V6Ia:hover {
	box-shadow: 0 6px 24px rgba(0, 191, 255, 0.3);
	transform: translateY(-1px);
}

.szNWLFiQ {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.65rem 1rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	color: #999;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}

.szNWLFiQ:hover:not(:disabled) {
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--white);
	background: rgba(255, 255, 255, 0.05);
}

.szNWLFiQ:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.Wj7V2YHJ {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.PSUDkztU {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	color: #888;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}

.PSUDkztU:hover {
	border-color: rgba(255, 255, 255, 0.12);
	color: #ccc;
}

.IiMTxam1 {
	margin: 0;
	font-size: 12px;
	color: #666;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 0.25rem;
}

.IiMTxam1 i {
	color: rgba(0, 191, 255, 0.6);
	font-size: 12px;
}


/* ═══════════════════════════════════════
   Payout Confirm / Success Modal
   ═══════════════════════════════════════ */

.AehP2Ob4 {
	width: 540px;
	max-width: 100%;
	max-height: 88vh;
	background-color: #111216;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.03),
		0 24px 80px rgba(0, 0, 0, 0.6),
		0 8px 32px rgba(0, 0, 0, 0.4);
}

.VQz9bOCk {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 1.35rem 1.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 100%);
}

.VQz9bOCk h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 650;
	color: var(--white);
	flex: 1 1;
	letter-spacing: -0.15px;
}

.rxSia2vT {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: linear-gradient(135deg, rgba(0, 191, 255, 0.18) 0%, rgba(0, 191, 255, 0.05) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: var(--accent-1);
	flex-shrink: 0;
}

.aSDD3zGW {
	flex: 1 1;
	overflow-y: auto;
	padding: 1.35rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
}

.aSDD3zGW::-webkit-scrollbar { width: 5px; }
.aSDD3zGW::-webkit-scrollbar-track { background: transparent; }
.aSDD3zGW::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 3px; }

.VcTeijvV {
	margin: 0;
	color: #888;
	font-size: 13px;
	line-height: 1.6;
}

/* Steps */
.QqySDRDM {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.PTbfnTUF {
	display: flex;
	gap: 0.85rem;
	padding: 0.9rem 1rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 12px;
	align-items: flex-start;
}

.prMbNA5K {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: linear-gradient(135deg, rgba(0, 191, 255, 0.2), rgba(0, 191, 255, 0.06));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--accent-1);
	flex-shrink: 0;
	margin-top: 1px;
}

.BzOBAhT_ {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(34, 197, 94, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	color: #4ade80;
	flex-shrink: 0;
	margin-top: 1px;
}

.negYCkz2 {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
}

.GWEFV8EY {
	margin: 0.25rem 0 0 0;
	font-size: 12px;
	color: #777;
	line-height: 1.5;
}

/* Summary */
.picI1VTm {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	overflow: hidden;
}

.VyW65cBM {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1rem;
	font-size: 13px;
	color: #999;
}

.VyW65cBM + .VyW65cBM {
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.iD3kJWPt {
	background: rgba(0, 191, 255, 0.04);
	font-weight: 600;
	color: var(--white);
}

.iD3kJWPt span:last-child {
	color: var(--accent-1);
	font-size: 17px;
	font-weight: 700;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

/* Bank details */
.O2IZZHs_ {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.OJ6dBAjq {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: #ccc;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.OJ6dBAjq i {
	color: var(--accent-1);
	font-size: 13px;
	opacity: 0.8;
}

.I52Pyj7m {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.e8sF9BEE {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 12.5px;
}

.e8sF9BEE span:first-child {
	color: #666;
}

.e8sF9BEE span:last-child {
	color: var(--white);
	font-weight: 500;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.sH7zzLhR {
	background: none;
	border: none;
	color: var(--accent-1);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0;
	margin-top: 0.15rem;
	transition: opacity 0.15s ease;
}

.sH7zzLhR:hover {
	opacity: 0.75;
}

.sH7zzLhR i {
	font-size: 10px;
}

/* Bank form */
.e_cQXPfc {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.rdk3KAMP {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.rdk3KAMP label {
	font-size: 11px;
	font-weight: 600;
	color: #777;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.rdk3KAMP input {
	padding: 0.6rem 0.8rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 9px;
	color: var(--white);
	font-size: 13px;
	outline: none;
	transition: all 0.15s ease;
}

.rdk3KAMP input:focus {
	border-color: rgba(0, 191, 255, 0.4);
	background: rgba(255, 255, 255, 0.04);
}

.rdk3KAMP input::placeholder {
	color: #444;
}

.XCQHn2iF {
	border-color: rgba(239, 68, 68, 0.5) !important;
}

.iz4_Pm57 {
	font-size: 11.5px;
	color: #f87171;
	margin: 0;
}

.Qqv7v8_o {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.65rem 1rem;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 9px;
	color: var(--white);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-top: 0.15rem;
}

.Qqv7v8_o:hover:not(:disabled) {
	box-shadow: 0 4px 16px rgba(0, 191, 255, 0.3);
}

.Qqv7v8_o:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.fCcVxVcu {
	padding: 0.7rem 0.9rem;
	background-color: rgba(245, 158, 11, 0.06);
	border: 1px solid rgba(245, 158, 11, 0.15);
	border-radius: 10px;
	font-size: 12px;
	color: #fbbf24;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.fCcVxVcu i {
	font-size: 12px;
	opacity: 0.8;
}

/* Footer */
.ZoOo6j3i {
	display: flex;
	justify-content: flex-end;
	gap: 0.65rem;
	padding: 1.1rem 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(255, 255, 255, 0.01);
}

.gBVV2PhT {
	padding: 0.6rem 1.15rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 9px;
	color: #999;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.gBVV2PhT:hover {
	border-color: rgba(255, 255, 255, 0.12);
	color: var(--white);
	background: rgba(255, 255, 255, 0.06);
}

.I5PQJxlU {
	padding: 0.6rem 1.3rem;
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 9px;
	color: var(--white);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	transition: all 0.25s ease;
}

.I5PQJxlU:hover:not(:disabled) {
	box-shadow: 0 6px 20px rgba(0, 191, 255, 0.3);
	transform: translateY(-1px);
}

.I5PQJxlU:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	transform: none;
}

/* Success */
.zazEDfDh {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding: 2rem 1.5rem 1rem;
	text-align: center;
}

.zazEDfDh h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 650;
	color: var(--white);
	letter-spacing: -0.2px;
}

.frvV2itI {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: rgba(34, 197, 94, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	color: #4ade80;
}


/* ═══════════════════════════════════════
   Create / Manage Promoters Modal
   ═══════════════════════════════════════ */

.LUgUnYCR {
	width: 540px;
	max-width: 100%;
	max-height: 88vh;
	background-color: #111216;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 18px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.03),
		0 24px 80px rgba(0, 0, 0, 0.6),
		0 8px 32px rgba(0, 0, 0, 0.4);
}

.sDB4F7Xm {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.BqRPW0R_ {
	font-size: 12px;
	font-weight: 600;
	color: #ccc;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.BqRPW0R_ i {
	color: var(--accent-1);
	font-size: 12px;
	opacity: 0.8;
}

.HmQ1STW3 {
	background-color: rgba(0, 191, 255, 0.1);
	color: var(--accent-1);
	padding: 0.1rem 0.5rem;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	margin-left: 0.25rem;
}

.H5yoRmOB {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 9px;
	transition: border-color 0.15s ease;
}

.H5yoRmOB:focus-within {
	border-color: rgba(0, 191, 255, 0.4);
	background: rgba(255, 255, 255, 0.04);
}

.H5yoRmOB i {
	color: #444;
	font-size: 12px;
}

.H5yoRmOB input {
	background: none;
	border: none;
	outline: none;
	color: var(--white);
	font-size: 12.5px;
	width: 100%;
}

.H5yoRmOB input::placeholder {
	color: #444;
}

.cz785AXL {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	max-height: 190px;
	overflow-y: auto;
	padding-right: 4px;
}

.cz785AXL::-webkit-scrollbar { width: 4px; }
.cz785AXL::-webkit-scrollbar-track { background: transparent; }
.cz785AXL::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 3px; }

.rVY7XZHC {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.6rem 0.8rem;
	background: none;
	border: 1px solid transparent;
	border-radius: 9px;
	color: #999;
	font-size: 12.5px;
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: left;
	width: 100%;
}

.rVY7XZHC:hover {
	background: rgba(255, 255, 255, 0.03);
	color: #ccc;
}

.lYF20rsb {
	background: rgba(0, 191, 255, 0.06);
	border-color: rgba(0, 191, 255, 0.18);
	color: var(--white);
}

.eQVVUzFQ {
	opacity: 0.5;
	cursor: not-allowed;
}

.xvy1PNVF {
	font-size: 11px;
	color: #555;
}

.cMemnFmp {
	margin: 0;
	padding: 1.25rem;
	text-align: center;
	color: #444;
	font-size: 12px;
}

.wzeOVG6H {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	border: 1.5px solid rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: transparent;
	transition: all 0.15s ease;
	flex-shrink: 0;
}

.JUjfLkP1 {
	background: var(--accent-1);
	border-color: var(--accent-1);
	color: var(--white);
}


/* ═══════════════════════════════════════
   Skeleton Loaders
   ═══════════════════════════════════════ */

.FP2pN0fH {
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 14px;
	padding: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.bhCnfJ_G {
	height: 14px;
	width: 70%;
	background: linear-gradient(90deg, #2d2f39 25%, #3d3f49 50%, #2d2f39 75%);
	background-size: 200% 100%;
	animation: Ca3v35tu 1.5s infinite;
	border-radius: 6px;
}

.JHepJS0h {
	height: 10px;
	width: 45%;
	background: linear-gradient(90deg, #2d2f39 25%, #3d3f49 50%, #2d2f39 75%);
	background-size: 200% 100%;
	animation: Ca3v35tu 1.5s infinite;
	border-radius: 6px;
}

@keyframes Ca3v35tu {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}


/* ═══════════════════════════════════════
   Responsive
   ═══════════════════════════════════════ */

@media (max-width: 1024px) {
	.TvZisaa7 {
		grid-template-columns: 1fr;
	}

	.NGGGsw9N {
		display: none;
	}

	._UpVEcj5 {
		padding: 30px 30px;
	}
}

@media (max-width: 640px) {
	._UpVEcj5 {
		padding: 20px 16px;
	}

	._ano102p {
		border-radius: 12px;
	}

	.LLXY3fWS {
		grid-template-columns: repeat(2, 1fr);
	}

	.lQrdkbuH {
		flex-direction: column;
	}

	.rS5sWC93 {
		flex-direction: column;
	}

	.sNGpOYSy {
		width: 100%;
	}

	.mhoE1MM8 {
		flex: 1 1;
		text-align: center;
	}
}

/* -----------------------------------------------------
	Split Layout
------------------------------------------------------ */

.N7dJr5Mz {
	height: 100vh;
	width: 100%;
	display: grid;
	grid-template-columns: 44% 1fr;
	overflow: hidden;
	background-color: var(--bg-dark);
}

/* -----------------------------------------------------
	Left - Form Side
------------------------------------------------------ */

.QcIb6sDf {
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 4.5rem;
	z-index: 1;
}

.FHuyJ1ix {
	width: 100%;
	max-width: 85%;
	display: flex;
	flex-direction: column;
}

.vS8dCx5q {
	width: 140px;
	margin-bottom: 3.5rem;
	opacity: 0;
	animation: SBa95Xgy 0.6s ease forwards 0.1s;
}

.dNLQIPvH {
	font-size: 34px;
	font-weight: 700;
	color: var(--white);
	line-height: 1.2;
	margin-bottom: 0.5rem;
	opacity: 0;
	animation: SBa95Xgy 0.6s ease forwards 0.15s;
}

.dNLQIPvH span {
	color: var(--accent-1);
}

.OAUAl5Vd {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 2.75rem;
	opacity: 0;
	animation: SBa95Xgy 0.6s ease forwards 0.2s;
}

/* -----------------------------------------------------
	Form
------------------------------------------------------ */

.U0iZxtfj {
	display: flex;
	flex-direction: column;
	opacity: 0;
	animation: SBa95Xgy 0.6s ease forwards 0.25s;
}

.o36Jyz2E {
	margin-bottom: 1.35rem;
}

.h8VmYkXS {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 0.5rem;
}

.lIqoQ9US {
	width: 100%;
	height: 56px;
	padding: 0 1.15rem;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	display: flex;
	align-items: center;
	column-gap: 0.8rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.lIqoQ9US:focus-within {
	border-color: var(--accent-1);
	box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.12);
}

.lIqoQ9US i {
	color: rgba(255, 255, 255, 0.22);
	font-size: 15px;
	flex-shrink: 0;
	width: 16px;
	text-align: center;
	transition: color 0.2s ease;
}

.lIqoQ9US:focus-within i {
	color: var(--accent-1);
}

.lIqoQ9US input {
	flex: 1 1;
	background: none;
	border: none;
	outline: none;
	color: var(--white);
	font-size: 15px;
	font-family: var(--font-family);
	padding: 0;
}

.lIqoQ9US input::placeholder {
	color: rgba(255, 255, 255, 0.18);
}

.vD5u6phU {
	width: 100%;
	height: 54px;
	margin-top: 2rem;
	background: var(--accent-1);
	border: none;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.1s ease;
}

.vD5u6phU:hover {
	filter: brightness(1.12);
}

.vD5u6phU:active {
	transform: scale(0.98);
}

.vD5u6phU p {
	color: var(--white);
	font-size: 16px;
	font-weight: 600;
}

.vD5u6phU:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	filter: none;
	transform: none;
}

.RgDJMVZg {
	width: 100%;
	height: 54px;
	margin-top: 2rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.w0BHK09h {
	height: 22px;
}

/* -----------------------------------------------------
	Back to Login Link
------------------------------------------------------ */

.I7wrDoK3 {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1.5rem;
	gap: 0.25rem;
	opacity: 0;
	animation: SBa95Xgy 0.6s ease forwards 0.3s;
}

.I7wrDoK3 p {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.3);
}

.I7wrDoK3 button {
	background: none;
	border: none;
	color: var(--accent-1);
	font-size: 13px;
	font-family: var(--font-family);
	cursor: pointer;
	transition: color 0.2s ease;
}

.I7wrDoK3 button:hover {
	color: var(--white);
}

/* -----------------------------------------------------
	Success State
------------------------------------------------------ */

.YNCagwun {
	opacity: 0;
	animation: SBa95Xgy 0.6s ease forwards 0.25s;
}

.ifkOzlkd {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(60, 162, 89, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.ifkOzlkd i {
	color: var(--success-green);
	font-size: 22px;
}

.TSUy9aTn {
	font-size: 24px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 0.5rem;
}

.wvxtCck3 {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.6;
	margin-bottom: 2rem;
}

/* -----------------------------------------------------
	Right - Visual Panel
------------------------------------------------------ */

.uYaq0Y1t {
	height: 100%;
	position: relative;
	z-index: 1;
	background-color: var(--sub-bg-dark);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4rem;
	overflow: hidden;
}

.uYaq0Y1t::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 30% 20%, rgba(13, 122, 199, 0.08) 0%, transparent 60%),
		radial-gradient(ellipse at 80% 80%, rgba(60, 162, 89, 0.04) 0%, transparent 50%);
	pointer-events: none;
}

.oDGaE0Pj {
	position: relative;
	z-index: 1;
	opacity: 0;
	animation: H6_I69NO 0.8s ease forwards 0.5s;
}

.KZfrPbZl {
	font-size: 28px;
	font-weight: 700;
	color: var(--white);
	line-height: 1.25;
	margin-bottom: 0.75rem;
}

.KZfrPbZl span {
	color: var(--accent-1);
}

.Y69Lyf_7 {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.6;
	margin-bottom: 2.5rem;
	max-width: 400px;
}

.dRlgmWdr {
	position: relative;
	margin-bottom: 2.5rem;
	opacity: 0;
	animation: dSF6i48g 0.8s ease forwards 0.7s;
}

.gXNUVqHu {
	width: 100%;
	border-radius: 16px;
	display: block;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.4),
		0 0 0 1px rgba(255, 255, 255, 0.06);
}

.ur3pYYYu {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	pointer-events: none;
	background:
		linear-gradient(180deg, transparent 60%, rgba(22, 24, 36, 0.5) 100%);
}

.HVIr88Eu {
	display: flex;
	gap: 1.5rem;
	opacity: 0;
	animation: H6_I69NO 0.8s ease forwards 0.9s;
}

.LzQYSOOC {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.yHOptMxk {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 13px;
}

.PxK0nF4k {
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
}

.Hl_g4o9y {
	background: rgba(60, 162, 89, 0.12);
	color: var(--success-green);
}

.poIMhu76 {
	background: rgba(167, 139, 250, 0.12);
	color: #a78bfa;
}

.EDkQzUIQ {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
}

/* -----------------------------------------------------
	Error Banner
------------------------------------------------------ */

.JUyLg2c5 {
	position: fixed;
	top: 1.25rem;
	left: 22%;
	transform: translateX(-50%);
	background: rgba(255, 60, 60, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 0.6rem 1.5rem;
	border-radius: 8px;
	animation: yr2GoLWG 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 10;
}

._tZXz7ro {
	font-size: 13px;
	margin: 0;
	color: white;
	font-weight: 600;
	white-space: nowrap;
}

/* -----------------------------------------------------
	Animations
------------------------------------------------------ */

@keyframes SBa95Xgy {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes H6_I69NO {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes dSF6i48g {
	from { opacity: 0; transform: translateY(25px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes yr2GoLWG {
	from { transform: translate(-50%, -120%); opacity: 0; }
	to { transform: translate(-50%, 0); opacity: 1; }
}

/* -----------------------------------------------------
	Media Queries
------------------------------------------------------ */

@media (max-width: 1024px) {
	.N7dJr5Mz {
		grid-template-columns: 50% 1fr;
	}

	.QcIb6sDf {
		padding: 3rem 3rem;
	}

	.uYaq0Y1t {
		padding: 3rem;
	}

	.HVIr88Eu {
		gap: 1rem;
	}
}

@media (max-width: 768px) {
	.N7dJr5Mz {
		grid-template-columns: 1fr;
	}

	.uYaq0Y1t {
		display: none;
	}

	.QcIb6sDf {
		padding: 3rem 2rem;
	}
}

@media (max-width: 480px) {
	.QcIb6sDf {
		padding: 2rem 1.5rem;
	}

	.dNLQIPvH {
		font-size: 28px;
	}

	.vS8dCx5q {
		width: 95px;
		margin-bottom: 2.5rem;
	}
}

/* -----------------------------------------------------
	Split Layout
------------------------------------------------------ */

.FSGXnKNU {
	height: 100vh;
	width: 100%;
	display: grid;
	grid-template-columns: 44% 1fr;
	overflow: hidden;
	background-color: var(--bg-dark);
}

/* -----------------------------------------------------
	Left - Form Side
------------------------------------------------------ */

.vmx85cGe {
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 4.5rem;
	z-index: 1;
}

.WHBX45QF {
	width: 100%;
	max-width: 85%;
	display: flex;
	flex-direction: column;
}

.CMdqDStG {
	width: 140px;
	margin-bottom: 3.5rem;
	opacity: 0;
	animation: E1Hd81AC 0.6s ease forwards 0.1s;
}

.MB5jbOSP {
	font-size: 34px;
	font-weight: 700;
	color: var(--white);
	line-height: 1.2;
	margin-bottom: 0.5rem;
	opacity: 0;
	animation: E1Hd81AC 0.6s ease forwards 0.15s;
}

.MB5jbOSP span {
	color: var(--accent-1);
}

.uMJ96uQs {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	margin-bottom: 2.75rem;
	opacity: 0;
	animation: E1Hd81AC 0.6s ease forwards 0.2s;
}

/* -----------------------------------------------------
	Form
------------------------------------------------------ */

.sK3EaQni {
	display: flex;
	flex-direction: column;
	opacity: 0;
	animation: E1Hd81AC 0.6s ease forwards 0.25s;
}

.y5tyF4CH {
	margin-bottom: 1.35rem;
}

.Z2RnYrfc {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.45);
	margin-bottom: 0.5rem;
}

.FZQIk62H {
	width: 100%;
	height: 56px;
	padding: 0 1.15rem;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	display: flex;
	align-items: center;
	column-gap: 0.8rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.FZQIk62H:focus-within {
	border-color: var(--accent-1);
	box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.12);
}

.FZQIk62H i {
	color: rgba(255, 255, 255, 0.22);
	font-size: 15px;
	flex-shrink: 0;
	width: 16px;
	text-align: center;
	transition: color 0.2s ease;
}

.FZQIk62H:focus-within i {
	color: var(--accent-1);
}

.FZQIk62H input {
	flex: 1 1;
	background: none;
	border: none;
	outline: none;
	color: var(--white);
	font-size: 15px;
	font-family: var(--font-family);
	padding: 0;
}

.FZQIk62H input::placeholder {
	color: rgba(255, 255, 255, 0.18);
}

.dfamFEKp {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.dfamFEKp i {
	color: rgba(255, 255, 255, 0.22);
	font-size: 14px;
	transition: color 0.2s ease;
}

.dfamFEKp:hover i {
	color: rgba(255, 255, 255, 0.45);
}

.Aj9SbOo_ {
	width: 100%;
	height: 54px;
	margin-top: 2rem;
	background: var(--accent-1);
	border: none;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: filter 0.2s ease, transform 0.1s ease;
}

.Aj9SbOo_:hover {
	filter: brightness(1.12);
}

.Aj9SbOo_:active {
	transform: scale(0.98);
}

.Aj9SbOo_ p {
	color: var(--white);
	font-size: 16px;
	font-weight: 600;
}

.Aj9SbOo_:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	filter: none;
	transform: none;
}

.b5kIg4Du {
	width: 100%;
	height: 54px;
	margin-top: 2rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.RJt2WCG8 {
	height: 22px;
}

/* -----------------------------------------------------
	Back to Login Link
------------------------------------------------------ */

.N6xnCrOs {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1.5rem;
	gap: 0.25rem;
	opacity: 0;
	animation: E1Hd81AC 0.6s ease forwards 0.3s;
}

.N6xnCrOs p {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.3);
}

.N6xnCrOs button {
	background: none;
	border: none;
	color: var(--accent-1);
	font-size: 13px;
	font-family: var(--font-family);
	cursor: pointer;
	transition: color 0.2s ease;
}

.N6xnCrOs button:hover {
	color: var(--white);
}

/* -----------------------------------------------------
	Success State
------------------------------------------------------ */

.RDHVvRVM {
	opacity: 0;
	animation: E1Hd81AC 0.6s ease forwards 0.25s;
}

.KrZKG2eY {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	background: rgba(60, 162, 89, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.5rem;
}

.KrZKG2eY i {
	color: var(--success-green);
	font-size: 22px;
}

.Vq7r2xwT {
	font-size: 24px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 0.5rem;
}

.KNRleBEp {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.6;
	margin-bottom: 2rem;
}

/* -----------------------------------------------------
	Right - Visual Panel
------------------------------------------------------ */

.XRr8y91V {
	height: 100%;
	position: relative;
	z-index: 1;
	background-color: var(--sub-bg-dark);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4rem;
	overflow: hidden;
}

.XRr8y91V::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 30% 20%, rgba(13, 122, 199, 0.08) 0%, transparent 60%),
		radial-gradient(ellipse at 80% 80%, rgba(60, 162, 89, 0.04) 0%, transparent 50%);
	pointer-events: none;
}

.pSdjFDnw {
	position: relative;
	z-index: 1;
	opacity: 0;
	animation: amdpdB3g 0.8s ease forwards 0.5s;
}

.lQoWU0Cq {
	font-size: 28px;
	font-weight: 700;
	color: var(--white);
	line-height: 1.25;
	margin-bottom: 0.75rem;
}

.lQoWU0Cq span {
	color: var(--accent-1);
}

.FSFTFoHh {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.4);
	line-height: 1.6;
	margin-bottom: 2.5rem;
	max-width: 400px;
}

.KbbFhdm9 {
	position: relative;
	margin-bottom: 2.5rem;
	opacity: 0;
	animation: QUuIWBnH 0.8s ease forwards 0.7s;
}

.VHu5IgzP {
	width: 100%;
	border-radius: 16px;
	display: block;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.4),
		0 0 0 1px rgba(255, 255, 255, 0.06);
}

.igdPti6v {
	position: absolute;
	inset: 0;
	border-radius: 16px;
	pointer-events: none;
	background:
		linear-gradient(180deg, transparent 60%, rgba(22, 24, 36, 0.5) 100%);
}

.zNxjuuZZ {
	display: flex;
	gap: 1.5rem;
	opacity: 0;
	animation: amdpdB3g 0.8s ease forwards 0.9s;
}

.sUUvDKRl {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.a3oPMeys {
	width: 34px;
	height: 34px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 13px;
}

.VxMj3FGy {
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
}

.MV7NmiHu {
	background: rgba(60, 162, 89, 0.12);
	color: var(--success-green);
}

.Z3vUiAwa {
	background: rgba(167, 139, 250, 0.12);
	color: #a78bfa;
}

.hYhhBZK0 {
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
}

/* -----------------------------------------------------
	Error Banner
------------------------------------------------------ */

.wlRL7qg8 {
	position: fixed;
	top: 1.25rem;
	left: 22%;
	transform: translateX(-50%);
	background: rgba(255, 60, 60, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 0.6rem 1.5rem;
	border-radius: 8px;
	animation: AYnMLTp1 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	z-index: 10;
}

.ldRU6fP2 {
	font-size: 13px;
	margin: 0;
	color: white;
	font-weight: 600;
	white-space: nowrap;
}

/* -----------------------------------------------------
	Animations
------------------------------------------------------ */

@keyframes E1Hd81AC {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes amdpdB3g {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes QUuIWBnH {
	from { opacity: 0; transform: translateY(25px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes AYnMLTp1 {
	from { transform: translate(-50%, -120%); opacity: 0; }
	to { transform: translate(-50%, 0); opacity: 1; }
}

/* -----------------------------------------------------
	Media Queries
------------------------------------------------------ */

@media (max-width: 1024px) {
	.FSGXnKNU {
		grid-template-columns: 50% 1fr;
	}

	.vmx85cGe {
		padding: 3rem 3rem;
	}

	.XRr8y91V {
		padding: 3rem;
	}

	.zNxjuuZZ {
		gap: 1rem;
	}
}

@media (max-width: 768px) {
	.FSGXnKNU {
		grid-template-columns: 1fr;
	}

	.XRr8y91V {
		display: none;
	}

	.vmx85cGe {
		padding: 3rem 2rem;
	}
}

@media (max-width: 480px) {
	.vmx85cGe {
		padding: 2rem 1.5rem;
	}

	.MB5jbOSP {
		font-size: 28px;
	}

	.CMdqDStG {
		width: 95px;
		margin-bottom: 2.5rem;
	}
}


/* Comfortaa removed - using Helvetica Neue system stack */

@font-face {
    font-family: DonerRegular;
    src: url(/static/media/Doner-RegularText.ba9ab1d5394d74b3284f.otf) format("opentype");
}

:root {
	--white: #ffffff;
	--black: #000000;

	--bg-dark: #01000D;

	--sub-bg-dark: #161824;
	--sub-bg-light: #f0f1f2;

	--accent-1: #0D7AC7;
	--success-green: #3CA259;
	--cancelled-red: #ff2626
}

:root {
	--font-family: 'DonerRegular', sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
}

body {
	background-color: #01000D;
	background-color: var(--bg-dark)
}

button {
	cursor: pointer;
}

h1 {
	font-weight: 700;
	font-size: 34px;
}

h3 {
	font-weight: 600;
	font-size: 24px;
}

p, input {
	font-weight: 300;
	font-size: 15px;
}

.Lc1RInsi {
	font-weight: 600;
}

.iMdyqgoU {
	font-size: 10px;
}

.FjnZMd2N {
	font-size: 12px;
}

.BwM18oDJ {
	font-size: 14px;
}

.uDVQbjZe {
	font-size: 15px;
}

.ERMFwp3e {
	font-size: 16px;
}

.oqgyGr6Q {
	font-size: 17px;
}

.qPb7ulTw {
	height: 100vh;
	width: 100%;

	display: flex;
	overflow: hidden;
	background-color: #01000D;
	background-color: var(--bg-dark);

	box-sizing: border-box;
	color: #ffffff;
	color: var(--white)
}

.t5mYzqLO {
	background-color: #ffffff;
	background-color: var(--white);
}

.tWa5ixRe {
  	opacity: 0.7 !important;
  	pointer-events:none !important;
}

.YEy1a3hw {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;

	padding: 40px 60px;
	row-gap: 2.5rem;
	box-sizing: border-box;
}

.YgOvDK0F {
	height: 100%;
	width: 100%;
	overflow: hidden;
	grid-column-gap: 1.5rem;
	column-gap: 1.5rem;
	/* Row gap is intentionally 0 - uniform vertical spacing between the
	   three rows (nav, event identity bar, content) flattened the page
	   rhythm and made the header zone feel disconnected from itself.
	   Each row child now owns its own bottom margin, so we can group
	   tightly (nav ↔ event bar) and separate boldly (event bar ↔ content)
	   instead of one global gap doing both jobs at once. */
	grid-row-gap: 0;
	row-gap: 0;

    display: grid;
    grid-template-rows: -webkit-max-content -webkit-max-content 1fr;
    grid-template-rows: max-content max-content 1fr;
    grid-template-columns: 25% 1fr;
}

/* ── Page header rhythm ────────────────────────────────────────
   Proximity: nav tabs sit close to the event identity bar so they
   read as one "page header" zone (tabs say where you are, the bar
   says what you're working on).
   Whitespace: a clear gap below the event bar, not a faint border,
   carries the boundary to the content area. */
/* Page-header rhythm. Now that EventHeader is a card (its own visual
   object), each row needs a real, deliberate gap between it and its
   neighbours so the three zones (nav tabs, event identity card, content
   modules) read as three separate things rather than a continuous sheet
   of dark UI. */
.YgOvDK0F > .XUgHyYRt {
	margin-bottom: 0.9rem;
}

.YgOvDK0F > .HPW2bBJ2 {
	margin-bottom: 1.5rem;
}

/* Full-width variant - used when no left sidebar is rendered (e.g. Dashboard tab).
   Higher specificity so it overrides the responsive column ratios further down. */
.YgOvDK0F.Fxcb4t2s {
	grid-template-columns: 1fr;
}

.YgOvDK0F > .HPW2bBJ2,
.YgOvDK0F > .XUgHyYRt {
	grid-column: 1 / -1;
}

.Fxcb4t2s > .n6GViVAh {
	grid-column: 1 / -1;
}

.TQQR6ZQ6 {
	height: 100%;
	width: 100%;
	border-radius: 15px;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	padding: 1rem;
	box-sizing: border-box;
	position: relative;

    display: grid;
    grid-template-rows: auto 1fr;
    border: 1px solid #2d2f39;
    grid-column-start: 1;
    overflow-y: scroll;
}

.n6GViVAh {
    height: 100%;
    width: 100%;
    position: relative;
    border: 1px solid #01000D;
    border: 1px solid var(--bg-dark);
    overflow: hidden;
}

.kOG0Yht8 {
	display: flex;
	align-items: center;
	column-gap: 1rem;
	width: 100%;
}

.LzjiAOJY {
	height: 130%;
	display: grid;
	grid-template-rows: 7.5px 1fr;
}

.ipmUdENZ {
	width: 7.5px;
	height: 7.5px;
	border-radius: 100%;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
}

.fIdQKYBO {
	height: 100%;
	width: 1px;
	background: linear-gradient(180deg, #0D7AC7 0%, #3943b7 58.53%, #161824 100%);
	background: linear-gradient(180deg, #0D7AC7 0%, #3943b7 58.53%, var(--sub-bg-dark) 100%);
	margin: 0 auto;
}

.kUodsubC {
	display: flex;
	align-items: center;
	display: grid;
	grid-template-columns: 1fr auto;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-column-gap: 1rem;
    column-gap: 1rem;
}

.lNuwlKvb {
    border: 1px solid #2d2f39;
    background-color: #161824;
    background-color: var(--sub-bg-dark);
    border-radius: 10px;
    color: #ffffff;
    color: var(--white);
    column-gap: .75rem;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    position: relative;
}

.lNuwlKvb input {
	width: calc(100% - 4rem);
	border: none;
	background: none;
	height: 50px;
	position: absolute;
	left: 40px;
	color: #ffffff;
	color: var(--white)
}

.Qy8KA0lV {
    border: 1px solid #2d2f39;
    background-color: #0D7AC7;
    background-color: var(--accent-1);
    border-radius: 10px;
    height: 50px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    color: var(--white);
    column-gap: .75rem
}

.qZk_jATy {
    display: flex;
    flex-direction: column;
    flex: 1 1;
}

.IKH0YCvC {
	display: flex;
	align-items: center;
	column-gap: .75rem;
}

.gAPgkE2C {
	flex: 1 1;
	width: 100%;
	margin-top: 2rem;
	row-gap: 2rem;
	display: flex;
    flex-direction: column;
}

.YpojLVEi {
	display: flex;
	flex-direction: column;
	row-gap: .8rem;
	margin-top: 1rem;
}

.tpMflVk4 {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    grid-column-gap: .5rem;
    column-gap: .5rem;
    height: -webkit-max-content;
    height: max-content;
}

.FSOZSfCg {
	width: 22.5px;
	aspect-ratio: 1;
	border-radius: 4px;
	border: 1px solid #0D7AC7;
	border: 1px solid var(--accent-1);
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	color: var(--white)
}

.DQV6uvIg {
	background-color: #0D7AC7;
	background-color: var(--accent-1);
}

.aNiKKxvb {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	color: #ffffff;
	color: var(--white);
	cursor: pointer;
	padding: 0;
	margin: 0;
	transition: opacity 0.15s ease;
}

.aNiKKxvb:hover {
	opacity: 0.8;
}

.aNiKKxvb i:last-child {
	opacity: 0.5;
	transition: transform 0.2s ease, opacity 0.15s ease;
}

.aNiKKxvb:hover i:last-child {
	opacity: 1;
}

._8vnPWhRw {
	position: absolute;
	left: -16px;
	top: 20px;
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: none;
	border-radius: 12.5px;
	padding: 10px;
	color: white;
    z-index: 9999;
    overflow: hidden
}

._8vnPWhRw::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0;
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid #2d2f39;
    border-right: none;
    border-radius: 12.5px 0 0 12.5px;
    pointer-events: none;
}

.W7KmhrLb {
    width: 22.5%;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    row-gap: 1rem;
    background-color: #01000D;
    background-color: var(--bg-dark);
    border-radius: 10px;
    border: 1px solid #2d2f39;
    padding: 10px;
    box-sizing: border-box;
}

.W7KmhrLb img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.L6oSsGCh {
	padding: 0 !important;
}

.L6oSsGCh img {
	object-fit: fill
}

.uHEM3Rfb {
	display: flex;
	flex-direction: column;
	row-gap: .75rem;
}

.RTW4EWUs {
	display: grid;
	grid-template-columns: 30px 1fr;
}

.rXaAtB25 {
	margin-bottom: 1.5rem;
}

.RTW4EWUs i {
	display: flex;
	justify-content: center;
	margin-right: 15px;
}

.RTW4EWUs a {
	text-decoration: underline;
}

.SBWMecvl {
	height: -webkit-max-content;
	height: max-content;
	width: 40%;
	position: absolute;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	border-radius: 15px;

	background-color: #01000D;

	background-color: var(--bg-dark);
}

.WaywaOvT {
	height: 90%;
	width: 50%;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  	border-radius: 15px;
  	border: 1px solid #2d2f39;
	background-color: #01000D;
	background-color: var(--bg-dark);	
}

._6d5qwBXy {
	padding: 25px;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	display: grid;
	grid-template-rows: auto 1fr auto;
	color: #ffffff;
	color: var(--white);
}

.UwG1bSZe {
	display: grid;
	grid-template-columns: auto 1fr;
}

.kJ67uruR {
	display: flex;
	flex-direction: column;
	row-gap: .25rem;
}

.stZgF6_1 {
	margin: 0 0 0 auto;
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	grid-column-gap: 1.25rem;
	column-gap: 1.25rem;
	position: relative;
	height: 35px
}

.ndqQ3KBX {
	width: 35px;
	aspect-ratio: 1;
	border: 1px solid #ffffff;
	border: 1px solid var(--white);
	background-color: #01000D;
	background-color: var(--bg-dark);
	border-radius: 100%;
	

	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

.QWJJDXrt {
	border: 1px solid #0D7AC7;
	border: 1px solid var(--accent-1);
	background-color: #0D7AC7;
	background-color: var(--accent-1);
}

.tvz8TAWd {
	width: 100%;
	display: flex;
	flex-direction: column;
	row-gap: 1.5rem;
}

.lQbShbG4 {
	width: 100%;
	display: flex;
	flex-direction: column;
	
	height: calc(100% + 25px);
	overflow: hidden;
}

.Cv3qPsgX {
	margin: auto 0 0 0 !important;
	padding: 3rem 0 25px 0 !important

}

.a4Ew42uW {
	display: flex;
	margin-top: 1rem
}

.ALmBSRPI {
	width: 40px;
	aspect-ratio: 1;
	background-color: #ffffff;
	background-color: var(--white);
	border: none;
	color: #01000D;
	color: var(--bg-dark);
	border-radius: 100%;

	display: flex;
	align-items: center;
	justify-content: center;
}

.lS4IShe_ {
	position: absolute;
	top: 155px;
	right: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: .5rem;
}

.kYyQbUvR {
	padding: 5px 15px;
	box-sizing: border-box;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	color: #ffffff;
	color: var(--white);
	border: none;
	border-radius: 5px;

	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
	cursor: pointer;
	z-index: 999999;	
}

.VqXxSJLL {
	position: absolute;
	bottom: 25px;
	right: 25px;
	display: flex;
	align-items: center;
	column-gap: .5rem;
}

.LO1VFYmG {
	padding: 5px 15px;
	box-sizing: border-box;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	color: #ffffff;
	color: var(--white);
	border: none;
	border-radius: 5px;

	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
	cursor: pointer;
	z-index: 999999;
}

.BQ7sckzV {
	margin: 10px 0 0 auto;
}

.BpnU5xNH {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.EGFHU059:focus, .LkLAk1Oc {
	border: 3px solid rgba(13, 122, 199,1);
	position: relative;
}

.hyQVqiYc {
	background: #01000D;
	background: var(--bg-dark);;
	border: 3px solid rgba(13, 122, 199,0.3);
	max-width: 100%;
	padding: 10px;
	width: 100%;
	color: #ffffff;
	color: var(--white);
	height: 50px;
	max-height: 50px;
	border-radius: 10px;
	transition: border 0.3s ease;
	resize: none;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.hyQVqiYc img {
	height: 25px;
}

.XUgHyYRt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	min-height: 40px;
}

.jgMJ9Yz0 {
	display: flex;
	align-items: center;
	column-gap: 7.5px;
	min-width: 0;
	flex-wrap: nowrap;
}

.e0m6lMKE {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: none;
	border: none;
	padding: 4px 12.5px;
	color: rgba(255, 255, 255, 0.55);
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.e0m6lMKE:hover {
	color: #ffffff;
	color: var(--white);
}

.WX1rK6V3 {
	color: #ffffff;
	color: var(--white);
	border-bottom: 2px solid #0D7AC7;
	border-bottom: 2px solid var(--accent-1);
}

.wLPz6eaJ {
	display: inline-flex;
	align-items: center;
	padding: 1px 7px;
	font-size: 10px;
	font-weight: 700;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.3px;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	transition: all 0.15s ease;
}

.INlMLpUp {
	background: rgba(13, 122, 199, 0.18);
	color: #0D7AC7;
	color: var(--accent-1);
}

/* ── Right-aligned action buttons (replaces the old QuickActions card) ── */

.P4XHmySi {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
}

.dMhRGN2i {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.75);
	padding: 0.4rem 0.75rem;
	border-radius: 8px;
	cursor: pointer;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.dMhRGN2i:hover {
	background: rgba(255, 255, 255, 0.07);
	color: #ffffff;
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.12);
}

.dMhRGN2i:active {
	transform: scale(0.97);
}

.dMhRGN2i i {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
}

.dMhRGN2i:hover i {
	color: #ffffff;
	color: var(--white);
}

.ToPuSw2W {
	background: rgba(13, 122, 199, 0.18);
	border-color: rgba(13, 122, 199, 0.4);
	color: #ffffff;
	color: var(--white);
}

.ToPuSw2W i {
	color: #0D7AC7;
	color: var(--accent-1);
}

.ToPuSw2W:hover {
	background: rgba(13, 122, 199, 0.28);
	border-color: rgba(13, 122, 199, 0.55);
}

.ToPuSw2W:hover i {
	color: #ffffff;
	color: var(--white);
}

.yq7w6LtX {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-row-gap: 1rem;
	row-gap: 1rem;
	grid-column-gap: 1rem;
	column-gap: 1rem;
	position: relative;
    margin-top: 1rem;
}

.yq7w6LtX .fIYn6sa8,
.pwihbTtt .fIYn6sa8 {
	cursor: default;
	pointer-events: none;
}

.XmN_03Sv {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-column-gap: .5rem;
  column-gap: .5rem;
  pointer-events: none;
  position: relative;
}

.tW92CeSW {
	height: 38px;
	aspect-ratio: 1;
	background-color: #ffffff;
	background-color: var(--white);
	color: #161824;
	color: var(--sub-bg-dark);
	border-radius: 7.5px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color .2s ease, color .4s ease
}

.bieLUIa8 {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: -webkit-max-content;
    grid-template-rows: max-content;
    margin-top: 1rem;
    grid-row-gap: 1rem;
    row-gap: 1rem;
    position: relative;
}

.eE4ChAuS {
	width: 100%;
	display: grid;
	grid-template-columns: auto 1fr;
	color: white;
	grid-column-gap: 1rem;
	column-gap: 1rem;
}

.BiMDvlr1 {
	width: 100%;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;

	border-radius: 10px;
	padding: 10px;
	text-align: left;
	box-sizing: border-box;

	display: grid;
	grid-template-columns: 1fr auto;
	grid-column-gap: .5rem;
	column-gap: .5rem;
}

.Jd3sh3Co {
	display: flex;
	flex-direction: column;
	row-gap: .25rem;
}

.SMRGP9lh {
	width: 20px;
	height: 20px;
	background: none;
	border: none;

	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
}

.SYU6gdh5 {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 0 auto;
  position: relative;
}

.SYU6gdh5 input[type="number"] {
  width: 50px;
  height: 20px;
  text-align: center;
  border: 1px solid #ffffff;
  border: 1px solid var(--white);
  border-radius: 5px;
  outline: none;
  -webkit-appearance: textfield;
          appearance: textfield;
  color: #ffffff;
  color: var(--white);
  background-color: transparent;
}

.SYU6gdh5 input[type="number"]::-webkit-inner-spin-button,
.SYU6gdh5 input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
  margin: 0;
}

.SYU6gdh5 input[type="number"] {
  -moz-appearance: textfield;
}

.YmAVGBpQ {
  width: 20px;
  height: 20px;
  background-color: #ffffff;
  background-color: var(--white);
  color: #161824;
  color: var(--sub-bg-dark);
  border: 1px solid #ffffff;
  border: 1px solid var(--white);
  border-radius: 5px;
  font-size: 18px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.jLaTzFFl {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.jLaTzFFl img {
	height: 25%
}

.E9C0PvVe {
  cursor: pointer;
}

.E9C0PvVe p {
    color: #0D7AC7 !important;
    color: var(--accent-1) !important;
    text-decoration: underline !important;
}

@keyframes YAqbNuqK {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.Rt8sngsG {
	margin-bottom: 3.25rem;
}

.uOTJvkgT {
	margin: 1.5rem 0;
	width: 100%;
	padding: 10px 20px;
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	border-radius: 10px;
	text-align: center;	
}

.IGnaWc3a {
	height: 100%;
	width: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;

	text-align: center;
}

.IGnaWc3a span, .RG6wug3k span, .Jd3sh3Co p span {
	color: #0D7AC7;
	color: var(--accent-1)
}

 

.MZ3qBzUV {
	padding: 25px;
	box-sizing: border-box;
	height: 100%;
	width: 100%;
	display: flex;
    flex-direction: column;
	color: #ffffff;
	color: var(--white);
	position: relative;
}

.dMjZTYJM {
    display: flex;
    flex-direction: column;
    height: calc(100% - 125px);
    width: 100%;
    margin-top: 1.5rem
}

.Q3jkOEe1 {
  opacity: 0;
  animation: e4B92Hku 200ms ease-out forwards;
}

.L3Km6EAn span, .YdjMisLI span {
	color: #0D7AC7;
	color: var(--accent-1);
}

.ys5mX5n7 {
	position: relative;
}

.AOuPGHJB {
  color: transparent !important;
}

.AbmXAqPF {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  color: var(--white);
}

.XsYsxo86 {
	display: flex;
	flex-direction: column;
}

.XsYsxo86 .Q3jkOEe1 {
	height: 100%;
    display: flex;
    flex-direction: column;
}

.OJFx9yeV {
  	background: rgba(255,255,255,0.03);
  	border: 1px solid #2d2f39;
  	border-radius: 12px;
  	padding: 1rem;
  	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  	margin: auto 0 0 0;
}

.IKH0YCvC {
	display: flex;
	align-items: center;
	column-gap: .75rem;
}

.zWovjKlQ {
  	display: flex;
  	flex-direction: column;
  	margin-top: 1rem;
}

.H1wJ3XuI {
    border: 1px solid #2d2f39;
    background-color: #0D7AC7;
    background-color: var(--accent-1);
    border-radius: 10px;
    height: 40px;
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    color: var(--white);
    column-gap: .75rem;
    margin-top: .75rem
}

._Oxxrxdl {
    border: 1px solid #2d2f39;
    background-color: #c0392b;
    border-radius: 10px;
    height: 40px;
    width: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    color: var(--white);
    column-gap: .75rem;
    margin-top: .75rem
}

.GBIgH6BQ {
    width: 100%;
    margin-top: .75rem;
}

.GBIgH6BQ ._Oxxrxdl {
    margin-top: 0;
}

.F2xhBQY6 {
    opacity: 0.35;
    cursor: not-allowed;
}

.gtAReCTA {
    font-size: 11px;
    color: #888;
    text-align: center;
    margin-top: 0.4rem;
}

.DTp3I8eR {
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  width: 100%;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid;
  background-color: rgba(255, 255, 255, 0.02);
  transition: all 0.3s ease;
}

.fRuZUCKO {
	background-color: #ff4d4d;
	border-color: #ff4d4d88;
	padding: .75rem;
	margin-top: 1rem
}

.DTp3I8eR.FlvBBzQ5 {
  border-color: rgba(60, 162, 89, 0.3);
  background-color: rgba(60, 162, 89, 0.05);
}

.DTp3I8eR.AFPzyu29 {
  border-color: rgba(255, 165, 0, 0.3);
  background-color: rgba(255, 165, 0, 0.05);
}

.DTp3I8eR.B3_tOgOT {
  border-color: rgba(255, 77, 77, 0.3);
  background-color: rgba(255, 77, 77, 0.05);
}

.DTp3I8eR.fcbFrfTQ {
  border-color: rgba(255, 255, 255, 0.05);
  background-color: rgba(255, 255, 255, 0.05);
}

.KgohUFii {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1.5rem;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
}

.mDcGQNL4 {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 1rem;
  gap: 1rem;
  align-items: center;
  width: 100%
}

.GBaWgxM_ {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  font-size: 18px;
  flex-shrink: 0;
}

.FlvBBzQ5 .GBaWgxM_ {
  background-color: rgba(60, 162, 89, 0.2);
  color: #3CA259;
}

.AFPzyu29 .GBaWgxM_ {
  background-color: rgba(255, 165, 0, 0.2);
  color: #ffa500;
}

.B3_tOgOT .GBaWgxM_ {
  background-color: rgba(255, 77, 77, 0.2);
  color: #ff4d4d;
}

.fcbFrfTQ .GBaWgxM_ {
  background-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255);
}

.eiENsfa4 {
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
}

.Bd8UJLLM {
  margin: 0;
  font-size: 13px;
  color:#f8baba;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.Y4eV30aI {
  margin: 0;
  font-size: 13px;
  color:#ffffff;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.Y4eV30aI span {
	color: #0D7AC7;
	color: var(--accent-1)
}

.Z1DRDChe {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  color: var(--white);
}

.ZLWDgRGt {
  margin: 0;
  font-size: 12px;
  color: #ffa500;
  font-weight: 500;
}

.B3_tOgOT .ZLWDgRGt {
  color: #ff4d4d;
}

.pLhIo51t {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1 1;
  min-width: 200px;
}

.kQrFFTpQ {
  flex: 1 1;
  height: 6px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2);
}

.sL0AfUY9 {
  height: 100%;
  border-radius: 10px;
  transition: width 0.3s ease;
  box-shadow: 0 0 15px currentColor;
}

.sL0AfUY9.cYlgZ6oJ {
  background: linear-gradient(90deg, #3CA259 0%, #6bc99f 100%);
}

.sL0AfUY9.RS7Rh2RL {
  background: linear-gradient(90deg, #ffa500 0%, #ffb84d 100%);
}

.sL0AfUY9.zIK2l4T_ {
  background: linear-gradient(90deg, #ff4d4d 0%, #ff8080 100%);
  animation: Em4YXtly 1s ease-in-out infinite;
}

@keyframes Em4YXtly {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.dD1Bk0Xr {
  min-width: 40px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  color: var(--white);
  text-align: right;
}

.KdwraTPJ {
  display: flex;
  flex-direction: column;
  row-gap: 0.25rem;
  align-items: flex-end;
  min-width: 100px;
}

.jO8C8y3v {
  margin: 0;
  font-size: 11px;
  color: #999;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.JFkIRGp0 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  background: linear-gradient(135deg, #00bfff 0%, #0099cc 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ONwfQM2p {
  display: flex;
  gap: 1.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.cYgTFZ_M {
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

.hEdfhZmK {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border-radius: 12px;
	border: 1px solid #2d2f39;
	overflow: hidden;
}

.NTB3B0YH {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.5);
	flex-shrink: 0;
}

.d6HMu5ea {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	color: var(--white);
}

.mm56CJXB {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.pZyJY9Wb {
	margin: 0;
	font-size: 12px;
	color: #888;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.b48MovmE {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.kcwTGe7X {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	padding: 0.45rem 0.75rem;
}

.kcwTGe7X i {
	color: #555;
	font-size: 12px;
	flex-shrink: 0;
}

.kcwTGe7X input {
	background: none;
	border: none;
	outline: none;
	color: #ffffff;
	color: var(--white);
	font-size: 13px;
	width: 160px;
	padding: 0;
	font-family: inherit;
}

.kcwTGe7X input::placeholder {
	color: #555;
}

.DLdiqhuD {
	background: none;
	border: none;
	color: #555;
	cursor: pointer;
	padding: 0;
	font-size: 11px;
	display: flex;
	align-items: center;
	transition: color 0.15s ease;
}

.DLdiqhuD:hover {
	color: #ffffff;
	color: var(--white);
}

.EU4lsRS3 {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem;
	background: linear-gradient(135deg, #0D7AC7 0%, #0099cc 100%);
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border: none;
	border-radius: 8px;
	color: #ffffff;
	color: var(--white);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.EU4lsRS3:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}

.EU4lsRS3 i {
	font-size: 11px;
}

/* ── Source-filter chips ───────────────────────────────────────
   Sits between the .ie_list_header and .ie_list_body - its own
   horizontal band so it reads as scoping the table beneath it.
   The bar overflows horizontally on narrow widths (chips stay on
   one line, scroll sideways) rather than wrapping to two rows,
   which would push the list down and feel chaotic.

   Each chip is icon + label + count. The count is a small muted
   pill that shifts to a brighter accent when the chip is active,
   echoing the dashboard's Recent Activity filter visual language
   (the user has already learned this pattern there). */
.RYz9C9Hd {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.6rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.5);
	background-color: rgba(0, 0, 0, 0.12);
	overflow-x: auto;
	overflow-y: hidden;
	flex-shrink: 0;
	scrollbar-width: thin;
}

.RYz9C9Hd::-webkit-scrollbar {
	height: 4px;
}

.RYz9C9Hd::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 2px;
}

.kpXCnnSB {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.75rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.6);
	border-radius: 999px;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	flex-shrink: 0;
}

.kpXCnnSB i {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.45);
	transition: color 0.15s ease;
}

.kpXCnnSB:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.1);
}

.kpXCnnSB:hover:not(:disabled) i {
	color: rgba(255, 255, 255, 0.7);
}

.kpXCnnSB:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.oOOlneuH {
	background: rgba(13, 122, 199, 0.18);
	border-color: rgba(13, 122, 199, 0.45);
	color: #ffffff;
	color: var(--white);
}

.oOOlneuH i {
	color: #0D7AC7;
	color: var(--accent-1);
}

/* Count pill - quiet at rest (just metadata), accent-tinted when
   the chip is active so the eye can re-locate the active view at
   a glance. Tabular-nums keeps the digit width fixed so chip
   width doesn't twitch as counts change with live updates. */
.kvWoZKhd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 18px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.55);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2px;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	transition: background 0.15s ease, color 0.15s ease;
}

.oOOlneuH .kvWoZKhd {
	background: rgba(13, 122, 199, 0.3);
	color: #ffffff;
	color: var(--white);
}

/* Subtitle suffix shown when a filter is active - the "of N" text
   that puts the filtered count in context without competing with
   the primary "X parties" number. */
.MtV1XZ0A {
	color: rgba(255, 255, 255, 0.35);
}

/* CTA inside the empty state when an active filter has zero
   results - gives the user a one-click escape back to "All". */
.Bfrmc9uG {
	margin-top: 0.5rem;
	padding: 0.4rem 0.85rem;
	background: rgba(13, 122, 199, 0.12);
	border: 1px solid rgba(13, 122, 199, 0.35);
	color: #0D7AC7;
	color: var(--accent-1);
	border-radius: 8px;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.Bfrmc9uG:hover {
	background: rgba(13, 122, 199, 0.2);
	border-color: rgba(13, 122, 199, 0.55);
}

.qUmCjWFG {
	flex: 1 1;
	overflow-y: auto;
}

.qUmCjWFG::-webkit-scrollbar {
	width: 6px;
}

.qUmCjWFG::-webkit-scrollbar-track {
	background: transparent;
}

.qUmCjWFG::-webkit-scrollbar-thumb {
	background: #2d2f39;
	border-radius: 3px;
}

.jeKFhu5G {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 1.25rem;
	width: 100%;
	background: none;
	border: none;
	border-left: 3px solid transparent;
	border-bottom: 1px solid rgba(45, 47, 57, 0.3);
	cursor: pointer;
	text-align: left;
	transition: background-color 0.12s ease, border-color 0.12s ease;
	color: #ffffff;
	color: var(--white);
	position: relative;
}

.jeKFhu5G:hover .ed9TqcDi {
	background: rgba(255, 255, 255, 0.1);
	color: #ccc;
}

.Ebv9OQEe {
	border-left-color: #0D7AC7;
	border-left-color: var(--accent-1);
}

.QGrNPmYs {
	padding-left: 2.5rem;
}

.QGrNPmYs .ed9TqcDi {
	width: 32px;
	height: 32px;
	font-size: 11px;
}

/* ── Party grouping ──────────────────────────────────────────────────
   Each party (host + plus-ones) is wrapped in a .ie_party_group div.
   Solo hosts get no extra chrome. Multi-member parties get a subtle
   left rail beneath the host so the relationship is unambiguous -
   "these rows are all together".
   When a party is "active" (any member selected → sidebar showing
   that person), the rail brightens to the accent colour to give the
   sidebar context a visual home in the list. */
.rw9reNxz {
	display: block;
	position: relative;
}

/* Hide the per-row divider between a host and its plus-ones so the
   party reads as one block. The last member keeps its border so
   parties stay visually separated from each other. */
.rw9reNxz .jeKFhu5G:not(:last-child) {
	border-bottom: none;
}

.vekYlbMi {
	padding-bottom: 0.25rem;
}

/* Indented rail under the host icon, spanning the +1 rows.
   Sits inside the sub-row indent (.ie_member_card_sub padding-left: 2.5rem)
   so it visually links the host's icon to its sub-rows. */
.vekYlbMi::before {
	content: '';
	position: absolute;
	left: 1.85rem;
	top: 3.2rem;
	bottom: 0.5rem;
	width: 1px;
	background: rgba(255, 255, 255, 0.08);
	pointer-events: none;
	transition: background-color 120ms ease;
}

.xEGKVtIp.vekYlbMi::before {
	background: rgba(13, 122, 199, 0.45);
}

/* Anonymous +1 row - same indent as a named +1, slightly dimmer so
   a glance immediately tells host/named/anonymous apart. */
.zmYuTUma .ZCkhDSak {
	color: #aaa;
	font-weight: 500;
	font-style: italic;
}

.zmYuTUma .ed9TqcDi {
	background: rgba(255, 255, 255, 0.03);
	color: #666;
}

.ed9TqcDi {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.05);
	color: #888;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}

.VUvhpDiG {
	background: rgba(60, 162, 89, 0.12);
	color: #3CA259;
	color: var(--success-green);
}

.iAMG3rFO {
	background: rgba(13, 122, 199, 0.15);
	color: #0D7AC7;
	color: var(--accent-1);
}

.Yt5Tw_m6 {
	flex: 1 1;
	min-width: 0;
}

.ZCkhDSak {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.s2884Tr0 {
	margin: 0.15rem 0 0;
	font-size: 12px;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Role-specific stat strip below the email line. Small inline chips
   that read as secondary metadata, not as primary actions - kept
   muted enough that name+email still anchor the row visually. */
.j9Q_PS4q {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.4rem;
}

.QUvsfecS {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.15rem 0.5rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.65);
	font-size: 10.5px;
	font-weight: 500;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.QUvsfecS i {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.45);
}

.A6_BSD2J {
	color: rgba(255, 255, 255, 0.4);
	font-style: italic;
}

.A6_BSD2J i {
	color: rgba(255, 255, 255, 0.3);
}

.mKAHJ0uC {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-shrink: 0;
}

.BjzNKm2u {
	padding: 0.2rem 0.55rem;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 500;
	background: rgba(60, 162, 89, 0.12);
	color: #3CA259;
	color: var(--success-green);
	white-space: nowrap;
}

.jJAyCvRa {
	padding: 0.2rem 0.55rem;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 500;
	background: rgba(255, 255, 255, 0.05);
	color: #888;
	white-space: nowrap;
}

.qhfBdOiJ {
	padding: 0.2rem 0.45rem;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 600;
	background: rgba(13, 122, 199, 0.12);
	color: #0D7AC7;
	color: var(--accent-1);
	white-space: nowrap;
}

/* Refund pills. Fully refunded reads as a hard "done, no longer valid"
   state (red); partial refund (main owner refunded but +1s still valid)
   uses amber to signal "needs attention but tickets remain". */
.h4A2wB2N {
	padding: 0.2rem 0.55rem;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 500;
	background: rgba(239, 68, 68, 0.12);
	color: #ef4444;
	white-space: nowrap;
}

.j0h9ahhn {
	padding: 0.2rem 0.55rem;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 500;
	background: rgba(245, 158, 11, 0.14);
	color: #f59e0b;
	white-space: nowrap;
}

/* "FUTURE DATE" pill - flagged on requests whose requested_date
   differs from the event the operator is currently viewing.
   Amber/orange so it's impossible to miss while still feeling like
   an informational badge rather than an error. */
.GtaxoIWi {
	padding: 0.2rem 0.45rem;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: rgba(245, 158, 11, 0.18);
	color: #f59e0b;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.EaxbxqbV {
	background: rgba(20, 184, 166, 0.12);
	color: #14b8a6;
}

.ds8wXNTS {
	background: rgba(13, 122, 199, 0.12);
	color: #0D7AC7;
	color: var(--accent-1);
}

.qtXBAfdX {
	background: rgba(236, 72, 153, 0.12);
	color: #ec4899;
}

.OXG8oTDc {
	background: rgba(60, 162, 89, 0.12);
	color: #3CA259;
	color: var(--success-green);
}

.IkdsqzQv {
	background: rgba(167, 139, 250, 0.12);
	color: #a78bfa;
}

.iuVhXsrE {
	background: rgba(245, 158, 11, 0.12);
	color: #f59e0b;
}

.PVY_fyqN {
	padding: 0.25rem 0.6rem;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 500;
	white-space: nowrap;
}

.ceSDNBl_ {
	width: 28px;
	height: 28px;
	background: none;
	border: 1px solid transparent;
	border-radius: 6px;
	color: #555;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	transition: all 0.12s ease;
}

.ceSDNBl_:hover {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: #2d2f39;
	color: #ffffff;
	color: var(--white);
}

.JH5MZD9U {
	position: absolute;
	top: 100%;
	right: 1.25rem;
	margin-top: 2px;
	padding: 0.4rem 0;
	background-color: #161824;
	border: 1px solid rgba(13, 122, 199, 0.3);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	z-index: 100;
	min-width: 180px;
	animation: _5HLSTjH 0.12s ease;
}

@keyframes _5HLSTjH {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

.lTjmyuei {
	padding: 0.4rem 0.85rem 0.35rem;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #555;
}

.HJ8kybhD {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0.5rem 0.85rem;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.1s ease;
	text-align: left;
}

.HJ8kybhD i {
	font-size: 11px;
	width: 16px;
	text-align: center;
	flex-shrink: 0;
}

.HJ8kybhD:hover {
	background-color: rgba(13, 122, 199, 0.1);
	color: #ffffff;
	color: var(--white);
}

.KPowDrkk {
	color: #ef4444;
}

.KPowDrkk:hover {
	background-color: rgba(239, 68, 68, 0.1);
	color: #ef4444;
}

.XGMyaPvP {
	height: 1px;
	background: rgba(45, 47, 57, 0.5);
	margin: 0.3rem 0;
}

.nLOjo9b9 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 3rem 2rem;
	gap: 0.75rem;
	color: #555;
}

.xEoaU2zI {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}

.nLOjo9b9 p {
	margin: 0;
	font-size: 13px;
}

.MELd3Kbh {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.3);
}

.Ax34ECBZ {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: #2d2f39;
	flex-shrink: 0;
	animation: LHtxyOsf 1.5s ease-in-out infinite;
}

.pJpakptO {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	flex: 1 1;
}

.Vac8sYxE {
	height: 10px;
	background: #2d2f39;
	border-radius: 4px;
	animation: LHtxyOsf 1.5s ease-in-out infinite;
}

.jhT9fmm2 { width: 70%; }
.occkrgGZ { width: 50%; }

@keyframes LHtxyOsf {
	0%, 100% { opacity: 0.4; }
	50% { opacity: 0.7; }
}

.bRQjc3zO {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.5);
}

.RPFKH1Jh {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	flex-shrink: 0;
	background: rgba(13, 122, 199, 0.12);
	color: #0D7AC7;
	color: var(--accent-1);
}

.zQFE08Ou {
	background: rgba(167, 139, 250, 0.12);
	color: #a78bfa;
}

.HIF8XDom {
	flex: 1 1;
	min-width: 0;
}

.dAiNiL6I {
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	color: var(--white);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.CMAJNl86 {
	font-size: 13px;
	color: #888;
	margin: 0.1rem 0 0;
}

.LJkqF5Xx {
	width: 28px;
	height: 28px;
	background: none;
	border: 1px solid transparent;
	border-radius: 6px;
	color: #555;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	flex-shrink: 0;
	transition: all 0.12s ease;
}

.LJkqF5Xx:hover {
	background-color: rgba(255, 255, 255, 0.06);
	border-color: #2d2f39;
	color: #ffffff;
	color: var(--white);
}

.oYhJ9Pwz {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(45, 47, 57, 0.5);
}

.UvS97hX_ {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
}

.UvS97hX_ i {
	font-size: 10px;
	width: 16px;
	text-align: center;
	color: #555;
	flex-shrink: 0;
}

.M4c__Fu9 {
	color: #888;
	margin-left: 4px;
	margin-right: auto;
	font-size: 14px;
}

.d3ExT7KW {
	color: #0D7AC7;
	color: var(--accent-1);
	font-weight: 500;
	margin: 0;
	font-size: 14px;
	text-align: right;
}

.dMXbUIIq {
	padding: 0.15rem 0.45rem;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(245, 158, 11, 0.12);
	color: #f59e0b;
}

.n4t02AYt {
	padding: 1rem 0;
	border-bottom: 1px solid rgba(45, 47, 57, 0.5);
}

.n4t02AYt:last-child {
	border-bottom: none;
}

.Y8damoRf {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
}

.Y8damoRf i {
	font-size: 12px;
	color: #555;
	width: 16px;
	text-align: center;
}

.Y8damoRf p {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: #555;
	margin: 0;
}

.hhJCnwME {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

.lF9qgz4C {
	padding: 0.2rem 0.55rem;
	border-radius: 5px;
	font-size: 12px;
	font-weight: 500;
	background: rgba(255, 255, 255, 0.06);
	color: #ffffff;
	color: var(--white);
}

.VvKlq2mn {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.75rem;
	background: rgba(13, 122, 199, 0.1);
	border: 1px dashed rgba(13, 122, 199, 0.3);
	border-radius: 8px;
	color: #0D7AC7;
	color: var(--accent-1);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
	width: 100%;
}

.VvKlq2mn:hover {
	background: rgba(13, 122, 199, 0.15);
	border-color: rgba(13, 122, 199, 0.5);
}

.VvKlq2mn i {
	font-size: 11px;
}

.grgWCaea {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 0;
}

.gMkgIOir {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.6rem 0.75rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	cursor: pointer;
	transition: all 0.12s ease;
	text-align: left;
}

.gMkgIOir:hover {
	background: rgba(13, 122, 199, 0.08);
	border-color: rgba(13, 122, 199, 0.25);
	color: #ffffff;
	color: var(--white);
}

.gMkgIOir i {
	font-size: 13px;
	width: 18px;
	text-align: center;
	color: #0D7AC7;
	color: var(--accent-1);
	flex-shrink: 0;
}

.YK1rLFsB {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	color: #ffffff;
	color: var(--white);
	padding: 0 0 0.75rem;
	margin: 0;
}

.DuQDoP_T {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.DuQDoP_T i {
	font-size: 14px;
	color: #0D7AC7;
	color: var(--accent-1);
}

.DuQDoP_T p {
	font-size: 15px;
	font-weight: 600;
	margin: 0;
}

.YK1rLFsB > i:last-child {
	font-size: 12px;
	color: #555;
	transition: transform 0.2s ease;
}

.rrrakSlR {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.WSDrNG0A {
	display: flex;
	flex-direction: column;
}

.nWpWNG5M {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.65rem;
}

.nWpWNG5M i {
	font-size: 12px;
	color: #555;
	width: 16px;
	text-align: center;
}

.nWpWNG5M p {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: #555;
	margin: 0;
}

.Tp3WUJQ1 {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.lj7gcd7j {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.35rem 0.5rem;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.1s ease;
}

.lj7gcd7j:hover {
	background-color: rgba(255, 255, 255, 0.02);
}

.SEpNVyvJ {
	width: 20px;
	height: 20px;
	border-radius: 5px;
	border: 1px solid #2d2f39;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	color: var(--white);
	font-size: 10px;
	flex-shrink: 0;
	cursor: pointer;
	transition: all 0.12s ease;
}

.TT4N6uBG {
	background-color: #0D7AC7;
	background-color: var(--accent-1);
	border-color: #0D7AC7;
	border-color: var(--accent-1);
}

.we4SzdPw {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

.JWlrL7Xx {
	font-size: 12px;
	flex-shrink: 0;
}

.GeeeejDf {
	padding: 0.25rem 0.5rem 0 1.25rem;
	width: calc(100% - 1.25rem);
}

.NCjbObHk {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 0.75rem 0;
}

.qx5uaSOX {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.35rem 0.5rem;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.02);
}

.nzOa4ya6 {
	font-size: 13px;
	color: #888;
	margin: 0;
}

.LzKQgmrU {
	font-size: 13px;
	font-weight: 600;
	color: #0D7AC7;
	color: var(--accent-1);
	margin: 0;
}

.AdQznae2 {
	color: #22c55e;
}

.DRVhdsiS {
	color: #555;
	font-weight: 500;
}

.EUd7cQxt {
	opacity: 0.5;
}

@media (max-width: 1200px) {
	.YgOvDK0F {
		grid-template-columns: 30% 1fr;
	}

	.SBWMecvl {
		width: 55%;
	}

	.WaywaOvT {
		width: 65%;
	}

	.yq7w6LtX {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 1024px) {
	.YgOvDK0F {
		grid-template-columns: 35% 1fr;
		column-gap: 1rem;
	}

	.SBWMecvl,
	.lkuh2NEy {
		width: 65%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.WaywaOvT {
		width: 75%;
	}

}

/* List-header reflow on phones (Guestiis + Team).
   ──────────────────────────────────────────────────────────────
   The header row packs three things into one line: the section
   title (Guestiis / Team + count subtitle), the search input
   (`.ie_search_input`, fixed 160px wide), and the Invite button.
   Below ~600px there isn't room for all three side-by-side, so:

     ┌────────────────────────────┬─────────┐
     │  Title + count             │ Invite  │   row 1
     ├────────────────────────────┴─────────┤
     │  [   Search [...]                  ] │   row 2 (full width)
     └──────────────────────────────────────┘

   Implementation note: the existing DOM is title_wrap + actions,
   where actions wraps both search and invite. We use
   `display: contents` to dissolve the actions wrapper so its two
   children flow directly into the parent flex layout, then use
   `order` to place invite next to the title and the search bar on
   its own full-width row underneath. Avoids a JSX restructure. */
@media (max-width: 600px) {
	.NTB3B0YH {
		flex-wrap: wrap;
		gap: 0.6rem 0.5rem;
		padding: 0.85rem 1rem;
	}

	.b48MovmE {
		display: contents;
	}

	.mm56CJXB {
		flex: 1 1;
		min-width: 0;
	}

	.EU4lsRS3 {
		order: 2;
		flex-shrink: 0;
	}

	.kcwTGe7X {
		order: 3;
		flex-basis: 100%;
		min-width: 0;
		width: 100%;
	}

	.kcwTGe7X input {
		width: 100%;
		min-width: 0;
		flex: 1 1;
	}

	/* ── RequestRow mobile pass ──────────────────────────────────────
	   The Bookings + Requests lists share .ie_member_card. On a phone
	   the right-side pills (Future + Type) compete with the
	   single-line truncated subline for horizontal space, so:
	     - tighten outer padding + row gap
	     - shrink the icon
	     - allow the subline to wrap onto a second line (capped) so
	       phone / package / booth / date stop disappearing into "…"
	     - drop the right-side pills onto a new line beneath the name
	       when there isn't enough room, instead of compressing the
	       name field
	   ──────────────────────────────────────────────────────────── */
	.jeKFhu5G {
		padding: 0.7rem 1rem;
		gap: 0.7rem;
		flex-wrap: wrap;
	}

	.ed9TqcDi {
		width: 36px;
		height: 36px;
		font-size: 13px;
		border-radius: 9px;
	}

	.Yt5Tw_m6 {
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: calc(100% - 110px);
		min-width: 0;
	}

	.ZCkhDSak {
		font-size: 13.5px;
	}

	.s2884Tr0 {
		font-size: 11.5px;
		white-space: normal;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-height: 1.35;
	}

	.mKAHJ0uC {
		flex-wrap: wrap;
		justify-content: flex-end;
		gap: 0.35rem;
		flex: 0 1 auto;
		max-width: 100%;
	}

	.BjzNKm2u,
	.jJAyCvRa,
	.h4A2wB2N,
	.qhfBdOiJ,
	.GtaxoIWi {
		font-size: 10.5px;
		padding: 0.15rem 0.45rem;
	}
}

@media (max-width: 768px) {
	.qPb7ulTw {
		overflow: visible;
		overflow: initial;
		height: auto;
		min-height: 100vh;
	}

	.YEy1a3hw {
		padding: 1.25rem;
		height: auto;
		min-height: auto;
		row-gap: 1rem;
		overflow: visible;
	}

	.YgOvDK0F {
		display: flex;
		flex-direction: column;
		overflow: visible;
		height: auto;
		row-gap: 1rem;
		column-gap: 0;
	}

	.XUgHyYRt {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		flex-wrap: nowrap;
		gap: 0;
		padding-bottom: 0.25rem;
	}

	.XUgHyYRt::-webkit-scrollbar {
		display: none;
	}

	.e0m6lMKE {
		flex-shrink: 0;
		padding: 6px 14px;
	}

	.e0m6lMKE p {
		font-size: 13px;
	}

	.TQQR6ZQ6 {
		height: auto;
		max-height: none;
		overflow-y: visible;
		border-radius: 12px;
	}

	.XsYsxo86 {
		height: auto;
	}

	.XsYsxo86 .Q3jkOEe1 {
		height: auto;
	}

	.gAPgkE2C {
		margin-top: 1rem;
		row-gap: 1rem;
	}

	.W7KmhrLb {
		width: 80px;
		aspect-ratio: 1;
	}

	.kOG0Yht8 {
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	.uHEM3Rfb {
		row-gap: 0.5rem;
	}

	.RTW4EWUs {
		grid-template-columns: 24px 1fr;
	}

	.RTW4EWUs i {
		margin-right: 8px;
	}

	.OJFx9yeV {
		margin-top: 1rem;
	}

	.zWovjKlQ {
		margin-top: 0.75rem;
	}

	.n6GViVAh {
		height: auto;
		min-height: 400px;
		overflow: visible;
	}

	.kUodsubC {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}

	.lNuwlKvb {
		flex: 1 1;
		min-width: 0;
		height: 44px;
	}

	.lNuwlKvb input {
		height: 44px;
	}

	.Qy8KA0lV {
		height: 44px;
		padding: 0 14px;
	}

	.yq7w6LtX {
		grid-template-columns: 1fr;
		row-gap: 0.75rem;
		column-gap: 0;
	}

	.SBWMecvl {
		width: calc(100% - 2.5rem);
		left: 50%;
		transform: translate(-50%, -50%);
		max-height: 85vh;
		overflow-y: auto;
	}

	.WaywaOvT {
		width: calc(100% - 2.5rem);
		height: 85%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.YpojLVEi {
		gap: 0.5rem;
	}

	.SRWxorQZ {
		margin-top: 0.75rem;
	}

	.tW92CeSW {
		width: 32px;
		height: 32px;
	}

	.WSOH_Vto {
		width: calc(100% - 2rem);
	}

	.LzjiAOJY {
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 1;
		grid-row-end: 4;
	}

}

@media (max-width: 480px) {
	.YEy1a3hw {
		padding: 1rem;
		row-gap: 0.75rem;
	}

	/* Tighten the gap between event identity bar and content
	   modules at phone widths so vertical real estate isn't wasted
	   on chrome. */
	.YgOvDK0F > .HPW2bBJ2 {
		margin-bottom: 0.85rem;
	}

	.e0m6lMKE {
		padding: 5px 10px;
	}

	.e0m6lMKE p {
		font-size: 12px;
	}

	.TQQR6ZQ6 {
		padding: 0.75rem;
	}

	.W7KmhrLb {
		width: 60px;
	}

	.RTW4EWUs {
		grid-template-columns: 20px 1fr;
	}

	.RTW4EWUs i {
		font-size: 12px;
		margin-right: 6px;
	}

	.lNuwlKvb {
		height: 40px;
	}

	.lNuwlKvb input {
		height: 40px;
	}

	.Qy8KA0lV {
		height: 40px;
		padding: 0 12px;
	}

	.Qy8KA0lV p {
		display: none;
	}

}

/* The earlier standalone-app mobile chrome (mobile_top, bottom tabs,
   FAB, overflow menu, hamburger drawer) was removed - this surface
   now lives as a page inside the parent webapp, which provides its
   own navigation. The top section nav (.event_nav) and the inline
   event identity bar carry the load on phones, with the existing
   responsive rules above (max-width: 768px / 480px) handling reflow.
   Keeping .global_nav_wrap as `display: contents` for compatibility
   with the existing JSX wrapper around the stub <Sidebar>. */
.ZisMg1sH {
	display: contents;
}

@media (max-width: 768px) {
	/* The standalone-app mobile chrome (.global_nav_wrap stub sidebar +
	   mobile_top + bottom tabs + FAB + ham drawer) was removed when
	   this surface became an embedded page. The parent webapp owns
	   app-level chrome; we only render the section nav (.event_nav)
	   and inline event identity bar, both of which already have
	   responsive styles in the earlier @media (max-width: 768px)
	   block above (touch-scrolling event_nav, stacked hub_layout,
	   etc). This media block is intentionally a near no-op now;
	   keep .global_nav_wrap hidden because the wrapper around the
	   stub sidebar shouldn't take any height on phones. */
	.ZisMg1sH { display: none; }

}

@keyframes e4B92Hku {
  to {
    opacity: 1;
  }
}

.wslShRl4 {
  width: 100%;
  background-color: #161824;
  background-color: var(--sub-bg-dark);
  border: 1px solid #2d2f39;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
  transition: border-color 0.2s ease;
}

.wslShRl4:hover {
  border-color: rgba(13, 122, 199, 0.3);
}

.LDvjmLIN {
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: none;
  border: none;
  color: #ffffff;
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.LDvjmLIN:hover {
  background-color: rgba(255, 255, 255, 0.03);
}

.emVyv1DA {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.05);
  transition: background-color 0.2s ease;
}

.LDvjmLIN:hover .emVyv1DA {
  background-color: rgba(13, 122, 199, 0.2);
}

.sNd47Ubs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 15px 10px 15px;
  border-bottom: 1px solid #2d2f39;
}

.R654rfeM {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 6px 12px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid #2d2f39;
  border-radius: 6px;
  color: #ffffff;
  color: var(--white);
  cursor: pointer;
  transition: all 0.2s ease;
}

.R654rfeM:hover {
  background-color: #0D7AC7;
  background-color: var(--accent-1);
  border-color: #0D7AC7;
  border-color: var(--accent-1);
}

.R654rfeM span {
  opacity: 0.9;
}

.xMk5lrpV {
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

.ceEGyQ0W {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  transition: background-color 0.15s ease;
}

.ceEGyQ0W:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.nyWr61sH {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ZGBhoo9s {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(13, 122, 199, 0.15);
  border-radius: 8px;
  color: #0D7AC7;
  color: var(--accent-1);
}

.c69jbiBJ {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.c69jbiBJ p {
  margin: 0;
  line-height: 1.3;
}

.Uq9VDSnf {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 15px;
  background-color: #161824;
  background-color: var(--sub-bg-dark);
  border: 1px solid #2d2f39;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.NGwZWp3M {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  color: var(--white);
  opacity: 0.8;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #2d2f39;
}

.OxeNQ8jT {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.F3KEwxzl {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 10px 16px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid #2d2f39;
  border-radius: 8px;
  color: #ffffff;
  color: var(--white);
  cursor: pointer;
  transition: all 0.2s ease;
}

.F3KEwxzl:hover {
  background-color: #0D7AC7;
  background-color: var(--accent-1);
  border-color: #0D7AC7;
  border-color: var(--accent-1);
}

.v7R1tUTq {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 6px 12px;
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid #2d2f39;
  border-radius: 8px;
  color: #ffffff;
  color: var(--white);
  margin-left: auto;
}

.v7R1tUTq span {
  opacity: 0.7;
  white-space: nowrap;
}

.jvNGvT7Z {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 6px 12px;
  background-color: #0D7AC7;
  background-color: var(--accent-1);
  border: none;
  border-radius: 6px;
  color: #ffffff;
  color: var(--white);
  cursor: pointer;
  transition: all 0.2s ease;
}

.jvNGvT7Z:hover {
  background-color: #3a8dc1;
}

.xGPIKZMZ {
	text-align: left;
}

.K9y0MYfU {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 10px 12px;
	margin-top: 8px;
	background-color: rgba(245, 158, 11, 0.08);
	border: 1px solid rgba(245, 158, 11, 0.2);
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
	color: #ffffff;
	color: var(--white);
}

.K9y0MYfU:hover {
	background-color: rgba(245, 158, 11, 0.15);
	border-color: rgba(245, 158, 11, 0.4);
}

.PBdzu5Sk {
	width: 32px;
	height: 32px;
	min-width: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(245, 158, 11, 0.2);
	border-radius: 8px;
	color: #f59e0b;
}

.fJ6MxdWn {
	flex: 1 1;
	text-align: left;
	overflow: hidden;
}

.fJ6MxdWn p:first-child {
	opacity: 0.5;
}

.fJ6MxdWn p:last-child {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.K9y0MYfU > i:last-child {
	opacity: 0.3;
	flex-shrink: 0;
}

.wAARFexy {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	-webkit-backdrop-filter: blur(4px);
	        backdrop-filter: blur(4px);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.WSOH_Vto {
	background-color: #161824;
	background-color: var(--sub-bg-dark, #161824);
	border: 1px solid #2d2f39;
	border-radius: 16px;
	width: 90%;
	max-width: 480px;
	max-height: 85vh;
	overflow-y: auto;
	animation: nIiuwksF 0.2s ease-out;
	color: #ffffff;
	color: var(--white);
}

@keyframes nIiuwksF {
	from { opacity: 0; transform: translateY(-20px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.fKQpMMkW {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 24px;
	border-bottom: 1px solid #2d2f39;
}

.k75J_mqX {
	width: 40px;
	height: 40px;
	min-width: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(245, 158, 11, 0.15);
	border-radius: 10px;
	color: #f59e0b;
	font-size: 16px;
}

.m3wy_dDg {
	flex: 1 1;
	color: #ffffff;
	color: var(--white);
}

.m3wy_dDg p:last-child {
	opacity: 0.5;
	margin-top: 2px;
	color: #ffffff;
	color: var(--white);
}

.SmoslomW {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.05);
	border: none;
	border-radius: 8px;
	color: #888;
	cursor: pointer;
	transition: all 0.15s ease;
	flex-shrink: 0;
}

.SmoslomW:hover {
	background-color: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	color: var(--white);
}

.EVTmqD2c {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 24px;
	border-bottom: 1px solid #2d2f39;
}

.HU7xBK7h {
	width: 38px;
	height: 38px;
	min-width: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.08);
	border-radius: 50%;
	color: #ffffff;
	color: var(--white);
	font-size: 14px;
}

.V5OT1w3S {
	flex: 1 1;
	overflow: hidden;
	color: #ffffff;
	color: var(--white);
}

.Eytnl_DE {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-top: 3px;
}

.Eytnl_DE span {
	opacity: 0.5;
	color: #ffffff;
	color: var(--white);
}

.KGdsEEP2 {
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	flex-shrink: 0;
}

.rxWCfQCD {
	padding: 20px 24px;
}

.Oxl8KMPK {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 16px;
	gap: 16px;
}

.wlwxUL_W {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.wlwxUL_W > i {
	margin-top: 2px;
	opacity: 0.4;
	color: #ffffff;
	color: var(--white);
}

.wlwxUL_W p:first-child {
	opacity: 0.5;
	margin-bottom: 1px;
	color: #ffffff;
	color: var(--white);
}

.wlwxUL_W p:last-child {
	color: #ffffff;
	color: var(--white);
}

.vP343urf {
	margin-top: 16px;
	padding: 12px;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid #2d2f39;
	border-radius: 10px;
}

.vP343urf p:first-child {
	opacity: 0.5;
	margin-bottom: 6px;
	color: #ffffff;
	color: var(--white);
}

.vP343urf p:last-child {
	line-height: 1.5;
	color: #ffffff;
	color: var(--white);
}

.JpBuap7Y {
	padding: 48px 24px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	opacity: 0.5;
	color: #ffffff;
	color: var(--white);
}

.rtYvGnoV {
	width: 24px;
	height: 24px;
	border: 2px solid rgba(255, 255, 255, 0.1);
	border-top-color: #f59e0b;
	border-radius: 50%;
	animation: m3j5Q1l8 0.6s linear infinite;
}

@keyframes m3j5Q1l8 {
	to { transform: rotate(360deg); }
}

.OzO1Lvz1 {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.j5ocIIlZ {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0;
}

.nWTFrGcu {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.sScfYbib {
	background-color: #3CA259;
	background-color: var(--success-green);
}

.rmCQpihf {
	background-color: #555;
}

.RmSjjriC {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.FjSGR2Ll {
	font-size: 13px;
	font-weight: 500;
	color: #ffffff;
	color: var(--white);
}

.zzl9BzAN {
	font-size: 11px;
	color: #888;
}

.xs3VnLzE {
	padding: 0.5rem 0;
}

.bqdjJiRq {
	display: flex;
	flex-direction: column;
}

.Ytu3HcYi {
	display: flex;
	gap: 0.75rem;
	min-height: 48px;
}

.rtdgEaf8 {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 12px;
	flex-shrink: 0;
	padding-top: 4px;
}

.RPrBlKO4 {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background-color: #555;
}

.WMAf9T67 {
	background-color: #0D7AC7;
	background-color: var(--accent-1);
}

.FZZMNax_ {
	background-color: #3CA259;
	background-color: var(--success-green);
}

.fPxAcIsq,
.f22b7tQw {
	background-color: #f59e0b;
}

.PnO0z4Hd {
	background-color: #a855f7;
}

.kdJXbWiJ {
	background-color: #0D7AC7;
}

.dRKKynje {
	background-color: #ef4444;
}

.wsyI1CQb {
	width: 2px;
	flex: 1 1;
	background-color: rgba(85, 85, 85, 0.4);
	margin-top: 4px;
	margin-bottom: 4px;
}

.VXldctX3 {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 0.75rem;
}

.bRrlAJwq {
	font-size: 13px;
	font-weight: 500;
	color: #ffffff;
	color: var(--white);
}

.xMznvLcA {
	font-size: 11px;
	color: #888;
}

@keyframes laTYTuJy {
	from { opacity: 0.5; }
	to { opacity: 1; }
}
@keyframes o13IrBLQ {
	from { opacity: 0.6; transform: translateY(8px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes T4aAAdpg {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Drawer body section divider - groups the bulk-entry block at the
   top of the invite drawer so the textarea + import button + info
   banner read as one cohesive surface separated from the actions /
   guest list below. */
.gVPQnvif {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin-bottom: 1.25rem;
}

/* Centered-modal chrome still used by the Edit* sub-modals
   (Tags / TicketType / PlusOnes / Promoter / Rating). The invite
   panel itself uses the shared drawer chrome from Drawer.module.css. */
.DfvBpiSN {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1005;
	padding: 2rem;
}

.ADDxAiS1 { }

.aVTtLRhx {
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 16px;
	width: 100%;
	max-width: 560px;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.cztFB3uj { }

.L_xBanxo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.25rem 1.5rem;
	border-bottom: 1px solid #2d2f39;
}

.UFr1D6cI {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: #ffffff;
	color: var(--white);
}

.N5kfkKqN {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.LYRYFZ39 {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	border: none;
	color: #666;
	font-size: 13px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
	flex-shrink: 0;
}

.LYRYFZ39:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	color: var(--white);
}

.Y3mpqRIj {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
}

.Y3mpqRIj img {
	max-height: 80px;
	width: auto;
}

/* Full-drawer loading state: takes the entire drawer container so the
   header/body/footer don't show through. Used while bulk-name lookups
   and the final submit are in flight. */
.b6wvojTa {
	flex: 1 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
}

.b6wvojTa img {
	max-height: 96px;
	width: auto;
}

.EZBl4j6s {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.75rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: #aaa;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
	white-space: nowrap;
}

.EZBl4j6s i {
	font-size: 11px;
	color: #777;
	transition: color 0.15s ease;
}

.EZBl4j6s:hover {
	border-color: #555;
	color: #ffffff;
	color: var(--white);
	background: rgba(255, 255, 255, 0.06);
}

.EZBl4j6s:hover i {
	color: #ffffff;
	color: var(--white);
}

.sDygcqra {
	border-color: #0D7AC7;
	border-color: var(--accent-1);
	color: #0D7AC7;
	color: var(--accent-1);
}

.sDygcqra i {
	color: #0D7AC7;
	color: var(--accent-1);
}

.gOreMoSh {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	background: #0D7AC7;
	background: var(--accent-1);
	border: 1px solid #0D7AC7;
	border: 1px solid var(--accent-1);
	border-radius: 8px;
	color: #ffffff;
	color: var(--white);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
	white-space: nowrap;
}

.gOreMoSh i {
	font-size: 11px;
}

.gOreMoSh:hover {
	filter: brightness(1.15);
}

.cTdsWb6L {
	width: 100%;
	justify-content: center;
	padding: 0.65rem 0.85rem;
}

.gOreMoSh:disabled {
	opacity: 0.35;
	cursor: default;
	filter: none;
}

.KMO53YaF {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.5rem;
	background: #0D7AC7;
	background: var(--accent-1);
	border: none;
	border-radius: 10px;
	color: #ffffff;
	color: var(--white);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
	white-space: nowrap;
	flex-shrink: 0;
}

.KMO53YaF i {
	font-size: 12px;
}

.KMO53YaF:hover {
	filter: brightness(1.12);
	transform: translateY(-1px);
	box-shadow: 0 4px 16px rgba(13, 122, 199, 0.3);
}

.KMO53YaF:active {
	transform: scale(0.97);
}

.FWuB3m6I {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	width: 100%;
	padding: 0.45rem 0.75rem;
	background: none;
	border: 1px dashed #3a3c48;
	border-radius: 8px;
	color: #777;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
}

.FWuB3m6I i {
	font-size: 11px;
	color: #666;
}

.FWuB3m6I:hover {
	border-color: #0D7AC7;
	border-color: var(--accent-1);
	color: #0D7AC7;
	color: var(--accent-1);
	background: rgba(13, 122, 199, 0.04);
}

.FWuB3m6I:hover i {
	color: #0D7AC7;
	color: var(--accent-1);
}

.NnQCZGYv {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.7rem 0 0.55rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.5);
	margin-bottom: 0.4rem;
}

.DZP1chXV {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	color: var(--white);
}

.DZP1chXV i {
	font-size: 12px;
	color: #888;
}

.dYvRxTF0 {
	font-size: 11px;
	font-weight: 600;
	color: #0D7AC7;
	color: var(--accent-1);
	background: rgba(13, 122, 199, 0.12);
	padding: 0.1rem 0.45rem;
	border-radius: 10px;
	min-width: 20px;
	text-align: center;
}

.XzOZt5fU {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.zTPwq181 {
	font-size: 11px;
	font-weight: 500;
	color: #aaa;
	background: none;
	border: 1px solid #2d2f39;
	border-radius: 6px;
	padding: 0.25rem 0.55rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.3rem;
	transition: all 0.15s ease;
}

.zTPwq181:hover {
	color: #ffffff;
	color: var(--white);
	border-color: #3a3c48;
	background: rgba(255, 255, 255, 0.03);
}

/* Picker-mode overrides: when the Edit* sub-modals render inline inside
   the invite drawer (inDrawer=true), strip the full-width notice padding
   and border-bottom so the notice reads as a contained banner instead
   of a header strip clipped inside the drawer's body padding. */
.wtVOquFk .ObBDQ1rJ {
	padding: 0.55rem 0.75rem;
	border: 1px solid rgba(13, 122, 199, 0.18);
	border-radius: 8px;
	background: rgba(13, 122, 199, 0.08);
	margin-bottom: 1rem;
}

.wtVOquFk .Sc6X72HR {
	padding: 0;
}

.wtVOquFk .KbJR_xkP {
	padding: 0.6rem 0;
	border-bottom: 1px solid rgba(45, 47, 57, 0.4);
}

.wtVOquFk .KbJR_xkP:first-of-type {
	border-top: 1px solid rgba(45, 47, 57, 0.4);
}

.wtVOquFk .C8HlufGe {
	padding: 1.5rem 0 1rem;
}

/* Actions dropdown: sits next to Select All in the guest list header.
   Wrap is position: relative so the floating menu anchors to it.
   Menu uses absolute positioning to drop down without affecting layout. */
.IbTr0qlH {
	position: relative;
}

.EAf2MNxc {
	position: absolute;
	top: calc(100% + 0.35rem);
	right: 0;
	min-width: 180px;
	background: rgba(20, 22, 30, 0.96);
	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 0.35rem;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	animation: laTYTuJy 0.12s ease-out;
}

.KCf8f0zW {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	padding: 0.5rem 0.65rem;
	background: none;
	border: none;
	border-radius: 6px;
	color: #ccc;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	text-align: left;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
	transition: background 0.12s ease, color 0.12s ease;
}

.KCf8f0zW:hover {
	background: rgba(255, 255, 255, 0.05);
	color: #ffffff;
	color: var(--white);
}

.KCf8f0zW i {
	font-size: 12px;
	color: #888;
	width: 14px;
	text-align: center;
}

.KCf8f0zW:hover i {
	color: #0D7AC7;
	color: var(--accent-1);
}

.xn10EPvD {
	color: #e5534b;
}

.xn10EPvD:hover {
	background: rgba(229, 83, 75, 0.08);
	color: #e5534b;
}

.xn10EPvD i,
.xn10EPvD:hover i {
	color: #e5534b;
}

.yBGTzldA {
	height: 1px;
	background: rgba(255, 255, 255, 0.06);
	margin: 0.25rem 0;
}

.wzj2Bv20 {
	flex: 1 1;
	min-height: 0;
	overflow-y: auto;
}

.wzj2Bv20::-webkit-scrollbar {
	width: 4px;
}
.wzj2Bv20::-webkit-scrollbar-track {
	background: transparent;
}
.wzj2Bv20::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 4px;
}

.R763zRwW {
	padding: 1rem 1.5rem 0;
	position: relative;
}

.WmO6rRLl {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	padding: 0 1rem;
	height: 42px;
	transition: border-color 0.2s ease;
}

.WmO6rRLl:focus-within {
	border-color: #0D7AC7;
	border-color: var(--accent-1);
}

.wSXpLIxw {
	font-size: 14px;
	color: #555;
	flex-shrink: 0;
}

.Gqcz8_Se {
	background: none;
	border: none;
	outline: none;
	color: #ffffff;
	color: var(--white);
	font-size: 14px;
	flex: 1 1;
	padding: 0;
	min-width: 0;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
}

.Gqcz8_Se::placeholder {
	color: #555;
}

.LZwhPuIQ { opacity: 0.45; cursor: default; }
.LZwhPuIQ:hover { background: none; }

.IcX0u6dc {
	width: 36px;
	height: 36px;
	border-radius: 9px;
	background: rgba(13, 122, 199, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.IcX0u6dc span {
	font-size: 12px;
	font-weight: 700;
	color: #0D7AC7;
	color: var(--accent-1);
	letter-spacing: 0.3px;
}

.o05sHive { flex: 1 1; min-width: 0; }

.EkCoMbKJ {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	color: var(--white);
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.T6dHGgPy {
	margin: 0.15rem 0 0;
	font-size: 12px;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.PLrzOtOC {
	font-size: 10px;
	font-weight: 500;
	color: #888;
	background: rgba(255, 255, 255, 0.05);
	padding: 0.1rem 0.45rem;
	border-radius: 4px;
}

.Ah90GEk8 {
	display: flex;
	flex-direction: column;
}

.h_HRPLze {
	width: 100%;
	min-height: 130px;
	height: 150px;
	max-height: 240px;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	padding: 0.85rem 1rem;
	color: #ffffff;
	color: var(--white);
	font-size: 13px;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
	line-height: 1.6;
	resize: vertical;
	outline: none;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
}

.h_HRPLze:focus { border-color: #0D7AC7; border-color: var(--accent-1); }
.h_HRPLze::placeholder { color: #555; }

.s84Vt38i {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin-top: 0.65rem;
	gap: 0.5rem;
}

.s84Vt38i .PKHjiNLY {
	align-self: flex-end;
}

.PKHjiNLY {
	font-size: 12px;
	color: #888;
	font-weight: 500;
}

.Tgnlkp_N {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	padding: 2.5rem 1.5rem;
}

.s2w7OP9F {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: rgba(13, 122, 199, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #3a4a5a;
	margin-bottom: 0.25rem;
}

.NkaIajBU {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #555;
}

.IVzregiR {
	margin: 0;
	font-size: 12px;
	color: #444;
	text-align: center;
	max-width: 300px;
	line-height: 1.5;
}

.Uv_uDKKo {
	display: flex;
	flex-direction: column;
}

.UYY_d_6M {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.55rem 0.75rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.UYY_d_6M:last-child { border-bottom: none; }
.UYY_d_6M:hover { background: rgba(255, 255, 255, 0.02); }
.Hz0BUFqh { background: rgba(13, 122, 199, 0.06); }
.Hz0BUFqh:hover { background: rgba(13, 122, 199, 0.09); }
.bPRFmppw { opacity: 0.4; cursor: default; }

.GPX32OmU {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 1 1;
	min-width: 0;
}

.jr5DB_c6 {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	border: 1.5px solid #3a3c48;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.15s ease;
	color: transparent;
	font-size: 9px;
}

.UYY_d_6M:hover .jr5DB_c6 { border-color: #555; }
.NcgcUU39 {
	background: #0D7AC7;
	background: var(--accent-1);
	border-color: #0D7AC7;
	border-color: var(--accent-1);
	color: #ffffff;
	color: var(--white);
}

.TiaHh4Jv {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: linear-gradient(135deg, #1e2a3a, #2a4a6a);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.NqVsbn83 {
	background: linear-gradient(135deg, #1a3d2a, #2a6a3a);
}

.TiaHh4Jv span {
	font-size: 10px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.7);
	letter-spacing: 0.5px;
}

.e3bRWhhj {
	flex: 1 1;
	min-width: 0;
}

.s3iVG4hd {
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.Ygbuocsd {
	font-size: 13px;
	font-weight: 500;
	color: #ffffff;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.KXMgN1BM {
	font-size: 9px;
	font-weight: 600;
	color: #0D7AC7;
	color: var(--accent-1);
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.oiW1vlzD {
	font-size: 9px;
	font-weight: 600;
	color: #3CA259;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}

.QFgMUkeZ {
	font-size: 9px;
	font-weight: 600;
	color: #e5534b;
	background: rgba(229, 83, 75, 0.1);
	padding: 0.05rem 0.35rem;
	border-radius: 3px;
}

.v4SZvEQb {
	font-size: 9px;
	font-weight: 500;
	color: #666;
	font-style: italic;
}

.PURlY1yr {
	display: flex;
	align-items: center;
	gap: 0.2rem;
	margin-top: 0.15rem;
	flex-wrap: wrap;
}

.oVFT7_rO {
	font-size: 10px;
	color: #666;
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.05rem 0;
}

.oVFT7_rO i {
	font-size: 8px;
	color: #555;
}

.oVFT7_rO + .oVFT7_rO::before {
	content: "\00B7";
	margin-right: 0.2rem;
	color: #444;
	font-size: 10px;
}

.Hr5UkV0x {
	width: 24px;
	height: 24px;
	border-radius: 5px;
	background: none;
	border: none;
	color: transparent;
	font-size: 10px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.15s ease;
}

.UYY_d_6M:hover .Hr5UkV0x { color: #555; }
.Hr5UkV0x:hover {
	background: rgba(229, 83, 75, 0.1);
	color: #e5534b !important;
}

.aiN_n9qT {
	font-size: 12px;
	color: #888;
	font-weight: 500;
}

.ZMgTGayM {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1004;
	padding: 2rem;
	animation: laTYTuJy 0.15s ease-out;
}

.PPfkQ8td {
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 14px;
	width: 100%;
	max-width: 480px;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	animation: o13IrBLQ 0.25s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.Yaa3uPF0 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1.1rem 1.25rem;
	border-bottom: 1px solid #2d2f39;
}

.Yaa3uPF0 h4 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
	color: var(--white);
}

.Yaa3uPF0 p {
	margin: 0.1rem 0 0;
	font-size: 12px;
	color: #888;
}

.Yaa3uPF0 .LYRYFZ39 {
	margin-left: auto;
}

.daR5M8Jj {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.05);
	border: none;
	color: #888;
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
	flex-shrink: 0;
}

.daR5M8Jj:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	color: var(--white);
}

.Hzquibj0 {
	flex: 1 1;
	overflow-y: auto;
	padding: 0.35rem;
}

.Hzquibj0::-webkit-scrollbar { width: 4px; }
.Hzquibj0::-webkit-scrollbar-track { background: transparent; }
.Hzquibj0::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 4px; }

.evaDAABR {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 0.85rem;
	width: 100%;
	background: none;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	text-align: left;
	transition: background-color 0.12s ease;
	color: #ffffff;
	color: var(--white);
}

.evaDAABR:hover { background: rgba(255, 255, 255, 0.04); }

.Mc85EguD {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(13, 122, 199, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #4a6a8a;
	font-size: 13px;
}

.b_hSVnvk { flex: 1 1; min-width: 0; }

.SKITUMrr {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	color: var(--white);
}

.T3yDA3Nj {
	margin: 0.1rem 0 0;
	font-size: 11px;
	color: #888;
}

.qbXgMlU8 {
	padding: 2rem 1rem;
	text-align: center;
	color: #555;
	font-size: 13px;
	margin: 0;
}

.RR_JFvfG {
	flex: 1 1;
	overflow-y: auto;
	padding: 0.35rem;
}

.RR_JFvfG::-webkit-scrollbar { width: 4px; }
.RR_JFvfG::-webkit-scrollbar-track { background: transparent; }
.RR_JFvfG::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 4px; }

.aVuNRi7i {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.35rem 0.5rem 0.5rem;
}

.zELx5jVE {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.5rem 0.75rem;
	width: 100%;
	background: none;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	text-align: left;
	transition: background-color 0.12s ease;
	color: #ffffff;
	color: var(--white);
}

.zELx5jVE:hover { background: rgba(255, 255, 255, 0.03); }
.lfvkahfc { background: rgba(13, 122, 199, 0.06); }

.QS0iZDN1 {
	padding: 0.6rem 0.85rem 0.85rem;
	border-top: 1px solid #2d2f39;
	display: flex;
	justify-content: flex-end;
}

.XFbFXGSj {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex: 1 1;
	min-width: 0;
}

.lSWEEsCY {
	margin: 2px 0 0 0;
	font-size: 12px;
	color: #777;
	font-weight: 400;
}

.ObBDQ1rJ {
	padding: 0.75rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 12px;
	color: #777;
	background: rgba(13, 122, 199, 0.04);
	border-bottom: 1px solid rgba(45, 47, 57, 0.5);
}

.ObBDQ1rJ i {
	font-size: 11px;
	color: #0D7AC7;
	color: var(--accent-1);
	flex-shrink: 0;
}

.cINTcfFk {
	flex: 1 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.Sc6X72HR {
	padding: 1.25rem 1.5rem;
	position: relative;
}

.KbJR_xkP {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1.5rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.4);
	transition: background 0.1s ease;
}

.KbJR_xkP:hover {
	background: rgba(255, 255, 255, 0.02);
}

.KbJR_xkP:last-child {
	border-bottom: none;
}

.CJBtbYvA {
	flex: 1 1;
	min-width: 0;
	font-size: 13px;
	color: #ffffff;
	color: var(--white);
	font-weight: 500;
}

.xSAEuP9t {
	display: flex;
	align-items: center;
	gap: 0;
	margin-left: auto;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	overflow: hidden;
}

.q5lOEKuN {
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	color: #888;
	font-size: 11px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
}

.q5lOEKuN:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #ffffff;
	color: var(--white);
}

.q5lOEKuN:active {
	background: rgba(13, 122, 199, 0.15);
	color: #0D7AC7;
	color: var(--accent-1);
}

.Br7uuPVr {
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	color: var(--white);
	min-width: 36px;
	text-align: center;
	border-left: 1px solid #2d2f39;
	border-right: 1px solid #2d2f39;
	height: 32px;
	line-height: 32px;
}

.C8HlufGe {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 2.5rem 1.5rem;
}

.Ns5WArzu {
	background: none;
	border: none;
	color: #333;
	cursor: pointer;
	transition: all 0.15s ease;
	padding: 0.35rem;
	font-size: 38px;
	border-radius: 8px;
}

.Ns5WArzu:hover {
	transform: scale(1.15);
	color: #555;
}

.bq8cr6sT {
	color: #f5a623 !important;
}

.omugZBya {
	color: #f5c34a !important;
}

.VYed4Qs7 {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.6);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1100;
	animation: laTYTuJy 0.15s ease;
}

._aIZbwfA {
	background-color: #01000D;
	background-color: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 16px;
	padding: 2rem;
	width: 380px;
	max-width: 90vw;
	text-align: center;
	animation: o13IrBLQ 0.2s ease-out;
}

.d016x36K {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(245, 158, 11, 0.12);
	border: 1px solid rgba(245, 158, 11, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
	font-size: 18px;
	color: #f59e0b;
}

.GkS9LsIs {
	margin: 0 0 0.5rem;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	color: var(--white);
}

.bWNTTj8i {
	margin: 0 0 1.5rem;
	font-size: 13px;
	color: #888;
	line-height: 1.5;
}

.af4H25Ti {
	display: flex;
	gap: 0.75rem;
}

.yLWafmv0 {
	flex: 1 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1rem;
	background-color: #161824;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	color: #ffffff;
	color: var(--white);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
}

.yLWafmv0:hover {
	background-color: #2d2f39;
}

.BJb9DYkG {
	flex: 1 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1rem;
	background: rgba(239, 68, 68, 0.15);
	border: 1px solid rgba(239, 68, 68, 0.3);
	border-radius: 10px;
	color: #ef4444;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
}

.BJb9DYkG:hover {
	background: rgba(239, 68, 68, 0.25);
}

.H8AUo7hp {
	position: relative;
}

.JVMuptQr {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	cursor: pointer;
	-webkit-user-select: none;
	        user-select: none;
	transition: all 0.15s ease;
}

.JVMuptQr:hover {
	border-color: #444;
}

.V4TSYlNT {
	border-color: #0D7AC7 !important;
	border-color: var(--accent-1) !important;
}

.JVMuptQr i:first-child {
	font-size: 13px;
	color: #666;
}

.ok7ssXRK {
	color: #ffffff;
	color: var(--white);
	font-size: 14px;
	flex: 1 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ly4UJob7 {
	color: #555;
	font-size: 14px;
	flex: 1 1;
}

.GlJykpdS {
	font-size: 12px;
	color: #666;
	transition: transform 0.2s ease;
	margin-left: auto;
}

.RkGstmXD {
	transform: rotate(180deg);
	color: #0D7AC7;
	color: var(--accent-1);
}

.isArubhd {
	background: none;
	border: none;
	color: #666;
	cursor: pointer;
	padding: 0;
	font-size: 13px;
	margin-left: auto;
	display: flex;
	align-items: center;
	transition: color 0.15s ease;
}

.isArubhd:hover {
	color: #ffffff;
	color: var(--white);
}

.Sbfsggyr {
	border: 1px solid rgba(13, 122, 199, 0.3);
	border-radius: 10px;
	background-color: #161824;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
	z-index: 2000;
	max-height: 260px;
	overflow-y: auto;
	animation: sicyDk2P 0.15s ease;
}

@keyframes sicyDk2P {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.Sbfsggyr::-webkit-scrollbar { width: 4px; }
.Sbfsggyr::-webkit-scrollbar-track { background: transparent; }
.Sbfsggyr::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 4px; }

.mQ1a6sjP {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 0.75rem 1rem;
	border: none;
	background: none;
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
	cursor: pointer;
	transition: all 0.12s ease;
	text-align: left;
}

.mQ1a6sjP:hover {
	background-color: rgba(13, 122, 199, 0.1);
	color: #ffffff;
	color: var(--white);
}

.AtYIvhmO {
	background-color: rgba(13, 122, 199, 0.08);
	color: #0D7AC7;
	color: var(--accent-1);
	font-weight: 500;
}

.AtYIvhmO i {
	color: #0D7AC7;
	color: var(--accent-1);
	font-size: 11px;
}

.zXDII9rN {
	padding: 1rem;
	text-align: center;
	color: #666;
	font-size: 13px;
}

.LojKpnYt {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.75rem;
}

.SP2bnyqe {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.6rem;
	background: rgba(13, 122, 199, 0.12);
	border: 1px solid rgba(13, 122, 199, 0.25);
	border-radius: 6px;
	color: #0D7AC7;
	color: var(--accent-1);
	font-size: 12px;
	font-weight: 500;
}

.ZSnIN6F9 {
	background: none;
	border: none;
	color: rgba(13, 122, 199, 0.5);
	cursor: pointer;
	padding: 0;
	font-size: 10px;
	display: flex;
	align-items: center;
	transition: color 0.15s ease;
}

.ZSnIN6F9:hover {
	color: #0D7AC7;
	color: var(--accent-1);
}

.gfgAbWI4 {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1rem;
}

.NiqFlFf1 {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: #aaa;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
}

.NiqFlFf1:hover {
	border-color: #3d3f49;
	color: #ffffff;
	color: var(--white);
	background: rgba(255, 255, 255, 0.06);
}

.DjxwMQKv {
	background: rgba(13, 122, 199, 0.12);
	border-color: rgba(13, 122, 199, 0.35);
	color: #0D7AC7;
	color: var(--accent-1);
}

.DjxwMQKv:hover {
	background: rgba(13, 122, 199, 0.18);
	border-color: rgba(13, 122, 199, 0.5);
	color: #0D7AC7;
	color: var(--accent-1);
}

.NiqFlFf1 i {
	font-size: 10px;
}

.o5Pibfpb {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

._me3otx6 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	transition: all 0.15s ease;
}

._me3otx6:focus-within {
	border-color: #0D7AC7;
	border-color: var(--accent-1);
}

._me3otx6 i:first-child {
	font-size: 13px;
	color: #666;
}

.gufAROib {
	flex: 1 1;
	background: none;
	border: none;
	color: #ffffff;
	color: var(--white);
	font-size: 14px;
	font-family: 'DonerRegular', sans-serif;
	font-family: var(--font-family);
	outline: none;
}

.gufAROib::placeholder {
	color: #555;
}

/* Invite Guestii modal on mobile.
   ─────────────────────────────────────────────────────────────
   Desktop has a side-by-side two-column layout (paste names |
   guest list). On phones we stack vertically and switch to a
   full-screen sheet so the keyboard can't push the submit
   footer off-screen. The previous mobile rules used a 95vh
   bottom-sheet with the left panel capped at max-height: 45%,
   which squeezed the textarea (fixed 200px) + Add-Names button
   + info banner into a too-small box and the button visually
   crashed into the banner below it.

   New layout:
   ┌─────────────────────────────────┐
   │ Add Guests                  [x] │   header
   ├─────────────────────────────────┤
   │ Import from Events              │   toolbar
   │ ┌─────────────────────────────┐ │
   │ │ textarea (shrunk to ~110px) │ │   bulk_area
   │ └─────────────────────────────┘ │
   │ N names           [+ Add Names] │   bulk_footer (full-w btn)
   │                                 │
   │ ─── Guest List 0 ─────── Sel All│   panel header
   │ │  empty / list (scrollable)    │   panel_right (flex 1)
   │ ─────────────────────────────── │
   │ N guests ready  [Add Guests]    │   sticky footer
   └─────────────────────────────────┘
*/
@media (max-width: 740px) {
	/* Drawer chrome already collapses to 100vw via Drawer.module.css.
	   These rules tune the content classes for the narrower viewport. */
	.h_HRPLze {
		min-height: 96px;
		height: 110px;
		max-height: 160px;
	}

	.s84Vt38i {
		margin-top: 0.6rem;
		gap: 0.6rem;
	}

	.gOreMoSh {
		flex: 1 1;
		justify-content: center;
		padding: 0.55rem 0.85rem;
	}

	.aiN_n9qT {
		text-align: center;
	}

	/* Import-from-Events sub-modal also goes full-screen so
	   the search list isn't squeezed into a 85vh bottom card. */
	.ZMgTGayM {
		padding: 0;
		align-items: stretch;
	}

	.PPfkQ8td {
		max-width: 100%;
		width: 100%;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}
}

/* ─────────────────────────────────────────────────────────────────
   Booths sidebar - rows used by the Booths-tab InnerSidebar branch
   to list every approved + pending booth booking on this event.
   Visually echoes the request-row pattern (avatar + name + meta +
   chevron) so the column reads as "the same kind of list" as the
   other tabs even though it sits in the sidebar slot.
   ───────────────────────────────────────────────────────────────── */

.AlooD8jz {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	text-align: left;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 10px 12px;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	color: #ffffff;
	color: var(--white);
}

.AlooD8jz:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
}

.AlooD8jz + .AlooD8jz {
	margin-top: 6px;
}

.rKgHruZL {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 8px;
	background: rgba(74, 158, 237, 0.12);
	border: 1px solid rgba(74, 158, 237, 0.28);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4a9eed;
	font-size: 13px;
}

.ywTjLu5w {
	flex: 1 1;
	min-width: 0;
}

.D2b2bqql {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #ffffff;
	color: var(--white);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.FEscv7oc {
	margin: 2px 0 0;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
	display: flex;
	align-items: center;
	gap: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.FEscv7oc i {
	margin-right: 3px;
	font-size: 10px;
}

.Ww2buhXY {
	opacity: 0.5;
}

.RyumKQse {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	flex-shrink: 0;
}

/* ── Event identity card ───────────────────────────────────────
   Real card chrome (background, border, rounded corners, padded)
   so the event banner reads as its own object - clearly separate
   from the navigation tabs above it and the content modules below
   it. The previous inline-with-fading-rule treatment looked like
   the bar was bleeding into the page; cards are the language
   everything else on the dashboard speaks, so the header should
   speak it too. */

.UauRvQtJ {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	grid-gap: 1.25rem;
	gap: 1.25rem;
	width: 100%;
	min-height: 64px;
	padding: 0.85rem 1.25rem;
	background-color: var(--sub-bg-dark);
	/* Silent separation: hairline border at low opacity + layered
	   shadow (inset top highlight, tight drop, ambient bloom) so
	   the header reads as a raised surface rather than a boxed
	   container. Matches the dashboard card chrome. */
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 12px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.025),
		0 1px 2px rgba(0, 0, 0, 0.35),
		0 8px 24px rgba(0, 0, 0, 0.18);
	box-sizing: border-box;
}

/* ── Thumbnail (small square preview of banner) ────────────── */

.FxTTwlXk {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 80% 20%, rgba(13, 122, 199, 0.35), transparent 55%),
		radial-gradient(ellipse at 20% 90%, rgba(6, 182, 212, 0.28), transparent 60%),
		linear-gradient(135deg, #14161e 0%, #0a0c11 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.gXFayEJG {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.IKcpTVPo {
	font-size: 16px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: -0.5px;
}

/* ── Identity (title + meta) ───────────────────────────────── */

.g90vMH1N {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.vTdAUxmW {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	min-width: 0;
}

.CbBT_ViL {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: -0.2px;
	line-height: 1.15;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.r3T1Rgsp {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
	background: rgba(34, 197, 94, 0.15);
	color: #4ade80;
	border: 1px solid rgba(34, 197, 94, 0.4);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.6px;
	flex-shrink: 0;
}

.F1VdWqt5 {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 8px #4ade80;
	animation: fTEZJ0Td 1.6s ease-in-out infinite;
}

@keyframes fTEZJ0Td {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.55; transform: scale(0.8); }
}

/* ── "View Profile Page" link ──────────────────────────────────
   Sits in the title row, after the LIVE pill (if any). A polished
   pill that uses the same accent-1 language as the rest of the
   dashboard but with a subtle gradient, inset highlight, and a
   nudge animation on the icon so it feels click-affordant. */

.VygzIY_J {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
	background: rgba(13, 122, 199, 0.15);
	border: 1px solid rgba(13, 122, 199, 0.4);
	color: #cfe7ff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	cursor: pointer;
	transition:
		background 0.18s ease,
		border-color 0.18s ease,
		color 0.18s ease,
		transform 0.12s ease;
}

.VygzIY_J:hover {
	background: rgba(13, 122, 199, 0.28);
	border-color: rgba(13, 122, 199, 0.6);
	color: #ffffff;
}

.VygzIY_J:active {
	transform: scale(0.97);
}

.VygzIY_J i {
	font-size: 8px;
	color: #60a5fa;
	color: var(--accent-1, #60a5fa);
	transition: transform 0.18s ease, color 0.18s ease;
}

.VygzIY_J:hover i {
	color: #ffffff;
	transform: translate(1px, -1px);
}

.uXuSWXaV {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.65);
	min-width: 0;
}

.nHfEj2Iv {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-width: 0;
}

.nHfEj2Iv i {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	flex-shrink: 0;
}

.nHfEj2Iv > span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.PeiBNdcE {
	color: rgba(255, 255, 255, 0.25);
	flex-shrink: 0;
}

.htifASO1 {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 11px;
	font-weight: 700;
	color: #4ade80;
	letter-spacing: 0.2px;
	flex-shrink: 0;
}

.htifASO1 i {
	font-size: 9px;
}

/* "Closes in 3h 28m" - neutral tone (informational, not urgent).
   Quieter than the green doors_open badge so the eye doesn't read it as a status change. */
.oBpxip9l {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.2px;
	flex-shrink: 0;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.oBpxip9l i {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
}

/* ── Right-aligned action buttons ──────────────────────────────
   Replaces the old capacity widget. These are the page-level
   actions - Invite (primary), Announce, Manage. Visually identical
   to the old InnerTopbar action buttons so the move feels like a
   relocation rather than a redesign. */

.D4PUNNs2 {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
}

/* ── Live signal chips (alerts bell, promoters trophy) ─────────
   Compact icon-only square buttons (32x32) that share the action-
   button language (same border + radius + hover states) but with
   a smaller footprint, since they're status indicators rather
   than verbs.

   Both chips are physically identical in size - the alerts chip
   communicates count + severity via a notification-badge dot
   floating on the top-right of the bell (the established "you
   have N notifications" pattern), not by stretching wider. Keeps
   the chip group visually balanced.

   Sits before the verb actions (Invite/Announce/Manage) and gets
   a subtle vertical divider after it so the chip group reads as
   "live state" and the actions read as "things to do". */

.wontnmtf {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.65);
	border-radius: 8px;
	cursor: pointer;
	font-family: var(--font-family);
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.wontnmtf:hover {
	background: rgba(255, 255, 255, 0.07);
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.12);
}

.wontnmtf:active {
	transform: scale(0.97);
}

.wontnmtf i {
	font-size: 13px;
	transition: color 0.15s ease;
}

/* Active state means alerts > 0. The chip itself stays neutral
   (matching the promoters chip exactly), but the bell icon is
   tinted by severity and a badge floats on the corner. Hover
   adds a subtle severity-tinted glow rather than fighting the
   neutral chrome. */
.r88nlE0U:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.15);
}

/* Notification badge - sits on the top-right corner of the bell.
   Sized to fit 1-3 characters ("9", "12", "99+"). The dark border
   ring punches it out of the chip background so the count reads
   crisply against any tile colour. */
.ZekUAEEq {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: #ef4444;
	color: #ffffff;
	border: 2px solid var(--sub-bg-dark);
	font-size: 9px;
	font-weight: 800;
	line-height: 1;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/* Subtle divider between status chips and verb actions. Keeps both
   groups feeling related (same row) but not interchangeable. */
.LVRT36eU {
	width: 1px;
	height: 18px;
	background: rgba(255, 255, 255, 0.08);
	margin: 0 0.2rem;
}

.ibKO31rv {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.75);
	padding: 0.45rem 0.85rem;
	border-radius: 8px;
	cursor: pointer;
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.ibKO31rv:hover {
	background: rgba(255, 255, 255, 0.07);
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.12);
}

.ibKO31rv:active {
	transform: scale(0.97);
}

.ibKO31rv i {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
}

.ibKO31rv:hover i {
	color: var(--white);
}

.KfUAJkXb {
	background: rgba(13, 122, 199, 0.18);
	border-color: rgba(13, 122, 199, 0.4);
	color: var(--white);
}

.KfUAJkXb i {
	color: var(--accent-1);
}

.KfUAJkXb:hover {
	background: rgba(13, 122, 199, 0.28);
	border-color: rgba(13, 122, 199, 0.55);
}

.KfUAJkXb:hover i {
	color: var(--white);
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 980px) {
	.UauRvQtJ {
		gap: 0.75rem 1rem;
		padding: 0.7rem 0.9rem;
	}

	.CbBT_ViL {
		font-size: 16px;
	}

	/* Drop the text labels on action buttons at this width - keep
	   them as icon-only chips so the bar doesn't crowd the title. */
	.R_FHc3WH {
		display: none;
	}


	.ibKO31rv {
		padding: 0.45rem 0.6rem;
	}
}

/* Tablet / narrow desktop (≤768px): the inline header is still
   visible (the mobile chrome only kicks in at ≤480), but with all
   the actions + status chips icon-sized it gets crowded against
   the truncated title. Drop the secondary "promoters trophy" chip
   here - Top Promoters is non-critical at-a-glance info, and it
   stays accessible by widening the viewport. The alerts pill stays
   (operationally important). */
@media (max-width: 768px) {
	.a7gELO3L {
		display: none;
	}
}

/* Phone widths (≤480): the mobile chrome layer (mobile_top etc.)
   was removed when this surface became an embedded page, so the
   inline header is the only event-identity affordance left. We
   stack it: [thumb + identity] in row 1, [actions] wrapping into
   row 2. Keeps the title fully visible (the desktop grid would
   crush it once actions take their share of the row at this width)
   while the action chips stay reachable as a thumbpad-friendly row. */
@media (max-width: 480px) {
	.UauRvQtJ {
		grid-template-columns: auto 1fr;
		grid-template-rows: auto auto;
		gap: 0.6rem 0.85rem;
		padding: 0.65rem 0.85rem;
		min-height: 0;
	}

	.FxTTwlXk {
		grid-row: 1;
		grid-column: 1;
		width: 40px;
		height: 40px;
	}

	.g90vMH1N {
		grid-row: 1;
		grid-column: 2;
	}

	.CbBT_ViL {
		font-size: 15px;
	}

	/* Actions row sits below, spanning full width, wrapping if
	   needed. flex-wrap keeps the chips on as many rows as it
	   takes rather than pushing some offscreen. */
	.D4PUNNs2 {
		grid-row: 2;
		grid-column: 1 / -1;
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem;
		justify-content: flex-start;
	}

	.ibKO31rv {
		padding: 0.45rem 0.55rem;
	}
}

/* ── Layout ────────────────────────────────────────────────────
   No-scroll page methodology: dashboard fills available height exactly,
   internal lists scroll instead of the page.

   3-row structure:
     1. Funnel       - primary metric, full width (auto)
     2. Live row     - Recent Activity (3fr) + Live Alerts (2fr), fills (1fr)
     3. Summary row  - Revenue + Ticket Mix + Top Promoters, equal thirds (auto, capped)

   Grouping by data tempo (live ops vs. summary snapshots) instead of by
   visual side keeps the eye-line aligned with how managers actually scan
   the dashboard during an event.
*/

.xbv0XeVO {
	display: grid;
	grid-template-columns: 1fr;
	/* Two rows: funnel KPI tiles (auto, sized to content) and the
	   live-ops row (1fr, absorbs leftover viewport height - Recent
	   Activity is the tallest content and benefits from any spare
	   vertical room). Previously had a third middle KPI ribbon row;
	   that band was removed and its entry points were rehomed onto
	   EventHeader (alerts pill, promoters icon) and the Revenue
	   drawer (ticket mix). */
	grid-template-rows: auto minmax(0, 1fr);
	grid-gap: 1rem;
	gap: 1rem;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

/* Row 2 - three-column live ops strip:
     • Recent Activity (left, dominant, text-heavy feed)
     • Revenue (middle, metric card)
     • Sales Channels (right, metric card)

   All three cards stretch to the same row height so their
   bottom edges align - a content-height variant produced
   ragged bottoms which read as broken layout. The "internal
   dead space" risk that comes with stretching is handled at
   the card level: Revenue's trend block is the flex-grow
   sink that absorbs whatever vertical space is left after
   the fixed-size header/total/rows, and Sales Channels has
   five visible channel rows + a "+N more · view all" footer
   that naturally fills its share of the row. */
.Y2IbLpMf {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr);
	grid-gap: 1rem;
	gap: 1rem;
	min-height: 0;
	min-width: 0;
}

/* On narrower desktops (≤1280px) the 3-up row gets cramped - the
   metric card columns start truncating. Drop to a 2-row layout:
   feed on top (full width), the two metric cards below side-by-side.
   Keeps the visual pairing of revenue + channels while giving the
   activity feed room to breathe. */
@media (max-width: 1280px) {
	.Y2IbLpMf {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.Y2IbLpMf > .Uc2uN8B0 {
		grid-column: 1 / -1;
	}
}

/* KPI ribbon - single thin row replacing the previous 3-up summary cards.
   No card chrome. Three inline KPI sections separated by hairline dividers,
   each clickable to open its existing drawer. Trims ~150px of vertical noise
   from the page and gives the live row above more breathing room. */
.AW2UMTcR {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1.4fr) 1px minmax(0, 1.4fr);
	align-items: stretch;
	grid-gap: 0;
	gap: 0;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 12px;
	overflow: hidden;
	min-width: 0;
}

.vZH__VJE {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 0.85rem 1.25rem;
	min-width: 0;
	cursor: pointer;
	background: none;
	border: none;
	color: inherit;
	font-family: var(--font-family);
	text-align: left;
	transition: background 0.15s ease;
	position: relative;
}

.vZH__VJE:hover {
	background: rgba(255, 255, 255, 0.025);
}

.vZH__VJE:focus-visible {
	outline: none;
	background: rgba(13, 122, 199, 0.08);
}

.vZH__VJE::after {
	content: '\f424'; /* fa-up-right-and-down-left-from-center */
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	font-size: 9px;
	color: rgba(255, 255, 255, 0.2);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.vZH__VJE:hover::after,
.vZH__VJE:focus-visible::after {
	opacity: 1;
}

.PeaveSpe {
	background: rgba(45, 47, 57, 0.7);
	width: 1px;
}

.TTiSNOoA {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.TTiSNOoA i {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.35);
}

.HOHbgJGc {
	display: flex;
	align-items: baseline;
	gap: 0.55rem;
	flex-wrap: wrap;
	min-width: 0;
}

.UJJ7iBsP {
	font-size: 22px;
	font-weight: 700;
	color: var(--white);
	line-height: 1;
	letter-spacing: -0.3px;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

.ToM6Kuz6 {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 11px;
	font-weight: 600;
	color: #22c55e;
	flex-shrink: 0;
}

.ToM6Kuz6 i {
	font-size: 9px;
}

.bf5h6ZaG {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
	font-weight: 500;
	flex-shrink: 0;
}

.nk5GPl4D {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
	min-width: 0;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.bSl_3ZZv {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	white-space: nowrap;
}

.NK2HB_OU {
	color: rgba(255, 255, 255, 0.2);
	margin-right: 0.05rem;
}

.Tao24FyS {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.D0XnYD52 {
	color: rgba(255, 255, 255, 0.65);
	font-weight: 500;
}

.qoeBXhMQ {
	color: var(--white);
	font-weight: 700;
}

/* Mobile fallback: stack everything vertically.
   On narrow screens we accept document scroll (the no-scroll methodology applies
   to desktop; phones can scroll the page since the viewport itself is short).
   Threshold matches the rest of the app's mobile cutoff. */
@media (max-width: 980px) {
	.xbv0XeVO {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		height: auto;
		overflow: visible;
	}

	.Y2IbLpMf {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		max-height: none;
	}

	.AW2UMTcR {
		display: flex;
		flex-direction: column;
	}

	.PeaveSpe {
		width: 100%;
		height: 1px;
	}
}

/* ── Shared card base ───────────────────────────────────────── */

/* ── Silent separation ─────────────────────────────────────────
   Cards no longer rely on a hard 2px stroke for definition; the
   border drops to a 1px hairline at near-zero opacity (just
   enough to define the corner radius cleanly) and a layered
   shadow does the heavy lifting. Three shadow layers stacked:

     1. Inset 1px top highlight - the "lifted edge" that catches
        light, telling the eye a surface is *raised* off the page.
     2. Tight 1-3px drop - the contact shadow, anchors the card
        to the surface beneath it.
     3. Soft 24px ambient bloom - the glow of separation; gives
        each card its own pocket of air without a visible line.

   This is the Linear/Stripe/Vercel premium-dashboard pattern.
   Reads as "boxes float on the page" instead of "boxes are
   contained by lines". */
.YB5pfgB7,
.Uc2uN8B0,
.TKXGsaV7,
.VN7t1ij_,
.jEWLLWVn,
.PvntMTXs,
.AcaHaWlO {
	background-color: var(--sub-bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 12px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.025),
		0 1px 2px rgba(0, 0, 0, 0.35),
		0 8px 24px rgba(0, 0, 0, 0.18);
	overflow: hidden;
	flex-shrink: 0;
}

/* Clickable card affordance - used by Revenue / Ticket Mix / Top Promoters.
   Subtle hover lift so it doesn't feel "screamy" on a dark page; brighter
   border on hover signals interactivity. Tap-down state gives haptic feel. */
.FC68CDuL {
	cursor: pointer;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
	position: relative;
}

/* Expand affordance rendered as a real <i> element so the
   Font Awesome JS kit can swap it for an SVG. CSS `content:`
   with the FA webfont doesn't work under the kit's SVG mode. */
.BjmXb60c {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.25);
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
	pointer-events: none;
	z-index: 2;
}

.FC68CDuL:hover .BjmXb60c,
.FC68CDuL:focus-visible .BjmXb60c {
	opacity: 1;
	color: rgba(255, 255, 255, 0.55);
}

/* When a clickable card is hovered/focused, fade the right-side
   header metadata out so the expand affordance has a clean slot
   to fade in. Without this, the absolutely-positioned ::after
   icon lands on top of the subtitle text ("355 sales", pixel
   pill, etc.) and looks clipped. The header content is shown
   again as soon as the user moves away. */
.FC68CDuL .EtkyfAjv,
.FC68CDuL .GIw3b8Y8 {
	transition: opacity 0.15s ease;
}

.FC68CDuL:hover .EtkyfAjv,
.FC68CDuL:hover .GIw3b8Y8,
.FC68CDuL:focus-visible .EtkyfAjv,
.FC68CDuL:focus-visible .GIw3b8Y8 {
	opacity: 0;
}

/* On hover, lift the card off the page: nudge it up 1px and
   deepen the shadow stack. We keep the inset top highlight and
   tight contact shadow from the resting state, then swap the
   ambient bloom for a stronger one - reads as "the card has
   moved closer to you" rather than "the border changed". */
.FC68CDuL:hover {
	border-color: rgba(255, 255, 255, 0.08);
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 2px 4px rgba(0, 0, 0, 0.4),
		0 12px 32px rgba(0, 0, 0, 0.28);
}

.FC68CDuL:focus-visible {
	outline: none;
	border-color: rgba(13, 122, 199, 0.55);
	box-shadow: 0 0 0 2px rgba(13, 122, 199, 0.18);
}

.FC68CDuL:active {
	transform: translateY(0);
}

/* ── Shared header pattern ──────────────────────────────────── */

.AxNmgdbN,
.yGVBKnBf,
.Nge3c1OU,
.nl51HfU4,
.BUXYHLkV,
.Y9lxwb5s {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.6);
	flex-shrink: 0;
}

/* Legacy-named title/subtitle pair - funnel_* prefix is historical;
   these are the shared header text styles used by every dashboard
   card (Revenue, Recent Activity, Alerts, Quick Actions, Top
   Promoters, Ticket Mix). Renaming would touch a lot of call-sites
   for no functional gain, so they live on under their original keys. */
.W8aRPjhL {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
}

.W8aRPjhL > i {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.55);
}

.EtkyfAjv {
	font-size: 11px;
	color: #555;
	font-weight: 500;
}

/* ── Funnel ─────────────────────────────────────────────────────
   No outer card wrapper or header bar - each metric is its own
   standalone tile. The grid is purely a layout container that lays
   out four sibling cards with a gap between them. */

._6Oz0cs0 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);   /* was repeat(5, 1fr) - walk-ins commented out in FunnelCard */
	grid-gap: 0.75rem;
	gap: 0.75rem;
}

.WKu5fdIi {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1rem 1.25rem 0.85rem;
	background-color: var(--sub-bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 12px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.025),
		0 1px 2px rgba(0, 0, 0, 0.35),
		0 8px 24px rgba(0, 0, 0, 0.18);
	color: inherit;
	font-family: var(--font-family);
	text-align: left;
	cursor: default;
	overflow: hidden;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.WKu5fdIi:disabled {
	cursor: default;
}

/* Skeleton variant rendered while the dashboard is loading. Keeps the
   tile shape so the layout doesn't reflow when real data lands. */
.jseSzrDi {
	min-height: 112px;
}

.zT7NUaua {
	cursor: pointer;
	/* Hint the GPU that this element will be transformed so the lift
	   animation runs on a stable composited layer. Without this, the
	   card promotes/demotes its layer at hover/unhover, which creates
	   a one-frame subpixel jitter on the sparkline at the bottom of
	   the tile - looks like the line briefly "cuts off" on the right
	   edge as the clip boundary repaints. */
	will-change: transform;
}

/* Match the shadow language of the resting state - same three-layer
   stack (inset highlight, contact shadow, ambient bloom), just deeper.
   Was a single 0 6px 16px shadow that replaced the resting stack
   wholesale, so the card visibly "snapped" between two different
   shadow shapes on hover instead of smoothly lifting. */
.zT7NUaua:hover {
	border-color: rgba(255, 255, 255, 0.08);
	transform: translateY(-1px);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 2px 4px rgba(0, 0, 0, 0.4),
		0 12px 32px rgba(0, 0, 0, 0.28);
}

.zT7NUaua:focus-visible {
	outline: none;
	border-color: rgba(13, 122, 199, 0.55);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.025),
		0 0 0 2px rgba(13, 122, 199, 0.18),
		0 8px 24px rgba(0, 0, 0, 0.18);
}

.iYbTLkkZ {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.25rem;
}

.SEOUnlkH {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.ckbUi4gQ {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
	animation: SmZROyRH 1.6s ease-in-out infinite;
}

.iGNkRCoe {
	margin-left: auto;
	font-size: 10px;
	font-weight: 700;
	color: #22c55e;
	letter-spacing: 0.3px;
}

.VIXnatYw {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}

.bT7emQBi {
	font-size: 28px;
	font-weight: 700;
	color: var(--white);
	line-height: 1;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

/* Demoted: percentage is context, not a headline. Was 13px / 600 weight
   in the metric's accent color; now 11px / 500 / muted so it reads as
   secondary metadata next to the bold number. */
._w5HJSot {
	font-size: 11px;
	font-weight: 500;
	line-height: 1;
	color: rgba(255, 255, 255, 0.45);
}

.Lu1ccPq9 {
	/* Bleeds to the tile edges so the line reaches corner-to-corner.
	   margin-top: auto inside the flex column pins the sparkline to the
	   bottom edge so all four tiles have a consistent "number on top,
	   line at the bottom" silhouette regardless of optional content. */
	margin: auto -1.25rem -0.85rem;
	height: 38px;
	pointer-events: none;
}

/* Pacing meta line - sits under the Admitted sparkline. Answers
   "are we on track?" with a smoothed admit rate and sellout projection. */
.TgJSrrjo {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0.35rem 0 -0.15rem;
	font-size: 10px;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.5);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.DWb5T7OW {
	color: rgba(255, 255, 255, 0.75);
	font-weight: 600;
}

.SaK33yc3 {
	color: rgba(255, 255, 255, 0.2);
}

.K_mgwcoc {
	color: rgba(255, 255, 255, 0.5);
	font-weight: 500;
}

.KCRrvvJd {
	height: 3px;
	background: rgba(255, 255, 255, 0.07);
	border-radius: 2px;
	overflow: hidden;
}

.z_LpiTZd {
	height: 100%;
	border-radius: 2px;
	transition: width 0.6s ease;
}

.JHehlD6a {
	display: block;
	width: 100%;
}

/* ── Ticket Mix Card ────────────────────────────────────────── */

.YB5pfgB7 {
	min-height: 130px;
}

.Yj26q_3K {
	display: flex;
	height: 5px;
	width: 100%;
	overflow: hidden;
}

.x3Mt3gnA {
	height: 100%;
	transition: width 0.5s ease;
}

.n5zstMKC {
	padding: 0.6rem 1.25rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
}

.jHQaUDwu {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.uFyv5ZAd {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.HUFWmjGA {
	flex: 1 1;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
}

.LxQndSk_ {
	font-size: 12px;
	color: #555;
	min-width: 32px;
	text-align: right;
}

.ShzSbGQs {
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	min-width: 30px;
	text-align: right;
}

/* ── Recent Activity Card ───────────────────────────────────── */

.Uc2uN8B0 {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.yGVBKnBf {
	gap: 0.65rem;
	flex-wrap: wrap;
}

.b0D13YaK {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: #22c55e;
	flex-shrink: 0;
	box-shadow: 0 0 6px #22c55e;
	animation: SmZROyRH 2s ease-in-out infinite;
}

@keyframes SmZROyRH {
	0%, 100% { opacity: 1; }
	50%       { opacity: 0.5; }
}

._pYMhWNk {
	font-size: 10px;
	font-weight: 700;
	color: #22c55e;
	letter-spacing: 0.5px;
}

.cYVsC5fr {
	display: flex;
	gap: 0.35rem;
	flex-wrap: wrap;
}

.XP1DB85a {
	padding: 0.25rem 0.65rem;
	border-radius: 6px;
	border: 1px solid #2d2f39;
	background: none;
	color: #666;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	font-family: var(--font-family);
	transition: all 0.15s ease;
}

.XP1DB85a:hover {
	border-color: #3d4052;
	color: #888;
}

.heIVBY17 {
	border-color: var(--accent-1);
	color: var(--accent-1);
	background: rgba(13, 122, 199, 0.06);
}

/* ── Recent Activity dropdown filter ───────────────────────────
   Replaces the flat chip row. The trigger borders/text in the
   active category's color so the user can see at a glance which
   filter the body is scoped to; clicking opens an absolute-
   positioned menu of all categories. */
.nKvXbcmv {
	position: relative;
	margin-right: 0.5rem;
}

.rbVdZUan {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.7rem;
	border-radius: 6px;
	border: 1px solid #2d2f39;
	background: none;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--font-family);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.rbVdZUan:hover {
	background: rgba(255, 255, 255, 0.03);
}

.rbVdZUan i {
	font-size: 10px;
	transition: transform 0.15s ease;
	opacity: 0.7;
}

.gwFe5KCM i {
	transform: rotate(180deg);
}

.rIoVxzkY {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	min-width: 180px;
	background: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	box-shadow:
		0 4px 12px rgba(0, 0, 0, 0.45),
		0 1px 0 rgba(255, 255, 255, 0.025) inset;
	padding: 4px;
	z-index: 30;
	display: flex;
	flex-direction: column;
}

.nC_Kb7x8 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.6rem;
	border: none;
	background: none;
	border-radius: 6px;
	color: rgba(255, 255, 255, 0.75);
	font-size: 13px;
	font-family: var(--font-family);
	cursor: pointer;
	text-align: left;
	transition: background 0.12s ease;
}

.nC_Kb7x8:hover {
	background: rgba(255, 255, 255, 0.04);
	color: var(--white);
}

.qn4Ag568 {
	background: rgba(13, 122, 199, 0.08);
	color: var(--white);
}

.lvYsEuri {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Wrap exists to position the thin loading bar relative to the body without
   affecting flex sizing. The body itself is still the scroll container. */
.D5AwpLMN {
	position: relative;
	flex: 1 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow: hidden;
}

.jXwaBH_A {
	flex: 1 1;
	overflow-y: auto;
	padding: 0.5rem 0;
	min-height: 0;
}

.jXwaBH_A::-webkit-scrollbar { width: 4px; }
.jXwaBH_A::-webkit-scrollbar-track { background: transparent; }
.jXwaBH_A::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

/* Refetch state - body keeps its content but visually steps back so the eye
   knows the data is stale and a refresh is in flight. Pointer-events still
   work (e.g. you can re-click another filter mid-load). */
.w1EhcUSc {
	opacity: 0.55;
	transition: opacity 0.18s ease-out;
}

/* Cross-fade applied via React's `key={activeTab}` remount - when the active
   filter changes, the body is a fresh element and animates in. Tiny upward
   slide reads as "new data settled into place" rather than "thing flashed". */
.GScECDUe {
	animation: dPY9z7wo 0.22s ease-out;
}

@keyframes dPY9z7wo {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Indeterminate progress bar - sits at the very top of the body during a
   refetch when stale rows are still on screen. Slides left-to-right
   continuously so it doesn't pretend to know progress. */
.I76ptQ1n {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg,
		transparent 0%,
		rgba(13, 122, 199, 0.0) 10%,
		var(--accent-1) 50%,
		rgba(13, 122, 199, 0.0) 90%,
		transparent 100%
	);
	background-size: 50% 100%;
	background-repeat: no-repeat;
	animation: ALvxGpuQ 1.1s ease-in-out infinite;
	z-index: 2;
	pointer-events: none;
}

@keyframes ALvxGpuQ {
	0%   { background-position: -50% 0; }
	100% { background-position: 150% 0; }
}

/* Skeleton rows - matched to the real row geometry so the body doesn't pop
   when real data arrives. Used only on a true cold load (no prior data). */
.Yv0ja7Ea {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.3);
}

.rEqd9xKq,
.GutT8XUd,
.TFwB7xoX,
.xWLvO4HT {
	background: linear-gradient(90deg,
		rgba(255, 255, 255, 0.04) 0%,
		rgba(255, 255, 255, 0.09) 50%,
		rgba(255, 255, 255, 0.04) 100%
	);
	background-size: 200% 100%;
	animation: G2p3lEVr 1.4s ease-in-out infinite;
}

.rEqd9xKq {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
}

.JuTo0dw1 {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1;
	min-width: 0;
}

.GutT8XUd {
	height: 11px;
	width: 65%;
	border-radius: 3px;
}

.TFwB7xoX {
	height: 9px;
	width: 35%;
	border-radius: 3px;
}

.xWLvO4HT {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

@keyframes G2p3lEVr {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

._I9500Hj {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.3);
	transition: background 0.1s ease;
}

._I9500Hj:last-child {
	border-bottom: none;
}

._I9500Hj:hover {
	background: rgba(255, 255, 255, 0.015);
}

.yulUZjeA {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--white);
	flex-shrink: 0;
}

.v84ei3zA {
	flex: 1 1;
	min-width: 0;
}

.byGKjvgs {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.7);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.byGKjvgs strong {
	color: var(--white);
	font-weight: 600;
}

.ElbRodDZ {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.2rem;
	flex-wrap: wrap;
}

.p7t4GdQ2 {
	font-size: 11px;
	color: #555;
}

.OkcHE45a {
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	border: 1px solid;
	font-size: 10px;
	font-weight: 600;
}

.EZHXqo99 {
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	background: rgba(13, 122, 199, 0.15);
	color: var(--accent-1);
	font-size: 10px;
	font-weight: 600;
	border: 1px solid rgba(13, 122, 199, 0.3);
}

.JAhi2yo7 {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* New-row landing animation - applied via .activity_row_new on entries
   that came in from the live stream. One-shot fade + slide so the eye
   notices an event landing without the whole list re-animating. */
.q1Nzjq0o {
	animation: Htxe95jD 0.32s ease-out;
}

@keyframes Htxe95jD {
	from {
		opacity:   0;
		transform: translateY(-4px);
		background: rgba(34, 197, 94, 0.06);
	}
	to {
		opacity:   1;
		transform: translateY(0);
		background: transparent;
	}
}

/* ── Recent Activity Drawer ─────────────────────────────────── */

/* Filter strip - sits between the drawer header and the scrolling
   body as a real flex item (NOT a sticky child of .drawer_body).
   This guarantees no content can ever scroll behind it. Solid
   background, subtle bottom border to separate from the list. */
.YbPsriOO {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	padding: 0.85rem 1.5rem;
	background: var(--bg-dark);
	border-bottom: 1px solid rgba(45, 47, 57, 0.6);
	flex-shrink: 0;
}

.jP_kPiNw {
	display: flex;
	flex-direction: column;
}

/* ── Live Alerts Card ──────────────────────────────────────── */

.VN7t1ij_ {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.ukxLxSRz {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.85);
	margin-left: 0.4rem;
}

.IFyM_oee {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.EwVWU9tj {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

/* Severity tinted pills - used for the small count chip in the alerts card header.
   Scoped to .alerts_sev_dot specifically so the bare .sev_danger / .sev_warn /
   .sev_info modifiers can be reused as plain labels on .alert_row_compact
   without inheriting a tinted background. */
.EwVWU9tj.pgV1uV5V {
	background: rgba(239, 68, 68, 0.15);
	color: #ef4444;
}

.EwVWU9tj.l5HH6MMz {
	background: rgba(249, 115, 22, 0.15);
	color: #f97316;
}

.EwVWU9tj.kF5_csEu {
	background: rgba(13, 122, 199, 0.15);
	color: var(--accent-1);
}

.schqPNQc {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 1.25rem;
	font-size: 12px;
	color: rgba(34, 197, 94, 0.85);
}

.schqPNQc i {
	font-size: 14px;
	color: #22c55e;
}

.schqPNQc p {
	margin: 0;
	color: inherit;
}

.FjG_jMjH {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overflow-x: hidden;
	min-height: 0;
}

.FjG_jMjH::-webkit-scrollbar { width: 4px; }
.FjG_jMjH::-webkit-scrollbar-track { background: transparent; }
.FjG_jMjH::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

/* Compact row - single line: icon | title | time | dismiss.
   Quieter chrome: no left-edge stripe, no icon background tint. Severity
   reads from the icon glyph color alone, which is enough at a glance and
   avoids stacking 3 layers of color signaling per row.
   Full title/detail/action live in the AlertDrawer that opens on click. */
.nHztBgI3 {
	display: grid;
	grid-template-columns: 18px 1fr auto auto;
	align-items: center;
	grid-gap: 0.55rem;
	gap: 0.55rem;
	padding: 0.5rem 0.85rem 0.5rem 1.1rem;
	border-top: 1px solid rgba(45, 47, 57, 0.6);
	transition: background 0.15s ease;
	position: relative;
	font-family: var(--font-family);
	color: inherit;
	text-align: left;
	width: 100%;
	cursor: pointer;
	-webkit-user-select: none;
	        user-select: none;
}

.nHztBgI3:hover {
	background: rgba(255, 255, 255, 0.03);
}

.nHztBgI3:focus-visible {
	outline: none;
	background: rgba(255, 255, 255, 0.04);
}

.nHztBgI3:focus-visible::after {
	content: '';
	position: absolute;
	inset: 2px;
	border-radius: 6px;
	border: 1px solid rgba(13, 122, 199, 0.55);
	pointer-events: none;
}

.nHztBgI3:active {
	background: rgba(255, 255, 255, 0.05);
}

.xWkPvOPa {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.nHztBgI3.pgV1uV5V .xWkPvOPa { color: #ef4444; }
.nHztBgI3.l5HH6MMz   .xWkPvOPa { color: #f97316; }
.nHztBgI3.kF5_csEu   .xWkPvOPa { color: var(--accent-1); }

.xWkPvOPa i {
	font-size: 12px;
}

.VWDthcl7 {
	font-size: 12px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.zXklmZi4 {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

.DcJTBPEI::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 100%;
	background: currentColor;
	opacity: 0.5;
}

.DcJTBPEI.pgV1uV5V::before { background: #ef4444; opacity: 0.8; }
.DcJTBPEI.l5HH6MMz::before   { background: #f97316; opacity: 0.7; }
.DcJTBPEI.kF5_csEu::before   { background: var(--accent-1); opacity: 0.5; }

.LsCXQj3Z {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}

.DcJTBPEI.pgV1uV5V .LsCXQj3Z { background: rgba(239, 68, 68, 0.12);  color: #ef4444; }
.DcJTBPEI.l5HH6MMz   .LsCXQj3Z { background: rgba(249, 115, 22, 0.12); color: #f97316; }
.DcJTBPEI.kF5_csEu   .LsCXQj3Z { background: rgba(13, 122, 199, 0.12); color: var(--accent-1); }

.LsCXQj3Z i {
	font-size: 12px;
}

.pdJY0tBu {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.omAkqsz8 {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	min-width: 0;
}

.nCdHVR7x {
	font-size: 12px;
	font-weight: 600;
	color: var(--white);
	line-height: 1.3;
}

.iSCZ1DzS {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	flex-shrink: 0;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.GGNBmhff {
	margin: 0;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.35;
}

/* Hover-revealed action affordance - tells the manager what clicking will do.
   Hidden by default to keep the row visually compact; on hover/focus it slides in.
   Tinted to match the alert severity so the affordance feels native to the row. */
.Ey5J42Nj {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.2px;
	margin-top: 0.35rem;
	opacity: 0;
	max-height: 0;
	overflow: hidden;
	transform: translateY(-2px);
	transition: opacity 0.18s ease, max-height 0.18s ease, transform 0.18s ease;
	pointer-events: none;
	color: rgba(255, 255, 255, 0.55);
}

.g2B12ITc:hover .Ey5J42Nj,
.g2B12ITc:focus-visible .Ey5J42Nj {
	opacity: 1;
	max-height: 24px;
	transform: translateY(0);
}

.DcJTBPEI.pgV1uV5V .Ey5J42Nj { color: #ef4444; }
.DcJTBPEI.l5HH6MMz   .Ey5J42Nj { color: #f97316; }
.DcJTBPEI.kF5_csEu   .Ey5J42Nj { color: var(--accent-1); }

.Ey5J42Nj i {
	font-size: 9px;
	transition: transform 0.18s ease;
}

.g2B12ITc:hover .Ey5J42Nj i,
.g2B12ITc:focus-visible .Ey5J42Nj i {
	transform: translateX(2px);
}

.gZpOiCK7 {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.3);
	cursor: pointer;
	padding: 4px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, color 0.15s ease;
	flex-shrink: 0;
	font-family: var(--font-family);
	margin-top: 1px;
}

.gZpOiCK7:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--white);
}

.gZpOiCK7 i {
	font-size: 11px;
}

/* ── Tonight's Revenue Card ────────────────────────────────── */

.jEWLLWVn {
	display: flex;
	flex-direction: column;
}

.wZ0uWdfN {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1.25rem 0.5rem;
	flex-wrap: wrap;
}

.qquXgOV9 {
	font-size: 26px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: -0.4px;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.wFlHPiJu {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: rgba(34, 197, 94, 0.12);
	color: #22c55e;
	font-size: 11px;
	font-weight: 600;
}

.wFlHPiJu i {
	font-size: 10px;
}

/* Pre-sale vs tonight split - sits between the headline total and the
   per-ticket-type breakdown. Two label/value rows + a compact ratio bar
   answer "of what you've earned, how much is banked already vs landing
   right now". For a future event this section is essentially
   "100% pre-sale, $0 tonight"; mid-event the green segment grows. */
.UlitcB8g {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 0.25rem 1.25rem 0.85rem;
}

/* Calm summary block - two read-only info rows (Pre-sale, Tonight)
   above a share bar. The whole Revenue card is the click target for
   the full drawer; the only inline action is the small "Allocations"
   link on the Pre-sale row (its drilldown is a different drawer). */
.tjubgTD0 {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 0.1rem 1.25rem 0.95rem;
}

.cbSqLK0Z {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
}

.QuxWijj_ {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
}

.NKdIQwmd {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.EX1Fr0RS {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.k9WKcdbO {
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.88);
	letter-spacing: 0.1px;
}

/* Sale-count chip next to the label. Reads quieter than the dollar
   value on the right so the eye lands on the dollar amount first. */
.d8yB1q7y {
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.05);
	padding: 1px 7px;
	border-radius: 999px;
}

.e776EpQT {
	font-size: 15px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: -0.1px;
}

/* Small inline secondary action - opens the Pre-sale allocations
   drawer without triggering the parent card click (stopPropagation
   is set in the handler). Sits at the end of the Pre-sale row so
   "this leads somewhere else than the card click" reads instantly. */
.WAyRS0hd {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--font-family);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: rgba(13, 122, 199, 0.85);
	background: rgba(13, 122, 199, 0.08);
	border: 1px solid rgba(13, 122, 199, 0.18);
	border-radius: 999px;
	padding: 3px 9px 3px 10px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.WAyRS0hd i {
	font-size: 9px;
	transition: transform 0.15s ease;
}

.WAyRS0hd:hover {
	background: rgba(13, 122, 199, 0.16);
	border-color: rgba(13, 122, 199, 0.4);
	color: #4ea3df;
}

.WAyRS0hd:hover i {
	transform: translateX(2px);
}

.WAyRS0hd:focus-visible {
	outline: none;
	border-color: rgba(13, 122, 199, 0.6);
	box-shadow: 0 0 0 2px rgba(13, 122, 199, 0.2);
}

.WAyRS0hd:active {
	transform: scale(0.97);
}

.t3aA8BZe {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	font-size: 12px;
}

.zSUJyw86 {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: rgba(255, 255, 255, 0.78);
	font-weight: 600;
	letter-spacing: 0.2px;
}

.N3nIMvAy {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Tiny LIVE pill on the Tonight row when door sales are accumulating.
   Reads as "this number is still moving" without being as loud as the
   activity feed's full LIVE label. */
.pcYQpXbn {
	font-size: 9px;
	font-weight: 700;
	color: #22c55e;
	letter-spacing: 0.4px;
	padding: 1px 5px;
	border-radius: 4px;
	background: rgba(34, 197, 94, 0.14);
	border: 1px solid rgba(34, 197, 94, 0.3);
	margin-left: 0.2rem;
}

.YEDN6aaM {
	display: inline-flex;
	align-items: baseline;
	gap: 0.7rem;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.B_iXHbf8 {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
}

.c1pJZ6sS {
	font-size: 14px;
	font-weight: 700;
	color: var(--white);
}

/* Button variant of the split row - used for the clickable Pre-sale
   surface that opens the dedicated allocations drawer. Inherits the
   row layout, then resets button chrome and adds a subtle hover lift
   so the affordance reads without screaming. The chevron only appears
   on this clickable row to disambiguate it from the static Tonight row. */
.Je7zaERT {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 0.35rem 0.45rem;
	margin: -0.35rem -0.45rem;
	cursor: pointer;
	color: inherit;
	font-family: var(--font-family);
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
	width: calc(100% + 0.9rem);
}

.Je7zaERT:hover {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.08);
}

.Je7zaERT:focus-visible {
	outline: none;
	border-color: rgba(13, 122, 199, 0.55);
	box-shadow: 0 0 0 2px rgba(13, 122, 199, 0.18);
}

.Je7zaERT:active {
	transform: scale(0.99);
}

.EqBqqvlF {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.35);
	margin-left: 0.15rem;
	transition: color 0.15s ease, transform 0.15s ease;
}

.Je7zaERT:hover .EqBqqvlF {
	color: rgba(255, 255, 255, 0.7);
	transform: translateX(2px);
}

/* Revenue drawer KPI ribbon - four equal tiles at the top of the
   drawer. Each tile is a labelled metric: pre-sale, tonight, this-hour
   delta, cash in till. Plain dark cards, no shimmer, no extra chrome. */
.Rf7eH3n2 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 10px;
	gap: 10px;
}

.Ca8Kos9B {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 14px 12px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 10px;
}

.pVloBVoo {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.kAP02AC1 {
	font-size: 20px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: -0.01em;
}

.iTxnJab7 {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 720px) {
	.Rf7eH3n2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Stitched cumulative trend - SparkLine wrapper + axis legend underneath
   ("Pre-sale lead-up" / "Tonight"). The wrapper just spaces the line
   away from the title; the SparkLine itself is responsible for the
   line drawing. */
.vPs1qQ9v {
	padding: 4px 0 6px;
}

.ko6UUrkC {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.xoFLArKN {
	display: flex;
	width: 100%;
	height: 6px;
	border-radius: 3px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.05);
	margin-top: 0.25rem;
}

.I3r9tkr4 {
	height: 100%;
	transition: width 0.4s ease;
}

/* ── Revenue trend chart ───────────────────────────────────────
   Stitched sparkline (pre-sale ramp → tonight's hourly takings)
   anchored at the bottom of the Revenue card. Two jobs:

   1. Premium analytical signal - answers "is the curve still
      climbing or has it gone flat?" at a glance.
   2. Flex-grow sink - `flex: 1 1 auto` makes this section absorb
      whatever vertical space is left after the fixed-size header,
      total, split rows and ratio bar. Without this, on tall rows
      (e.g. 1920×1080 desktops with lots of activity), the card
      stretches to match Recent Activity but the content above
      stays compact, leaving a 100px empty band. With flex-grow,
      the trend chart itself expands to fill, and the band
      disappears.

   No top label or dot legend - colours are already established
   by the rows + ratio bar above, so the chart can stand alone. */
.N6D2a0mC {
	display: flex;
	flex-direction: column;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.04);
	flex: 1 1 auto;
	min-height: 0;
}

/* Chart wrapper sits the SparkLine inside the trend strip.
   position: relative so the "tonight starts here" divider can be
   absolutely positioned relative to the line.
   `flex: 1` + `min-height` makes the chart grow with the card on
   tall rows (using up the dead space) but never shrink below a
   readable size on shorter cards. The SparkLine inside fills
   100% of this wrapper. */
.S_0sA9n7 {
	position: relative;
	flex: 1 1 auto;
	min-height: 56px;
	margin: 0;
}

.S_0sA9n7 > svg {
	width: 100%;
	height: 100%;
}

/* Soft vertical divider showing where pre-sale stops and tonight
   begins on the stitched line. Faded so it reads as a guide line
   rather than fighting the data. */
.qKcI0L_l {
	position: absolute;
	top: 6px;
	bottom: 0;
	width: 1px;
	background: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(255, 255, 255, 0.18) 30%,
		rgba(255, 255, 255, 0.18) 80%,
		transparent 100%
	);
	pointer-events: none;
	z-index: 1;
}

/* Drawer-only legend under the wider ratio bar. Inline-laid-out chips
   that label which color is which segment, with their share % and a
   helpful sale count. */
.x0ugbAo2 {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 0.5rem;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
}

._7GkxwYZ {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.jR3OBnWQ {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.5rem 1.25rem 1rem;
}

.sHfQVC6c {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.XWoo4T0t {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 12px;
}

.zid9urFd {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: rgba(255, 255, 255, 0.75);
	font-weight: 500;
}

.Cw8jBwpZ {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.dsYWp82y {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6rem;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.JylwbhLY {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
}

.W2ZVXQC5 {
	font-size: 12px;
	font-weight: 600;
	color: var(--white);
}

.jGHoCsoR {
	height: 4px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 4px;
	overflow: hidden;
}

.u1IphNpf {
	height: 100%;
	border-radius: 4px;
	transition: width 0.4s ease;
	opacity: 0.85;
}

/* ── Sales Channels Card ────────────────────────────────────────
   Sister card to Revenue. Same outer chrome (inherits .channels_card
   from the shared card-chrome rule above), same header/breakdown
   rhythm so the two read as a pair. The pixel-status pill in the
   header is the trust signal - a manager sees "1/3 pixels" and
   knows attribution is partial before they trust the numbers. */

.PvntMTXs {
	display: flex;
	flex-direction: column;
}

.YlBBuskC {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.6);
	flex-shrink: 0;
	gap: 0.6rem;
}

/* Pixel-status pill - quiet by default. The dot carries the colour
   signal (green = all live, amber = partial, red = none); the count
   text stays neutral so the pill reads as a metadata chip, not a
   warning badge. */
.GIw3b8Y8 {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.18rem 0.55rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.65);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.3px;
	white-space: nowrap;
	flex-shrink: 0;
}

.I2Tt7_uk {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Hero block - sales count is the headline (it's what the manager
   most cares about), conversion rate sits below as a quality signal. */
.CZgTHXmH {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.85rem 1.25rem 0.6rem;
}

.ffegXGHe {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}

.rOEAk5np {
	font-size: 26px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: -0.4px;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.WNdQ4Lax {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
	font-weight: 500;
}

.Ml2dTOCH {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
}

/* Demoted: was accent-blue 700 weight, which made the conversion number
   compete with the headline sales count above it. Now plain white at a
   modest weight - readable, but visibly secondary. */
.aTFj0huY {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

/* Channel rows - same skeleton as revenue_breakdown so the two
   side-by-side cards rhyme visually. Each row is dot + name (with
   optional Ad pill) on the left, sales count + revenue on the right,
   thin progress bar below. */
.lzGkPK0l {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.5rem 1.25rem 1rem;
	flex: 1 1 auto;
	min-height: 0;
}

/* Single-line row. Was previously a column (name-line + bar-line) - the
   bars duplicated the rank-order signal and stacked into a noisy
   "barcode" alongside Revenue's bars and the funnel sparkline. Each
   row is now: dot + name + (Ad) - sales - revenue. */
.yMpZf3Oz {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	font-size: 12px;
}

/* "+3 more · view all" footer sits below the visible top-N. Muted so it
   reads as an affordance hint, not a list item. */
.q4WvJv1F {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
	text-align: right;
	padding-top: 0.15rem;
	letter-spacing: 0.2px;
	margin-top: auto;
}

.gft6_GJS {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	color: rgba(255, 255, 255, 0.78);
	font-weight: 500;
	min-width: 0;
}

.zAxmHq82 {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

/* Tiny "Ad" pill on paid channels so the eye can separate paid spend
   vs. organic traffic in the list. Categorical chip - slate (not amber)
   so it reads as a tag, not a warning. */
.Axrku3t4 {
	display: inline-flex;
	align-items: center;
	padding: 1px 5px;
	border-radius: 4px;
	background: rgba(148, 163, 184, 0.12);
	border: 1px solid rgba(148, 163, 184, 0.25);
	color: #cbd5e1;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.3px;
	margin-left: 0.15rem;
}

.f0xGTIo0 {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

.GrIISTLr {
	font-size: 12px;
	font-weight: 700;
	color: var(--white);
}

.tOhbbMSm {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.45);
}

.B_UUhrin {
	height: 4px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 4px;
	overflow: hidden;
}

._o4uXHJ6 {
	height: 100%;
	border-radius: 4px;
	transition: width 0.4s ease;
	opacity: 0.85;
}

/* ── Top Promoters Card ─────────────────────────────────────── */

.TKXGsaV7 {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Inline list shows top 3 - full sortable leaderboard lives in the drawer.
   No scroll inside the card; the row is fixed height and the overflow we
   show is just the "expand" affordance from .card_clickable. */
.ox9JlN2t {
	padding: 0.4rem 0 0.5rem;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.EohBqLva {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.4rem 1.25rem;
	transition: background 0.1s ease;
}

.EohBqLva:hover {
	background: rgba(255, 255, 255, 0.015);
}

.bIXqsWpW {
	font-size: 12px;
	font-weight: 700;
	color: #555;
	min-width: 14px;
	text-align: center;
}

.qXYRrZeo {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	color: var(--white);
	flex-shrink: 0;
}

.pRBEAiE5 {
	flex: 1 1;
	min-width: 0;
}

._vNLi8PI {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.3rem;
}

.vvsJpd2M {
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.fJXwHnwK {
	font-size: 11px;
	color: #555;
	flex-shrink: 0;
}

.pskXSEg2 {
	height: 3px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 2px;
	overflow: hidden;
}

.uRbMujjV {
	height: 100%;
	border-radius: 2px;
	transition: width 0.5s ease;
}

/* ── Quick Actions Card ─────────────────────────────────────── */

.AcaHaWlO {
	flex-shrink: 0;
}

.S1PI8_om {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 12px;
	font-weight: 600;
	color: #22c55e;
}

.NtH0I4Fq {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 0.5rem;
	gap: 0.5rem;
	padding: 0.85rem 1.25rem 1rem;
}

.rdjPLovB {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	padding: 0.75rem 0.5rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	cursor: pointer;
	color: rgba(255, 255, 255, 0.6);
	font-size: 12px;
	font-weight: 500;
	font-family: var(--font-family);
	transition: all 0.15s ease;
	text-align: center;
}

.rdjPLovB:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: #3d4052;
	color: var(--white);
}

.rdjPLovB i {
	font-size: 15px;
}

/* ── Empty state ────────────────────────────────────────────── */

.At7pmoPV {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 2rem 1rem;
	color: #3d4052;
}

.At7pmoPV i  { font-size: 22px; }
.At7pmoPV p  { margin: 0; font-size: 13px; font-weight: 500; }

/* ── Drawer ─────────────────────────────────────────────────── */

.W61prTUg {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 1000;
	animation: aORh7cGW 0.2s ease;
}

.b8rp8s3l {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 680px;
	max-width: 92vw;
	/* Drawer is intentionally translucent so the header/footer chrome
	   zones (which sit at the drawer's edges) can pick up the dimmed
	   page behind via backdrop-filter and read as real frosted glass.
	   The body has its own opaque fill below so form content isn't
	   accidentally see-through. */
	background: rgba(20, 22, 30, 0.78);
	backdrop-filter: blur(24px) saturate(170%);
	-webkit-backdrop-filter: blur(24px) saturate(170%);
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	z-index: 1001;
	display: flex;
	flex-direction: column;
	box-shadow: -16px 0 40px rgba(0, 0, 0, 0.4);
	animation: PFx_URKg 0.28s ease;
}

@keyframes aORh7cGW {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes VG2F7scw {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes PFx_URKg {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

@keyframes HyWKiaos {
	from { transform: translateX(0); }
	to   { transform: translateX(100%); }
}

.HJV4mBi_ {
	animation: HyWKiaos 0.26s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.b02WpAUp {
	animation: VG2F7scw 0.22s ease forwards;
}

/* Frosted-glass top chrome. Light gradient fill + subtle inner-edge
   highlight + backdrop-blur read as a glass plate floating over the
   body, instead of a flat grey bar. The 1px white-alpha line at the
   inner edge is what really sells the bevel; the gradient gives the
   surface a tonal shift so it doesn't feel painted on. */
.QjFdrbB0 {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.4rem 1.5rem;
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.045) 0%,
			rgba(255, 255, 255, 0.012) 100%),
		rgba(20, 22, 30, 0.55);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 4px 14px rgba(0, 0, 0, 0.18);
	flex-shrink: 0;
	z-index: 2;
}

.h2okpVjI {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 1px solid #2d2f39;
	background: rgba(255, 255, 255, 0.02);
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 14px;
	font-family: var(--font-family);
	transition: all 0.15s ease;
}

.h2okpVjI:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
	border-color: #3d4052;
}

.RiTEK_e9 {
	flex: 1 1;
	min-width: 0;
}

.b0hF2oae {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--white);
}

.Tbm0cxVF {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
	font-size: 12px;
	color: #888;
	flex-wrap: wrap;
}

.WyreItBT {
	color: #22c55e;
	font-weight: 700;
	letter-spacing: 0.5px;
	font-size: 10px;
}

.rNv6nPzv {
	color: #444;
}

.POlRUJvR {
	flex: 1 1;
	overflow-y: auto;
	padding: 1.5rem;
	/* Solid body fill so form content stays fully readable while the
	   surrounding chrome zones (header/footer) keep their translucent
	   frosted look. */
	background: var(--bg-dark);
}

.POlRUJvR::-webkit-scrollbar { width: 4px; }
.POlRUJvR::-webkit-scrollbar-track { background: transparent; }
.POlRUJvR::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

/* ── Alert Drawer (variant of .drawer) ─────────────────────── */

.B67rw0Ck .b0hF2oae {
	margin-top: 0.5rem;
	font-size: 20px;
	letter-spacing: -0.2px;
	line-height: 1.25;
}

.doQYiFp8 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.TKTWB9mN {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.TKTWB9mN.pgV1uV5V { background: rgba(239, 68, 68, 0.15);  color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.4); }
.TKTWB9mN.l5HH6MMz   { background: rgba(249, 115, 22, 0.15); color: #f97316; border: 1px solid rgba(249, 115, 22, 0.4); }
.TKTWB9mN.kF5_csEu   { background: rgba(13, 122, 199, 0.15); color: var(--accent-1); border: 1px solid rgba(13, 122, 199, 0.4); }

.TKTWB9mN i {
	font-size: 6px;
}

.LyjXOp6l {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.45);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.LYNXGTpN {
	display: grid;
	grid-template-columns: 56px 1fr;
	grid-gap: 1rem;
	gap: 1rem;
	align-items: flex-start;
	margin-bottom: 1.5rem;
}

.ROeUTIX2 {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.ROeUTIX2.pgV1uV5V { background: rgba(239, 68, 68, 0.12);  color: #ef4444; }
.ROeUTIX2.l5HH6MMz   { background: rgba(249, 115, 22, 0.12); color: #f97316; }
.ROeUTIX2.kF5_csEu   { background: rgba(13, 122, 199, 0.12); color: var(--accent-1); }

.ROeUTIX2 i {
	font-size: 22px;
}

.FVcB6Opa {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.78);
}

.lh7Kv3HN {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 1rem 1.1rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	margin-bottom: 1.5rem;
}

.NyI3tLnq {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	font-size: 12px;
}

.SS0nVcAd {
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.2px;
}

.y86wCVBH {
	color: var(--white);
	font-weight: 500;
	text-align: right;
}

/* ── Compose box (free-text message to a team member) ─────── */

.mLDM8oW4 {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
}

.dXzAYRfB {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.3px;
}

.DQQGRE29 {
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	letter-spacing: 0;
}

.hYskLyPs {
	width: 100%;
	min-height: 110px;
	resize: vertical;
	padding: 0.85rem 1rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 14px;
	line-height: 1.5;
	box-sizing: border-box;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.hYskLyPs:focus {
	outline: none;
	border-color: rgba(13, 122, 199, 0.55);
	background: rgba(13, 122, 199, 0.05);
}

.hYskLyPs::placeholder {
	color: rgba(255, 255, 255, 0.3);
}

.pfzU0A_N {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.qUYjQTYK {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.m1Uai7AE {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.85rem 1.1rem;
	border-radius: 10px;
	border: 1px solid transparent;
	font-family: var(--font-family);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	color: var(--white);
	transition: transform 0.1s ease, filter 0.15s ease, background 0.15s ease;
}

.m1Uai7AE i {
	font-size: 12px;
	opacity: 0.85;
}

.m1Uai7AE.pgV1uV5V { background: #ef4444;        border-color: rgba(255, 255, 255, 0.08); }
.m1Uai7AE.l5HH6MMz   { background: #f97316;        border-color: rgba(255, 255, 255, 0.08); }
.m1Uai7AE.kF5_csEu   { background: var(--accent-1); border-color: rgba(255, 255, 255, 0.08); }

.m1Uai7AE:hover:not(:disabled) {
	filter: brightness(1.08);
}

.m1Uai7AE:active:not(:disabled) {
	transform: scale(0.99);
}

.m1Uai7AE:disabled {
	cursor: not-allowed;
	filter: grayscale(0.4) brightness(0.7);
	opacity: 0.6;
}

.h6BcPhYk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1.1rem;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.h6BcPhYk i {
	font-size: 11px;
}

.h6BcPhYk:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
}

/* ── Shared drawer section primitives ──────────────────────── */

.Fp9Z2pYI {
	margin-bottom: 1.75rem;
}

.Fp9Z2pYI:last-child {
	margin-bottom: 0;
}

.I0Hl_jSP {
	margin: 0 0 0.85rem;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

/* ── Revenue drawer · Payment method ────────────────────────
   Card-vs-cash breakdown for end-of-night reconciliation.
   The segmented bar shows share of paid revenue (comps excluded so
   they don't dwarf the visual). The reconcile block does the math
   the manager would otherwise do on paper. */

.inM4pjcz {
	display: flex;
	height: 6px;
	border-radius: 999px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.05);
	margin-bottom: 1rem;
}

.rd5NcLH1 {
	height: 100%;
	transition: width 0.4s ease;
}

.GIi6R7dm {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.ET6FXwI6 {
	display: grid;
	grid-template-columns: 32px 1fr;
	grid-gap: 0.85rem;
	gap: 0.85rem;
	align-items: center;
}

.IsgPgksd {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	flex-shrink: 0;
}

.UU8yCO8o {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.gQJYyCYW {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.DuSASw4I {
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
}

.WYqOkCNB {
	font-size: 16px;
	font-weight: 700;
	color: var(--white);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.VIwOoY26 {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
}

.TIhrpMjw {
	margin-top: 1.1rem;
	padding: 0.85rem 1rem;
	background: rgba(34, 197, 94, 0.04);
	border: 1px solid rgba(34, 197, 94, 0.18);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.LbbbuncV {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.TPZrREJZ {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
}

.I4b5ScRx {
	margin-top: 0.3rem;
	padding-top: 0.55rem;
	border-top: 1px dashed rgba(34, 197, 94, 0.25);
}

.I4b5ScRx .X12zAFJi {
	font-weight: 600;
	color: var(--white);
	font-size: 13px;
}

.I4b5ScRx .TPZrREJZ {
	font-weight: 700;
	color: #22c55e;
	font-size: 15px;
}

/* ── Revenue drawer ────────────────────────────────────────── */

._bv_1XRE {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	align-items: end;
	grid-gap: 0.75rem;
	gap: 0.75rem;
	height: 160px;
	padding: 0 0.25rem;
}

.tW6yJ4qX {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	min-width: 0;
}

.KSPtTF4h {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.55);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.n19h2HTu {
	width: 100%;
	flex: 1 1;
	display: flex;
	align-items: flex-end;
	min-height: 0;
}

.yaUb5sxQ {
	width: 100%;
	background: linear-gradient(180deg, var(--accent-1), rgba(13, 122, 199, 0.5));
	border-radius: 6px 6px 0 0;
	min-height: 4px;
	transition: height 0.4s ease;
}

.LRBrf8HX {
	background: linear-gradient(180deg, #06b6d4, #0D7AC7);
	box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
}

.uhihjVkt {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.DgygI6ei {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.fZD9xFsp {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.IavViReW {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.ZcKXv34C {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
}

.ehPnuGPA {
	font-size: 16px;
	font-weight: 700;
	color: var(--white);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.nvFBse4P {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
}

.jfcPagbZ {
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.aF4MrNUN {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.6rem 0.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	gap: 1rem;
}

.XO0_EPak {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.susFAlJ7 {
	font-size: 13px;
	font-weight: 500;
	color: var(--white);
}

.EpvweuGE {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.45);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gUgwZYIY {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.15rem;
	flex-shrink: 0;
}

.KmX4LBR7 {
	font-size: 13px;
	font-weight: 700;
	color: var(--white);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.daEN2tcZ {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.J3wbHQVw {
	padding: 1rem;
	text-align: center;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
}

/* ── Ticket Mix drawer ─────────────────────────────────────── */

.Wze0jklq {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	grid-gap: 1.5rem;
	gap: 1.5rem;
}

.Y4gPlmBz {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.cuWAVkNt {
	display: grid;
	grid-template-columns: 8px 1fr auto;
	align-items: center;
	grid-gap: 0.65rem;
	gap: 0.65rem;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
}

.dWQIfMFl {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.hRCDJsFR {
	font-weight: 500;
}

.R39mi6ZT {
	color: rgba(255, 255, 255, 0.55);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	font-size: 12px;
}

.a6wemb3G {
	display: flex;
	flex-direction: column;
	gap: 1.15rem;
}

.eHs95rse {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.bEVEQBzO {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.Gl419LqZ {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
}

.cEr9Q8qF {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.yOub2ulF {
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.yOub2ulF strong {
	font-size: 16px;
	font-weight: 700;
	color: var(--white);
}

.wBjDAhy2 {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
}

.MltQTJfC {
	height: 6px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 6px;
	overflow: hidden;
}

.ZN1l46JO {
	height: 100%;
	border-radius: 6px;
	transition: width 0.4s ease;
}

.eKjTI5Y0 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
}

.eKjTI5Y0 strong {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
}

/* ── Top Promoters drawer ──────────────────────────────────── */

.Vmrm9haD {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.lL6IgVlG {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	letter-spacing: 0.3px;
}

.yQmqfwZB {
	display: flex;
	gap: 0.35rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 3px;
}

.ltyZxLzK {
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--font-family);
	font-size: 12px;
	padding: 0.35rem 0.7rem;
	border-radius: 6px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.ltyZxLzK:hover {
	color: var(--white);
}

.ieWOCRZC {
	background: rgba(13, 122, 199, 0.18);
	color: var(--white);
}

.mUurpTag {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Table-style row: rank · avatar · name+bar · admitted · invited · revenue.
   Fixed numeric column widths so the digits line up vertically and the
   eye can scan a column without re-anchoring. */
.j7jIXtkQ {
	display: grid;
	grid-template-columns: 24px 36px 1fr 82px 60px 60px 64px 84px;
	grid-gap: 0.6rem;
	gap: 0.6rem;
	align-items: center;
	padding: 0 0.25rem 0.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
}

.lJPBxBwR {
	grid-column: 3 / 4;
}

.oFratgt4 {
	text-align: right;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.tbllyNVR {
	display: grid;
	grid-template-columns: 24px 36px 1fr 82px 60px 60px 64px 84px;
	grid-gap: 0.6rem;
	gap: 0.6rem;
	align-items: center;
	padding: 0.5rem 0.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.tbllyNVR:last-child {
	border-bottom: none;
}

.AU3Jpp8e {
	font-size: 13px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.45);
	text-align: center;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.PyXMNeyi {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.1rem;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.bEI_lPVK {
	font-size: 15px;
	font-weight: 700;
	color: var(--white);
	line-height: 1.1;
}

.jNHpcpIm {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
}

.DthahS3H {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--white);
	font-size: 12px;
	font-weight: 700;
	flex-shrink: 0;
}

.zxDVPS1u {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	min-width: 0;
}

.mV0k1yG5 {
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.aCpWcCcJ {
	display: flex;
	height: 6px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 6px;
	overflow: hidden;
}

.r_hhGihi {
	height: 100%;
	transition: width 0.4s ease;
}

/* keep the legacy single-fill rule for any other consumer */
.WwQhJLAT {
	height: 100%;
	border-radius: 4px;
	transition: width 0.4s ease;
	opacity: 0.85;
}

.KHhk6eQL {
	color: rgba(255, 255, 255, 0.35);
	font-weight: 500;
	font-size: 11px;
}

/* ── Trend chart ────────────────────────────────────────────── */

.vTjDSpzd {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.wFaKAMbu {
	display: flex;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.U1loEaQQ {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.Akmr3UCj {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #555;
}

.xoDevyZT {
	display: flex;
	gap: 0.35rem;
}

.sCbiNxdn {
	padding: 0.4rem 0.8rem;
	border-radius: 6px;
	border: 1px solid #2d2f39;
	background: rgba(255, 255, 255, 0.02);
	color: rgba(255, 255, 255, 0.6);
	font-size: 12px;
	font-weight: 500;
	font-family: var(--font-family);
	cursor: pointer;
	transition: all 0.15s ease;
}

.sCbiNxdn:hover {
	border-color: #3d4052;
	color: var(--white);
}

.mrM38Zt2 {
	border-color: var(--accent-1);
	color: var(--accent-1);
	background: rgba(13, 122, 199, 0.1);
}

.RoijVsTR {
	position: relative;
	background: rgba(255, 255, 255, 0.015);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	padding: 0.5rem;
}

.vn_KEvSD {
	display: block;
	width: 100%;
	height: auto;
}

.hWP3BYA0 {
	position: absolute;
	transform: translate(-50%, calc(-100% - 12px));
	background: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 6px;
	padding: 0.4rem 0.65rem;
	pointer-events: none;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.YM2QjnqV {
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.aCrR4_xx {
	margin-top: 2px;
	font-size: 10px;
	color: #888;
}

/* ── Channel breakdown ──────────────────────────────────────── */

.gMVBJe1B {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(45, 47, 57, 0.5);
}

.NCUKMlwT {
	margin: 0 0 0.85rem;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #555;
}

.X04d1WxQ {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 0.7rem 0;
	border-bottom: 1px solid rgba(45, 47, 57, 0.3);
}

.X04d1WxQ:last-child {
	border-bottom: none;
}

.kGPLrgxH {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.k2P8t7Rv {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	flex-shrink: 0;
}

.bR6jIdcK {
	flex: 1 1;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
}

.UqPRd4np {
	font-size: 12px;
	color: #555;
	min-width: 32px;
	text-align: right;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.j7WQYZKL {
	font-size: 14px;
	font-weight: 700;
	color: var(--white);
	min-width: 44px;
	text-align: right;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.WKxkx558 {
	height: 3px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 2px;
	overflow: hidden;
}

.qyo1HsW2 {
	height: 100%;
	border-radius: 2px;
	transition: width 0.5s ease;
}

/* ── Pre-sale drawer ─────────────────────────────────────────────
   Per-release breakdown showing how much of each online ticket
   release has actually sold against its allocation. Visual model:
   one card per release with a name + status pill, a sold/cap
   counter, a progress bar, the sales window, and an optional
   secret-release lock badge. */

.MbkAkLv0 {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 0.5rem;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.UQD6P_r8 {
	font-size: 28px;
	font-weight: 700;
	color: var(--white);
	line-height: 1;
}

.KzmpM44L {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
}

.PFna392v {
	height: 8px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.06);
	overflow: hidden;
}

.jzYgfqeH {
	height: 100%;
	border-radius: 4px;
	background: linear-gradient(90deg, #0D7AC7 0%, #06b6d4 100%);
	box-shadow: 0 0 10px rgba(13, 122, 199, 0.35);
	transition: width 0.6s ease;
}

.Wi6NgeMk {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.KrP8RxcI {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	padding: 1rem 1.1rem;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.HNOJs4x6 {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
}

.FfY_fRlc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.JJZtlNpK {
	font-size: 14px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: -0.1px;
}

.M1eRLCCS {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 10px;
	font-weight: 600;
	color: #f59e0b;
	background: rgba(245, 158, 11, 0.12);
	border: 1px solid rgba(245, 158, 11, 0.3);
	padding: 2px 6px;
	border-radius: 4px;
	letter-spacing: 0.3px;
}

.M1eRLCCS i {
	font-size: 9px;
}

.FfnEVEsC {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 10px;
	font-weight: 700;
	border: 1px solid;
	padding: 2px 7px;
	border-radius: 999px;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.FfnEVEsC i {
	font-size: 7px;
}

.qYRDVHA9 {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.1rem;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

.qYRDVHA9 strong {
	font-size: 16px;
	font-weight: 700;
	color: var(--white);
	line-height: 1;
}

.IKgKAdVR {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
}

.lQYUq0sS {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.QDFdvq57 {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
}

.QDFdvq57 strong {
	font-size: 16px;
	color: var(--white);
	font-weight: 700;
}

.bqwZ7Wwv {
	color: rgba(255, 255, 255, 0.35);
	font-weight: 500;
}

._ievxg8C {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
}

.mMZLzxOm {
	height: 6px;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.06);
	overflow: hidden;
	position: relative;
}

.kSrn12PN {
	height: 100%;
	border-radius: 3px;
	transition: width 0.6s ease;
}

/* Uncapped variant - striped, taller, with a label so it doesn't
   read as "0% sold" or "100% sold". The diagonal stripes signal
   "no fixed denominator here". */
.cMrZNEK7 {
	height: 28px;
	background:
		repeating-linear-gradient(
			135deg,
			rgba(13, 122, 199, 0.18) 0px,
			rgba(13, 122, 199, 0.18) 6px,
			rgba(13, 122, 199, 0.06) 6px,
			rgba(13, 122, 199, 0.06) 12px
		);
	border: 1px dashed rgba(13, 122, 199, 0.35);
	display: flex;
	align-items: center;
	padding: 0 0.7rem;
}

.AcMYSUNm {
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
	letter-spacing: 0.2px;
}

.TyL8ET_K {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
}

.TyL8ET_K i {
	margin-right: 0.4rem;
	color: rgba(255, 255, 255, 0.4);
}

.YPzaTYgG {
	color: rgba(255, 255, 255, 0.45);
	font-style: italic;
	line-height: 1.4;
}

.TvGT1gon {
	text-align: center;
	padding: 2rem 1rem;
	color: rgba(255, 255, 255, 0.45);
	font-size: 13px;
	border: 1px dashed rgba(255, 255, 255, 0.08);
	border-radius: 12px;
}

/* ── Sales Channels Drawer ─────────────────────────────────────
   Three sections: pixel integrations, channel performance table,
   UTM tracking link generator. Density is higher than the other
   drawers because the channel rows are inherently tabular. */

/* Shared inline-meta header on each section ("3 of 3 live", sort
   chips, etc.) - sits to the right of the section title. */
.vG4S8TVm {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
	flex-wrap: wrap;
}

.vG4S8TVm .I0Hl_jSP {
	margin-bottom: 0;
}

.fyw3Fby1 {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 0.4px;
	text-transform: uppercase;
	font-weight: 600;
}

/* ── Pixel cards ─────────────────────────────────────────────── */

.PanhlFBN {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.BLQSH1JA {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	grid-gap: 1rem;
	gap: 1rem;
	padding: 0.85rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.015);
}

.n4dbsoKL {
	background: rgba(34, 197, 94, 0.03);
	border-color: rgba(34, 197, 94, 0.18);
}

.nt1FAYjb {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid;
	font-size: 16px;
	flex-shrink: 0;
}

.Xy220wdT {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
}

.sWIA7rjN {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.BCiIkQy1 {
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
}

.LGPFqh_4 {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.4px;
	padding: 0.15rem 0.5rem;
	border-radius: 999px;
}

.dHUyROtC {
	color: #22c55e;
	background: rgba(34, 197, 94, 0.12);
	border: 1px solid rgba(34, 197, 94, 0.25);
}

.VI7lqSvI {
	color: rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
}

.YlC_hpJz {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.JPCu_c_x {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.Sen31flA {
	font-family: ui-monospace, SFMono-Regular, monospace;
	font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, monospace);
	color: rgba(255, 255, 255, 0.65);
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 16ch;
	white-space: nowrap;
}

.sl1MIjv2,
.y9uOwMBg {
	flex-shrink: 0;
	padding: 0.4rem 0.85rem;
	border-radius: 7px;
	font-family: var(--font-family);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sl1MIjv2 {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.7);
}

.sl1MIjv2:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.14);
	color: var(--white);
}

.y9uOwMBg {
	background: rgba(13, 122, 199, 0.18);
	border: 1px solid rgba(13, 122, 199, 0.4);
	color: var(--white);
}

.y9uOwMBg:hover {
	background: rgba(13, 122, 199, 0.3);
	border-color: rgba(13, 122, 199, 0.55);
}

/* Inline editor that drops below a pixel card body when the user
   clicks Connect/Configure. Same look as the UTM picker so the
   drawer reads as one consistent surface. */
.IcHzZQTw {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

.jxVIIr2k {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

/* ── Sort chips ──────────────────────────────────────────────── */

._9qdGidvk {
	display: inline-flex;
	gap: 0.3rem;
	flex-wrap: wrap;
}

.SvvoPlU7 {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.55);
	padding: 0.3rem 0.65rem;
	border-radius: 6px;
	font-family: var(--font-family);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.SvvoPlU7:hover {
	background: rgba(255, 255, 255, 0.04);
	color: var(--white);
}

.N4140v9d {
	background: rgba(13, 122, 199, 0.18);
	border-color: rgba(13, 122, 199, 0.4);
	color: var(--white);
}

/* ── Channel performance table ─────────────────────────────────
   True table layout: ONE shared grid across the header + every row,
   so columns line up exactly. Hairline dividers between rows (no
   per-row borders / cards), a single rounded container around the
   whole table.

   Color hierarchy (one accent per row, not three):
     - Sales:   bold-white (the primary outcome metric)
     - Revenue: green       (the headline you scan to first)
     - Conv.:   plain white (no accent - was competing with revenue)
     - Clicks / RSVPs: muted (funnel volume, not the destination) */

.GsWNqUJr {
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.012);
}

/* The shared row grid. `--ch-cols` is the contract: header + every
   body row use the exact same template, so columns can never drift.
   Channel column is flexible; the five numeric columns are equal,
   the trailing chevron column is fixed-width. */
.rV4sorll {
	display: grid;
	grid-template-columns: minmax(180px, 2fr) repeat(5, minmax(0, 1fr)) 24px;
	align-items: center;
	grid-gap: 0.75rem;
	gap: 0.75rem;
	padding: 0.7rem 1rem;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

/* Header row - single instance, sticky-feeling under the section
   title. Slightly tinted so the data rows below visually nest under
   it. The right-aligned numeric headers match the cell alignment. */
.GMLnYHoX {
	background: rgba(255, 255, 255, 0.02);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
}

.X3r3qZuu,
.IGsg9MbC {
	font-size: 9px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.4);
}

.IGsg9MbC {
	text-align: right;
}

.kj_ckoGB {
	display: block;
}

/* Body rows - separated by hairlines, no card chrome. Hover only
   exists on expandable (paid) rows. */
.VuPah8Qr + .VuPah8Qr,
.CvtLhQrF + .CvtLhQrF .VuPah8Qr {
	border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.CvtLhQrF {
	display: flex;
	flex-direction: column;
}

.rFFxicy5 {
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.rFFxicy5:hover {
	background: rgba(255, 255, 255, 0.025);
}

.J_mmA_q3 {
	background: rgba(255, 255, 255, 0.02);
}

/* Channel cell - icon chip + name + optional Ad pill, all on a
   single baseline (no second utm_source line; that's metadata for
   the campaign breakdown, not the at-a-glance row). */
.NlkJp6uu {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
}

.gx_0M41B {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid;
	font-size: 12px;
	flex-shrink: 0;
}

.AGzkNny5 {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Numeric cell variants - three weights of emphasis from "headline"
   (revenue, green) → "primary outcome" (sales, bold white) → "funnel
   metadata" (clicks/rsvps, muted). The eye lands on revenue first. */
.qurLe0s9,
.hNQJT0OI,
.E9S906h1,
.hfgr9v15 {
	text-align: right;
	font-size: 13px;
}

.qurLe0s9 {
	color: rgba(255, 255, 255, 0.7);
	font-weight: 500;
}

.hNQJT0OI {
	color: rgba(255, 255, 255, 0.5);
	font-weight: 500;
}

.E9S906h1 {
	color: var(--white);
	font-weight: 700;
}

.hfgr9v15 {
	color: #22c55e;
	font-weight: 700;
}

.KhF30VXS {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.gv1EWRYf {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	transition: transform 0.2s ease, color 0.15s ease;
}

.rFFxicy5:hover .gv1EWRYf {
	color: rgba(255, 255, 255, 0.75);
}

.t4rKt9xp {
	transform: rotate(180deg);
}

/* Per-campaign breakdown inside an expanded paid-channel row.
   5-column grid: campaign name | clicks | sales | spend | ROAS. */
.tFaOOKMc {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	background: rgba(0, 0, 0, 0.18);
	padding: 0.5rem 0.9rem 0.7rem;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.Y7UT66jw,
.Dda4jzPY {
	display: grid;
	grid-template-columns: minmax(150px, 1.6fr) repeat(4, minmax(0, 1fr));
	grid-gap: 0.6rem;
	gap: 0.6rem;
	align-items: center;
	font-size: 11px;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.Y7UT66jw {
	color: rgba(255, 255, 255, 0.4);
	font-size: 9px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	font-weight: 700;
	padding: 0.3rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.Y7UT66jw > :not(:first-child),
.Dda4jzPY > :not(:first-child) {
	text-align: right;
}

.Dda4jzPY {
	color: rgba(255, 255, 255, 0.7);
	padding: 0.25rem 0;
}

.ZPIjQCVy {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: rgba(255, 255, 255, 0.85);
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.aYaPZtDx {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.Ef_bxcyv {
	background: #22c55e;
	box-shadow: 0 0 5px #22c55e;
}

.h7An4zwe {
	background: rgba(255, 255, 255, 0.3);
}

.ak7yA3vO {
	background: #f59e0b;
}

.NVklioDi {
	color: #22c55e;
	font-weight: 700;
}

.XN0fSkWJ {
	color: #f59e0b;
	font-weight: 600;
}

/* ── UTM link generator ────────────────────────────────────────
   Three labelled inputs (source/medium/campaign) feed a synthesized
   tracking URL below, with a copy-to-clipboard button. */

.A1YUDEhb {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-gap: 0.6rem;
	gap: 0.6rem;
	margin-bottom: 0.75rem;
}

.wds6KvDx {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.oswGEjwD {
	font-size: 10px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	font-weight: 700;
}

.QDfEAYDp {
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--white);
	padding: 0.55rem 0.7rem;
	border-radius: 7px;
	font-family: var(--font-family);
	font-size: 12px;
	transition: border-color 0.15s ease;
}

.QDfEAYDp:focus {
	outline: none;
	border-color: rgba(13, 122, 199, 0.55);
	box-shadow: 0 0 0 2px rgba(13, 122, 199, 0.18);
}

.GRCt17Dr {
	display: flex;
	gap: 0.4rem;
	margin-bottom: 0.6rem;
}

.C9RSgHeV {
	flex: 1 1;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.85);
	padding: 0.55rem 0.7rem;
	border-radius: 7px;
	font-family: ui-monospace, SFMono-Regular, monospace;
	font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, monospace);
	font-size: 12px;
	min-width: 0;
}

.C9RSgHeV:focus {
	outline: none;
	border-color: rgba(13, 122, 199, 0.55);
}

.czopKzda {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	background: rgba(13, 122, 199, 0.18);
	border: 1px solid rgba(13, 122, 199, 0.4);
	color: var(--white);
	padding: 0.55rem 0.85rem;
	border-radius: 7px;
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.czopKzda:hover {
	background: rgba(13, 122, 199, 0.28);
}

.JXrVEpKf {
	background: rgba(34, 197, 94, 0.18);
	border-color: rgba(34, 197, 94, 0.4);
}

.APY5TDOO {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	line-height: 1.5;
	margin: 0;
}

.APY5TDOO code {
	font-family: ui-monospace, SFMono-Regular, monospace;
	font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, monospace);
	background: rgba(255, 255, 255, 0.06);
	padding: 1px 5px;
	border-radius: 4px;
	color: var(--accent-1);
	font-size: 10.5px;
}

/* ── Drawer mobile overrides (≤600px) ──────────────────────────
   Dashboard carries its own copy of the side-drawer chrome
   (Revenue / Sales Channels / Top Promoters / Funnel / etc.) and
   needs the same full-screen-on-phone treatment that the shared
   drawers/Drawer.module.css applies. Without this, the dashboard
   drawers stay at 92vw which leaves a thin strip of dimmed page
   bleeding through on the left and crowds the form content. */
@media (max-width: 600px) {
	.b8rp8s3l {
		width: 100vw;
		max-width: 100vw;
	}

	.QjFdrbB0 {
		padding: 1.1rem 1.1rem;
	}

	.POlRUJvR {
		padding: 1.1rem;
	}

	.meANlB_c {
		padding: 0.85rem 1.1rem;
	}
}

/* ── Mobile (≤768px) overrides ─────────────────────────────────
   Placed at the end of the file so they win over the equally-specific
   base rules above (CSS source order tie-breaker - same specificity,
   later wins). */

@media (max-width: 768px) {
	/* Funnel: 4-up strip → 2×2 grid of standalone tiles. The live
	   "Admitted" tile has a sparkline + pacing line; squeezing it into
	   a quarter of a phone width crushes the type, so 2×2 keeps each
	   tile readable. Gap is tightened for the smaller surface. */
	._6Oz0cs0 {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.625rem;
	}

	.WKu5fdIi {
		padding: 0.85rem 1rem 0.75rem;
	}

	/* Scroll model swap.

	   On desktop the page is "no-scroll": the wrapper grid pins its
	   middle row, and inner card bodies (RecentActivity, AlertsList)
	   handle their own scrolling via `overflow-y: auto`.

	   On phones that's the wrong model. Touch scrolling inside an
	   inner overflow-auto element can swallow the gesture - the
	   user swipes inside Recent Activity, the body's scroll position
	   is already at top/bottom, and on iOS Safari (and some Android
	   browsers) the gesture is consumed instead of bubbling up to
	   scroll the page. The dashboard then feels "stuck".

	   Fix: at ≤768px the page itself becomes the single scroll
	   surface. Inner card bodies expand to their full content height
	   and pass touches straight through to <body>. */
	.jXwaBH_A,
	.FjG_jMjH {
		overflow-y: visible;
		overflow-x: visible;
		flex: 0 0 auto;
		max-height: none;
	}

	/* Inner cards no longer need to clip - they're sized by content
	   on phones, not constrained by a parent grid row. */
	.Uc2uN8B0,
	.VN7t1ij_,
	.jEWLLWVn {
		min-height: 0;
		max-height: none;
	}
}

/* Chrome (backdrop / drawer panel / header / title / close) is provided by the
   shared Dashboard.module.css drawer classes so this matches every other
   indevent drawer. Only the embed-specific content styles live here. */

.bdomG5oj { padding: 2.5rem; text-align: center; color: rgba(255, 255, 255, 0.5); }

.ODtIxGQV { margin-bottom: 1.4rem; }

.oOjumyO8 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.55rem;
}

.hjnkvgU4 {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	margin-bottom: 0.55rem;
}

.uUU3aRLd {
	margin: 0 0 0.7rem;
	font-size: 0.78rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.45);
}

.A2o07RRq {
	width: 100%;
	resize: vertical;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.72rem;
	line-height: 1.5;
	color: #cfe7ff;
	background: #08090c;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 0.7rem 0.8rem;
}

.knalv7jV, .ZRCOerZd {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.7rem;
	border-radius: 8px;
	border: 1px solid rgba(13, 122, 199, 0.5);
	background: rgba(13, 122, 199, 0.18);
	color: #cfe7ff;
	font-size: 0.74rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}
.knalv7jV:hover, .ZRCOerZd:hover { background: rgba(13, 122, 199, 0.32); }
.knalv7jV:disabled { opacity: 0.5; cursor: not-allowed; }
.a1FGmSnS { border-color: rgba(52, 199, 89, 0.6); background: rgba(52, 199, 89, 0.2); color: #c7f5d4; }

.ocBGYb14 { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; }

.z0IZitT8 {
	flex: 1 1;
	padding: 0.5rem 0.75rem;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: #08090c;
	color: #fff;
	font-size: 0.84rem;
}
.z0IZitT8:focus { outline: none; border-color: rgba(13, 122, 199, 0.7); }

.EnTHWG64 {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.4);
	padding: 0.6rem 0.2rem;
	font-style: italic;
}

.NqoBf1f3 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }

.QLnpYfy6 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.7rem;
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
}
.QLnpYfy6 i { color: rgba(255, 255, 255, 0.4); font-size: 0.8rem; }
.IJU4wBjd { flex: 1 1; font-size: 0.82rem; color: #e6edf3; word-break: break-all; }

.gTZO3SGC {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border-radius: 6px;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.gTZO3SGC:hover { background: rgba(255, 59, 48, 0.18); color: #ff6b6b; }

.FArVN84b {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	padding: 0.7rem 0.85rem;
	border-radius: 10px;
	background: rgba(13, 122, 199, 0.1);
	border: 1px solid rgba(13, 122, 199, 0.25);
	font-size: 0.76rem;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 1rem;
}
.FArVN84b i { color: #60a5fa; margin-top: 0.1rem; }
.FArVN84b code {
	font-family: ui-monospace, monospace;
	font-size: 0.72rem;
	background: rgba(255, 255, 255, 0.08);
	padding: 0.05rem 0.3rem;
	border-radius: 4px;
}

.RKkJh3O5 {
	font-size: 0.78rem;
	color: #ffb4ad;
	background: rgba(255, 59, 48, 0.12);
	border: 1px solid rgba(255, 59, 48, 0.3);
	border-radius: 9px;
	padding: 0.55rem 0.75rem;
	margin-bottom: 0.9rem;
}

.jwEqlqu_ { display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; }
.Iga9miVF { margin-right: auto; font-size: 0.8rem; color: #7ee2a0; font-weight: 600; }

.HR04kSS1 {
	padding: 0.5rem 0.95rem;
	border-radius: 9px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
}
.HR04kSS1:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }

._r7T1b9t {
	padding: 0.5rem 1.1rem;
	border-radius: 9px;
	border: none;
	background: #0d7ac7;
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s ease;
}
._r7T1b9t:hover { background: #1186d8; }
._r7T1b9t:disabled { opacity: 0.6; cursor: not-allowed; }

/* ╭──────────────────────────────────────────────────────────╮
   │ Edit Event drawer - form layout that lives inside the     │
   │ shared .drawer shell (Dashboard.module.css).              │
   │                                                           │
   │ Owns:                                                     │
   │   - The sticky chip nav between header and body           │
   │   - All form section / field / control styles             │
   │   - The custom inputs (banner dropzone, RTE, genre        │
   │     pills, date cards, search-select, ticket rows)        │
   │   - The form footer (Cancel + Save Changes)               │
   ╰──────────────────────────────────────────────────────────╯ */

/* ── Glass drawer layout overrides ─────────────────────────────
   Restructures the EditEvent drawer so its top + bottom bars
   actually behave as frosted glass: form content scrolls behind
   sticky chrome, giving backdrop-filter something translucent to
   refract. Without this, the chrome zones sit edge-to-edge with
   the body in a flex column and there's nothing to "see through"
   them - they just read as solid dark grey.

   We hardcode the chrome heights via CSS variables so the sticky
   nav knows where the sticky header ends. The values match the
   rendered heights of the .drawer_header and .footer styles for
   this drawer's content (title + subtitle, and Cancel + Save). */
.CBhVXJes {
	--glass-header-h: 90px;
	--glass-nav-h:    56px;
	--glass-footer-h: 76px;
}

/* The body now hosts every part of the drawer (header / nav /
   sections / footer) so they share a scroll container. Padding
   comes off the body and lives on .form_sections_wrap below so
   the chrome zones can stretch edge-to-edge. The solid body fill
   stays in place - form content sits on top of it and remains
   fully readable. backdrop-filter on the chrome samples the
   rendered pixels above the body (form sections, fields, text)
   as they scroll past, which is exactly what creates the glass
   refraction effect.

   scroll-padding-top: chip-nav clicks call scrollIntoView({ block:
   "start" }) which would otherwise tuck the section's title under
   the sticky chrome. Reserving header + nav height as a scroll
   padding lifts the scroll target down so titles land just below
   the chrome bars instead of behind them. */
.kFLXmTO1 {
	padding: 0 !important;
	scroll-padding-top: calc(var(--glass-header-h) + var(--glass-nav-h) + 0.5rem);
}

/* Sticky header - pinned to the very top while form content
   scrolls underneath. z-index 3 so it covers both nav and body.
   Slightly stronger gradient + inner highlight than the shared
   .drawer_header rule so the bevel reads as a glass plate even
   at scroll-top when there's no body content behind it yet. */
.doIkQv8R {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	/* Higher than any in-form popover (Spotify search dropdown, ticket
	   type picker, etc.) so they tuck under the sticky header instead
	   of bleeding over it when the user scrolls.
	   !important because `.drawer_header` from Dashboard.module.css
	   (loaded later by Webpack ordering) sets `z-index: 2` at the same
	   specificity and was winning the cascade - the dropdown at z 30
	   then rendered on top of the header. */
	z-index: 50 !important;
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.07) 0%,
			rgba(255, 255, 255, 0.02) 60%,
			rgba(255, 255, 255, 0.005) 100%),
		rgba(20, 22, 30, 0.45);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -1px 0 rgba(255, 255, 255, 0.04),
		0 8px 22px rgba(0, 0, 0, 0.28);
}

/* Sticky chip nav - pinned just below the header. Stacks at the
   top of the scroll viewport so both bars stay visible while the
   user scans long forms. Slightly cooler tint than the header so
   the two glass plates read as separate layers rather than one
   big gray bar. */
.IJajiZWy {
	position: -webkit-sticky;
	position: sticky;
	top: var(--glass-header-h);
	/* Below the header, above in-form popovers (so the chip nav also
	   stays on top of the Spotify dropdown when scrolling). */
	z-index: 49 !important;
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.05) 0%,
			rgba(255, 255, 255, 0.012) 100%),
		rgba(18, 20, 28, 0.42);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05),
		0 6px 18px rgba(0, 0, 0, 0.22);
}

/* Sticky footer - pinned to the bottom edge so Save / Cancel
   never disappear off-screen mid-scroll. With sticky bottom, the
   footer lifts off the trailing form section and content scrolls
   behind it; backdrop-filter refracts that content as it goes.
   Mirror of the header treatment but the inset highlight sits at
   the top edge so the bevel reads correctly from below. */
._xy_sIUz {
	position: -webkit-sticky;
	position: sticky;
	bottom: 0;
	z-index: 2;
	background:
		linear-gradient(0deg,
			rgba(255, 255, 255, 0.07) 0%,
			rgba(255, 255, 255, 0.02) 60%,
			rgba(255, 255, 255, 0.005) 100%),
		rgba(20, 22, 30, 0.45);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		inset 0 -1px 0 rgba(255, 255, 255, 0.04),
		0 -8px 22px rgba(0, 0, 0, 0.28);
}

/* Form-section wrapper. Holds the inner padding that used to live
   on .drawer_body so the chrome bars can stretch edge-to-edge.
   The bottom padding is bumped to match the sticky footer height
   plus a little breathing room - without it the last form
   section's submit row would tuck under the sticky footer. */
.ziz_1zLe {
	padding: 1.5rem 1.5rem calc(var(--glass-footer-h) + 1.5rem);
}

/* ── Sticky chip nav between header and body ──────────────── */

/* Section chip nav - sits below the header and continues the glass
   top chrome treatment. Slight gradient + backdrop blur so the chip
   row reads as another floating plate, not a flat tab bar. */
.vQQYEVfq {
	display: flex;
	gap: 0.4rem;
	padding: 0.75rem 1rem;
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.03) 0%,
			rgba(255, 255, 255, 0.008) 100%),
		rgba(18, 20, 28, 0.55);
	backdrop-filter: blur(18px) saturate(180%);
	-webkit-backdrop-filter: blur(18px) saturate(180%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
	flex-shrink: 0;
	overflow-x: auto;
	z-index: 2;
}

.vQQYEVfq::-webkit-scrollbar { height: 0; display: none; }

.Rh0wk9xG {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.85rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid #2d2f39;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.Rh0wk9xG:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: #3d4052;
	color: var(--white);
}

.hppfKLq0 {
	background: rgba(13, 122, 199, 0.15);
	border-color: var(--accent-1);
	color: var(--white);
}

.o91HiGII:not(.hppfKLq0) {
	border-color: rgba(239, 68, 68, 0.45);
	color: #fca5a5;
}

.WorXhiPy {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #ef4444;
	display: inline-block;
}

/* ── Section primitives ───────────────────────────────────── */

/* Each section is its own soft card so the eye groups related fields
   together at a glance. The tinted bg + subtle border give clear
   physical separation; the margin-bottom does the breathing-room
   between cards. The header has its own bottom-border sub-divider
   so the title row reads as a banner rather than just bold text on
   top of the first field. */
.sNiy8IR4 {
	padding: 1.4rem 1.5rem 1.5rem;
	margin-bottom: 1.25rem;
	background: rgba(255, 255, 255, 0.018);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	scroll-margin-top: 0.75rem;
}

.sNiy8IR4:last-child {
	margin-bottom: 0;
}

.XSbDcSvJ {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin: 0 -0.4rem 0.4rem; /* negative inline margin pulls the underline flush with the card edge */
	padding: 0 0.4rem 0.95rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.95);
}

/* Icon gets its own little chip - accent-coloured square with the
   FontAwesome glyph centred. Reads as a section badge instead of a
   tiny inline icon. */
.XSbDcSvJ i {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: rgba(13, 122, 199, 0.14);
	color: var(--accent-1);
	font-size: 13px;
	flex-shrink: 0;
}

/* ── Field stack primitives ───────────────────────────────── */

.Axq43kzK {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.mR6kwb_R {
	font-size: 11px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.85px;
}

.Ce7Bto6h {
	color: var(--accent-1);
	font-weight: 700;
}

.aBBvArQM {
	margin: 0.1rem 0 0;
	font-size: 11px;
	color: #ef4444;
	font-weight: 500;
}

/* Input wrap - leading icon + input. Mirrors the production "iconed pill"
   look used across the entire form (Event name, Dress code, etc.). */
.G6y0eoXL {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0 0.85rem;
	height: 42px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.G6y0eoXL:hover { border-color: #3d4052; }

.G6y0eoXL:focus-within {
	border-color: var(--accent-1);
	background: rgba(13, 122, 199, 0.04);
	box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}

.G6y0eoXL > i {
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	flex-shrink: 0;
}

.mjL9icD0 {
	border-color: rgba(239, 68, 68, 0.6);
	background: rgba(239, 68, 68, 0.04);
}

.mjL9icD0:focus-within {
	border-color: #ef4444;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.jDyRrq3j {
	flex: 1 1;
	min-width: 0;
	background: transparent;
	border: none;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
	outline: none;
	height: 100%;
	padding: 0;
}

.jDyRrq3j::placeholder { color: rgba(255, 255, 255, 0.3); }

/* Standalone borderless input (used as fallback under the venue picker) */
/* Read-only venue display, shown when the event is already created.
   Mirrors the SearchSelect chrome (icon + label + trailing affordance)
   but is unfocusable and unhoverable - signals "this exists, you
   can't change it" without re-creating an entirely new layout. */
.u3EwnOqF {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.7rem 0.85rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-family);
	font-size: 13px;
}

.u3EwnOqF > i:first-child {
	color: var(--accent-1);
	font-size: 13px;
	flex-shrink: 0;
}

.v_qiEMax {
	flex: 1 1;
	min-width: 0;
	color: var(--white);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.Tl3DWTOF {
	color: rgba(255, 255, 255, 0.35);
	font-size: 11px;
	flex-shrink: 0;
}

.yn1VvK18 {
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.65rem 0.85rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px dashed #2d2f39;
	border-radius: 10px;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
	outline: none;
	box-sizing: border-box;
}

.yn1VvK18:focus { border-color: #3d4052; }
.yn1VvK18::placeholder { color: rgba(255, 255, 255, 0.3); }

/* ── Banner dropzone ──────────────────────────────────────── */

.liwCsmwa {
	position: relative;
	width: 100%;
	min-height: 150px;
	border: 2px dashed #2d2f39;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.015);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 0.18s ease, background 0.18s ease;
}

.liwCsmwa:hover {
	border-color: var(--accent-1);
	background: rgba(13, 122, 199, 0.05);
}

.pc_whT1O {
	border-color: var(--accent-1);
	background: rgba(13, 122, 199, 0.1);
}

.yIKrwFvm {
	border-style: solid;
	border-color: rgba(255, 255, 255, 0.06);
	min-height: 220px;
}

.mYOoa3q2 {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
}

.KLrHZ3ZR {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	color: rgba(255, 255, 255, 0.55);
}

.KLrHZ3ZR i {
	font-size: 28px;
	color: var(--accent-1);
	margin-bottom: 0.25rem;
}

.i4QDw5Sd {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
}

.tBGQrOdm {
	margin: 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
}

/* Caption that sits OUTSIDE the dropzone (between the field label and
   the drop target) explaining what the upload is used for. Stays
   visible even after a preview is shown - the in-box "Upload …" copy
   disappears once the file is loaded, but this line persists so users
   can always tell banner vs promo video apart. */
.YEMcTnmi {
	margin: 0.15rem 0 0.6rem;
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.55);
}

.YEMcTnmi i {
	color: var(--accent-1);
	font-size: 12px;
	margin-top: 2px;
	flex-shrink: 0;
}

.NBUrBPu9 {
	width: 100%;
	height: 220px;
	object-fit: cover;
}

.S0FC9qFN {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 0.18s ease;
}

.liwCsmwa:hover .S0FC9qFN { opacity: 1; }

/* ── Rich text editor ─────────────────────────────────────── */

.lMdIPC_7 {
	border: 1px solid #2d2f39;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.025);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lMdIPC_7:focus-within {
	border-color: var(--accent-1);
	box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}

.QtdDnIPP {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	padding: 0.35rem 0.55rem;
	border-bottom: 1px solid #2d2f39;
	background: rgba(255, 255, 255, 0.015);
}

.QtdDnIPP button {
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 6px;
	background: transparent;
	color: rgba(255, 255, 255, 0.65);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	transition: background 0.12s ease, color 0.12s ease;
}

.QtdDnIPP button:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
}

.rTunAz9x {
	display: inline-block;
	width: 1px;
	height: 16px;
	background: #2d2f39;
	margin: 0 0.25rem;
}

/* Description rich-text body - auto-grows with content (no max-height
   ceiling), and the user can drag the bottom-right corner to size it
   to taste. min-height keeps it tappable when empty. */
.unHUH032 {
	min-height: 120px;
	padding: 0.7rem 0.85rem;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
	line-height: 1.5;
	outline: none;
	resize: vertical;
	overflow-y: auto;
}

.unHUH032:empty::before {
	content: attr(data-placeholder);
	color: rgba(255, 255, 255, 0.3);
	pointer-events: none;
}

/* ── Genres pill picker ───────────────────────────────────── */

.KqrO3U2V {
	position: relative;
}

.Ld2pBkph {
	min-height: 42px;
	padding: 0.35rem 0.55rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	align-items: center;
	cursor: text;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.t0JakP_G,
.Ld2pBkph:focus-within {
	border-color: var(--accent-1);
	background: rgba(13, 122, 199, 0.04);
	box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}

.wEASRzp_ {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.2rem 0.45rem 0.2rem 0.65rem;
	background: rgba(13, 122, 199, 0.18);
	border: 1px solid rgba(13, 122, 199, 0.4);
	border-radius: 999px;
	color: var(--accent-1);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1px;
}

.wEASRzp_ button {
	width: 16px;
	height: 16px;
	border: none;
	background: transparent;
	color: var(--accent-1);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	border-radius: 50%;
	transition: background 0.12s ease;
}

.wEASRzp_ button:hover {
	background: rgba(13, 122, 199, 0.4);
	color: #fff;
}

.kytikFw7 {
	flex: 1 1;
	min-width: 80px;
	background: transparent;
	border: none;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
	outline: none;
	padding: 0.15rem 0.35rem;
}

.kytikFw7::placeholder { color: rgba(255, 255, 255, 0.3); }

.FC6wB2f6 {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 10;
	background: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	max-height: 200px;
	overflow-y: auto;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
	padding: 0.3rem;
}

.w8GtGHPT {
	display: block;
	width: 100%;
	padding: 0.5rem 0.65rem;
	text-align: left;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-family);
	font-size: 13px;
	cursor: pointer;
	transition: background 0.12s ease;
}

.w8GtGHPT:hover {
	background: rgba(13, 122, 199, 0.12);
	color: var(--white);
}

/* ── Date picker cards ────────────────────────────────────── */

.HjOX4Mau {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

/* Side-by-side Starts / Ends inputs - same two-column grid the Sales
   window uses. Collapses to a single column on narrow screens so the
   pickers don't get squeezed below their minimum trigger width. */
.LNJvbE6e {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 0.75rem;
	gap: 0.75rem;
}

@media (max-width: 480px) {
	.LNJvbE6e {
		grid-template-columns: 1fr;
	}
}

.qbVNmi_J {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.85rem 1rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	text-align: left;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.qbVNmi_J:hover { border-color: #3d4052; }
.qbVNmi_J:focus-within {
	border-color: var(--accent-1);
	box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}

.qbVNmi_J > i {
	color: rgba(255, 255, 255, 0.55);
	font-size: 14px;
}

.oqyZbUtV { flex: 1 1; }

.HQChhIv4 {
	color: rgba(255, 255, 255, 0.4);
	font-weight: 500;
}

.Okun9nuM {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	border: none;
	background: transparent;
}

.Okun9nuM::-webkit-calendar-picker-indicator {
	opacity: 0;
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

/* ── "Regenerate days" inline row ─────────────────────────── */

.J2h07Q3i {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	flex-wrap: wrap;
}

.cce5w8Ug {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 0.85rem;
	height: 42px;
	width: 92px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.cce5w8Ug:focus-within {
	border-color: var(--accent-1);
	box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}

.cce5w8Ug > i {
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
}

.hIwNfmvh {
	width: 100%;
	background: transparent;
	border: none;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 14px;
	font-weight: 600;
	outline: none;
	padding: 0;
}

.WnqhbnQs {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
}

/* Number inputs - kill spinners across the drawer. */
.hIwNfmvh::-webkit-outer-spin-button,
.hIwNfmvh::-webkit-inner-spin-button,
.jDyRrq3j::-webkit-outer-spin-button,
.jDyRrq3j::-webkit-inner-spin-button,
.lcjGC9UI::-webkit-outer-spin-button,
.lcjGC9UI::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.hIwNfmvh[type="number"],
.jDyRrq3j[type="number"],
.lcjGC9UI[type="number"] {
	-moz-appearance: textfield;
}

/* ── Search-select (Recurring + Venue) ────────────────────── */

.VMyVW39q { position: relative; }

.qgHc2zJj {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0 0.85rem;
	height: 44px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.qgHc2zJj:hover { border-color: #3d4052; }

.E1ejYjrP {
	border-color: var(--accent-1);
	background: rgba(13, 122, 199, 0.04);
	box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}

.qgHc2zJj > i:first-child {
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
}

.EqnqKIL3 {
	flex: 1 1;
	font-weight: 600;
}

.mvZJ7GQw {
	flex: 1 1;
	color: rgba(255, 255, 255, 0.45);
	font-weight: 500;
}

.eEKHBgbe {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	transition: background 0.12s ease, color 0.12s ease;
}

.eEKHBgbe:hover {
	background: rgba(239, 68, 68, 0.25);
	color: #ef4444;
}

.JVLRmQIE {
	color: rgba(255, 255, 255, 0.5);
	font-size: 11px;
}

.h9nQPKWk {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 10;
	background: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	max-height: 240px;
	overflow-y: auto;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
	padding: 0.3rem;
}

.AzfUXYxP {
	display: block;
	width: 100%;
	padding: 0.5rem 0.7rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid #2d2f39;
	border-radius: 6px;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
	outline: none;
	margin-bottom: 0.3rem;
	box-sizing: border-box;
}

.AzfUXYxP:focus { border-color: var(--accent-1); }

.NqHANuS_ {
	display: block;
	width: 100%;
	padding: 0.55rem 0.7rem;
	text-align: left;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-family);
	font-size: 13px;
	cursor: pointer;
	transition: background 0.12s ease;
}

.NqHANuS_:hover {
	background: rgba(13, 122, 199, 0.12);
	color: var(--white);
}

.Nmst7RfP {
	background: rgba(13, 122, 199, 0.18);
	color: var(--white);
	font-weight: 600;
}

.lMLXiIe4 {
	padding: 0.6rem 0.7rem;
	text-align: center;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
}

/* ── Tickets list ─────────────────────────────────────────── */

.nEBoWMN0 {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.s15awyi2 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.65rem 0.85rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.s15awyi2:hover { border-color: #3d4052; }
/* Only glow the row when an editable input inside it has focus -
   don't fire on button focus (Quick Action pill, remove ×, etc.). */
.s15awyi2:has(input:focus),
.s15awyi2:has(textarea:focus) {
	border-color: var(--accent-1);
	background: rgba(13, 122, 199, 0.04);
	box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}

.s15awyi2 > i {
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	flex-shrink: 0;
}

.MUeZ2KIU {
	flex: 1 1;
	min-width: 0;
	background: transparent;
	border: none;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 14px;
	font-weight: 600;
	outline: none;
	padding: 0;
}

/* Read-only door ticket display - name takes up flexible space, price
   sits right-aligned. No $ symbol - pre-made tickets carry their own
   pricing convention from the venue catalog (numbers map cleanly to
   whatever currency the venue runs in). "Free" comps render as text. */
.nF9VDVOt {
	flex: 1 1;
	min-width: 0;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.letNuYFw {
	color: var(--white);
	font-family: var(--font-family);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.2px;
	min-width: 40px;
	text-align: right;
}

/* Inline price chip - sits immediately next to the ticket name so the
   name + price read as one identity, leaving the right-hand side of
   the row for the Quick Action pill + remove button. */
.MJ0bPhrI {
	display: inline-block;
	margin-left: 0.55rem;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.75);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.2px;
	vertical-align: middle;
}

/* Per-row "Quick Action" toggle pill. The on/off contrast is the whole
   point - we need the manager to read state instantly without parsing
   a tiny switch position. ON: filled accent-1 background, white text,
   bolt + "ON" badge. OFF: muted hollow pill with a strike-through
   bolt + "OFF" badge so it reads as deliberately disabled. */
.jQYcmKED {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.32rem 0.55rem 0.32rem 0.7rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.025);
	color: rgba(255, 255, 255, 0.5);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	cursor: pointer;
	-webkit-user-select: none;
	        user-select: none;
	flex-shrink: 0;
	outline: none;
}

.jQYcmKED i {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
	transition: color 0.15s ease;
}

.jQYcmKED:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.85);
}
.jQYcmKED:hover i { color: rgba(255, 255, 255, 0.7); }

/* The status badge at the end of the pill - reads "ON" or "OFF" so the
   state is literally spelled out. */
.ZWBabaKn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	padding: 0.08rem 0.4rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.55);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.6px;
	transition: background 0.15s ease, color 0.15s ease;
}

/* ON state - subtle accent tint (matches the original pill look),
   accent-tinted icon + status badge so the colour cue lives in the
   detail bits rather than flooding the whole control. */
.FTI6P98K {
	background: rgba(13, 122, 199, 0.14);
	border-color: rgba(13, 122, 199, 0.45);
	color: var(--white);
}
.FTI6P98K:hover {
	background: rgba(13, 122, 199, 0.2);
	border-color: rgba(13, 122, 199, 0.6);
	color: var(--white);
}
.FTI6P98K i { color: var(--accent-1); }
.FTI6P98K .ZWBabaKn {
	background: rgba(13, 122, 199, 0.28);
	color: var(--accent-1);
}

/* Explainer banner above the door ticket list. One bolt icon + one
   line of copy. Soft accent tint matches the per-row Quick Action
   pill so the visual link is obvious without restating the control. */
.UUppRiFd {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 0.75rem;
	margin: 0.4rem 0 0.6rem;
	background: rgba(13, 122, 199, 0.07);
	border: 1px solid rgba(13, 122, 199, 0.22);
	border-radius: 8px;
}

.uV5bxjJA {
	color: var(--accent-1);
	font-size: 11px;
	flex-shrink: 0;
}

.CPpdOtzl {
	margin: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 11.5px;
	line-height: 1.4;
}

.CPpdOtzl strong {
	color: var(--white);
	font-weight: 700;
}

.diqWEWum {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	transition: background 0.12s ease, color 0.12s ease;
}

.diqWEWum:hover {
	background: rgba(239, 68, 68, 0.18);
	color: #ef4444;
}

.diqWEWum:disabled {
	cursor: not-allowed;
	opacity: 0.35;
}
.diqWEWum:disabled:hover {
	background: transparent;
	color: rgba(255, 255, 255, 0.45);
}

/* ── Booth area groups ──────────────────────────────────────────
   One card per floor-plan booth area. Header carries the area
   label, level name and (when locked) a "Booked by ..." badge.
   Body re-uses .ticket_row for each imported package mapped to
   that area. */
.DEJ8lYqD {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.85rem;
	background: rgba(255, 255, 255, 0.015);
	border: 1px solid #2d2f39;
	border-radius: 12px;
}

.kSFxAwyG {
	background: rgba(74, 222, 128, 0.04);
	border-color: rgba(74, 222, 128, 0.28);
}

.Q63jHxid {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	padding-bottom: 0.25rem;
}

.Q63jHxid i { color: rgba(255, 255, 255, 0.55); font-size: 13px; }
.kSFxAwyG .Q63jHxid i { color: #4ade80; }

.RhaQTeQf {
	flex: 1 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.baJdna2j {
	color: var(--white);
	font-weight: 500;
	font-size: 13px;
	line-height: 1.2;
}

.ysEzpge1 {
	color: rgba(255, 255, 255, 0.45);
	font-size: 11px;
	line-height: 1.2;
}

.OpQEOArn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 3px 8px;
	background: rgba(74, 222, 128, 0.14);
	border: 1px solid rgba(74, 222, 128, 0.32);
	border-radius: 999px;
	color: #4ade80;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}

.zEjLcNLN {
	padding: 0.6rem 0.4rem;
	color: rgba(255, 255, 255, 0.4);
	font-size: 12px;
	font-style: italic;
}

/* Inline editor that drops below a .ticket_row when the operator
   clicks "Edit" on an imported booth. Just a vertical stack of
   standard .field blocks - no custom chrome, no card. The .field
   pattern carries its own spacing/label styling so this only adds
   a top divider line and a little breathing room from the row. */
.q6LGFevo {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Textarea variant of .input_wrap: same chrome (border, focus
   glow, error state) but flows to fit a multi-line textarea
   instead of capping at the 42px single-line height. The icon
   pins to the top so it stays aligned with the first line as the
   textarea grows. */
.cYKEfyNR {
	height: auto;
	align-items: flex-start;
	padding: 0.7rem 0.85rem;
}

.cYKEfyNR > i {
	margin-top: 4px;
}

.cYKEfyNR > textarea.jDyRrq3j {
	resize: vertical;
	min-height: 110px;
	line-height: 1.45;
	font-family: inherit;
	padding: 0;
}

.hGB_lmfL {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 0.85rem;
	background: transparent;
	border: 1px dashed #2d2f39;
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	align-self: flex-start;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.hGB_lmfL:hover {
	border-color: var(--accent-1);
	color: var(--accent-1);
	background: rgba(13, 122, 199, 0.06);
}

/* ── Ticket type picker dropdown ─────────────────────────── */
/* Wraps the .ticket_add button so the menu can be absolutely positioned
   directly underneath it without escaping the form section. */

.HUxhtbsA {
	position: relative;
	align-self: flex-start;
}

.qLz3Q8Qm {
	font-size: 10px;
	margin-left: 0.15rem;
	opacity: 0.7;
	transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.WRVkfrzH {
	transform: rotate(180deg);
}

@keyframes JU8fPp71 {
	from {
		opacity: 0;
		transform: translateY(-4px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes MNHWMT8T {
	from {
		opacity: 0;
		transform: translateY(4px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.edQwzd4z {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	min-width: 280px;
	z-index: 10;
	background: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
	padding: 0.3rem;
	display: flex;
	flex-direction: column;
	animation: JU8fPp71 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	transform-origin: top left;
	gap: 1px;
}

/* Drop-up variant - the picker sits at the bottom of the form so the
   menu always opens upward. Anchor it to the bottom of the trigger and
   reverse the slide-in direction so it feels natural. */
.K3gwLabS {
	top: auto;
	bottom: calc(100% + 4px);
	transform-origin: bottom left;
	animation: MNHWMT8T 0.18s cubic-bezier(0.4, 0, 0.2, 1);
}

.eZQW4MXN {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.6rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 7px;
	margin: 0.1rem 0.1rem 0.35rem;
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
}

.eZQW4MXN:focus-within {
	border-color: rgba(13, 122, 199, 0.5);
	background: rgba(13, 122, 199, 0.04);
}

.LMB3b8xp {
	flex: 1 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
	padding: 0;
}

.LMB3b8xp::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.Gop9c2cv {
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.45);
	font-size: 11px;
	cursor: pointer;
	padding: 2px 4px;
	border-radius: 4px;
}

.Gop9c2cv:hover {
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.8);
}

.Iekd0Gvk {
	display: flex;
	flex-direction: column;
	gap: 1px;
	max-height: 240px;
	overflow-y: auto;
}

.vsAh3r5p {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0.5rem 0.65rem;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-family);
	font-size: 13px;
	cursor: pointer;
	text-align: left;
	transition: background 0.12s ease, color 0.12s ease;
}

.vsAh3r5p:hover {
	background: rgba(13, 122, 199, 0.12);
	color: var(--white);
}

.i0I6KHnq {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.65);
	font-size: 11px;
	flex-shrink: 0;
}

.vsAh3r5p:hover .i0I6KHnq {
	background: rgba(13, 122, 199, 0.18);
	color: var(--accent-1);
}

.cKU4E0Qy {
	flex: 1 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

.aKJmY40J {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.6);
	flex-shrink: 0;
}

.vsAh3r5p:hover .aKJmY40J {
	color: var(--white);
}

.IaNyKXoN {
	height: 1px;
	background: #2d2f39;
	margin: 4px 2px;
}

.co5aSPZ9 {
	color: var(--accent-1);
}

.co5aSPZ9 .i0I6KHnq {
	color: var(--accent-1);
}

.oX9LznYq {
	padding: 0.65rem 0.65rem 0.4rem;
	color: rgba(255, 255, 255, 0.45);
	font-family: var(--font-family);
	font-size: 12px;
	font-style: italic;
}

/* ── Footer ──────────────────────────────────────────────── */

/* Frosted-glass bottom chrome - mirror of the header treatment. The
   gradient is reversed (lighter at the bottom edge) to balance the
   header visually, and the inner highlight sits at the top edge so
   the bevel reads correctly. */
.jQxsqROZ {
	flex: 1 1;
	min-width: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 8px;
	background: rgba(239, 68, 68, 0.08);
	border: 1px solid rgba(239, 68, 68, 0.32);
	color: #fca5a5;
	font-size: 12.5px;
	line-height: 1.4;
}

.jQxsqROZ i {
	flex-shrink: 0;
	color: #ef4444;
}

.NiBmJO5x {
	display: flex;
	justify-content: flex-end;
	gap: 0.65rem;
	padding: 1rem 1.5rem;
	background:
		linear-gradient(0deg,
			rgba(255, 255, 255, 0.045) 0%,
			rgba(255, 255, 255, 0.012) 100%),
		rgba(20, 22, 30, 0.55);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow:
		inset 0 -1px 0 rgba(255, 255, 255, 0.05),
		0 -4px 14px rgba(0, 0, 0, 0.18);
	flex-shrink: 0;
	z-index: 2;
}

.oX7SFSYL,
.II7QBPWp {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.6rem 1.2rem;
	border-radius: 8px;
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
	border: 1px solid transparent;
}

.oX7SFSYL {
	background: rgba(255, 255, 255, 0.03);
	border-color: #2d2f39;
	color: rgba(255, 255, 255, 0.85);
}

.oX7SFSYL:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.06);
	border-color: #3d4052;
	color: var(--white);
}

.II7QBPWp {
	background: var(--accent-1);
	color: #fff;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.II7QBPWp:hover:not(:disabled) {
	background: #0a6cb0;
}

.II7QBPWp:disabled,
.oX7SFSYL:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ── Field help text ──────────────────────────────────────── */
/* Small one-liner explaining what a field does - sits between the
   label and the field control. */
.pRJHgaE2 {
	margin: -0.15rem 0 0.25rem;
	font-size: 12px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.5);
	font-weight: 400;
}

/* ── Tickets sub-tab toggle (Door / Online) ───────────────── */
/* A pill-style segmented control sitting at the top of the Tickets
   section. Persists which sub-view the user is editing while still
   keeping the section as one logical unit in the chip nav. */
.sTS4QzSC {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 0;
	gap: 0;
	padding: 0.25rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	margin-bottom: 1rem;
}

.kkaTesMk {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.55rem 0.75rem;
	background: transparent;
	border: none;
	border-radius: 7px;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}

.kkaTesMk:hover {
	color: rgba(255, 255, 255, 0.85);
}

.NZ8ZlcKb {
	background: rgba(13, 122, 199, 0.15);
	color: var(--white);
	box-shadow: inset 0 0 0 1px rgba(13, 122, 199, 0.4);
}

._3uYiGvA {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 9px;
	font-size: 10px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.7);
}

.NZ8ZlcKb ._3uYiGvA {
	background: rgba(13, 122, 199, 0.35);
	color: #fff;
}

/* ── Online release list ──────────────────────────────────── */

.SnU2B8XK {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.K8GgIAjD {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 2.25rem 1rem;
	border: 1px dashed #2d2f39;
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.45);
	text-align: center;
}

.K8GgIAjD i {
	font-size: 22px;
	color: rgba(255, 255, 255, 0.25);
	margin-bottom: 0.35rem;
}

.K8GgIAjD p {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.7);
}

.K8GgIAjD span {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
}

/* ── Release card ─────────────────────────────────────────── */
/* Collapsed: compact summary row + sub-meta line.
   Expanded: same header + full edit form below. */
.xBoesXqX {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	/* Clip while collapsed / animating so the grid-row height tween
	   reads as a clean expand/collapse. Flips to `visible` on the
	   open state below (with a delay) so the calendar popover inside
	   the body can render outside the card boundary. */
	overflow: hidden;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.t9ZvOB2I {
	border-color: rgba(13, 122, 199, 0.4);
	background: rgba(13, 122, 199, 0.04);
	overflow: visible;
	/* Delay the `overflow` switch by the same 280ms the body height
	   takes to grow. While that animation runs we want clipping so the
	   body looks like it's sliding open; once it lands, overflow goes
	   visible and the date-picker popover can spill outside the card.
	   On close (this class removed) `transition` resets and overflow
	   snaps back to hidden immediately - so the closing animation
	   clips correctly too. */
	transition:
		border-color 0.15s ease,
		background 0.15s ease,
		overflow 0s 0.28s;
}

/* Header - clickable button row, name + price + status + chevron */
.KlZz4hwy {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.75rem 0.9rem;
	background: transparent;
	border: none;
	color: var(--white);
	font-family: var(--font-family);
	cursor: pointer;
	text-align: left;
}

.KlZz4hwy:hover {
	background: rgba(255, 255, 255, 0.025);
}

.jHYT9ZIc {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	min-width: 0;
	flex: 1 1;
}

.jHYT9ZIc > i {
	color: var(--accent-1);
	font-size: 13px;
}

.O1g5rtoQ {
	font-size: 14px;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.mb85mudH {
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.55);
	padding: 0.15rem 0.5rem;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 5px;
}

.YCrM7Kzg {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex-shrink: 0;
}

.CRH3KYzC {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 5px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 10px;
}

.YnhkQgh6 {
	padding: 0.2rem 0.55rem;
	border-radius: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	white-space: nowrap;
}

.ikn30wbu      { background: rgba(60, 162, 89, 0.15);  color: var(--success-green); }
.zeZ4FOcl { background: rgba(13, 122, 199, 0.15); color: var(--accent-1); }
.F54NMDCW    { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.45); }
._8j4R8WU   { background: rgba(220, 80, 80, 0.12);  color: #ef6a6a; }
.EZOsx3V6     { background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.55); }

.u6enqQlW {
	color: rgba(255, 255, 255, 0.4);
	font-size: 11px;
	margin-left: 0.15rem;
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.QJQ5p5F9 {
	transform: rotate(180deg);
}

/* Sub-meta row - capacity progress + sale window. Always visible
   (collapsed and expanded) so the manager can scan inventory at a
   glance without expanding every card. */
.Nkqe_t00 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0 0.9rem 0.7rem;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
}

.ILJagCjG {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.t9jCWdKt {
	color: rgba(255, 255, 255, 0.25);
}

.Dfsx1L2b {
	flex: 1 0 100%;
	height: 3px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 2px;
	overflow: hidden;
	margin-top: 0.35rem;
}

.p_VyABKz {
	height: 100%;
	background: linear-gradient(90deg, var(--accent-1), #06b6d4);
	transition: width 0.3s ease;
}

/* Smooth collapse wrapper. Uses the grid-template-rows trick: the
   parent grid animates between 0fr (closed) and 1fr (open), and the
   inner row hides overflow so the body content slides cleanly. This
   beats max-height transitions because it adapts to whatever height
   the body content actually needs (no magic constant), and it works
   on every modern browser without JS measurement. */
.SzdI03UX {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.nSY67taw {
	grid-template-rows: 1fr;
}

.SzdI03UX > .LYmfQE8S {
	overflow: hidden;
	min-height: 0;
	/* Border + padding only matter once open. Fade them in along with
	   the height so the closed state is a clean tight card. */
	border-top: 1px solid rgba(255, 255, 255, 0);
	padding-top: 0;
	padding-bottom: 0;
	transition:
		border-top-color 0.28s ease,
		padding-top      0.28s ease,
		padding-bottom   0.28s ease;
}

.nSY67taw > .LYmfQE8S {
	border-top-color: rgba(255, 255, 255, 0.05);
	padding-top:      1rem;
	padding-bottom:   1rem;
	/* Same `overflow: visible` trick as `.release_card_open` - delayed
	   until the height grow finishes so the calendar popover can
	   render outside the body bounds without leaking during the
	   open animation. Closing snaps overflow back to hidden so the
	   height shrink reads cleanly. */
	overflow: visible;
	transition:
		border-top-color 0.28s ease,
		padding-top      0.28s ease,
		padding-bottom   0.28s ease,
		overflow         0s 0.28s;
}

/* Expanded form body */
.LYmfQE8S {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 0 0.9rem;
}

/* Inputs / selects / textareas inside a release card render with their
   own border + padding (the global `.input` rule is borderless and
   relies on a wrapper, but here we want each control to stand on its
   own). */
.LYmfQE8S .jDyRrq3j,
.LYmfQE8S select.jDyRrq3j,
.LYmfQE8S .OrThVFDi {
	width: 100%;
	padding: 0.6rem 0.85rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
	transition: border-color 0.15s ease;
}

.LYmfQE8S .jDyRrq3j:focus,
.LYmfQE8S select.jDyRrq3j:focus,
.LYmfQE8S .OrThVFDi:focus {
	outline: none;
	border-color: rgba(13, 122, 199, 0.55);
	background: rgba(13, 122, 199, 0.04);
}

.LYmfQE8S .jDyRrq3j:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.OrThVFDi {
	resize: vertical;
	min-height: 70px;
	line-height: 1.5;
	font-family: var(--font-family);
}

/* Browser-level styling helpers for native pickers */
.LYmfQE8S select.jDyRrq3j {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27 fill=%27none%27 stroke=%27rgba%28255,255,255,0.5%29%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27><polyline points=%274,6 8,10 12,6%27/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 14px;
	padding-right: 2.25rem;
}

.LYmfQE8S input[type="datetime-local"] {
	color-scheme: dark;
}

/* Layout rows inside the form body */
.JNVWPsNm {
	display: flex;
	gap: 0.5rem;
}

.Ax_gMW21 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.Ax_gMW21 .jDyRrq3j {
	flex: 1 1;
	min-width: 0;
}

.dmY_p51R {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 0.75rem;
	gap: 0.75rem;
}

@media (max-width: 480px) {
	.dmY_p51R {
		grid-template-columns: 1fr;
	}
}

.fhaFE02r {
	margin-top: 0.5rem;
}

/* ── Unlimited check (sits next to the quantity input) ──────── */
/* Wraps our Checkbox + a label as a single click target. Visually a
   subtle pill that looks at-home next to the number input. */
.pqx9OBQ1 {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.75rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.75);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	-webkit-user-select: none;
	        user-select: none;
	white-space: nowrap;
	transition: border-color 0.15s ease;
}

.pqx9OBQ1:hover {
	border-color: #3d4052;
}

/* ── Toggle row (pill-switch settings card) ─────────────────── */
/* Title + helper copy on the left, Toggle on the right. Mirrors the
   production "Auto Approve Requests" card. Used for secret release,
   waitlist, and any other settings-style boolean. */
.EeTuS1l4 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0.85rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	transition: border-color 0.15s ease;
}

.EeTuS1l4:hover {
	border-color: #3d4052;
}

.oXKjw79c {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
	flex: 1 1;
}

.V4fgOZLs {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
}

.QoGH_rWw {
	font-size: 11px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.5);
}

/* ── Release card actions (delete) ────────────────────────── */
.xvvPuzfi {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 0.65rem;
	margin-top: 0.25rem;
}

/* Inline lock reason shown next to a disabled "Delete release" button.
   Soft amber pill makes the gate obvious without screaming. */
.V0wTRJga {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.6rem;
	background: rgba(245, 158, 11, 0.08);
	border: 1px solid rgba(245, 158, 11, 0.25);
	border-radius: 7px;
	color: rgba(245, 158, 11, 0.95);
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.3;
}

.V0wTRJga i { font-size: 10px; opacity: 0.85; }

.oVrW4WBo {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.85rem;
	background: rgba(220, 80, 80, 0.06);
	border: 1px solid rgba(220, 80, 80, 0.2);
	border-radius: 7px;
	color: #ef6a6a;
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.oVrW4WBo:hover {
	background: rgba(220, 80, 80, 0.12);
}

/* ── "Create online release" button ───────────────────────── */
.zbeZXjmb {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.75rem 1rem;
	background: rgba(13, 122, 199, 0.05);
	border: 1px dashed rgba(13, 122, 199, 0.4);
	border-radius: 10px;
	color: var(--accent-1);
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}

.zbeZXjmb:hover {
	background: rgba(13, 122, 199, 0.1);
	border-color: rgba(13, 122, 199, 0.7);
}

/* ── Performers - Spotify-style search + lineup cards ─────── */

/* Search bar wrapper. Same dark-input look as the rest of the
   editor; the Spotify icon gives it identity without a heavy
   green-on-green production palette. */
.J3QJw3VZ {
	position: relative;
	margin-top: 0.25rem;
}

.t0T5t6Yz {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem 0.85rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.t0T5t6Yz:focus-within,
.Vv3it0DE {
	border-color: var(--accent-1);
	box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.18);
}

.t0T5t6Yz > i:first-child {
	color: #1ed760; /* Spotify-ish green for the brand cue */
	font-size: 16px;
	flex-shrink: 0;
}

.drj_3peA {
	flex: 1 1;
	min-width: 0;
	background: transparent;
	border: none;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
	outline: none;
}

.drj_3peA::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.i007YUWQ {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
	animation: Ohet64Tq 0.85s linear infinite;
}

@keyframes Ohet64Tq {
	to { transform: rotate(360deg); }
}

/* Dropdown menu - fades in below the search field. Constrained
   height so a runaway search doesn't push the form around. */
.OWl923Eo {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	/* Sit above both the sticky header (z-50) and chip nav (z-49) so
	   the dropdown opens over the topbar like a true popover, matching
	   how it already overlays the bottom footer. */
	z-index: 60;
	background: var(--bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.45);
	padding: 0.3rem;
	display: flex;
	flex-direction: column;
	max-height: 360px;
	overflow-y: auto;
	animation: cqMkO93x 0.16s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cqMkO93x {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

.aW3g8bKl,
.PkrzDkwx {
	padding: 0.85rem 0.85rem;
	color: rgba(255, 255, 255, 0.45);
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.aW3g8bKl i {
	animation: Ohet64Tq 0.85s linear infinite;
}

.Qt35cRPn {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.55rem 0.6rem;
	background: transparent;
	border: none;
	border-radius: 7px;
	color: var(--white);
	font-family: var(--font-family);
	cursor: pointer;
	text-align: left;
	transition: background 0.12s ease;
}

.Qt35cRPn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.04);
}

.P93Cmm0q {
	opacity: 0.55;
	cursor: not-allowed;
}

.ufVSTlFs {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	background: rgba(255, 255, 255, 0.05);
}

.CCW7ku4v {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
	font-size: 13px;
	flex-shrink: 0;
}

.KUp5NOcE {
	flex: 1 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.p3a840on {
	color: var(--white);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lluRCK8g {
	color: rgba(255, 255, 255, 0.45);
	font-size: 11px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

._nZuKlMH {
	color: #1ed760;
	font-size: 14px;
	flex-shrink: 0;
}

.L2Uf4j35 {
	color: #4ade80;
	font-size: 11px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	flex-shrink: 0;
}

.HbNxPOoM {
	height: 1px;
	background: rgba(255, 255, 255, 0.06);
	margin: 0.3rem 0.4rem;
}

.P12n99Mc .p3a840on {
	color: var(--accent-1);
}

.wKeiH4xl {
	display: flex;
	gap: 0.4rem;
	padding: 0.4rem 0.5rem 0.5rem;
}

.Iu1JaM0s {
	flex: 1 1;
	min-width: 0;
	padding: 0.5rem 0.7rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid #2d2f39;
	border-radius: 7px;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
	outline: none;
	transition: border-color 0.15s ease;
}

.Iu1JaM0s:focus {
	border-color: var(--accent-1);
}

.quy1AXen {
	padding: 0.5rem 0.95rem;
	background: var(--accent-1);
	border: 1px solid var(--accent-1);
	border-radius: 7px;
	color: #fff;
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.quy1AXen:hover:not(:disabled) {
	background: #0a6cb0;
}

.quy1AXen:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* Lineup list */
.UqmtqxH6 {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin-top: 0.85rem;
}

.D_QVJIZI {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 1.5rem 1rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px dashed #2d2f39;
	border-radius: 10px;
	text-align: center;
}

.D_QVJIZI > i {
	color: rgba(255, 255, 255, 0.3);
	font-size: 22px;
	margin-bottom: 0.2rem;
}

.D_QVJIZI p {
	color: rgba(255, 255, 255, 0.65);
	font-size: 13px;
	font-weight: 600;
	margin: 0;
}

.D_QVJIZI span {
	color: rgba(255, 255, 255, 0.45);
	font-size: 11px;
}

.GcbPpigd {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.75rem 0.85rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	transition: border-color 0.15s ease;
}

.GcbPpigd:hover {
	border-color: #3d4052;
}

.bCDShDRe {
	position: relative;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.bCDShDRe > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.gqfVydhL {
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.5px;
}

/* Spotify badge in the bottom-right corner of the photo - small
   green dot marks the artist as imported (vs. custom-added). */
.MqNt6Uci {
	position: absolute;
	bottom: -2px;
	right: -2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #1ed760;
	color: #000;
	font-size: 9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #1a1c24;
	overflow: visible;
}

.F1yG81wo {
	flex: 1 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.U9MvD0xJ {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}

.GRRcijsW {
	color: var(--white);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.ktaZrAiL {
	width: 28px;
	height: 28px;
	border-radius: 6px;
	border: none;
	background: transparent;
	color: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
	margin-top: 0.45rem;
	transition: all 0.12s ease;
}

.ktaZrAiL:hover {
	background: rgba(239, 68, 68, 0.18);
	color: #ef6a6a;
}

/* ── Mobile fallback ──────────────────────────────────────── */

@media (max-width: 600px) {
	.vQQYEVfq { padding: 0.5rem 0.75rem; }
	.NiBmJO5x      { padding: 0.85rem 1rem; }
}

/* Pill switch - 38×22 with a 18px white thumb that translates 16px on. */
.KgWBkU7D {
	position: relative;
	width: 38px;
	height: 22px;
	padding: 0;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.18s ease, border-color 0.18s ease;
	flex-shrink: 0;
}

.KgWBkU7D:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.14);
}

.sRMRft87 {
	background: var(--accent-1);
	border-color: var(--accent-1);
}

.sRMRft87:hover:not(:disabled) {
	background: #0a6cb0;
}

.KgWBkU7D:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.Kf0JV3R8 {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	transition: transform 0.18s ease;
}

.sRMRft87 .Kf0JV3R8 {
	transform: translateX(16px);
}

.KgWBkU7D:focus-visible {
	outline: 2px solid rgba(13, 122, 199, 0.55);
	outline-offset: 2px;
}

.VGCgHt14 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	padding: 0;
	background: rgba(255, 255, 255, 0.02);
	border: 1.5px solid rgba(255, 255, 255, 0.25);
	border-radius: 4px;
	color: transparent;
	cursor: pointer;
	transition: all 0.15s ease;
	flex-shrink: 0;
}

.VGCgHt14:hover:not(:disabled) {
	border-color: rgba(255, 255, 255, 0.45);
	background: rgba(255, 255, 255, 0.05);
}

.Q7_cwe1g {
	background: var(--accent-1);
	border-color: var(--accent-1);
	color: #fff;
}

.Q7_cwe1g:hover:not(:disabled) {
	background: #0a6cb0;
	border-color: #0a6cb0;
}

.Q7_cwe1g i {
	font-size: 10px;
}

.VGCgHt14:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.VGCgHt14:focus-visible {
	outline: 2px solid rgba(13, 122, 199, 0.55);
	outline-offset: 2px;
}

/* Wrapper holds the trigger + the absolutely-positioned popover. */
.OleV9izF {
	position: relative;
	width: 100%;
}

/* Trigger button - styled to look like the editor's other text inputs
   so it sits naturally in the form. */
.nkW8BhDm {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	width: 100%;
	padding: 0.6rem 0.85rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid #2d2f39;
	border-radius: 8px;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s ease;
	text-align: left;
}

.nkW8BhDm:hover {
	border-color: #3d4052;
}

.nkW8BhDm > i:first-child {
	color: var(--accent-1);
	font-size: 13px;
}

.nkW8BhDm > span {
	flex: 1 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wqvz7Zb5 {
	color: rgba(255, 255, 255, 0.35) !important;
}

.bkEXgykA {
	color: rgba(255, 255, 255, 0.4);
	font-size: 11px;
}

.nkW8BhDm:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Popover - floats below the trigger. Wide enough for calendar +
   time columns side-by-side; collapses to stacked on narrow widths. */
.ggir_HFj {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 200;
	width: 360px;
	background: #1a1c24;
	border: 1px solid #2d2f39;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
	overflow: hidden;
	font-family: var(--font-family);
	animation: NKcsBLy6 0.12s ease-out;
}

._B6mZ74x {
	left: auto;
	right: 0;
}

@keyframes NKcsBLy6 {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Quick-pick chips above the calendar */
.GFLytlU6 {
	display: flex;
	gap: 0.4rem;
	flex-wrap: wrap;
	padding: 0.7rem 0.8rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	background: rgba(255, 255, 255, 0.015);
}

.BzDJnDiZ {
	padding: 0.3rem 0.65rem;
	background: rgba(13, 122, 199, 0.1);
	border: 1px solid rgba(13, 122, 199, 0.3);
	border-radius: 999px;
	color: var(--accent-1);
	font-family: var(--font-family);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.BzDJnDiZ:hover {
	background: rgba(13, 122, 199, 0.2);
}

/* Body - calendar (left) + time columns (right) */
.HZrl_ywf {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-gap: 0;
	gap: 0;
}

/* Calendar */
.net2spMy {
	padding: 0.7rem 0.8rem 0.85rem;
	border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.w67B5fxZ {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.25rem;
	margin-bottom: 0.5rem;
}

.wcyeHm2s {
	flex: 1 1;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	letter-spacing: 0.2px;
}

.NV29CSz8 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: transparent;
	border: none;
	border-radius: 5px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 11px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.NV29CSz8:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--white);
}

/* Day-of-week header row */
.K6TMrXmt {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-gap: 2px;
	gap: 2px;
	margin-bottom: 4px;
}

.hXOKzuOh {
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.35);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: 4px 0;
}

/* Day grid */
.fKN1VJJa {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-gap: 2px;
	gap: 2px;
}

.RzKpxhsL {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0 auto;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.12s ease;
}

.RzKpxhsL:hover:not(:disabled):not(.panpjynb) {
	background: rgba(255, 255, 255, 0.06);
}

/* "Today" indicator - outline ring, distinct from selected.
   Production conflates these; we split them so the user can tell
   "this is today" from "this is what I picked" at a glance. */
.YqGBIqkr {
	border-color: rgba(13, 122, 199, 0.55);
	color: var(--accent-1);
	font-weight: 700;
}

/* Selected day - filled blue. Wins over today's border styling. */
.panpjynb {
	background: var(--accent-1);
	border-color: var(--accent-1);
	color: #fff;
	font-weight: 700;
}

.panpjynb:hover {
	background: #0a6cb0;
}

.JolsUIjV {
	color: rgba(255, 255, 255, 0.2);
}

.vZJapFfs {
	color: rgba(255, 255, 255, 0.12);
	cursor: not-allowed;
}

/* Time columns */
.UZXRJOxV {
	display: grid;
	grid-template-columns: repeat(3, 44px);
	max-height: 240px;
	padding: 0.4rem 0.4rem;
	overflow: hidden;
}

.vtwqPDDp {
	display: flex;
	flex-direction: column;
	gap: 1px;
	overflow-y: auto;
	padding: 0 2px;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.vtwqPDDp::-webkit-scrollbar {
	width: 4px;
}
.vtwqPDDp::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 2px;
}

.DuFdzzbF {
	flex-shrink: 0;
	padding: 0.4rem 0;
	background: transparent;
	border: none;
	border-radius: 5px;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.12s ease;
	text-align: center;
}

.DuFdzzbF:hover:not(.F1RAi7O9) {
	background: rgba(255, 255, 255, 0.05);
	color: var(--white);
}

.F1RAi7O9 {
	background: var(--accent-1);
	color: #fff;
	font-weight: 700;
}

/* Footer - Now (left), Cancel + OK (right) */
.WFiB8AsR {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.7rem 0.85rem;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	background: rgba(255, 255, 255, 0.015);
}

.r1harDvw {
	background: transparent;
	border: none;
	color: var(--accent-1);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	padding: 0.3rem 0.5rem;
	border-radius: 5px;
	transition: background 0.15s ease;
}

.r1harDvw:hover {
	background: rgba(13, 122, 199, 0.08);
}

.fOQnpS3_ {
	display: inline-flex;
	gap: 0.4rem;
}

.QLwY17bt,
.jcQJu1az {
	padding: 0.45rem 0.95rem;
	border-radius: 7px;
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}

.QLwY17bt {
	background: transparent;
	border: 1px solid #2d2f39;
	color: rgba(255, 255, 255, 0.75);
}

.QLwY17bt:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--white);
}

.jcQJu1az {
	background: var(--accent-1);
	border: 1px solid var(--accent-1);
	color: #fff;
}

.jcQJu1az:hover {
	background: #0a6cb0;
	border-color: #0a6cb0;
}

/* Narrow drawer fallback - popover slightly narrower so it fits
   without overflowing into the document scroll surface. */
@media (max-width: 480px) {
	.ggir_HFj {
		width: min(340px, calc(100vw - 24px));
	}
}

/* ╭──────────────────────────────────────────────────────────╮
   │ CustomDateTimePicker styles                              │
   │                                                          │
   │ Compact dark popover. Calendar left, stepper time right. │
   │ No scroll wheels, no glow on selection - reads as a      │
   │ definitive control surface.                              │
   ╰──────────────────────────────────────────────────────────╯ */

.MMFXRiGa {
	position: relative;
	width: 100%;
	font-family: var(--font-family);
}

/* ── Trigger button ─────────────────────────────────────────── */

.QUriS2Ko {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0.65rem 0.8rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
	text-align: left;
}

.QUriS2Ko:hover:not(:disabled) {
	border-color: #3a3c48;
	background: rgba(255, 255, 255, 0.05);
}

.PuBsYwu_ {
	border-color: var(--accent-1) !important;
	background: rgba(13, 122, 199, 0.08) !important;
	box-shadow: 0 0 0 3px rgba(13, 122, 199, 0.12);
}

.V_UBOduH { opacity: 0.5; cursor: not-allowed; }

.NFySD_5X {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	background: rgba(13, 122, 199, 0.16);
	color: var(--accent-1);
	border-radius: 6px;
	font-size: 11px;
	flex-shrink: 0;
}

.aJkJUqow, .f3qON1Tn {
	flex: 1 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.f3qON1Tn {
	color: rgba(255, 255, 255, 0.35);
	font-weight: 400;
}

._2Bp4Ay_ {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
	transition: transform 0.18s ease;
}

/* ── Popover ────────────────────────────────────────────────── */

/* Popover is a normal absolute child of the trigger wrapper. It
   scrolls with the page like any other element and always opens
   immediately below the trigger (top: 100% + a small gap). If it
   overflows the surrounding scroll container, the user just scrolls
   to reveal it - no portal, no fixed positioning, no flips. */
.fFqnTJhU {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 0;
	width: 460px;
	max-width: calc(100vw - 1rem);
	background: rgba(20, 22, 30, 0.96);
	backdrop-filter: blur(28px) saturate(180%);
	-webkit-backdrop-filter: blur(28px) saturate(180%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	box-shadow:
		0 24px 60px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(255, 255, 255, 0.03),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
	/* Below the EditEventDrawer's sticky topbar (z:3) and chip nav
	   (z:2) so the popover slips behind them when the user scrolls
	   the form up. Above sibling form fields so adjacent inputs
	   don't punch through it. */
	z-index: 1;
	overflow: hidden;
	transform-origin: top left;
	animation: eCRf0lzA 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.beuWlsqO {
	left: auto;
	right: 0;
	transform-origin: top right;
}

@keyframes eCRf0lzA {
	from { opacity: 0; transform: translateY(-8px) scale(0.96); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Header (single-line live readout) ──────────────────────
   Same background as the footer so the popover reads as one
   coherent surface with body in the middle. Single-line text
   mirrors the trigger button label exactly. */

.V5E0VWu0 {
	padding: 0.7rem 1rem;
	background: rgba(0, 0, 0, 0.22);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.eLDvdNe7 {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	letter-spacing: 0.1px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ── Body: calendar + time side by side ─────────────────────── */

.UGrnMhK_ {
	display: flex;
	align-items: stretch;
}

.IL_hU5xf {
	flex: 1 1;
	min-width: 0;
	padding: 0.7rem 0.85rem 0.85rem;
}

.pSaM2hFR {
	width: 168px;
	flex-shrink: 0;
	padding: 0.7rem 0.85rem 0.85rem;
	border-left: 1px solid rgba(255, 255, 255, 0.06);
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

@media (max-width: 520px) {
	.fFqnTJhU { width: calc(100vw - 1rem); }
	.UGrnMhK_ { flex-direction: column; }
	.pSaM2hFR {
		width: auto;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.06);
	}
}

/* ── Calendar header (month + year buttons, side arrows) ────── */

.PXrPMdYU {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.4rem;
	margin-bottom: 0.55rem;
}

.s84Pt2gj {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 10px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
	flex-shrink: 0;
}

.s84Pt2gj:hover {
	background: rgba(255, 255, 255, 0.09);
	color: var(--white);
}

.s84Pt2gj:active { transform: scale(0.92); }

.eZeZ9t7m {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	flex: 1 1;
	justify-content: center;
}

.Yz5fPGMP {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid transparent;
	border-radius: 7px;
	padding: 0.3rem 0.55rem;
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	letter-spacing: 0.15px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.Yz5fPGMP:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.08);
}

.M7mjh0kj {
	background: rgba(13, 122, 199, 0.18);
	border-color: rgba(13, 122, 199, 0.4);
	color: var(--white);
}

/* ── Day grid ──────────────────────────────────────────────── */

.T5H7lLAH {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-gap: 0.15rem;
	gap: 0.15rem;
	margin-bottom: 0.3rem;
}

.TThTzVsb {
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.32);
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

.XdKGPtyL {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	grid-gap: 0.2rem;
	gap: 0.2rem;
}

.q6cc45X0 {
	width: 100%;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.q6cc45X0:hover:not(:disabled):not(.erbz4c8y) {
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
}

.uQfBfD1h { color: rgba(255, 255, 255, 0.22); }

.SP_ps7AG {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
	color: var(--white);
}

/* Flat fill on selection - no glow, no scale. */
.erbz4c8y {
	background: var(--accent-1);
	color: var(--white);
	font-weight: 700;
}

.H5GncFmN { opacity: 0.25; cursor: not-allowed; }

/* ── Month + year grids (replace day grid when clicked) ───── */

.v7CEDt8Y {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 0.4rem;
	gap: 0.4rem;
	padding: 0.3rem 0 0;
}

.j45QpoQ1 {
	padding: 0.85rem 0.5rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.j45QpoQ1:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.1);
	color: var(--white);
}

.nOwpadz1 {
	background: var(--accent-1);
	border-color: var(--accent-1);
	color: var(--white);
}

.nOwpadz1:hover {
	background: var(--accent-1);
	border-color: var(--accent-1);
}

/* ── Time pane: stepper inputs + AM/PM toggle ───────────────── */

.npcPrH73 {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.38);
	margin-bottom: 0.55rem;
}

.LXRzes_j {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	margin-bottom: 0.7rem;
}

.rb8rx08D {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 56px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 10px;
	overflow: hidden;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.rb8rx08D:hover {
	border-color: rgba(13, 122, 199, 0.35);
	background: rgba(255, 255, 255, 0.05);
}

.K0cfFmN2 {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 22px;
	background: transparent;
	border: none;
	color: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	font-size: 10px;
	transition: background 0.12s ease, color 0.12s ease;
}

.K0cfFmN2:hover {
	background: rgba(13, 122, 199, 0.16);
	color: var(--white);
}

.K0cfFmN2:active { background: rgba(13, 122, 199, 0.28); }

.cpfIKjTo {
	width: 100%;
	padding: 0.5rem 0;
	text-align: center;
	background: transparent;
	border: none;
	outline: none;
	font-family: var(--font-family);
	font-size: 20px;
	font-weight: 700;
	color: var(--white);
	letter-spacing: 1px;
	line-height: 1;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	caret-color: var(--accent-1);
	cursor: text;
	-moz-appearance: textfield;
}

.cpfIKjTo::-webkit-outer-spin-button,
.cpfIKjTo::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.cpfIKjTo:focus {
	background: rgba(13, 122, 199, 0.12);
}

.tN9uUu8C {
	font-size: 22px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.45);
	line-height: 1;
	padding-bottom: 2px;
}

.gqydgDQ4 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 0;
	gap: 0;
	padding: 3px;
	background: rgba(0, 0, 0, 0.28);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 9px;
}

.trUOWs0p {
	padding: 0.4rem 0.5rem;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.3px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.trUOWs0p:hover:not(.ocuAuo2l) {
	color: var(--white);
}

.ocuAuo2l {
	background: var(--accent-1);
	color: var(--white);
}

/* ── Footer ────────────────────────────────────────────────── */

.EK74UatA {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.4rem;
	padding: 0.65rem 0.85rem;
	background: rgba(0, 0, 0, 0.22);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.F1qdf2Tf { flex: 1 1; }

.vnsUaXob {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.75rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 7px;
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vnsUaXob:hover {
	background: rgba(13, 122, 199, 0.1);
	color: var(--white);
	border-color: rgba(13, 122, 199, 0.32);
}

.vnsUaXob i {
	font-size: 11px;
	color: var(--accent-1);
}

._CzcHwrN {
	padding: 0.45rem 0.85rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 7px;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

._CzcHwrN:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.14);
}

.bymIBYDu {
	padding: 0.45rem 1rem;
	background: var(--accent-1);
	border: 1px solid var(--accent-1);
	border-radius: 7px;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.08s ease;
}

.bymIBYDu:hover { filter: brightness(1.15); }

.bymIBYDu:active { transform: scale(0.97); }

/* Shared side-drawer chrome.
   ──────────────────────────────────────────────────────────────
   Canonical drawer shell used by surfaces outside Dashboard
   (Team and, in a follow-up pass, Guestiis + DeleteEvent). The
   dashboard drawers currently carry a mirrored copy of these
   rules in Dashboard.module.css - when more popups migrate we
   can collapse those into `composes` references against this
   module. Class names match Dashboard.module.css so a future
   dedup is mechanical.
   ────────────────────────────────────────────────────────────── */

.G2P6kI_x {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 1000;
	animation: KGxWfngY 0.2s ease;
}

.vqQrAEUZ {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 680px;
	max-width: 92vw;
	background: rgba(20, 22, 30, 0.78);
	backdrop-filter: blur(24px) saturate(170%);
	-webkit-backdrop-filter: blur(24px) saturate(170%);
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	z-index: 1001;
	display: flex;
	flex-direction: column;
	box-shadow: -16px 0 40px rgba(0, 0, 0, 0.4);
	animation: WJGfFhcS 0.28s ease;
}

/* InviteTeam picker reads better narrower - single column of role
   sections doesn't need a full 680px. Stacked drawers (PromoterLimits
   over InviteTeam) sit above with a slight inset so the layered
   stack reads as intended. */
.gd6tTdeO {
	width: 540px;
}

.Yq3ynkL5 {
	width: 820px;
}

.aNpymBRl {
	z-index: 1003;
	box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
}

.gLhcbxAc {
	z-index: 1002;
	background: rgba(0, 0, 0, 0.4);
}

@keyframes KGxWfngY {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes Nc3Ho7zo {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes WJGfFhcS {
	from { transform: translateX(100%); }
	to   { transform: translateX(0); }
}

@keyframes vZpAp3aD {
	from { transform: translateX(0); }
	to   { transform: translateX(100%); }
}

.d361ukZl {
	animation: vZpAp3aD 0.26s cubic-bezier(0.4, 0, 1, 1) forwards;
}

.BH7f_WG5 {
	animation: Nc3Ho7zo 0.22s ease forwards;
}

/* Frosted-glass top chrome - same recipe as the dashboard drawers:
   light gradient fill + subtle inner highlight + backdrop-blur read
   as a glass plate floating over the body. */
.jyjubPEZ {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.4rem 1.5rem;
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.045) 0%,
			rgba(255, 255, 255, 0.012) 100%),
		rgba(20, 22, 30, 0.55);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 4px 14px rgba(0, 0, 0, 0.18);
	flex-shrink: 0;
	z-index: 2;
}

.fMua92U1 {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 1px solid #2d2f39;
	background: rgba(255, 255, 255, 0.02);
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 14px;
	font-family: var(--font-family);
	transition: all 0.15s ease;
}

.fMua92U1:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
	border-color: #3d4052;
}

.yi4dZMSs {
	flex: 1 1;
	min-width: 0;
}

.q7sAs81_ {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--white);
}

.YgIFMQ8i {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
	font-size: 12px;
	color: #888;
	flex-wrap: wrap;
}

.O76t6FSo {
	color: #444;
}

.FbNi4ikk {
	flex: 1 1;
	overflow-y: auto;
	padding: 1.5rem;
	background: var(--bg-dark);
}

.FbNi4ikk::-webkit-scrollbar { width: 4px; }
.FbNi4ikk::-webkit-scrollbar-track { background: transparent; }
.FbNi4ikk::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

/* Sticky bottom chrome - mirrors the header treatment so the drawer
   reads as a piece of glass with frosted edges and a solid body in
   between. Footer is optional; only renders when an action row is
   needed (Invite, Save). */
.LXBtbVv8 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	background:
		linear-gradient(0deg,
			rgba(255, 255, 255, 0.045) 0%,
			rgba(255, 255, 255, 0.012) 100%),
		rgba(20, 22, 30, 0.55);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow:
		inset 0 -1px 0 rgba(255, 255, 255, 0.04),
		0 -4px 14px rgba(0, 0, 0, 0.18);
	flex-shrink: 0;
	z-index: 2;
}

.ytTV9i93 {
	flex: 1 1;
}

.cyU5nNUe {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.65rem 1.1rem;
	background: var(--accent-1);
	color: var(--white);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

.cyU5nNUe:hover:not(:disabled) {
	background: #1389d8;
}

.cyU5nNUe:active:not(:disabled) {
	transform: scale(0.98);
}

.cyU5nNUe:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.cyU5nNUe i {
	font-size: 11px;
}

.zP_pynK6 {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.65rem 1rem;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.zP_pynK6:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.14);
}

.zP_pynK6:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.zP_pynK6 i {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
}

.mKupTOsQ {
	margin-bottom: 1.75rem;
}

.mKupTOsQ:last-child {
	margin-bottom: 0;
}

.ZWTv1TCq {
	margin: 0 0 0.85rem;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 600px) {
	.vqQrAEUZ,
	.gd6tTdeO {
		width: 100vw;
		max-width: 100vw;
	}

	.aNpymBRl {
		width: 100vw;
	}

	.jyjubPEZ {
		padding: 1.1rem 1.1rem;
	}

	.FbNi4ikk {
		padding: 1.1rem;
	}

	.LXBtbVv8 {
		padding: 0.85rem 1.1rem;
	}
}

/* Header layout - avatar + text side by side */
.Cq_pCgi0 {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

/* Clickable avatar wrapper */
.QIf52rho {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	border-radius: 50%;
	flex-shrink: 0;
	transition: opacity 0.15s, transform 0.15s;
}

.QIf52rho:hover { opacity: 0.8; transform: scale(1.05); }

/* Clickable guest name */
.M7SOCHhH {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 18px;
	font-weight: 800;
	color: var(--white);
	text-align: left;
	transition: color 0.15s;
	line-height: 1.2;
}

.M7SOCHhH:hover { color: var(--accent-1); }

.yhWu2RIn {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 700;
	color: rgba(255,255,255,0.65);
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.1);
	flex-shrink: 0;
}

.eW7qFds9 {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.KnDa8xZ2 {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
}

/* Body overrides */
.ntBQhngO {
	background: var(--bg-dark);
}

/* Detail rows */
.l8kIRGdz {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(255,255,255,0.04);
}

.l8kIRGdz:last-child { border-bottom: none; }

.rGDVo9Rx {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--text-muted);
	flex-shrink: 0;
	min-width: 130px;
}

.rGDVo9Rx i { width: 14px; text-align: center; opacity: 0.55; }

.mr0XwE4a {
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	text-align: right;
}

/* Header row for the Guests section. Holds the section title +
   the inline "Edit" button on surfaces that allow plus-one renames
   (Booths tab). */
.jxs1x5qM {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 0.85rem;
}

.jxs1x5qM > p:first-child {
	margin: 0;
}

.QP2x6u8F {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 26px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.8);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.QP2x6u8F:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.2);
	color: #ffffff;
}

.QP2x6u8F i {
	font-size: 10px;
}

/* Inline name input swap inside a guest row when in edit mode. */
.ymDpcSzn {
	flex: 1 1;
	min-width: 0;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	color: #ffffff;
	font-size: 13px;
	padding: 6px 10px;
	outline: none;
	transition: border-color 0.15s, background 0.15s;
	font-family: inherit;
}

.ymDpcSzn:focus {
	border-color: rgba(74, 158, 237, 0.6);
	background: rgba(255, 255, 255, 0.06);
}

.ymDpcSzn:disabled {
	opacity: 0.5;
}

.fMs9j05O {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 6px;
}

.q0bz7AZx,
.e07sB3ON {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	font-family: inherit;
}

.q0bz7AZx {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.85);
}

.q0bz7AZx:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.2);
}

.e07sB3ON {
	background: #4a9eed;
	border: 1px solid #4a9eed;
	color: #ffffff;
}

.e07sB3ON:hover:not(:disabled) {
	background: #5fb1ff;
	border-color: #5fb1ff;
}

.e07sB3ON:disabled,
.q0bz7AZx:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.e07sB3ON i {
	font-size: 10px;
}

/* Guests list */
.aLMs4Bfr {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.AndiMpi9 {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 8px;
}

.NmAvh212 {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	color: rgba(255,255,255,0.6);
	flex-shrink: 0;
}

.MQOLsCJO {
	flex: 1 1;
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
}

.rPwWc8ya {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #f59e0b;
}

/* Note */
.rNhcFR00 {
	margin: 0;
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.6;
	padding: 10px 12px;
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 8px;
}

/* ── Return guest header badge ─────────────────────────────────────────── */
.p8V79d7M {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 6px;
	font-size: 11px;
	font-weight: 700;
	color: rgba(255,255,255,0.45);
	flex-shrink: 0;
}

/* ── Guest history panel ────────────────────────────────────────────────── */
.KEqeEA_O {
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 10px;
}

.kp4URWo_ {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 12px 8px;
}

.pszv2QbK {
	font-size: 16px;
	font-weight: 800;
	color: var(--white);
	letter-spacing: -0.3px;
	line-height: 1;
}

.BJ9CiY5d {
	font-size: 9.5px;
	font-weight: 600;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: center;
}

.tBdQ1kNw {
	width: 1px;
	height: 32px;
	background: rgba(255,255,255,0.06);
	flex-shrink: 0;
}

/* Guest tags */
.EeeL5zQ6 {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 12px;
}

.JJshABQS {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	background: rgba(23,113,230,0.08);
	border: 1px solid rgba(23,113,230,0.18);
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	color: var(--accent-1);
}

/* Recent events list */
.jceqZx4e {
	margin: 0 0 6px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: rgba(255,255,255,0.3);
}

.CaKiMNTq {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.uO86zy_s {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 8px;
}

.Dg3d6Egh {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--ec) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--ec) 20%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: var(--ec);
	flex-shrink: 0;
}

.a_eR7b8x {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.IFVmrVSu {
	font-size: 12px;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.Q7BQYS7O {
	font-size: 10.5px;
	color: var(--text-muted);
}

.EMMIYB46 {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-secondary);
	flex-shrink: 0;
}

/* ── Instagram panel ───────────────────────────────────────────────────── */
.rjBWmH4V {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.NRGB1N6L {
	position: relative;
	flex-shrink: 0;
}

.UKp5iz2V {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	position: relative;
	z-index: 1;
}

/* Instagram story-ring gradient */
.rHKfKF3L {
	position: absolute;
	inset: -2px;
	border-radius: 50%;
	background: conic-gradient(
		#f9ce34 0%,
		#ee2a7b 40%,
		#6228d7 70%,
		#f9ce34 100%
	);
	z-index: 0;
	mask: radial-gradient(circle, transparent 56%, black 57%);
	-webkit-mask: radial-gradient(circle, transparent 56%, black 57%);
}

.DLzrBjf0 {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.vJpfkcRV {
	font-size: 13px;
	font-weight: 700;
	color: var(--white);
}

.bT_3vXZL {
	font-size: 11.5px;
	color: var(--text-muted);
	line-height: 1.45;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.QXQPiQXb {
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 10px;
	margin-bottom: 10px;
	overflow: hidden;
}

.kEqYOW7r {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: 10px 6px;
}

.FYmwigti {
	font-size: 15px;
	font-weight: 800;
	color: var(--white);
	letter-spacing: -0.3px;
}

.Yy9RXXMC {
	font-size: 10px;
	font-weight: 500;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.FUwlRfwH {
	width: 1px;
	height: 32px;
	background: rgba(255,255,255,0.06);
	flex-shrink: 0;
}

/* 3-image feed grid */
.mRCsIqkv {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 4px;
	gap: 4px;
	border-radius: 8px;
	overflow: hidden;
}

._CN3mdQn {
	aspect-ratio: 1;
	overflow: hidden;
	background: rgba(255,255,255,0.05);
}

.oMA25fXt {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

._CN3mdQn:hover .oMA25fXt {
	transform: scale(1.06);
}

.K_PdBlE0 {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.15);
	font-size: 20px;
}

/* ── Booth section ─────────────────────────────────────────────────────── */
.ozbYdx6n {
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 10px;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 10px;
}

.pWZRWaJa {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--white);
	margin-bottom: 2px;
}

/* Price tag inline with the package name. Muted so the name is the
   dominant element; price sits as a quiet bullet-prefixed value. */
.FBqYSaqy {
	color: var(--text-secondary);
	font-size: 12px;
	font-weight: 600;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

/* Quiet subtext directly under the package name - used for the
   booth-area label and any future minor metadata. Smaller and
   dimmer than the .package_include rows so the package name
   stays the headline of the block. */
.FK7MXVFb {
	color: var(--text-muted);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.1px;
	margin-top: -2px;
	margin-bottom: 2px;
}

.OoeoZR6D {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--text-secondary);
}

.OoeoZR6D i { color: #22c55e; font-size: 10px; }

/* Horizontal three-column "strip" payment summary - mirrors the
   same component on BoothApprovalModal so the operator sees an
   identical chrome on the details page and the approval page. */
.V90D1GBu {
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 10px;
	overflow: hidden;
}

.DLT0hxMn {
	flex: 1 1;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.YWr0ifze {
	font-size: 10px;
	color: var(--text-muted);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.g_umAyOV {
	font-size: 14px;
	font-weight: 700;
	color: var(--white);
}

._6R0bq7s {
	width: 1px;
	height: 36px;
	background: rgba(255,255,255,0.07);
	flex-shrink: 0;
}

.n4EbMcJA {
	font-weight: 700;
	color: var(--white) !important;
	background: rgba(255,255,255,0.02);
	font-size: 13.5px !important;
}

.sAKry4je {
	font-size: 11px;
	color: var(--text-muted);
	font-weight: 400;
}

/* Status badges in footer */
.NuWBVdxC {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: rgba(16,185,129,0.1);
	color: #10b981;
	border: 1px solid rgba(16,185,129,0.25);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
}

.ib6IvxkD {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: rgba(239,68,68,0.1);
	color: #ef4444;
	border: 1px solid rgba(239,68,68,0.25);
	border-radius: 8px;
	font-size: 13px;
	font-weight: 700;
}

/* Future-date banner - sits at the top of the body when the request
   targets a different instance of a recurring series than the event
   the operator is currently viewing. Amber palette + bold label so
   the operator can't approve it without noticing the date shift. */
.c7eTSqiT {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	margin-bottom: 14px;
	background: rgba(245, 158, 11, 0.12);
	border: 1px solid rgba(245, 158, 11, 0.45);
	border-radius: 10px;
	color: #f59e0b;
}
.fef6t8cc {
	font-size: 16px;
	line-height: 1.2;
	margin-top: 1px;
}
.efp_m4vU {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 12.5px;
	color: var(--text-secondary);
}
.YryF23XK {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #f59e0b;
}
.fdoEppUe {
	color: var(--text-primary);
	font-weight: 600;
}

/* Guest row */
.gw_TsrCq {
	display: flex;
	align-items: center;
	gap: 12px;
}

.czvg5P1E {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255,255,255,0.07);
	border: 1px solid rgba(255,255,255,0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: rgba(255,255,255,0.65);
	flex-shrink: 0;
}

.nXXysOp5 {
	font-size: 14px;
	font-weight: 700;
	color: var(--white);
}

/* Event row */
.Iq17P5L5 {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rHsTajAa {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(23,113,230, 0.12);
	background: rgba(var(--accent-1-rgb, 23,113,230), 0.12);
	border: 1px solid rgba(23,113,230, 0.2);
	border: 1px solid rgba(var(--accent-1-rgb, 23,113,230), 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-1);
	font-size: 14px;
	flex-shrink: 0;
}

.oXbjcHti {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.XL7VO7W_ {
	font-size: 13px;
	font-weight: 700;
	color: var(--white);
}

.ezPVFErL {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: var(--text-muted);
}

.WAvAnJcO {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #f59e0b;
	font-size: 10px;
	font-weight: 700;
}

/* Ticket list */
.dUezFErw {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hSbAQPMY {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 10px;
	background: rgba(255,255,255,0.02);
	cursor: pointer;
	transition: all 0.12s;
}

.hSbAQPMY:hover {
	background: rgba(255,255,255,0.05);
	border-color: rgba(255,255,255,0.12);
}

.RRJIDQrj {
	background: rgba(23,113,230, 0.08) !important;
	background: rgba(var(--accent-1-rgb, 23,113,230), 0.08) !important;
	border-color: rgba(23,113,230, 0.3) !important;
	border-color: rgba(var(--accent-1-rgb, 23,113,230), 0.3) !important;
}

.E6HByzoF {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	border: 1.5px solid rgba(255,255,255,0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 10px;
	color: #fff;
	transition: all 0.12s;
}

.sNs3D6bw {
	background: var(--accent-1);
	border-color: var(--accent-1);
}

.jY_ydjfS {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.ZwappOrf {
	font-size: 13px;
	font-weight: 700;
	color: var(--white);
}

.faLQOrR5 {
	font-size: 11px;
	color: var(--text-muted);
}

/* Guests in booking */
.MzPuR_IG {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.i5bXLwMw {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 8px;
}

.Es2updlw {
	flex: 1 1;
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
}

.YQkHk_rn {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.4px;
	color: #f59e0b;
}

/* Tags */

/* Predefined event tag pills. Mirrors the Guestiis EditTags picker
   visual language: subtle chip, optional colour dot from the tag
   record, accent-tint when toggled on. */
.oUdOxI2b {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 8px;
}

.QUo4i7pC {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.7);
	border-radius: 999px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.QUo4i7pC:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.14);
}

.WmZ2wbrj {
	background: rgba(13, 122, 199, 0.18);
	border-color: rgba(13, 122, 199, 0.45);
	color: var(--white);
}

.WmZ2wbrj i {
	font-size: 9px;
	color: var(--accent-1);
}

.gSEYDrl4 {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.Xv1IAkPF {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: rgba(255,255,255,0.02);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 10px;
	min-height: 42px;
}

.UfkAnU8q {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	background: rgba(255,255,255,0.08);
	border-radius: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--white);
}

.jyjc0jJI {
	background: none;
	border: none;
	padding: 0;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 10px;
	line-height: 1;
	display: flex;
	align-items: center;
}

.jyjc0jJI:hover { color: var(--white); }

.FWFJRJi_ {
	flex: 1 1;
	min-width: 80px;
	background: none;
	border: none;
	outline: none;
	font-family: inherit;
	font-size: 13px;
	color: var(--white);
}

.FWFJRJi_::placeholder { color: var(--text-muted); }

.CBeD_db5 {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.65);
	z-index: 2200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: dw5tG5HH 0.15s ease;
}

@keyframes dw5tG5HH { from { opacity: 0; } to { opacity: 1; } }

.kIOLyjsB {
	width: 100%;
	max-width: 400px;
	background: #13151f;
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 18px;
	box-shadow: 0 24px 64px rgba(0,0,0,0.6);
	padding: 28px 28px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	animation: aOEqv_VX 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes aOEqv_VX {
	from { transform: scale(0.92); opacity: 0; }
	to   { transform: scale(1);    opacity: 1; }
}

.i_DQn_D0 {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(239,68,68,0.1);
	border: 1px solid rgba(239,68,68,0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #ef4444;
}

.IwrN7SC5 {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--white);
}

.XNs1NH9Z {
	margin: 0;
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.6;
}

.XNs1NH9Z strong {
	color: var(--white);
	font-weight: 700;
}

.H9ji8Kww {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
}

.H9ji8Kww li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 14px;
	background: rgba(239,68,68,0.06);
	border: 1px solid rgba(239,68,68,0.15);
	border-radius: 8px;
	font-size: 13px;
	color: var(--text-secondary);
	line-height: 1.5;
}

.H9ji8Kww li i {
	color: #ef4444;
	font-size: 13px;
	margin-top: 1px;
	flex-shrink: 0;
}

.H9ji8Kww li strong {
	color: var(--white);
	font-weight: 700;
}

.lIT3pCC2 {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-top: 6px;
}

.zNmgWGz9 {
	flex: 1 1;
	padding: 10px;
	background: rgba(255,255,255,0.04);
	color: var(--text-secondary);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
}

.zNmgWGz9:hover { background: rgba(255,255,255,0.08); color: var(--white); }

.XZ73HyJ2 {
	flex: 1 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px;
	background: #ef4444;
	color: #fff;
	border: none;
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s;
}

.XZ73HyJ2:hover { background: #dc2626; }

/* Header pill */
.jYR1QAZR {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	background: rgba(129,140,248,0.12);
	color: #818cf8;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	margin-bottom: 8px;
}

/* Two-column body */
.HAC6l36y {
	flex: 1 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 0;
	overflow: hidden;
}

/* Left config panel */
.mRxJXWKw {
	border-right: 1px solid rgba(255,255,255,0.07);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.TJbRMhSV {
	flex: 1 1;
	overflow-y: auto;
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.TJbRMhSV::-webkit-scrollbar { width: 3px; }
.TJbRMhSV::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

/* Right email preview panel */
.jHil0xFM {
	background: #080a14;
	display: flex;
	flex-direction: column;
	padding: 20px;
	gap: 12px;
	overflow: hidden;
}

.ZpSv4N09 {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 !important;
}

/* Field groups */
.U6s6cWFO {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Drawer.module.css ships its section-title rule with a 0.85rem
   bottom margin so non-flex callers get spacing for free. Inside our
   field_group the flex `gap` is the spacing source, so the margin
   double-counts - zero it on the title <p> here only. The first <p>
   inside every field_group IS the section title. */
.U6s6cWFO > p:first-child {
	margin-bottom: 0;
}

.k_KxngeY {
	display: inline-block;
	margin-left: 8px;
	font-size: 10px;
	font-weight: 500;
	text-transform: lowercase;
	letter-spacing: 0;
	background: rgba(255,255,255,0.05);
	color: var(--text-muted);
	padding: 1px 6px;
	border-radius: 10px;
}

/* Payment toggle */
.Wr13U9WX {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 8px;
	gap: 8px;
}

.F3kV8FZs {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 10px 12px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 10px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	cursor: pointer;
	transition: all 0.15s;
}

.F3kV8FZs:hover { background: rgba(255,255,255,0.07); color: var(--white); }

.jQ5wr9XS {
	background: rgba(129,140,248,0.12) !important;
	border-color: rgba(129,140,248,0.3) !important;
	color: #818cf8 !important;
}

.GwWIjXi2 {
	margin: 0;
	font-size: 11.5px;
	color: var(--text-muted);
	line-height: 1.5;
}

.GwWIjXi2 strong { color: var(--white); font-weight: 700; }

/* Message textarea */
.tK7gVz7J {
	width: 100%;
	padding: 12px 14px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	color: var(--white);
	resize: vertical;
	min-height: 100px;
	box-sizing: border-box;
	transition: border-color 0.15s;
}

.tK7gVz7J::placeholder { color: var(--text-muted); }
.tK7gVz7J:focus { outline: none; border-color: rgba(129,140,248,0.4); }

/* Summary strip */
.tvli1snk {
	display: flex;
	align-items: center;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 10px;
	overflow: hidden;
}

.uQ1dtYtr {
	flex: 1 1;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.S06Y1LvA { font-size: 10px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.EZlPpJZR { font-size: 14px; font-weight: 700; color: var(--white); }

.o6b_idsN {
	width: 1px;
	height: 36px;
	background: rgba(255,255,255,0.07);
	flex-shrink: 0;
}

/* ── Email preview chrome ────────────────────────────────────────────────
   Aims to be a faithful, scaled-down render of the real confirmed-booth
   email (server/utils/sendBoothEmails.js + renderCardEmail). Same dark
   backdrop (#0a0a0a), same dark card (#111111), same heading + body
   typography + colours so the operator sees exactly what the guest will
   receive. If you change the real email, change this preview - they
   travel together. */
.b_12dbhA {
	flex: 1 1;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.07);
	background: #0a0a0a;
	display: flex;
	flex-direction: column;
}

.ffdOFnMz {
	background: #1a1a1a;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	padding: 10px 14px;
	font-size: 11px;
	color: #9ca3af;
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex-shrink: 0;
}
.blvyxngM { display: flex; gap: 6px; line-height: 1.4; }
.NaY3qmQ2 { color: #6b7280; min-width: 56px; font-weight: 500; }
.Z0JJGwWY { color: #e5e5e5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.FFqbEzUP {
	flex: 1 1;
	overflow-y: auto;
	padding: 28px 16px;
	background: #0a0a0a;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.JNwPWFWY {
	text-align: center;
	padding-bottom: 24px;
}
.ZQpiroW4 {
	color: #ffffff;
	font-weight: 800;
	font-size: 16px;
	letter-spacing: 0.5px;
}

.STbpH0Pn {
	background: #111111;
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 16px;
	padding: 24px 22px;
	color: #e5e5e5;
	font-size: 13px;
	line-height: 1.7;
}

.y3U4qq7f {
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.3px;
	margin: 0 0 14px;
}

.XpupLdMR {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 12px 14px;
	margin: 0 0 16px;
	color: #e5e5e5;
	font-size: 13px;
	line-height: 1.6;
}
.N_MJG1uU {
	color: #9ca3af;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 6px;
	font-weight: 600;
}
.RmweFEdG { white-space: pre-wrap; }

.Spi6p_DL {
	display: flex; align-items: center; gap: 8px;
	padding: 10px 14px;
	background: rgba(255,255,255,0.02);
	border: 1px dashed rgba(255,255,255,0.1);
	border-radius: 8px;
	color: #6b7280;
	font-size: 11.5px;
	font-style: italic;
	margin: 0 0 16px;
}

.stzo_59t { margin: 0 0 14px; color: #e5e5e5; }

.VILI0XoG {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 12px;
	padding: 14px 16px;
}
.Fl4edaV5 { color: #ffffff; font-weight: 700; }
.aTXg6tLh   { color: #9ca3af; }
.yhlnWjbM    { color: #cbd5e1; }
.yhlnWjbM strong { color: #cbd5e1; }
.s8fHTj7l { margin-top: 12px; color: #cbd5e1; }
.s8fHTj7l strong { color: #ffffff; }
.JNIp6VDK {
	margin: 6px 0 0;
	padding-left: 18px;
	color: #cbd5e1;
}

.mcb8nMH2 {
	margin-top: 14px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 12px;
	padding: 12px 16px;
}
.wnO035ES {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 0;
	font-size: 12.5px;
}
.V6feZBkF { color: #9ca3af; }
.VPVnwRFQ { color: #ffffff; font-weight: 600; }

.SvJbl7Cu { text-align: center; padding: 22px 0 4px; }
.dpCiQkCE {
	display: inline-block; padding: 13px 30px;
	background: #22d3ee; color: #000000; border: none; border-radius: 12px;
	font-size: 13px; font-weight: 700; letter-spacing: 0.3px;
	cursor: default; font-family: inherit;
}

/* Wallet pill - mirrors the Apple/Google Wallet button on the real
   email (template lifted from utils/emailTemplates/ticket.js). White
   background, black text, fully-rounded pill, full-width within the
   card. Followed by a small italic note that lines up with the one
   the ticket email shows. */
.I2FsLfFd {
	margin-top: 18px;
	text-align: center;
}
.L90jjgcg {
	display: block;
	background: #ffffff;
	color: #000000;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.2px;
	padding: 12px 0;
	border-radius: 50px;
	cursor: default;
	font-family: inherit;
}
.bgGnS1yA {
	color: #9ca3af;
	font-size: 11px;
	line-height: 1.6;
	padding-top: 10px;
}

.RS1rayJR {
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px solid rgba(255,255,255,0.06);
	color: #9ca3af;
	font-size: 11.5px;
	line-height: 1.6;
}

.KwJfksa_ {
	text-align: center;
	padding-top: 18px;
	color: #9ca3af;
	font-size: 11px;
	line-height: 1.6;
}
.KwJfksa_ a { color: #ffffff; text-decoration: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
	.HAC6l36y { grid-template-columns: 1fr; }
	.jHil0xFM { display: none; }
}

.UcSEE3Zx {
	position: absolute;
	inset: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Mobile-only segmented toggle. Hidden on desktop - both panes are
   visible side-by-side. Shown on phones so the operator can switch
   between the bookings list and the floor plan, each taking the full
   screen width when active. */
.VW9xIkRO {
	display: none;
}

.luZ_3M12 {
	flex: 1 1;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.7);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 999px;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.luZ_3M12:hover {
	color: rgba(255, 255, 255, 0.95);
	border-color: rgba(255, 255, 255, 0.18);
}

.fvSJKHUx,
.fvSJKHUx:hover {
	background: rgba(74, 158, 237, 0.15);
	border-color: rgba(74, 158, 237, 0.45);
	color: #ffffff;
}

.luZ_3M12 i {
	font-size: 11px;
}

/* 60/40 horizontal split. Bookings list on the left (uses RequestRow,
   matches the Requests tab), floor plan on the right. */
.ERDkcli2 {
	display: grid;
	grid-template-columns: 60% 40%;
	grid-gap: 12px;
	gap: 12px;
	width: 100%;
	flex: 1 1;
	min-height: 0;
	box-sizing: border-box;
}

._gbXXtEV {
	min-height: 0;
}

/* ─ Mobile ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.VW9xIkRO {
		display: flex;
		gap: 6px;
		padding: 10px 12px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
		flex-shrink: 0;
	}

	.ERDkcli2 {
		display: block;
		gap: 0;
		padding: 8px;
	}

	/* Whichever pane isn't active in the mobile toggle is hidden so
	   the active one gets the full width + height. */
	.ERDkcli2.tcVj9AvL .i8l2AhZQ,
	.ERDkcli2.mKnMvf6h ._gbXXtEV {
		display: none;
	}

	.ERDkcli2.tcVj9AvL ._gbXXtEV,
	.ERDkcli2.mKnMvf6h .i8l2AhZQ {
		height: 100%;
	}

	/* The filter bar on tight screens wraps to a second row; tighter
	   padding so the chips don't shove the search field off-screen. */
	.Q7BHVoNv {
		padding: 8px 12px;
		gap: 4px;
	}

	.D5P5CfsW {
		height: 26px;
		padding: 0 10px;
		font-size: 11px;
	}
}

/* Even tighter (small phones): collapse the "Create booth" button
   label so just the + icon is visible, freeing room for the search. */
@media (max-width: 480px) {
	.ngDqfTg7 {
		display: none;
	}
}

/* Scope filter chips - segmented strip beneath the bookings list header.
   Drives the list AND the floor plan's booking overlay simultaneously. */
.Q7BHVoNv {
	display: flex;
	gap: 6px;
	padding: 10px 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.5);
	flex-wrap: wrap;
}

.D5P5CfsW {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.6);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.D5P5CfsW:hover {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
	color: rgba(255, 255, 255, 0.9);
}

.db4CRL_R,
.db4CRL_R:hover {
	background: rgba(74, 158, 237, 0.15);
	border-color: rgba(74, 158, 237, 0.45);
	color: #ffffff;
}

.D5P5CfsW i {
	font-size: 10px;
}

/* Floor plan pane - no background; the canvas sits transparently in
   the column so the floor plan reads as the page itself. */
.i8l2AhZQ {
	min-height: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.Vu7cCIxj {
	flex: 1 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.drbam16K {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
}

.drbam16K::-webkit-scrollbar {
	display: none;
}

.SXLpSXiE {
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.1);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.SXLpSXiE:hover {
	color: rgba(255, 255, 255, 0.85);
	border-color: rgba(255, 255, 255, 0.2);
}

.DjiV3De_,
.DjiV3De_:hover {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.3);
}

/* The slot the canvas fits into. Flexes to take all remaining vertical
   space; FitCanvas measures it (via ResizeObserver) and sizes the floor
   plan box to the largest aspect-ratio-preserving rectangle that fits
   inside the slot - no scroll. */
.TWElrk0I {
	flex: 1 1;
	min-height: 0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.u1iT1lDD {
	position: relative;
}

.tqrAPJ1L {
	position: absolute;
	inset: 0;
}

.Aey8qpkc {
	margin: auto;
	color: rgba(255, 255, 255, 0.5);
	font-size: 13px;
	padding: 40px;
}

/* Loading placeholder inside the floor plan pane. Fills the pane so it
   reads as the same card while the data loads. */
.n1u02XC3 {
	flex: 1 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: rgba(255, 255, 255, 0.55);
}

.n1u02XC3 i {
	font-size: 22px;
	color: rgba(255, 255, 255, 0.35);
}

.n1u02XC3 p {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
}


/* Form-level bits only - the drawer chrome (backdrop, slide-in panel,
   header, body, footer, primary/secondary buttons, section headings)
   comes from drawers/Drawer.module.css so this surface stays in sync
   with RequestDetailModal and the other drawers. */

/* ── Two-column body: form on the left, live email preview on right.
   Mirrors the layout of BoothApprovalModal so the operator sees the
   same "build → preview" pairing they get when approving a real
   request. */
/* The drawer itself transitions width. Default base width is sized
   for just the form column; valid email unlocks the wider state so
   the email preview has room. Specificity hack: the chained class
   selector beats Drawer.module.css's `.drawer { width: 680px }` rule
   regardless of import order, so we don't need !important. */
.BlK9Vu_J.BlK9Vu_J {
	width: 560px;
	transition: width 380ms cubic-bezier(0.4, 0, 0.2, 1);
}

.gKu1ajTB.gKu1ajTB {
	width: 920px;
}

/* Flex-based body so the form column stays at a stable width while
   the preview column flexes into whatever room the drawer has just
   exposed. */
.X8eTDQIR {
	flex: 1 1;
	display: flex;
	min-height: 0;
	overflow: hidden;
	background: var(--bg-dark);
}

/* Hidden state: preview column squeezed to nothing, form column
   keeps its identity. We don't transition flex / width on the
   columns themselves - the drawer's width transition + the right
   column's opacity fade together read as a single smooth motion. */
.xPCguWrG .DdCCeSQR {
	border-right-color: transparent;
}

@media (max-width: 900px) {
	.BlK9Vu_J.BlK9Vu_J,
	.gKu1ajTB.gKu1ajTB {
		/* Full-screen on mobile - hide the preview entirely, the form
		   takes everything. */
		width: 100vw;
		max-width: 100vw;
		transition: none;
	}
}

.DdCCeSQR {
	/* Fixed form-column width. As the drawer expands, this column
	   keeps its identity and the right column absorbs the extra
	   space - feels much more stable than a 50/50 split that
	   reshuffles every input field. */
	flex: 0 0 540px;
	min-width: 0;
	border-right: 1px solid rgba(255, 255, 255, 0.07);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color 240ms ease;
}

@media (max-width: 900px) {
	.DdCCeSQR {
		flex: 1 1;  /* shrink to fit the full-width mobile drawer */
	}
}

.nsKjNp8T {
	flex: 1 1;
	overflow-y: auto;
	padding: 20px 24px;
}

.nsKjNp8T::-webkit-scrollbar { width: 3px; }
.nsKjNp8T::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }

/* 1:1 copy of `.right` in RequestsDev/BoothApprovalModal.module.css
   so EmailPreview renders identically here. `email_frame` (the phone-
   shaped panel inside EmailPreview) has flex: 1 and relies on this
   container being a flex column with overflow: hidden - otherwise it
   collapses to its content height and the preview reads as a small
   floating card instead of the full "phone screen". */
.Z3jJsQlX {
	flex: 1 1;
	background: #080a14;
	display: flex;
	flex-direction: column;
	padding: 20px;
	gap: 12px;
	min-height: 0;
	min-width: 0;
	overflow: hidden;
	opacity: 1;
	/* Delay the fade-in until the drawer width transition is mostly
	   complete - reads as "the room is made first, then the content
	   arrives", which is more elegant than fading in over an
	   in-flight resize. */
	transition: opacity 200ms ease-out 220ms;
}

/* When invalid (drawer is narrow), the column has near-zero width
   thanks to the drawer width transition; we hide the content
   instantly so it doesn't bleed into the closing drawer's silhouette. */
.xPCguWrG .Z3jJsQlX {
	opacity: 0;
	pointer-events: none;
	transition: opacity 140ms ease-in;
}

@media (max-width: 900px) {
	.Z3jJsQlX {
		display: none;  /* no room for the preview on phones */
	}
}

/* ─── Phone-specific tightening ─────────────────────────────────── */
@media (max-width: 600px) {
	.nsKjNp8T {
		padding: 14px 16px;
	}

	.RVlqGyz0 {
		grid-template-columns: 1fr;  /* stack name fields, email + phone, guest rows */
		gap: 8px;
		margin-bottom: 8px;
	}

	.gsy32QEz {
		font-size: 14px;  /* 14px avoids iOS Safari auto-zoom on focus */
		padding: 11px 12px;
	}

	.HAoxCVba {
		min-height: 64px;
	}

	.YZzjrC2E {
		font-size: 14px;
		padding: 11px 12px;
	}

	.AVuG3Sd4 {
		font-size: 14px;
		padding: 11px 12px;
	}

	.okqxXGee {
		max-height: 240px;
	}

	.Q70XFoA7 {
		height: 32px;
		padding: 0 12px;
		font-size: 12px;
	}

	.XjX6Cp8C {
		width: 32px;
		height: 32px;
	}

	.rFnaoQHg {
		flex-wrap: wrap;
		gap: 6px;
	}
}

.NyX1gpQi {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 !important;
}

.NyX1gpQi i {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.45);
}

/* Vertical collapse helper for the "Custom email message" section.
   Hidden state: zero height + faded out. Open state: enough room for
   the textarea + hint. Uses max-height instead of height so the
   browser doesn't need to know the intrinsic size up front. */
.y841okwM {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 280ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 200ms ease-out;
	overflow: hidden;
}

.y841okwM > * {
	min-height: 0;
}

.EMdG3S75 {
	grid-template-rows: 1fr;
	opacity: 1;
	transition-delay: 80ms;
}

.FZ3n0goy {
	margin-left: 8px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, 0.35);
	font-size: 11px;
}


.Dl0oCM0m {
	display: flex;
	flex-direction: column;
	gap: 6px;
	flex: 1 1;
	min-width: 0;
}

.d8Tsfhh_ {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.65);
	font-weight: 500;
}

.JiEWAMhs {
	color: #f87171;
	margin-left: 2px;
}

.RVlqGyz0 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 10px;
	gap: 10px;
	margin-bottom: 10px;
}

.RVlqGyz0:last-child {
	margin-bottom: 0;
}

@media (max-width: 480px) {
	.RVlqGyz0 { grid-template-columns: 1fr; }
}

.gsy32QEz {
	width: 100%;
	box-sizing: border-box;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #ffffff;
	padding: 10px 12px;
	font-size: 13px;
	font-family: inherit;
	outline: none;
	transition: border-color 0.15s, background 0.15s;
}

.gsy32QEz:focus {
	border-color: rgba(74, 158, 237, 0.6);
	background: rgba(255, 255, 255, 0.05);
}

.HAoxCVba {
	resize: vertical;
	min-height: 60px;
	line-height: 1.4;
}

.U7ztKpIX {
	margin: 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
}

.UQFvmNKV {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(239, 68, 68, 0.10);
	border: 1px solid rgba(239, 68, 68, 0.30);
	color: #f87171;
	font-size: 13px;
}

/* ── Package "selected" pill (single-option case) ────────────────── */
.vKBcGHpJ {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 999px;
	background: rgba(74, 158, 237, 0.10);
	border: 1px solid rgba(74, 158, 237, 0.30);
	font-size: 13px;
	color: #ffffff;
}

.vKBcGHpJ i {
	color: #4a9eed;
	font-size: 12px;
}

.qv4QnpeH {
	margin-left: 6px;
	color: rgba(255, 255, 255, 0.7);
	font-weight: 600;
}

/* ── Party section ───────────────────────────────────────────────── */
.rFnaoQHg {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.MpswyG7L {
	margin-left: 8px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, 0.5);
	font-size: 11px;
}

.Q70XFoA7 {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	margin-bottom: 10px;
}

.Q70XFoA7:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.22);
}

.Q70XFoA7 i {
	font-size: 10px;
}

.QBcGcjhD {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.k1CJgpVc {
	display: flex;
	align-items: center;
	gap: 8px;
}

.MetUR5mM {
	flex: 1 1;
	min-width: 0;
}

.XjX6Cp8C {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.5);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.XjX6Cp8C:hover {
	background: rgba(239, 68, 68, 0.12);
	color: #f87171;
	border-color: rgba(239, 68, 68, 0.35);
}

/* ── Custom dropdown ─────────────────────────────────────────────── */
.YYsPfvMx {
	position: relative;
	width: 100%;
}

.YZzjrC2E {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	color: #ffffff;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	text-align: left;
	transition: border-color 0.15s, background 0.15s;
}

.YZzjrC2E:hover {
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.05);
}

.xjBZCx7I {
	border-color: rgba(74, 158, 237, 0.6);
	background: rgba(255, 255, 255, 0.05);
}

.SagSimkZ {
	flex: 1 1;
	min-width: 0;
	display: flex;
	align-items: baseline;
	gap: 8px;
	overflow: hidden;
}

.oEE1J1Wm {
	color: #ffffff;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.JDni8ebz {
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
}

.A2gIEoqg {
	color: rgba(255, 255, 255, 0.45);
}

.KB35f1oT {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	transition: transform 0.15s;
}

._AlrwCOz {
	transform: rotate(180deg);
}

.okqxXGee {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 10;
	background: rgba(28, 30, 38, 0.98);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
	padding: 4px;
	max-height: 260px;
	overflow-y: auto;
}

.NYNBqQDa {
	padding: 12px;
	color: rgba(255, 255, 255, 0.4);
	font-size: 12px;
	text-align: center;
}

.AVuG3Sd4 {
	width: 100%;
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 9px 10px;
	border: none;
	background: transparent;
	border-radius: 6px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 13px;
	text-align: left;
	cursor: pointer;
	transition: background 0.12s;
}

.AVuG3Sd4:hover {
	background: rgba(255, 255, 255, 0.06);
	color: #ffffff;
}

.EcuGrHuY {
	background: rgba(74, 158, 237, 0.12);
	color: #ffffff;
}

.rZOPez_z {
	flex: 1 1;
	min-width: 0;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.j0cMMeg_ {
	color: rgba(255, 255, 255, 0.5);
	font-size: 12px;
}

.oeLJ5YPR {
	color: #4a9eed;
	font-size: 11px;
}

/* Team drawer content styles. The drawer chrome (header/footer/body)
   lives in IndEvent/drawers/Drawer.module.css; this module just owns
   the team-specific bits: search input, picker rows, limit cards. */

/* ── Search bar (sits between header and body) ──────────────── */

.P13UpxXA {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.75rem 1.5rem;
	background: rgba(0, 0, 0, 0.18);
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	flex-shrink: 0;
}

.Xe38uPoE {
	flex: 1 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.Xe38uPoE:focus-within {
	border-color: rgba(13, 122, 199, 0.5);
	background: rgba(255, 255, 255, 0.04);
}

.Xe38uPoE i {
	color: rgba(255, 255, 255, 0.4);
	font-size: 12px;
}

.Xe38uPoE input {
	flex: 1 1;
	min-width: 0;
	padding: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
}

.Xe38uPoE input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.k7XnQcvQ {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	background: rgba(255, 255, 255, 0.06);
	border: none;
	border-radius: 50%;
	color: rgba(255, 255, 255, 0.6);
	cursor: pointer;
	font-size: 9px;
}

.k7XnQcvQ:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--white);
}

/* ── Role-grouped picker (InviteTeamDrawer body) ─────────────── */

.pSeTRs7L {
	margin-bottom: 1.5rem;
}

.pSeTRs7L:last-child {
	margin-bottom: 0;
}

.Bt4m_eQx {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 0.6rem;
}

.KFECPMgn {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.DASmndYZ {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

/* Per-section "Select all / Deselect all" toggle. Lives next to the
   count so each role group has its own bulk shortcut - most common
   ask is "invite all promoters" but the same affordance makes
   "select all scanners" trivial too without bloating the UI. */
.sw4Kyrwl {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.55rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.75);
	font-family: var(--font-family);
	font-size: 11px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sw4Kyrwl:hover {
	background: rgba(13, 122, 199, 0.12);
	border-color: rgba(13, 122, 199, 0.45);
	color: var(--white);
}

.sw4Kyrwl i {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.55);
	transition: color 0.15s ease;
}

.sw4Kyrwl:hover i {
	color: var(--accent-1);
}

.E2SVDt_t {
	background: rgba(13, 122, 199, 0.14);
	border-color: rgba(13, 122, 199, 0.5);
	color: var(--white);
}

.E2SVDt_t i {
	color: var(--accent-1);
}

.r2KNmTsS {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.35);
	font-weight: 500;
}

.kMcRnyb5 {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.QYZuA6Ww {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.65rem 0.85rem;
	background: var(--sub-bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 10px;
	cursor: pointer;
	font-family: var(--font-family);
	text-align: left;
	width: 100%;
	transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

.QYZuA6Ww:hover {
	background: rgba(255, 255, 255, 0.025);
	border-color: rgba(255, 255, 255, 0.08);
}

.QYZuA6Ww:active {
	transform: scale(0.997);
}

.n2X4socY {
	border-color: rgba(13, 122, 199, 0.55);
	background: rgba(13, 122, 199, 0.08);
}

.n2X4socY:hover {
	background: rgba(13, 122, 199, 0.12);
}

._Lh9K5hN {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 13px;
	flex-shrink: 0;
}

.goMcGQhT {
	flex: 1 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.AnzibU83 {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.yUVw0AHY {
	margin: 0;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.45);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.x1bYWdBA {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.18);
	background: transparent;
	color: transparent;
	flex-shrink: 0;
	font-size: 10px;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.n2X4socY .x1bYWdBA {
	background: var(--accent-1);
	border-color: var(--accent-1);
	color: var(--white);
}

/* Empty state inside the body when no members match search/filters */
.BjCtgjh1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 3rem 1rem;
	color: rgba(255, 255, 255, 0.45);
}

.D7QHVGM7 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.5);
	font-size: 18px;
}

.BjCtgjh1 p {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
}

.iYvb1Ekg {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.3);
}

/* Loading shimmer (mirrors guest list skeletons for consistency) */
.wqS5INnp {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.65rem 0.85rem;
	background: var(--sub-bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 10px;
}

.Ut8AISKq {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.05);
	animation: pujA8Wtv 1.4s ease-in-out infinite;
}

.Q0aeReVr {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

._0x_V5NT_ {
	height: 10px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.05);
	animation: pujA8Wtv 1.4s ease-in-out infinite;
}

.a0ngBZA_  { width: 70%; }
.pHyhSimS { width: 45%; }

@keyframes pujA8Wtv {
	0%, 100% { opacity: 0.6; }
	50%      { opacity: 1; }
}

/* ── Discard banner (sticky alert above footer when user has selections) ─ */

.XgFow9zy {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.3rem 0.6rem;
	background: rgba(13, 122, 199, 0.18);
	border: 1px solid rgba(13, 122, 199, 0.4);
	border-radius: 999px;
	color: var(--white);
	font-size: 11px;
	font-weight: 600;
	font-family: var(--font-family);
}

.XgFow9zy i {
	font-size: 9px;
}

/* ── Validation banner inside the body ───────────────────────── */

.F2ET7SJ2 {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.75rem 0.9rem;
	background: rgba(249, 115, 22, 0.08);
	border: 1px solid rgba(249, 115, 22, 0.3);
	border-radius: 8px;
	color: #f97316;
	font-size: 12px;
	font-family: var(--font-family);
	margin-bottom: 1rem;
}

.F2ET7SJ2 i {
	font-size: 11px;
	margin-top: 1px;
}

/* ──────────────────────────────────────────────────────────────
   Promoter Limits Drawer · shared-config layout.

   The drawer presents ONE form whose values apply to every promoter
   in the batch (1 promoter for single edit, N for bulk / pre-invite).
   The previous per-promoter card design was retired - sales feedback
   was that 95% of the time every promoter gets the same policy and
   only a handful of exceptions need bespoke configs (which the
   single-edit context still supports).

   Visual hierarchy:
     1. Optional intro / mixed-values banner
     2. Quick action row (Allow all / Allow none / cap-all)
     3. Section title strip ("Ticket types · N / M enabled")
     4. Stack of ticket type rows (checkbox zone + cap stepper)
   ────────────────────────────────────────────────────────────── */

.Pa67tIUx {
	padding: 0.85rem 1rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 12px;
	line-height: 1.55;
	margin-bottom: 1rem;
}

/* Quick-action row - Allow all / Allow none + cap-all input. */
.t4kAUCCK {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.85rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.k9Fy8xsh {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin-right: 0.25rem;
}

.uxqsJbXX {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.7rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.uxqsJbXX:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.14);
}

.uxqsJbXX:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.uxqsJbXX i {
	font-size: 10px;
	color: rgba(255, 255, 255, 0.55);
}

.E1NeuAl_ {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin-left: auto;
}

.yvMF2YhB {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.55);
}

/* ── Per-promoter sections (bulkEdit) ─────────────────────── */

.ikEOQsHS {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.jbK3QgS1 {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0.85rem 0.9rem 0.9rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 12px;
}

.hPhhqWMN {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.Wg8GgBFh {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	min-width: 0;
}

.i2w_3bBp {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: rgba(13, 122, 199, 0.16);
	color: #5fb8ff;
	font-size: 11px;
	flex-shrink: 0;
}

.umz7OWnF {
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.JLM9lE1n {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0.65rem;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	flex-shrink: 0;
}

.JLM9lE1n:hover {
	background: rgba(13, 122, 199, 0.14);
	border-color: rgba(13, 122, 199, 0.35);
	color: #9bd1ff;
}

/* ── Ticket type list ─────────────────────────────────────── */

.ynCLwH6P {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 0.6rem;
}

.S7oCgynR {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.tYaYPpP2 {
	font-size: 11px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.5);
}

.TdMWt6lf {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

/* Ticket type row - static config row. Left zone is the label
   (icon + name + price), right zone is the cap stepper. Every row
   is always "on" so there's no toggle, hover state, or cursor hint. */
.mNlloFiO {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.75rem;
	background: var(--sub-bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 10px;
}

.j631eUll {
	flex: 1 1;
	display: flex;
	align-items: center;
	gap: 0.7rem;
	min-width: 0;
	padding: 0.15rem 0;
	background: none;
	border: none;
	color: inherit;
	font-family: var(--font-family);
	text-align: left;
}

.hC6atUKe {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.55);
	font-size: 11px;
	flex-shrink: 0;
}

.vt2rWDCY .hC6atUKe {
	background: rgba(13, 122, 199, 0.16);
	color: #5fb8ff;
}

.IQVd7WYz {
	flex: 1 1;
	min-width: 0;
}

.cNLIBO_x {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
}

.q12mtpAl {
	margin: 0;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.45);
}

.kX_TrkJG {
	flex-shrink: 0;
	min-width: 92px;
	display: flex;
	justify-content: flex-end;
}

.aQUVNsAA {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.3);
	font-style: italic;
}

/* Number stepper */
.HHsFx5bs {
	display: flex;
	align-items: center;
	gap: 0;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
}

.j7jpqBYu {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: none;
	border: none;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.j7jpqBYu:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
}

.j7jpqBYu i {
	font-size: 10px;
}

.SrJ2Nbwy {
	width: 48px;
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: var(--white);
	font-family: var(--font-family);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.12s ease;
}

.SrJ2Nbwy:focus-within {
	background: rgba(13, 122, 199, 0.12);
}

/* Keep input editable - pointer-events removed so the user can click
   to focus and type. The infinity overlay (when value is -1) sits
   above the input but ignores pointer events so a click still lands
   on the input. */
.SrJ2Nbwy input {
	width: 100%;
	background: transparent;
	border: none;
	color: inherit;
	text-align: center;
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 600;
	outline: none;
	cursor: text;
	padding: 0.45rem 0;
	-moz-appearance: textfield;
}

.SrJ2Nbwy input::-webkit-outer-spin-button,
.SrJ2Nbwy input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.Vp2S6Mbe {
	position: absolute;
	pointer-events: none;
	color: rgba(255, 255, 255, 0.85);
}

/* ── Footer button states (mandatory-limits gate) ──────────────
   When at least one selected promoter is missing per-ticket caps,
   the secondary button gets an amber treatment + the count pill
   shifts to amber so the user reads "this is the required next
   step" instead of the usual passive secondary tone. */
.ZKDyU2DF {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	margin-left: 0.25rem;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	color: var(--white);
}

.SArLzD3C {
	background: rgba(249, 115, 22, 0.85);
	color: #1a1d23;
}

.ob4B718l {
	background: rgba(249, 115, 22, 0.12) !important;
	color: var(--white) !important;
	border-color: rgba(249, 115, 22, 0.45) !important;
}

.ob4B718l:hover:not(:disabled) {
	background: rgba(249, 115, 22, 0.18) !important;
	border-color: rgba(249, 115, 22, 0.6) !important;
}

.ob4B718l i {
	color: #f97316 !important;
}

/* ── Loading state for the drawer body ─────────────────────── */

.zJJZlRnO {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 1rem;
}

.zJJZlRnO img {
	width: 80px;
	height: 80px;
}

/* Outer wrapper - single scroll surface for the whole Announcements
   tab. The parent .content_widget_container has overflow:hidden + a
   fixed height, so the composer + intro hint + timeline all share
   ONE vertical scroll instead of fighting nested scroll containers.
   This avoids the bug where opening the Guestii Compose Filters
   pushed the composer below the fold with no way to scroll to it.

   Mobile (<= 768px) inherits this naturally - the parent flips to
   overflow:visible at that width, so the page-level scroll takes
   over and this rule effectively no-ops. */
.rrD534Lf {
	height: 100%;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-bottom: 1.5rem;

	/* Always-visible scrollbar - modern browsers hide it by default
	   on track-pad devices, which made the bottom of the timeline
	   look "cut off" rather than "more below". A thin tinted thumb
	   reads as page chrome, not an OS-loud scrollbar. */
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.rrD534Lf::-webkit-scrollbar {
	width: 8px;
}

.rrD534Lf::-webkit-scrollbar-track {
	background: transparent;
}

.rrD534Lf::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	-webkit-transition: background 120ms ease;
	transition: background 120ms ease;
}

.rrD534Lf::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.18);
}


/* On mobile the parent flips to overflow:visible + min-height (see
   .content_widget_container @ 768px in IndEvent.module.css). Hand
   scroll back to the page so users aren't trapped inside a tiny
   nested viewport. */
@media (max-width: 768px) {
	.rrD534Lf {
		height: auto;
		max-height: none;
		overflow: visible;
	}
}

/* Announcements - composer + audience picker + list-row enrichment.

   The announcement timeline shell (`outer_announcements`,
   `annoucement_msg_container`, etc.) still lives in IndEvent.module.css
   for now; this module owns the new bits that came with the rebuild:

     • Channel segmented control (Team vs Guestii) - replaces the
       former left-rail "Channels" picker so the timeline gets the
       full pane width.
     • Composer card (audience picker + body textarea + send action)
     • Audience picker - segmented mode switch + role/individual chips
     • Audience pill rendered on each list row
     • Delivery stats strip rendered on email rows

   Sized for the existing IndEvent right-pane layout (no max-width
   constraints; takes whatever the parent grid gives it).
*/

/* ── Channel segmented control ─────────────────────────────────
   Top-of-tab control that replaces the sidebar Channels picker.
   Two options only (Team / Guestiis) so a horizontal pill is the
   right pattern: it makes the choice scannable without consuming
   a column of screen real estate. Each option carries an icon,
   label, and tiny subtitle so the delivery medium (in-app+push vs
   email) reads at a glance. */
.kCgWgsUf {
	display: inline-flex;
	gap: 0;
	padding: 4px;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	width: -webkit-fit-content;
	width: fit-content;
	max-width: 100%;
}

.EV8rkXlh {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.55rem 1rem;
	background: transparent;
	border: none;
	border-radius: 9px;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--font-family);
	cursor: pointer;
	transition: background 120ms ease, color 120ms ease;
	text-align: left;
	min-width: 0;
}

.EV8rkXlh:hover:not(.nyJVIpdv) {
	color: rgba(255, 255, 255, 0.85);
}

.nyJVIpdv {
	background: rgba(13, 122, 199, 0.18);
	color: var(--white);
	box-shadow: inset 0 0 0 1px rgba(13, 122, 199, 0.4);
}

.r1T0O1Md {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.55);
	font-size: 11px;
	flex-shrink: 0;
}

.nyJVIpdv .r1T0O1Md {
	background: rgba(13, 122, 199, 0.32);
	color: var(--white);
}

.AoAE9CPH {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.U2d6tglX {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
}

.fClMmNwI {
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.4);
	white-space: nowrap;
}

.nyJVIpdv .fClMmNwI {
	color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 600px) {
	.kCgWgsUf {
		width: 100%;
	}

	.EV8rkXlh {
		flex: 1 1;
		justify-content: center;
		padding: 0.5rem 0.75rem;
	}

	.fClMmNwI {
		display: none;
	}
}

/* ── AnnounceDrawer body ──────────────────────────────────────
   When the composer renders inside the right-sliding drawer (vs the
   full-tab layout) the body needs vertical stacking with breathing
   room between the channel switcher, composer card, and footer hint.
   The drawer body already provides 1.5rem padding; this just adds a
   consistent gap between children so the channel segmented control
   isn't glued to the composer card. */
.tiB6VdSL {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.kWHNTbJY {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.65rem 0.8rem;
	background: rgba(13, 122, 199, 0.06);
	border: 1px solid rgba(13, 122, 199, 0.16);
	border-radius: 10px;
	font-size: 11.5px;
	line-height: 1.45;
	color: rgba(255, 255, 255, 0.6);
}

.kWHNTbJY i {
	font-size: 11px;
	color: var(--accent-1);
	margin-top: 2px;
	flex-shrink: 0;
}

/* ── Composer card ─────────────────────────────────────────── */

.k2M4Eji8 {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 1rem;
	background: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 12px;
	font-family: var(--font-family);
}

.osRicjwV {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

.Gz6ZPm66 {
	width: 100%;
	min-height: 96px;
	padding: 0.75rem 0.85rem;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
	line-height: 1.5;
	resize: vertical;
	outline: none;
	transition: border-color 0.15s ease, background 0.15s ease;
	box-sizing: border-box;
}

.Gz6ZPm66:focus {
	border-color: rgba(13, 122, 199, 0.5);
	background: rgba(0, 0, 0, 0.28);
}

.Gz6ZPm66::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.q6Fk6BN2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.WpRmvl5X {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
}

.WpRmvl5X i {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.4);
}

.WpRmvl5X strong {
	color: var(--white);
	font-weight: 600;
}

._tvs_weU {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1rem;
	background: var(--accent-1);
	border: none;
	border-radius: 8px;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.08s ease;
}

._tvs_weU:hover:not(:disabled) {
	filter: brightness(1.1);
}

._tvs_weU:active:not(:disabled) {
	transform: scale(0.98);
}

._tvs_weU:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

/* ── Audience picker ──────────────────────────────────────── */

.dHPixZfp {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* Segmented control for mode switching (Everyone / By role / Individuals).
   Mirrors the dashboard's tab strips so the visual language is
   consistent across Edit Event, Lineup, and now Announcements. */
.MSYgcolh {
	display: inline-flex;
	gap: 0;
	padding: 3px;
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 999px;
	width: -webkit-fit-content;
	width: fit-content;
}

.xz1v21Zw {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	background: transparent;
	border: none;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.55);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.xz1v21Zw:hover:not(.am5TqRXc) {
	color: rgba(255, 255, 255, 0.85);
}

.am5TqRXc {
	background: rgba(13, 122, 199, 0.18);
	color: var(--white);
	font-weight: 600;
}

.xz1v21Zw i {
	font-size: 10px;
}

/* Role chips inside the "By role" mode panel */
.OFMQCnJx {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.GxchzkFE {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.7rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-family);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.GxchzkFE:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
}

.lr2UWhI2 {
	background: rgba(13, 122, 199, 0.18);
	border-color: rgba(13, 122, 199, 0.55);
	color: var(--white);
	font-weight: 600;
}

.GxchzkFE i {
	font-size: 9px;
	color: rgba(255, 255, 255, 0.4);
}

.lr2UWhI2 i {
	color: var(--accent-1);
}

.uyA20TdI {
	font-size: 10px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.4);
}

.lr2UWhI2 .uyA20TdI {
	color: rgba(255, 255, 255, 0.7);
}

/* Individual people picker - a compact searchable grid */
.u07EPbt7 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
}

.u07EPbt7:focus-within {
	border-color: rgba(13, 122, 199, 0.5);
}

.u07EPbt7 i {
	color: rgba(255, 255, 255, 0.4);
	font-size: 11px;
}

.u07EPbt7 input {
	flex: 1 1;
	min-width: 0;
	background: transparent;
	border: none;
	outline: none;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
}

.u07EPbt7 input::placeholder {
	color: rgba(255, 255, 255, 0.4);
}

.gbozYYf5 {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	max-height: 220px;
	overflow-y: auto;
	padding: 0.25rem;
	background: rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 8px;
}

.IYE7DzZ4 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0.6rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 7px;
	cursor: pointer;
	font-family: var(--font-family);
	text-align: left;
	transition: background 0.12s ease, border-color 0.12s ease;
}

.IYE7DzZ4:hover {
	background: rgba(255, 255, 255, 0.025);
}

.XycIbYHn {
	background: rgba(13, 122, 199, 0.1);
	border-color: rgba(13, 122, 199, 0.4);
}

.lCoSzZGS {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-size: 11px;
	flex-shrink: 0;
}

.W2dSpS78 {
	flex: 1 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.jPhKp7PH {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.Ot9dXHAA {
	margin: 0;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.4);
}

.U1uOOwGh {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid rgba(255, 255, 255, 0.2);
	background: transparent;
	color: transparent;
	flex-shrink: 0;
	font-size: 8px;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.XycIbYHn .U1uOOwGh {
	background: var(--accent-1);
	border-color: var(--accent-1);
	color: var(--white);
}

.XBL9kOu1 {
	padding: 1rem;
	text-align: center;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.4);
}

/* ── Audience pill (rendered on each list row) ─────────────── */

.dvCnaf4B {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.2rem 0.5rem;
	background: rgba(13, 122, 199, 0.14);
	border: 1px solid rgba(13, 122, 199, 0.32);
	border-radius: 999px;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 10px;
	font-weight: 600;
}

.EB9pQIwM {
	background: rgba(60, 162, 89, 0.14);
	border-color: rgba(60, 162, 89, 0.32);
}

.GTtfXpxQ {
	background: rgba(167, 139, 250, 0.14);
	border-color: rgba(167, 139, 250, 0.32);
}

.dvCnaf4B i {
	font-size: 9px;
	opacity: 0.85;
}

/* ── Email subject + delivery strip on list rows ──────────── */

.wYwDY32i {
	margin: 0 0 0.3rem;
	font-size: 13px;
	font-weight: 700;
	color: var(--white);
}

.GkFWPW5J {
	margin: 0;
	font-size: 12px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.75);
	white-space: pre-wrap;
}

.poIZhw3p {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 0.4rem;
}

.yU7cBMcu {
	margin: 0;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.45);
}

.yU7cBMcu strong {
	color: rgba(255, 255, 255, 0.75);
	font-weight: 600;
}

.u_nrtsTf {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: 0.55rem;
	padding-top: 0.55rem;
	border-top: 1px dashed rgba(255, 255, 255, 0.06);
	font-size: 11px;
}

.WvoPfkTe {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: rgba(255, 255, 255, 0.55);
}

.WvoPfkTe i {
	font-size: 9px;
}

.XIylTZ8y i { color: #22c55e; }
.oHcUpwRi  i { color: #f97316; }
.RT9I0gS0  i { color: #94a3b8; }

.WvoPfkTe strong {
	color: var(--white);
	font-weight: 600;
}

/* ── Subject line input (Guestii email composer) ──────────── */

.QW3oDGPN {
	width: 100%;
	padding: 0.7rem 0.85rem;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
	color: var(--white);
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: 500;
	outline: none;
	transition: border-color 0.15s ease, background 0.15s ease;
	box-sizing: border-box;
}

.QW3oDGPN:focus {
	border-color: rgba(13, 122, 199, 0.5);
	background: rgba(0, 0, 0, 0.28);
}

.QW3oDGPN::placeholder {
	color: rgba(255, 255, 255, 0.35);
}

.muj7q5LJ {
	margin: 0.3rem 0 0;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.35);
	text-align: right;
}

/* ── Compose filter groups (Guestii audience picker) ──────── */

.ud_zopgp {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	padding: 0.85rem;
	background: rgba(0, 0, 0, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 10px;
}

.gYe1FRJe {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.f1Cx3YFG {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.XcIO77_E {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.PLjLsp1p {
	margin: 0;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.35);
	font-style: italic;
}

.Cy97RiZE {
	margin: 0;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.3);
	font-style: italic;
}

/* ── Recipient resolution card ────────────────────────────── */

.ueLdWTn9 {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: 0.85rem 1rem;
	background: linear-gradient(135deg, rgba(13, 122, 199, 0.1), rgba(167, 139, 250, 0.06));
	border: 1px solid rgba(13, 122, 199, 0.25);
	border-radius: 10px;
}

.AfuHtGiB {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.AfuHtGiB > i {
	font-size: 18px;
	color: var(--accent-1);
}

.qcQKPqej {
	margin: 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
}

.qcQKPqej strong {
	color: var(--white);
	font-weight: 700;
	font-size: 15px;
}

.Z680aqYX {
	margin: 0.15rem 0 0;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
}

.bhR06foY {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.7rem;
	background: rgba(249, 115, 22, 0.12);
	border: 1px solid rgba(249, 115, 22, 0.3);
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
}

.bhR06foY i {
	color: #f97316;
	font-size: 11px;
}

.bhR06foY strong {
	color: var(--white);
	font-weight: 600;
}

/* ── Email preview drawer ─────────────────────────────────── */

/* Backdrop + frame reuse the IndEvent/drawers/Drawer.module.css
   conventions (opacity fade-in, slide from right) but the preview
   drawer sits a layer up since it's stacked over the composer. */

.Riswpo30 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1rem;
	background: rgba(13, 122, 199, 0.1);
	border: 1px solid rgba(13, 122, 199, 0.25);
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	margin-bottom: 1rem;
}

.Riswpo30 i {
	color: var(--accent-1);
	font-size: 14px;
}

.Riswpo30 strong {
	color: var(--white);
	font-weight: 700;
}

/* The fake email card. Mimics what the recipient will see -
   subject + sender + body + event footer - so the manager can
   sanity-check formatting before hitting Send. The actual HTML
   wrapping happens in the Resend template on the backend; this
   is a faithful preview, not the production render. */
.Y3kK_nav {
	background: #fafafa;
	color: #18181b;
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.WC4M0R_a {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.85rem 1rem;
	background: #ffffff;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	font-family: var(--font-family);
}

.vM0vEEhT {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	font-size: 11px;
	color: rgba(0, 0, 0, 0.55);
}

.LbQAxPx_ {
	font-weight: 600;
	min-width: 48px;
	color: rgba(0, 0, 0, 0.4);
}

.k7ZHpaoT {
	color: rgba(0, 0, 0, 0.8);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.spcuS78a {
	margin: 0.3rem 0 0;
	font-size: 16px;
	font-weight: 700;
	color: #18181b;
	font-family: var(--font-family);
}

.BVMb3RL1 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.75rem 1rem;
	background: linear-gradient(135deg, #0D7AC7, #1e90d8);
	color: #ffffff;
	font-family: var(--font-family);
}

.KVwpk2U5 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.18);
	font-size: 14px;
	flex-shrink: 0;
}

.cd5oNFTV {
	display: flex;
	flex-direction: column;
}

.Rw0gqjFf {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
}

.SVXEyzS_ {
	margin: 0;
	font-size: 11px;
	opacity: 0.85;
}

.dKYnoiRg {
	padding: 1rem;
	font-family: var(--font-family);
	font-size: 13px;
	line-height: 1.6;
	color: #27272a;
	white-space: pre-wrap;
}

.j6IepKLZ {
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	font-family: var(--font-family);
	font-size: 12px;
	color: rgba(0, 0, 0, 0.6);
}

.uREOr36s {
	padding: 0.6rem 1rem;
	background: #f4f4f5;
	border-top: 1px solid rgba(0, 0, 0, 0.06);
	font-family: var(--font-family);
	font-size: 10px;
	color: rgba(0, 0, 0, 0.45);
	text-align: center;
}

.F9VfgzzD {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1rem;
	margin-top: 1rem;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 10px;
}

.F9VfgzzD i {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.55);
}

.AfwMr3Bx {
	flex: 1 1;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
}

.AfwMr3Bx strong {
	color: var(--white);
	font-weight: 600;
}

/* ── Slim hint above the timeline (intro / empty state) ───── */

.P0ck0NlG {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.75rem 0.9rem;
	margin-top: 1rem;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 8px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 12px;
	line-height: 1.55;
}

.P0ck0NlG i {
	font-size: 11px;
	margin-top: 2px;
	color: rgba(255, 255, 255, 0.35);
}

/* DeleteEvent modal - matches the DeclineConfirmModal chrome so the
   destructive-confirm pattern is consistent across the page. Pop-in
   animation, centered card, red iconography, bottom action row. */

.scMK0UiZ {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	z-index: 2200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: PGnWXFcE 0.15s ease;
}

@keyframes PGnWXFcE { from { opacity: 0; } to { opacity: 1; } }

.ONojxfnf {
	width: 100%;
	max-width: 440px;
	background: #13151f;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
	padding: 28px 28px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	animation: JgIU9Je2 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes JgIU9Je2 {
	from { transform: scale(0.92); opacity: 0; }
	to   { transform: scale(1);    opacity: 1; }
}

.MDtv47b9 {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #ef4444;
}

.AGYB7nle {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--white);
}

.zBLf3ggN {
	margin: 0;
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.6;
}

.zBLf3ggN strong {
	color: var(--white);
	font-weight: 700;
}

.QcdKHb_Y {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
}

.QcdKHb_Y li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 14px;
	background: rgba(239, 68, 68, 0.06);
	border: 1px solid rgba(239, 68, 68, 0.15);
	border-radius: 8px;
	font-size: 12.5px;
	color: var(--text-secondary);
	line-height: 1.5;
}

.QcdKHb_Y li i {
	color: #ef4444;
	font-size: 13px;
	margin-top: 1px;
	flex-shrink: 0;
}

/* Confirmation input - operator must type the event name verbatim
   before the Delete button enables. Sits between the consequences
   list and the action row. */
._2PH2bqVI {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
	margin-top: 4px;
}

.wU6G9w0_ {
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
}

.wU6G9w0_ strong {
	color: #ffffff;
	font-weight: 700;
}

.pXuW6DUn {
	width: 100%;
	padding: 11px 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	color: var(--white);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.pXuW6DUn:focus {
	outline: none;
	border-color: rgba(239, 68, 68, 0.5);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.pXuW6DUn::placeholder {
	color: rgba(255, 255, 255, 0.25);
}

.tLTeBjbO {
	margin: 4px 0 0;
	font-size: 12px;
	color: #f87171;
	line-height: 1.5;
}

.bcQv20P2 {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-top: 6px;
}

.ned9PVpd {
	flex: 1 1;
	padding: 11px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-secondary);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
}

.ned9PVpd:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
}

.MMpR4_ZS {
	flex: 1 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 11px;
	background: #ef4444;
	color: #ffffff;
	border: none;
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s;
}

.MMpR4_ZS:hover:not(:disabled) {
	background: #dc2626;
}

.MMpR4_ZS:disabled {
	background: rgba(239, 68, 68, 0.3);
	color: rgba(255, 255, 255, 0.55);
	cursor: not-allowed;
}

/* CancelEvent modal - identical chrome to DeleteEvent so destructive
   actions read the same across the page. The only differences are
   the icon (ban vs triangle), the copy, and the side-effects
   (refunds + notifications instead of permanent delete). */

.lJN02SaI {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	z-index: 2200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: HugssgkT 0.15s ease;
}

@keyframes HugssgkT { from { opacity: 0; } to { opacity: 1; } }

.Tl9et22H {
	width: 100%;
	max-width: 460px;
	background: #13151f;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
	padding: 28px 28px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	animation: h7ZCpprg 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes h7ZCpprg {
	from { transform: scale(0.92); opacity: 0; }
	to   { transform: scale(1);    opacity: 1; }
}

.te3PTsNd {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	color: #ef4444;
}

.ziBmJGnZ {
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--white);
}

.Fkn04sVr {
	margin: 0;
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.6;
}

.Fkn04sVr strong {
	color: var(--white);
	font-weight: 700;
}

.fuDkYFnd {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	text-align: left;
}

.fuDkYFnd li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 14px;
	background: rgba(239, 68, 68, 0.06);
	border: 1px solid rgba(239, 68, 68, 0.15);
	border-radius: 8px;
	font-size: 12.5px;
	color: var(--text-secondary);
	line-height: 1.5;
}

.fuDkYFnd li i {
	color: #ef4444;
	font-size: 13px;
	margin-top: 1px;
	flex-shrink: 0;
}

.fuDkYFnd li strong {
	color: var(--white);
	font-weight: 700;
}

.mXmtXWnL {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
	margin-top: 2px;
}

.fNi4xt_K {
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
}

.ggzj9V6n {
	width: 100%;
	min-height: 60px;
	padding: 11px 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	color: var(--white);
	font-family: inherit;
	font-size: 13px;
	line-height: 1.5;
	resize: vertical;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.ggzj9V6n:focus {
	outline: none;
	border-color: rgba(239, 68, 68, 0.5);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.ggzj9V6n::placeholder {
	color: rgba(255, 255, 255, 0.25);
}

.nNNaJ1oH {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
	margin-top: 4px;
}

.nyoEo4kI {
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
}

.nyoEo4kI strong {
	color: #ffffff;
	font-weight: 700;
}

.I3WvkxvI {
	width: 100%;
	padding: 11px 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	color: var(--white);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.I3WvkxvI:focus {
	outline: none;
	border-color: rgba(239, 68, 68, 0.5);
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.I3WvkxvI::placeholder {
	color: rgba(255, 255, 255, 0.25);
}

.HAS6PwVJ {
	margin: 4px 0 0;
	font-size: 12px;
	color: #f87171;
	line-height: 1.5;
}

.B4weBNR7 {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	margin-top: 6px;
}

.P9xi5gcH {
	flex: 1 1;
	padding: 11px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-secondary);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s;
}

.P9xi5gcH:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
}

.zvawXjaf {
	flex: 1 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 11px;
	background: #ef4444;
	color: #ffffff;
	border: none;
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s;
}

.zvawXjaf:hover:not(:disabled) {
	background: #dc2626;
}

.zvawXjaf:disabled {
	background: rgba(239, 68, 68, 0.3);
	color: rgba(255, 255, 255, 0.55);
	cursor: not-allowed;
}

.Opte_Rgd {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.65);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	z-index: 2000;
	animation: Zw6eRt0e 200ms ease-out;
}

.jnoVpD0V {
	animation: Cqhtjdbc 200ms ease-in forwards;
}

.hdhzfCjK {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2001;
	width: min(440px, calc(100vw - 32px));
	background: #15171f;
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 18px;
	padding: 32px 28px 24px;
	box-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	animation: WvBrLijy 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.Ycc6Sez3 {
	animation: I2LI3LKd 180ms ease-in forwards;
}

.Qloz4HsX {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(239, 68, 68, 0.12);
	color: #ef4444;
	display: grid;
	place-items: center;
	font-size: 22px;
	margin-bottom: 18px;
}

.U_WXjo1E {
	margin: 0;
	font-size: 18px;
	font-weight: 600;
	color: #ffffff;
	letter-spacing: -0.01em;
}

.m6Phiax1 {
	margin: 8px 0 24px;
	font-size: 13.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.62);
	max-width: 340px;
}

.hXpiNWmV {
	display: flex;
	gap: 10px;
	width: 100%;
}

.qh71nORn,
.qjpHjPjs {
	flex: 1 1;
	height: 42px;
	border-radius: 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

.qh71nORn {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.85);
}

.qh71nORn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.14);
}

.qjpHjPjs {
	background: #ef4444;
	border: 1px solid #ef4444;
	color: #ffffff;
}

.qjpHjPjs:hover:not(:disabled) {
	background: #dc2626;
	border-color: #dc2626;
}

.qh71nORn:disabled,
.qjpHjPjs:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

@keyframes Zw6eRt0e {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes Cqhtjdbc {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes WvBrLijy {
	from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes I2LI3LKd {
	from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	to   { opacity: 0; transform: translate(-50%, -48%) scale(0.97); }
}

:root {
	--white: #ffffff;
	--black: #000000;
	--bg-dark: #01000D;
	--sub-bg-dark: #161824;
	--sub-bg-light: #f0f1f2;
	--accent-1: #0D7AC7;
	--success-green: #3CA259;
	--cancelled-red: #ff2626;

	--text-primary: #ffffff;
	--text-secondary: rgb(151, 163, 180);
	--text-muted: rgb(120, 132, 150);
	--border-soft: #2d2f39;
	--border-softer: rgba(255, 255, 255, 0.08);

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-pill: 999px;
}

.t-xs1 { font-size: 8px; }
.t-xs2 { font-size: 10px; }
.t-xs3 { font-size: 12px; }
.t-s1  { font-size: 14px; }
.t-s2  { font-size: 15px; }
.t-s3  { font-size: 16px; }
.t-m1  { font-size: 17px; }
.t-m2  { font-size: 22px; }
.t-m3  { font-size: 25px; }
.t-l1  { font-size: 28px; }
.t-l2  { font-size: 31px; }
.t-l3  { font-size: 34px; }
.t-xl1 { font-size: 37px; }
.t-xl2 { font-size: 40px; }
.t-xl3 { font-size: 43px; }

.t-bold   { font-weight: 600; }
.t-bolder { font-weight: 700; }

.t-muted   { color: var(--text-muted); }
.t-subtle  { color: var(--text-secondary); }
.t-primary { color: var(--text-primary); }

.ozZB4ftV {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: 8px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
	white-space: nowrap;
	-webkit-user-select: none;
	        user-select: none;
}

.ozZB4ftV:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.gk1WLcfJ { padding: 10px 20px; font-size: 14px; }
.lTRP65eR { padding: 6px 14px;  font-size: 12px; }

.uPJpYx2c {
	background-color: var(--accent-1);
	color: var(--white);
}
.uPJpYx2c:hover:not(:disabled) { background-color: #0e88dd; }

.ClqBmIwv {
	background-color: var(--sub-bg-dark);
	border-color: var(--border-soft);
	color: var(--white);
}
.ClqBmIwv:hover:not(:disabled) { border-color: var(--border-softer); }

.FBkHIL59 {
	background-color: transparent;
	border-color: var(--border-soft);
	color: var(--white);
}
.FBkHIL59:hover:not(:disabled) { background-color: var(--sub-bg-dark); }

.WlJGbsQ5 {
	background-color: var(--cancelled-red);
	color: var(--white);
}
.WlJGbsQ5:hover:not(:disabled) { background-color: #e01d1d; }

.S6KPDv1w {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	flex-shrink: 0;
}

.FOIyfBDI {
	width: 100%;
	min-height: 160px;
	border-radius: var(--radius-lg);
	background-color: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	padding: 22px 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	row-gap: 0.75rem;
	position: relative;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.FOIyfBDI:hover {
	border-color: var(--border-softer);
}

.LrTzPXJP {
	min-height: 120px;
	border-radius: var(--radius-md);
	padding: 14px 16px;
	row-gap: 0.55rem;
}

._scNZIIJ {
	display: flex;
	align-items: center;
	column-gap: 0.75rem;
}

.aUF4m3gz {
	column-gap: 0.55rem;
}

.z21e2FH5 {
	height: 36px;
	width: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.rqKDpWa6 {
	height: 28px;
	width: 28px;
	border-radius: 8px;
}

.z21e2FH5 i {
	font-size: 14px;
}

.rqKDpWa6 i {
	font-size: 12px;
}

.zPtHXpo6 {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.zSwgdbyV {
	font-size: 10px;
}

.ccnEuc9r {
	font-size: 32px;
	font-weight: 800;
	color: var(--text-primary);
	line-height: 1;
	letter-spacing: -0.02em;
	display: flex;
	align-items: baseline;
	column-gap: 0.25rem;
}

.wunXES6Z {
	font-size: 22px;
}

.LiFMkvO9 {
	font-size: 20px;
	font-weight: 600;
	color: var(--text-secondary);
}

.EJhIM42N {
	font-size: 14px;
}

.Tf7BRz4g {
	font-size: 11px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--text-muted);
	margin: 0;
	letter-spacing: 0.01em;
}

.dfAkHyGx {
	width: 100%;
	min-height: 420px;
	border-radius: var(--radius-lg);
	background-color: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	padding: 24px 26px 22px 26px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	position: relative;
	overflow: hidden;
}

.h47Z0qX1 {
	display: flex;
	flex-direction: column;
	row-gap: 0.2rem;
	flex-shrink: 0;
}

.xzuLbFZ9 {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	column-gap: 1rem;
}

.gz9z9fvV {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: -0.01em;
}

.bqERndFu {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
}

.a_M7SR4n {
	width: 100%;
	flex: 1 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.gg7kje1u {
	height: 320px;
	flex-shrink: 0;
}

.jXrNNxUj {
	display: flex;
	align-items: center;
	column-gap: 8px;
	border-bottom: 1px solid var(--border-soft);
	padding-bottom: 0;
}

.pjvPFzvU {
	flex: 1 1;
}

.Tit1RFWx {
	background: transparent;
	border: none;
	padding: 10px 18px;
	margin-bottom: -1px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-secondary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	column-gap: 6px;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.Tit1RFWx:hover {
	color: var(--text-primary);
}

.VB6PyCDL {
	color: var(--text-primary);
	border-bottom-color: var(--accent-1);
}

.jhifm7it {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 0 6px;
	height: 18px;
	border-radius: var(--radius-pill);
	background-color: var(--border-soft);
	color: var(--text-primary);
	font-size: 10px;
	font-weight: 700;
}

.VB6PyCDL .jhifm7it {
	background-color: var(--accent-1);
}

.t0bqCWRS {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	column-gap: 1rem;
	padding-bottom: 12px;
}

.Ujtl2I_r {
	display: flex;
	flex-direction: column;
	row-gap: 2px;
	min-width: 0;
}

.b1P9B2pe {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: -0.01em;
}

.A1aH6U5L {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
}

.ZHGgD1Gu {
	display: flex;
	align-items: center;
	column-gap: 8px;
	flex-shrink: 0;
}

.yVRXMoqB {
	display: inline-flex;
	align-items: center;
	column-gap: 8px;
	padding: 10px 14px;
	border-radius: var(--radius-pill);
	background-color: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	width: 350px;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}

.yVRXMoqB:focus-within {
	border-color: var(--accent-1);
}

.BnrgMPvH {
	width: 100%;
}

.mX6A0dgN {
	color: var(--text-muted);
	font-size: 13px;
	flex-shrink: 0;
}

.r28XegzL {
	flex: 1 1;
	background: transparent;
	border: none;
	outline: none;
	color: var(--text-primary);
	font-size: 14px;
	min-width: 0;
}

.r28XegzL::placeholder {
	color: var(--text-muted);
}

.vEzMTQRH {
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
}

.vEzMTQRH:hover {
	color: var(--text-primary);
}

.EP2HOFjw {
	position: fixed;
	inset: 0;
	background-color: rgba(1, 0, 13, 0.72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 20px;
	box-sizing: border-box;
	animation: R4vPGEmg 0.15s ease;
}

.vlpzgogT {
	background-color: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	max-height: 88vh;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
	animation: WmCXONpA 0.18s ease;
	overflow: hidden;
}

.W9o6uPj4 { width: 100%; max-width: 420px; }
.IO5exB16 { width: 100%; max-width: 600px; }
.WjN91zwz { width: 100%; max-width: 880px; }

.vEw37_pL {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 12px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--border-soft);
	flex-shrink: 0;
}

.GOchbHu8 {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
}

.AkLf6fIJ {
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.AkLf6fIJ:hover {
	background-color: var(--border-soft);
	color: var(--text-primary);
}

.rfFRJgD2 {
	padding: 20px 22px;
	overflow-y: auto;
	flex: 1 1;
}

.eLL7c7G1 {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	column-gap: 10px;
	padding: 16px 22px;
	border-top: 1px solid var(--border-soft);
	flex-shrink: 0;
}

@keyframes R4vPGEmg {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes WmCXONpA {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.ZJAFDBuK {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 12px;
	padding: 48px 24px;
	text-align: center;
	color: var(--text-muted);
}

.ZhvomDnX {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-pill);
	background-color: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-secondary);
	font-size: 20px;
}

.iIvNSf2M {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
}

.WOlLTdfH {
	font-size: 12px;
	color: var(--text-muted);
	max-width: 360px;
	line-height: 1.5;
}

.ZOXLwOpf {
	margin-top: 4px;
}

.Q0PYvxGV {
	display: block;
	border-radius: var(--radius-md);
}

.tmVqZwdO {
	display: flex;
	align-items: center;
	column-gap: 12px;
	padding: 14px;
	border-radius: var(--radius-md);
	background-color: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
}

.xASPx6YO {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}

.oxdcgvqZ {
	display: flex;
	flex-direction: column;
	row-gap: 6px;
	flex: 1 1;
	min-width: 0;
}

.a8ShkSw0 { width: 60%; height: 12px; border-radius: 4px; }
.jfPEphhy { width: 40%; height: 10px; border-radius: 4px; }

.UmObHmsH {
	display: inline-flex;
	align-items: center;
	column-gap: 6px;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	border: 1px solid transparent;
}

.rNvXBGwC {
	background-color: rgba(151, 163, 180, 0.12);
	border-color: rgba(151, 163, 180, 0.28);
	color: var(--text-secondary);
}

.RHsAqTZ4 {
	background-color: rgba(13, 122, 199, 0.15);
	border-color: rgba(13, 122, 199, 0.35);
	color: #3aa0e0;
}

.xaLejtnr {
	background-color: rgba(60, 162, 89, 0.12);
	border-color: rgba(60, 162, 89, 0.35);
	color: var(--success-green);
}

.fQvUiQl7 {
	background-color: rgba(245, 158, 11, 0.12);
	border-color: rgba(245, 158, 11, 0.35);
	color: #f59e0b;
}

.LnpuT5ct {
	background-color: rgba(255, 38, 38, 0.12);
	border-color: rgba(255, 38, 38, 0.35);
	color: var(--cancelled-red);
}

.BsnQtY_N {
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill);
	background-color: currentColor;
}

.OiVWll1d {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	color: var(--text-primary);
	font-weight: 700;
	letter-spacing: 0.02em;
	flex-shrink: 0;
	-webkit-user-select: none;
	        user-select: none;
}

.nHe2qHwH  { width: 28px; height: 28px; font-size: 10px; }
.H5POGlIL  { width: 36px; height: 36px; font-size: 12px; }
._03XwXtF  { width: 52px; height: 52px; font-size: 16px; }
.Eu8pdRK7  { width: 72px; height: 72px; font-size: 22px; }

.aVCJ1aeJ {
	height: 56px;
	background: #0a0b11;
	border-bottom: 1px solid #2d2f39;
	display: flex;
	align-items: center;
	padding: 0 24px;
	flex-shrink: 0;
	gap: 0;
}

.mxXVNSBv {
	color: var(--white);
	font-size: 14px;
	font-weight: 600;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.cbrRItWa {
	margin-left: 10px;
	font-size: 11px;
	font-weight: 500;
	color: rgb(120, 132, 150);
}

/* ── Venues tab ──────────────────────────────────────────────
   Two-column layout: scrollable list on the left, sticky detail
   panel on the right (mirrors the production screenshots).
   The device-preview lives inside the edit drawer, not here. */

/* Page shell - mirrors IndEventNew (.container / .content_container) */
.aB9oKXTb {
	height: 100vh;
	width: 100%;
	display: flex;
	overflow: hidden;
	background-color: var(--bg-dark);
	box-sizing: border-box;
	color: var(--white);
}

.QNnDAu8c {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 40px 60px 0;
	row-gap: 2.5rem;
	box-sizing: border-box;
}

.ckGs1v93 {
	flex: 1 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.LU9ZDfzK {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	overflow: hidden;
}

/* KPI strip */
.b0UVBuuX {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 14px;
	gap: 14px;
	margin-bottom: 20px;
	flex-shrink: 0;
}

.ceWJTDCv {
	height: 88px;
	border-radius: 14px;
}

/* Toolbar: segment toggle + search + add button */
.TmUQUnSw {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
	flex-shrink: 0;
}

.VCRfWNAl {
	display: inline-flex;
	border-radius: 10px;
	border: 1px solid var(--border-soft);
	background: rgba(255,255,255,0.02);
	overflow: hidden;
	flex-shrink: 0;
}

.aosb_MUT {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	background: transparent;
	border: none;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}

._5sFMqIt8 {
	background: rgba(13,122,199,0.18);
	color: var(--white);
}

.hctCIBPO {
	font-size: 11px;
	background: rgba(255,255,255,0.08);
	color: var(--text-muted);
	border-radius: 999px;
	padding: 1px 7px;
	font-weight: 700;
}

._5sFMqIt8 .hctCIBPO {
	background: rgba(13,122,199,0.3);
	color: var(--white);
}

.Ro3FhPzX {
	flex: 1 1;
	position: relative;
	max-width: 340px;
}

.Ro3FhPzX i {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	font-size: 13px;
	pointer-events: none;
}

.Ro3FhPzX input {
	width: 100%;
	padding: 8px 12px 8px 34px;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	color: var(--white);
	font-family: inherit;
	font-size: 13px;
	outline: none;
	transition: border-color 0.15s ease;
	box-sizing: border-box;
}

.Ro3FhPzX input:focus { border-color: rgba(13,122,199,0.5); }
.Ro3FhPzX input::placeholder { color: var(--text-muted); }

.LK6C1Xss {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	background: var(--accent-1);
	color: var(--white);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 10px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.15s ease;
	flex-shrink: 0;
}

.LK6C1Xss:hover { background: #1389d8; }

/* Body: list + detail panel side by side */
.DceBlC7G {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	grid-gap: 16px;
	gap: 16px;
	flex: 1 1;
	min-height: 0;
	overflow: hidden;
}

.U8neFwPm {
	display: flex;
	flex-direction: column;
	gap: 1px;
	overflow-y: auto;
	padding-right: 2px;
	padding-bottom: 40px;
}

.U8neFwPm::-webkit-scrollbar { width: 4px; }
.U8neFwPm::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

/* Venue / residency row */
.gt98v639 {
	display: grid;
	grid-template-columns: 44px minmax(0,1fr) auto auto;
	align-items: center;
	grid-gap: 14px;
	gap: 14px;
	padding: 14px 16px;
	background: var(--sub-bg-dark);
	border: 1px solid rgba(255,255,255,0.04);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.15s ease;
	margin-bottom: 6px;
}

.gt98v639:hover { border-color: rgba(255,255,255,0.1); background: rgba(22,24,36,0.9); }

.nrnomqr9 {
	border-color: rgba(13,122,199,0.55) !important;
	background: rgba(13,122,199,0.06) !important;
}

.PtPstTY8 {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 800;
	color: var(--white);
	flex-shrink: 0;
	overflow: hidden;
}

.PtPstTY8 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
}

.QZ7kmqAt { min-width: 0; }

.uR9BzpOV {
	font-size: 14px;
	font-weight: 700;
	color: var(--white);
	margin: 0 0 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: flex;
	align-items: center;
	gap: 6px;
}

.M4cJmWpj {
	color: #06b6d4;
	font-size: 12px;
}

.ooPEUFXf {
	font-size: 12px;
	color: var(--text-muted);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.a6Y_5SIc {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	flex-shrink: 0;
}

.CNx_CesU {
	background: rgba(13,122,199,0.15);
	color: #6db8ed;
	border: 1px solid rgba(13,122,199,0.2);
}

.HUvjGWTr {
	background: rgba(34,197,94,0.12);
	color: #4ade80;
	border: 1px solid rgba(34,197,94,0.2);
}

.eRW0Dytx {
	background: rgba(245,158,11,0.12);
	color: #fbbf24;
	border: 1px solid rgba(245,158,11,0.2);
}

.VZc9duC8 {
	color: var(--text-muted);
	font-size: 11px;
}

/* Right-hand detail panel */
.ygrKieRZ {
	background: var(--sub-bg-dark);
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 14px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	margin-bottom: 40px;
}

.wkeeRMbL {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	color: var(--text-muted);
	padding: 2rem;
	text-align: center;
}

.wkeeRMbL i { font-size: 32px; opacity: 0.3; }
.wkeeRMbL p { margin: 0; font-size: 13px; }

.Pc0Wu4Sw {
	padding: 16px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex-shrink: 0;
}

.DoeJyzJd {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	font-weight: 800;
	color: var(--white);
	flex-shrink: 0;
	overflow: hidden;
}

.DoeJyzJd img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.xzxsXBNN { flex: 1 1; min-width: 0; }

.bMr7L83x {
	font-size: 15px;
	font-weight: 700;
	color: var(--white);
	margin: 0 0 3px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.g6W94tuR {
	font-size: 12px;
	color: var(--text-muted);
	margin: 0 0 8px;
}

.kmVDNGY5 {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.xLRCOK9f {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	background: rgba(255,255,255,0.05);
	color: var(--text-secondary);
	border: 1px solid rgba(255,255,255,0.07);
}

.kytY55nC {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--border-soft);
	color: var(--text-secondary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	transition: all 0.15s ease;
	flex-shrink: 0;
}

.kytY55nC:hover {
	color: var(--white);
	border-color: rgba(13,122,199,0.5);
	background: rgba(13,122,199,0.12);
}

.p3DkKjUc {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--border-soft);
	color: var(--text-secondary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	transition: all 0.15s ease;
	flex-shrink: 0;
}

.p3DkKjUc:hover {
	color: #f87171;
	border-color: rgba(239,68,68,0.4);
	background: rgba(239,68,68,0.08);
}

.lIxPsV_B {
	flex: 1 1;
	overflow-y: auto;
	padding: 16px;
}

.lIxPsV_B::-webkit-scrollbar { width: 4px; }
.lIxPsV_B::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

.paf39XMM { margin-bottom: 20px; }
.paf39XMM:last-child { margin-bottom: 0; }

.neDOWw7U {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.3);
	margin: 0 0 10px;
}

.OB_KqfQ8 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255,255,255,0.04);
	gap: 10px;
}

.OB_KqfQ8:last-child { border-bottom: none; }

.bdU4Emku {
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	margin: 0 0 2px;
}

.FIY7LFKS {
	font-size: 11px;
	color: var(--text-muted);
	margin: 0;
}

.wngPJue6 {
	font-size: 12px;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.GHjrW2mZ {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
	gap: 10px;
	margin-bottom: 16px;
}

.XbDDG3iG {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 10px;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.PlOtUjT2 {
	font-size: 18px;
	font-weight: 800;
	color: var(--white);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.EBPNE_F5 {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--text-muted);
}

/* Mobile back button - only visible when detail panel is full-screen overlay */
.vY_ZS6Bi {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--border-soft);
	color: var(--accent-1);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	width: 100%;
	text-align: left;
}

@media (max-width: 900px) {
	.vY_ZS6Bi { display: flex; }
}

/* Empty list state */
.aa_KqAId {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 60px 20px;
	color: var(--text-muted);
}

.aa_KqAId i { font-size: 32px; opacity: 0.4; }
.aa_KqAId p { margin: 0; font-size: 13px; }

@media (max-width: 900px) {
	.DceBlC7G {
		grid-template-columns: 1fr;
		position: relative;
	}

	/* Detail panel becomes a full-width overlay that slides up when active */
	.ygrKieRZ {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 300;
		border-radius: 0;
		border: none;
		overflow-y: auto;
	}

	.bboQ2rif {
		display: flex;
	}

	.b0UVBuuX { grid-template-columns: repeat(2, 1fr); }

	/* Toolbar wraps on small screens */
	.TmUQUnSw { flex-wrap: wrap; }
	.Ro3FhPzX { max-width: 100%; }
}

@media (max-width: 480px) {
	/* Venue row: hide address, just show name + guest count */
	.ooPEUFXf { display: none; }
	.gt98v639 { gap: 10px; padding: 12px; }
	.TmUQUnSw { gap: 8px; }
	.VCRfWNAl { font-size: 12px; }
	.aosb_MUT { padding: 6px 10px; font-size: 12px; }
}

/* CRM shared drawer chrome.
   ──────────────────────────────────────────────────────────────
   Same recipe as indevent-project/src/components/IndEvent/drawers/
   Drawer.module.css - kept local to the CRM module so future
   tweaks (wider rail, different stack rules) don't ripple into
   the in-event experience. */

.QbWUbjm9 {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 1000;
	animation: YGbKF7zA 0.2s ease;
}

.traZkaoZ {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 720px;
	max-width: 92vw;
	background: rgba(20, 22, 30, 0.78);
	backdrop-filter: blur(24px) saturate(170%);
	-webkit-backdrop-filter: blur(24px) saturate(170%);
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	z-index: 1001;
	display: flex;
	flex-direction: column;
	box-shadow: -16px 0 40px rgba(0, 0, 0, 0.4);
	animation: T_AaNwW4 0.28s ease;
}

.HhamVmcv { width: 540px; }
.BrJKpKqt   { width: 920px; }

@keyframes YGbKF7zA    { from { opacity: 0; }    to { opacity: 1; } }
@keyframes wEkZSf1J { from { opacity: 1; }    to { opacity: 0; } }
@keyframes T_AaNwW4   { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes s4Se9Zbe{ from { transform: translateX(0); } to   { transform: translateX(100%); } }

.BukluKBK          { animation: s4Se9Zbe 0.26s cubic-bezier(0.4, 0, 1, 1) forwards; }
.Xia6X59a { animation: wEkZSf1J 0.22s ease forwards; }

.iKYNSN2O {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.4rem 1.5rem;
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.045) 0%,
			rgba(255, 255, 255, 0.012) 100%),
		rgba(20, 22, 30, 0.55);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 4px 14px rgba(0, 0, 0, 0.18);
	flex-shrink: 0;
	z-index: 2;
}

.XlXmNNFB {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 1px solid #2d2f39;
	background: rgba(255, 255, 255, 0.02);
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-family: inherit;
	transition: all 0.15s ease;
}

.XlXmNNFB:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
	border-color: #3d4052;
}

.T3iLCVVH { flex: 1 1; min-width: 0; }

.Al5SrP1g {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--white);
}

.U3oZqP43 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
	font-size: 12px;
	color: var(--text-muted);
	flex-wrap: wrap;
}

.MvgxeS8p { color: rgba(255, 255, 255, 0.18); }
.UMR8PzXc { color: var(--white); font-weight: 600; }

.M1rJ7RwN {
	flex: 1 1;
	overflow-y: auto;
	padding: 1.5rem;
	background: var(--bg-dark);
}

.M1rJ7RwN::-webkit-scrollbar { width: 4px; }
.M1rJ7RwN::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

.bMgAVh4K {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	background:
		linear-gradient(0deg,
			rgba(255, 255, 255, 0.045) 0%,
			rgba(255, 255, 255, 0.012) 100%),
		rgba(20, 22, 30, 0.55);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow:
		inset 0 -1px 0 rgba(255, 255, 255, 0.04),
		0 -4px 14px rgba(0, 0, 0, 0.18);
	flex-shrink: 0;
	z-index: 2;
}

.bfKKzjGK { flex: 1 1; }

.T3uVSsUp {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.65rem 1.1rem;
	background: var(--accent-1);
	color: var(--white);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

.T3uVSsUp:hover:not(:disabled) { background: #1389d8; }
.T3uVSsUp:active:not(:disabled) { transform: scale(0.98); }
.T3uVSsUp:disabled { opacity: 0.4; cursor: not-allowed; }

.lVmc0B73 {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.65rem 1rem;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}

.lVmc0B73:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.14);
}

.PaT9xX65 { margin-bottom: 1.75rem; }
.PaT9xX65:last-child { margin-bottom: 0; }

.Blkn686R {
	margin: 0 0 0.85rem;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 600px) {
	.traZkaoZ, .HhamVmcv, .BrJKpKqt {
		width: 100vw;
		max-width: 100vw;
	}
	.iKYNSN2O { padding: 1.1rem 1.1rem; }
	.M1rJ7RwN   { padding: 1.1rem; }
	.bMgAVh4K { padding: 0.85rem 1.1rem; }
}

/* ── VenueEditDrawer ─────────────────────────────────────────
   Extra-wide drawer (1100px) split into:
     Left  : vertical tab rail (icons + labels)
     Centre: form body for whichever tab is active
     Right : pinned device preview (Guest Line public profile)

   Overrides the shared drawer chrome width via .drawer_xl. */

.HOgKyZN5 {
	width: 1100px;
	max-width: 96vw;
}

/* Three-column inner layout */
._IIcoivB {
	display: grid;
	grid-template-columns: 180px minmax(0,1fr) 440px;
	flex: 1 1;
	min-height: 0;
	overflow: hidden;
}

/* Left vertical tab rail */
.YA6ZD1Mi {
	border-right: 1px solid rgba(255,255,255,0.06);
	display: flex;
	flex-direction: column;
	padding: 12px 8px;
	gap: 2px;
	background: rgba(255,255,255,0.01);
	overflow-y: auto;
}

.LtMcvdd5 {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 10px;
	border: none;
	background: transparent;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
	transition: all 0.15s ease;
	width: 100%;
}

.LtMcvdd5 i {
	width: 16px;
	text-align: center;
	font-size: 13px;
	flex-shrink: 0;
}

.LtMcvdd5:hover { background: rgba(255,255,255,0.04); color: var(--white); }

.JlzMzvNT {
	background: rgba(13,122,199,0.15);
	color: var(--white);
}

.JlzMzvNT i { color: var(--accent-1); }

.eK0_HNWY {
	height: 1px;
	background: rgba(255,255,255,0.05);
	margin: 8px 4px;
}

/* Form body */
.See7VEgO {
	overflow-y: auto;
	padding: 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.See7VEgO::-webkit-scrollbar { width: 4px; }
.See7VEgO::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

.oDT4mPIG {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.35);
	margin: 0;
}

/* Each section title sits in its own wrapper <div> as a direct child
   of .form_body, which has a 24px gap between children. Pull the
   wrapper up so the title hugs its content (24px gap - 16px margin =
   8px visible gap between "VIDEO HEADER" and the upload button). */
.See7VEgO > div:has(> .oDT4mPIG) {
	margin-bottom: -16px;
}

/* Google-Places address autocomplete - matches the prod NewVenue input */
.rGhafUNY {
	position: relative;
	background-color: var(--sub-bg-dark);
	border: 1px solid #2d2f39;
	border-radius: 10px;
	transition: border-color 0.2s ease;
}

.rGhafUNY:focus-within {
	border-color: var(--accent-1);
}

.SJTaoYng {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	color: #666;
	font-size: 14px;
	pointer-events: none;
	z-index: 1;
}

.NlTTA8TI {
	width: 100%;
	box-sizing: border-box;
	background: none !important;
	border: none !important;
	color: var(--white);
	font-size: 14px;
	padding: 0.75rem 1rem 0.75rem 2.75rem;
	outline: none;
	font-family: inherit;
	border-radius: 10px;
}

.NlTTA8TI::placeholder {
	color: #555;
}

.oDT4mPIG i { color: var(--accent-1); }

.ZlQKLALn { display: flex; flex-direction: column; gap: 14px; }

.zUplT51r {
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.55;
	margin: -6px 0 4px;
	opacity: 0.7;
}

.THFKt5KF {
	width: 100%;
	min-height: 180px;
	background: #12141f;
	background: var(--input-bg, #12141f);
	border: 1px solid rgba(255,255,255,0.08);
	border: 1px solid var(--border-soft, rgba(255,255,255,0.08));
	border-radius: 8px;
	color: #ccd6f6;
	color: var(--text-primary, #ccd6f6);
	font-size: 13px;
	font-family: inherit;
	line-height: 1.6;
	padding: 12px 14px;
	resize: vertical;
	outline: none;
	box-sizing: border-box;
	transition: border-color 0.15s;
}
.THFKt5KF:focus { border-color: #0D7AC7; border-color: var(--accent-1, #0D7AC7); }
.THFKt5KF::placeholder { color: rgba(255,255,255,0.2); }

.E2wr3rWd {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	color: var(--text-muted);
	opacity: 0.5;
	margin: 4px 0;
}
.E2wr3rWd::before,
.E2wr3rWd::after {
	content: '';
	flex: 1 1;
	height: 1px;
	background: rgba(255,255,255,0.07);
}

.IKzhiv6_ {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 12px;
	gap: 12px;
}

.rREde2sk { grid-template-columns: 1fr; }

.mF1GeafB { display: flex; flex-direction: column; gap: 6px; }

.nFU8wjv5 {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.45);
}

.hxMicDZd::after {
	content: ' *';
	color: #f87171;
}

.a1pc3v11 {
	padding: 9px 12px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--border-soft);
	border-radius: 9px;
	color: var(--white);
	font-family: inherit;
	font-size: 13px;
	outline: none;
	transition: border-color 0.15s ease;
}

.a1pc3v11:focus { border-color: rgba(13,122,199,0.5); }
.a1pc3v11::placeholder { color: var(--text-muted); }

.G3tkL3SX {
	display: flex;
	align-items: center;
	border: 1px solid var(--border-soft);
	border-radius: 9px;
	background: rgba(255,255,255,0.04);
	overflow: hidden;
}

.YIhd6pkx {
	padding: 9px 10px;
	font-size: 12px;
	color: var(--text-muted);
	background: rgba(255,255,255,0.03);
	border-right: 1px solid var(--border-soft);
	white-space: nowrap;
	flex-shrink: 0;
}

.G3tkL3SX input {
	flex: 1 1;
	padding: 9px 12px;
	background: transparent;
	border: none;
	color: var(--white);
	font-family: inherit;
	font-size: 13px;
	outline: none;
	min-width: 0;
}

.bhWGe_Ot {
	padding: 9px 12px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--border-soft);
	border-radius: 9px;
	color: var(--white);
	font-family: inherit;
	font-size: 13px;
	outline: none;
	resize: vertical;
	min-height: 88px;
	transition: border-color 0.15s ease;
}

.bhWGe_Ot:focus { border-color: rgba(13,122,199,0.5); }
.bhWGe_Ot::placeholder { color: var(--text-muted); }

/* Avatar / logo uploader */
.PRtoW4o2 {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Wrapper hosts both the round avatar and the corner edit badge so
   the badge isn't clipped by the avatar's overflow: hidden. */
.Vn5SmSuV {
	position: relative;
	width: 68px;
	height: 68px;
	flex-shrink: 0;
}

.lbc7dMMf {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: 800;
	color: var(--white);
	cursor: pointer;
	position: relative;
	overflow: hidden;
	border: 2px solid rgba(255,255,255,0.08);
	transition: opacity 0.15s ease;
}

.lbc7dMMf:hover { opacity: 0.85; }

.lbc7dMMf img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Shown only when no logo is set - full overlay with centred camera. */
.exOWJ3Nh {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: background 0.15s ease;
}

.lbc7dMMf:hover .exOWJ3Nh { background: rgba(0,0,0,0.55); }
.exOWJ3Nh i { font-size: 18px; color: var(--white); }

/* Shown only when a logo IS set - small pencil pill in the bottom-right
   corner, anchored to the wrapper so it sits outside the round clip. */
.Fnvc2cyJ {
	position: absolute;
	right: -4px;
	bottom: -4px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--accent-1);
	border: 2px solid var(--sub-bg-dark);
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
	transition: filter 0.15s ease;
}

.Fnvc2cyJ:hover { filter: brightness(1.15); }
.Fnvc2cyJ i { font-size: 10px; }

.mAftvgPe { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

/* Video header upload */
.UrkRI7Su {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.PcqTXgNA {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-pill);
	color: var(--text-primary);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
	font-family: inherit;
}

.PcqTXgNA:hover {
	border-color: var(--accent-1);
	color: var(--accent-1);
}

.asUos_oC {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #3ca259;
	color: var(--success-green, #3ca259);
	max-width: 260px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.MKwLvQre {
	width: 100%;
	max-height: 140px;
	border-radius: 8px;
	object-fit: cover;
	border: 1px solid var(--border-soft);
	background: #000;
}

/* Brand colour picker */
.H2XQaYus {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hRZpqm8L {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,0.12);
	cursor: pointer;
	flex-shrink: 0;
	position: relative;
	transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.hRZpqm8L:hover {
	transform: scale(1.06);
	box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
}

.WwHbWndi {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1 1;
	padding: 9px 12px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--border-soft);
	border-radius: 9px;
	font-size: 13px;
	color: var(--white);
}

.WwHbWndi span { color: var(--text-muted); }

.WwHbWndi input {
	flex: 1 1;
	background: transparent;
	border: none;
	outline: none;
	color: var(--white);
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	min-width: 0;
}

/* Toggle / switch */
.OepJgV3x {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 10px;
}

.S7v6TwkB {
	width: 34px;
	height: 34px;
	border-radius: 8px;
	background: rgba(13,122,199,0.12);
	color: var(--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	flex-shrink: 0;
}

.vONvnu1Q { flex: 1 1; }
.WZuW7Hrz { font-size: 13px; font-weight: 600; color: var(--white); }
.o4tQbAan  { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.w9ZuUzvr {
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: rgba(255,255,255,0.1);
	border: none;
	cursor: pointer;
	position: relative;
	transition: background 0.2s ease;
	flex-shrink: 0;
}

.IGu2ndCv { background: var(--accent-1); }

.w9ZuUzvr::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--white);
	top: 3px;
	left: 3px;
	transition: transform 0.2s ease;
}

.IGu2ndCv::after { transform: translateX(18px); }

/* Info banner */
.Yt17vOan {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 14px;
	background: rgba(13,122,199,0.08);
	border: 1px solid rgba(13,122,199,0.2);
	border-radius: 10px;
	font-size: 12px;
	color: var(--text-secondary);
	line-height: 1.5;
}

.Yt17vOan i { color: var(--accent-1); margin-top: 1px; flex-shrink: 0; }

/* "Find Venue" search */
.rIcynA8c {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
	max-height: 200px;
	overflow-y: auto;
}

.o9Xm1_vJ {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.05);
	border-radius: 9px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.o9Xm1_vJ:hover {
	border-color: rgba(13,122,199,0.4);
	background: rgba(13,122,199,0.07);
}

.u8EJh2cf {
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
}

.wxahyOJ_ {
	font-size: 11px;
	color: var(--text-muted);
}

/* Right device preview panel */
.XyJSLUC4 {
	border-left: 1px solid rgba(255,255,255,0.06);
	display: flex;
	flex-direction: column;
	background: #0a0a14;
	overflow: hidden;
}

.W9VD2yGr {
	padding: 12px 14px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.3);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

.W9VD2yGr i { color: var(--accent-1); }

.EY28XT6P {
	flex: 1 1;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 16px 12px 24px;
}

.aJXyk7au {
	/* Fill the available height, derive width from phone aspect ratio */
	height: 100%;
	width: auto;
	aspect-ratio: 9 / 19.5;
	flex-shrink: 0;
	border: none;
	border-radius: 44px;
	background: #000;
	box-shadow: 0 0 0 12px #1a1a2e, 0 24px 80px rgba(0,0,0,0.7);
}

/* Wraps the phone iframe so the load-state logo can be absolutely
   positioned on top of it. The wrapper inherits the iframe's phone
   silhouette so the overlay matches the bezel exactly. */
.QcxvzLWd {
	position: relative;
	height: 100%;
	aspect-ratio: 9 / 19.5;
	flex-shrink: 0;
	display: flex;
}

.QcxvzLWd .aJXyk7au {
	height: 100%;
	width: 100%;
}

.YP4kye_2 {
	position: absolute;
	inset: 0;
	border-radius: 44px;
	background: #000;
	box-shadow: 0 0 0 12px #1a1a2e, 0 24px 80px rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.K5HxgsA1 {
	width: 56%;
	max-width: 180px;
	height: auto;
}

.nQZyk24h {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 100%;
	aspect-ratio: 9 / 19.5;
	border-radius: 40px;
	border: 2px dashed var(--border-soft);
	color: var(--text-muted);
	text-align: center;
	padding: 40px;
}

.nQZyk24h i {
	font-size: 48px;
	opacity: 0.3;
}

.nQZyk24h p {
	font-size: 13px;
	line-height: 1.6;
	opacity: 0.5;
}

.EY28XT6P::-webkit-scrollbar { width: 4px; }
.EY28XT6P::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

/* ── Floor Plan launch panel ─────────────────────────────── */
.Ysw5QqgX {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	padding: 60px 40px;
	text-align: center;
	height: 100%;
}

.YMn_aAD5 {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #0d1428;
	border: 1px solid #1a2a4a;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	color: #2a5a9a;
	margin-bottom: 4px;
}

.zWeDAL2W {
	font-size: 20px;
	font-weight: 700;
	color: #ccd6f6;
	color: var(--text-primary, #ccd6f6);
	margin: 0;
}

.KHooTLYD {
	font-size: 14px;
	color: #6a7a9a;
	color: var(--text-muted, #6a7a9a);
	line-height: 1.6;
	margin: 0;
}

.Qtaqx_NS {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
	background: linear-gradient(135deg, #0d3a6a 0%, #0a2a50 100%);
	border: 1px solid #1a5aaa;
	border-radius: 10px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	padding: 12px 24px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.Qtaqx_NS:hover {
	background: linear-gradient(135deg, #1a4a8a 0%, #0d3a6a 100%);
	box-shadow: 0 0 24px rgba(74, 158, 237, 0.25);
	transform: translateY(-1px);
}

@media (max-width: 900px) {
	.HOgKyZN5 { width: 100vw; max-width: 100vw; }
	._IIcoivB { grid-template-columns: 1fr; }
	.YA6ZD1Mi {
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
		border-right: none;
		border-bottom: 1px solid rgba(255,255,255,0.06);
		padding: 8px;
	}
	.YA6ZD1Mi::-webkit-scrollbar { display: none; }
	.LtMcvdd5 { white-space: nowrap; flex-shrink: 0; }
	.XyJSLUC4 { display: none; }
}

@media (max-width: 480px) {
	/* On phones: tighten form padding */
	.See7VEgO { padding: 12px; }
	.ZlQKLALn { padding: 12px; }
	.IKzhiv6_ { grid-template-columns: 1fr; }
	/* Tab rail: icon only to save space */
	.LtMcvdd5 span { display: none; }
	.LtMcvdd5 { padding: 10px; justify-content: center; gap: 0; }
}

/* ─────────────────────────────────────────────────────────────
   Floor Plan Editor - full-screen overlay
   ───────────────────────────────────────────────────────────── */

.nRdnxENC {
	position: fixed;
	inset: 0;
	z-index: 1200;
	background: #080910;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ── Top bar ──────────────────────────────────────────────── */
.upGjblVL {
	height: 58px;
	flex-shrink: 0;
	background: #0d0e18;
	border-bottom: 1px solid #1e2035;
	display: flex;
	align-items: center;
	gap: 0;
	padding: 0 16px;
	position: relative;
	z-index: 10;
}

.pkIYDdpJ {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
	flex: 1 1;
}

.Ct7WHv4u {
	display: flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: 1px solid #2a2d42;
	border-radius: 8px;
	color: #8892b0;
	font-size: 13px;
	font-weight: 500;
	padding: 6px 12px;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}
.Ct7WHv4u:hover { background: #1a1d2e; color: #ccd6f6; border-color: #3a3d55; }

.ukPeHTCr {
	width: 1px;
	height: 20px;
	background: #1e2035;
	flex-shrink: 0;
}

.QZK3JQXq {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #ccd6f6;
	white-space: nowrap;
}
.QZK3JQXq i { color: #4a9eed; font-size: 15px; }
.xk_QxgYP { color: #6a7a9a; font-weight: 400; }

/* ── Level tabs ─────────────────────────────────────────── */
.t6CbsZeu {
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1;
	justify-content: center;
	padding: 0 16px;
}

.aW0NPQ2y {
	display: flex;
	align-items: center;
	position: relative;
}

.pHV4Aa61 {
	background: transparent;
	border: 1px solid #1e2035;
	border-radius: 8px;
	color: #6a7a9a;
	font-size: 13px;
	font-weight: 500;
	padding: 5px 14px;
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}
.pHV4Aa61:hover { background: #141624; color: #ccd6f6; border-color: #2a2d42; }
.L2QbBqOQ {
	background: #141e35;
	color: #4a9eed;
	border-color: #1a4a7a;
	font-weight: 600;
}

.oKNatscT {
	display: none;
	background: transparent;
	border: none;
	color: #4a5070;
	cursor: pointer;
	padding: 2px 4px;
	font-size: 10px;
	border-radius: 4px;
	margin-left: 2px;
	transition: color 0.15s;
}
.oKNatscT:hover { color: #e74c3c; }
.aW0NPQ2y:hover .oKNatscT { display: flex; }

.DNWFmtaW {
	background: #141e35;
	border: 1px solid #1a4a7a;
	border-radius: 8px;
	color: #ccd6f6;
	font-size: 13px;
	font-weight: 600;
	padding: 5px 12px;
	outline: none;
	width: 120px;
}

.gRq3U9c0 {
	display: flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px dashed #2a2d42;
	border-radius: 8px;
	color: #4a5070;
	font-size: 13px;
	font-weight: 500;
	padding: 5px 12px;
	cursor: pointer;
	transition: all 0.15s ease;
}
.gRq3U9c0:hover { border-color: #4a9eed; color: #4a9eed; background: #0d1a2a; }

/* ── Header right ─────────────────────────────────────────── */
.l8C8G2rz {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1;
	justify-content: flex-end;
}

.N2BIp04R {
	display: flex;
	align-items: center;
	gap: 7px;
	background: #0d3a6a;
	border: 1px solid #1a5aaa;
	border-radius: 8px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 16px;
	cursor: pointer;
	transition: all 0.15s ease;
}
.N2BIp04R:hover { background: #1a4a8a; box-shadow: 0 0 16px rgba(74, 158, 237, 0.2); }

.kt3alYCu {
	background: transparent;
	border: 1px solid #2a2d42;
	border-radius: 8px;
	color: #6a7a9a;
	font-size: 15px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.15s ease;
}
.kt3alYCu:hover { background: #1a1d2e; color: #e74c3c; border-color: #e74c3c; }

/* ── Body ──────────────────────────────────────────────────── */
.oXs8Lpnw {
	flex: 1 1;
	display: flex;
	min-height: 0;
	overflow: hidden;
}

/* ── Library sidebar ───────────────────────────────────────── */
.chmL_1OJ {
	width: 296px;
	flex-shrink: 0;
	background: #0b0c18;
	border-right: 1px solid #1a1d2e;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.GNdTMx1P {
	padding: 16px 16px 0;
	flex-shrink: 0;
	border-bottom: 1px solid #1a1d2e;
	padding-bottom: 12px;
}

.EaHa6EiS {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 12px;
	font-weight: 700;
	color: #8892b0;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}
.EaHa6EiS i { color: #4a9eed; font-size: 13px; }

.zrDkZ3oV {
	margin-left: auto;
	background: #1a1d2e;
	border: 1px solid #2a2d42;
	color: #6a7a9a;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 10px;
}

/* search */
.ssad2KCh {
	position: relative;
	display: flex;
	align-items: center;
}
.ssad2KCh > i {
	position: absolute;
	left: 10px;
	color: #4a5070;
	font-size: 12px;
	pointer-events: none;
}
.WMyBc1Rz {
	width: 100%;
	background: #111320;
	border: 1px solid #1e2035;
	border-radius: 8px;
	color: #ccd6f6;
	font-size: 13px;
	padding: 8px 32px 8px 30px;
	outline: none;
	transition: border-color 0.15s;
}
.WMyBc1Rz:focus { border-color: #2a5a8a; }
.WMyBc1Rz::placeholder { color: #3a4060; }
.nKPpNx5u {
	position: absolute;
	right: 8px;
	background: transparent;
	border: none;
	color: #4a5070;
	cursor: pointer;
	font-size: 11px;
	padding: 2px;
	border-radius: 3px;
	transition: color 0.15s;
}
.nKPpNx5u:hover { color: #ccd6f6; }

/* library scroll body */
.UM96mC6K {
	flex: 1 1;
	overflow-y: auto;
	padding: 8px 0;
}
.UM96mC6K::-webkit-scrollbar { width: 4px; }
.UM96mC6K::-webkit-scrollbar-track { background: transparent; }
.UM96mC6K::-webkit-scrollbar-thumb { background: #2a2d42; border-radius: 2px; }
.UM96mC6K::-webkit-scrollbar-thumb:hover { background: #3a3d55; }

/* category */
.S9G4I4Lw { border-bottom: 1px solid #14162a; }

.rqcg_1IH {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	border: none;
	padding: 10px 16px;
	cursor: pointer;
	color: #8892b0;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	transition: background 0.12s;
	text-align: left;
}
.rqcg_1IH:hover { background: #111320; color: #ccd6f6; }

.NTTonuG4 { font-size: 13px; flex-shrink: 0; }
.JJhhUTWY { flex: 1 1; }
.Wlji_m4z {
	background: #1a1d2e;
	color: #4a5070;
	font-size: 10px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 8px;
}
.zlLksm3X { font-size: 10px; color: #4a5070; margin-left: 2px; }

/* element grid - 2 columns (more space for architectural detail) */
.oTiTxfTm {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 8px;
	gap: 8px;
	padding: 6px 12px 14px;
}

.hl4uCCrZ {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 8px;
	gap: 8px;
	padding: 12px;
}

/* element card */
.oHowPDQg {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 8px 12px;
	background: #0e101e;
	border: 1px solid #181b2e;
	border-radius: 12px;
	cursor: grab;
	transition: all 0.15s ease;
	-webkit-user-select: none;
	        user-select: none;
	position: relative;
	overflow: hidden;
}
.oHowPDQg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--el-color) 6%, transparent), transparent 70%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s;
}
.oHowPDQg:hover {
	background: #111425;
	border-color: color-mix(in srgb, var(--el-color) 30%, transparent);
	transform: translateY(-2px);
	box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
.oHowPDQg:hover::before { opacity: 1; }
.oHowPDQg:active { cursor: grabbing; transform: translateY(0); }

.XntEcjx5 {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--el-color) 8%, #0a0b14);
	border: 1px solid color-mix(in srgb, var(--el-color) 20%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s, border-color 0.15s;
}
.XntEcjx5 i {
	font-size: 22px;
	opacity: 0.85;
	transition: opacity 0.15s, transform 0.15s;
}
.oHowPDQg:hover .XntEcjx5 {
	background: color-mix(in srgb, var(--el-color) 14%, #0a0b14);
	border-color: color-mix(in srgb, var(--el-color) 40%, transparent);
}
.oHowPDQg:hover .XntEcjx5 i { opacity: 1; transform: scale(1.08); }

.vbFpgOxT {
	font-size: 10px;
	font-weight: 500;
	color: #3a4460;
	text-align: center;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	padding: 0 2px;
	letter-spacing: 0.2px;
	transition: color 0.15s;
}
.oHowPDQg:hover .vbFpgOxT { color: #7a8aaa; }

/* no results */
.e05y6j2R {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 40px 24px;
	color: #4a5070;
	text-align: center;
}
.e05y6j2R i { font-size: 28px; opacity: 0.4; }
.e05y6j2R p { font-size: 13px; line-height: 1.5; color: #5a6080; }
.e05y6j2R strong { color: #7a8aaa; }

/* library footer hint */
.Z3pay3C7 {
	padding: 10px 16px;
	font-size: 11px;
	color: #3a4060;
	border-top: 1px solid #14162a;
	display: flex;
	align-items: center;
	gap: 7px;
	flex-shrink: 0;
}
.Z3pay3C7 i { color: #4a5070; }

/* ── Canvas area ───────────────────────────────────────────── */
.fd1qu3tc {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

.EiuL8q75 {
	height: 44px;
	flex-shrink: 0;
	background: #0d0e18;
	border-bottom: 1px solid #1a1d2e;
	display: flex;
	align-items: center;
	padding: 0 16px;
	gap: 12px;
	position: relative;
}

.BhMQMCU0 { display: flex; align-items: center; gap: 10px; flex: 1 1; }

.rHARPZ7Y {
	display: flex;
	align-items: center;
	gap: 6px;
	background: #111320;
	border: 1px solid #1e2035;
	border-radius: 7px;
	color: #6a7a9a;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 10px;
}
.rHARPZ7Y i { color: #4a9eed; font-size: 11px; }

.CGundkWQ { display: flex; align-items: center; gap: 6px; }

.edY1IYsz {
	display: flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid #1e2035;
	border-radius: 7px;
	color: #4a5070;
	font-size: 12px;
	font-weight: 500;
	padding: 4px 10px;
	cursor: pointer;
	transition: all 0.15s;
}
.edY1IYsz:hover:not(:disabled) { background: #141624; color: #8892b0; border-color: #2a2d42; }
.edY1IYsz:disabled { opacity: 0.4; cursor: not-allowed; }

/* canvas dot-grid */
.Ssli6OQR {
	flex: 1 1;
	overflow: hidden;
	position: relative;
	background-color: #0a0b16;
	background-image: radial-gradient(circle, #232640 1px, transparent 1px);
	background-size: 28px 28px;
	cursor: default;
	-webkit-user-select: none;
	        user-select: none;
}

/* ── Placed elements ──────────────────────────────────────── */
.AAFeMy3Q {
	position: absolute;
	cursor: grab;
	border-radius: 6px;
	border: 1.5px solid transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	transition: border-color 0.1s ease, box-shadow 0.1s ease;
}
.AAFeMy3Q:hover { filter: brightness(1.15); }
.MaCzPZDe {
	box-shadow: 0 0 0 2px rgba(74, 158, 237, 0.6), 0 4px 20px rgba(0,0,0,0.5);
}
.DRPB_LdE {
	cursor: grabbing;
	opacity: 0.8;
	z-index: 100;
}

.GBVtod4S {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.Bd885qzQ {
	border-radius: 10px;
	border: 1px solid transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	min-width: 24px;
	min-height: 24px;
}
.Bd885qzQ i { opacity: 0.85; }

.OGx7mX2V {
	position: absolute;
	bottom: -20px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10px;
	font-weight: 600;
	color: #ccd6f6;
	white-space: nowrap;
	text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.8);
	pointer-events: none;
	letter-spacing: 0.3px;
	background: rgba(10,11,22,0.7);
	padding: 2px 6px;
	border-radius: 4px;
}

/* ── Selection toolbar (in canvas toolbar row) ────────────── */
.mF2TNMbC {
	display: flex;
	align-items: center;
	gap: 4px;
	background: #0f1122;
	border: 1px solid #2a3050;
	border-radius: 10px;
	padding: 4px 8px;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.ric6yjcA {
	font-size: 12px;
	font-weight: 600;
	color: #8892b0;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 6px 0 4px;
}
.ric6yjcA i { color: #4a9eed; font-size: 11px; }

.IrrWF2MN {
	width: 1px;
	height: 18px;
	background: #1e2240;
	margin: 0 2px;
}

.VcWTD0J2 {
	background: transparent;
	border: none;
	color: #6a7a9a;
	width: 30px;
	height: 30px;
	border-radius: 7px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	transition: all 0.12s;
}
.VcWTD0J2:hover { background: #1a1d2e; color: #ccd6f6; }
.kC4rMbtt:hover { background: #2a1010; color: #e74c3c; }

/* Booth-area configuration panel - only rendered while a placed
   booth area is selected. Anchored top-right of the canvas so it
   sits below the centered selection toolbar without overlap. */
.H5bk8c5q {
	position: absolute;
	right: 16px;
	top: 60px;
	width: 380px;
	max-height: calc(100% - 90px);
	background: #0f1122;
	border: 1px solid #2a3050;
	border-radius: 14px;
	box-shadow: 0 10px 32px rgba(0,0,0,0.55);
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	z-index: 4;
	overflow: hidden;
}
.clREAv7z {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #6a7a9a;
}
.clREAv7z i { color: #4a9eed; font-size: 13px; }
.o69tCtN6 {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	background: #161a2f;
	border: 1px solid #2a3050;
	border-radius: 9px;
	color: #ccd6f6;
	font-family: inherit;
	font-size: 13px;
	outline: none;
	transition: border-color 0.15s ease;
}
.o69tCtN6:focus { border-color: #4a9eed; }
.o69tCtN6::placeholder { color: #4a5070; }
.tRkR4k3F {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: #6a7a9a;
	margin: 0 0 8px;
}
.VQutGhg6 {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 24px;
}
.YZwrybhW {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	background: rgba(74, 158, 237, 0.1);
	color: #ccd6f6;
	border: 1px solid rgba(74, 158, 237, 0.3);
	border-radius: 999px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: default;
}
.qPPvGNMw {
	background: transparent;
	border: none;
	color: rgba(204, 214, 246, 0.5);
	cursor: pointer;
	font-size: 10px;
	padding: 0;
	display: inline-flex;
	align-items: center;
}
.qPPvGNMw:hover { color: #e74c3c; }
.QWGyxL2H {
	font-size: 11px;
	color: #6a7a9a;
	font-style: italic;
}

/* Picker - inline (not a dropdown) so it can show rich info per row
   and search without floating off the canvas. */
.i7EsmTzp {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1;
	min-height: 0;
}
.QQz2PyK9 {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: #161a2f;
	color: #8892b0;
	border: 1px dashed #2a3050;
	border-radius: 9px;
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
	align-self: flex-start;
}
.QQz2PyK9:hover { color: #ccd6f6; border-color: #4a9eed; }
.rz7Dk55M {
	color: #ccd6f6;
	border-style: solid;
	background: rgba(74, 158, 237, 0.08);
	border-color: rgba(74, 158, 237, 0.5);
}
.E1_9NTt7 {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 0;
	flex: 1 1;
}
.T1k1u2BF {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #161a2f;
	border: 1px solid #2a3050;
	border-radius: 9px;
}
.T1k1u2BF:focus-within { border-color: #4a9eed; }
.T1k1u2BF > i { color: #6a7a9a; font-size: 12px; }
.T1k1u2BF input {
	flex: 1 1;
	min-width: 0;
	background: transparent;
	border: none;
	color: #ccd6f6;
	font-family: inherit;
	font-size: 12px;
	outline: none;
}
.T1k1u2BF input::placeholder { color: #4a5070; }
.kMYMizZq {
	flex: 1 1;
	min-height: 0;
	max-height: 320px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 4px;
	background: #161a2f;
	border: 1px solid #2a3050;
	border-radius: 10px;
	padding: 6px;
}
.kMYMizZq::-webkit-scrollbar { width: 4px; }
.kMYMizZq::-webkit-scrollbar-thumb { background: #2a3050; border-radius: 4px; }

.nU2nCh8F {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto;
	align-items: start;
	grid-gap: 10px;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	color: #ccd6f6;
	font-family: inherit;
	cursor: pointer;
	text-align: left;
	transition: all 0.12s ease;
}
.nU2nCh8F:hover {
	background: rgba(74, 158, 237, 0.08);
	border-color: rgba(74, 158, 237, 0.25);
}
.PLenaB7o {
	width: 28px;
	height: 28px;
	border-radius: 7px;
	background: rgba(74, 158, 237, 0.12);
	color: #4a9eed;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
	margin-top: 1px;
}
.hLT6yNmc {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.mQmzxEm3 {
	font-size: 13px;
	font-weight: 600;
	color: #ccd6f6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.WH2qDnP7 {
	font-size: 11px;
	color: #8892b0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kId44XgW {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 2px;
}
.WkwQ1mPK {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 7px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 600;
	background: rgba(255,255,255,0.05);
	color: #8892b0;
	border: 1px solid rgba(255,255,255,0.08);
	white-space: nowrap;
}
.WkwQ1mPK i { font-size: 9px; }
.VcP8JrD5 {
	background: rgba(245, 158, 11, 0.12);
	color: #f59e0b;
	border-color: rgba(245, 158, 11, 0.25);
}
.wj8Mr92c {
	background: rgba(74, 158, 237, 0.12);
	color: #4a9eed;
	border-color: rgba(74, 158, 237, 0.25);
}
.dcZdbr51 {
	font-size: 13px;
	font-weight: 700;
	color: #ccd6f6;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	padding-top: 3px;
}
.otstl75r { color: #4ade80; }
.XMc1gdKT {
	padding: 16px;
	font-size: 11px;
	color: #6a7a9a;
	text-align: center;
}
.QI1hHpZt {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	background: rgba(231, 76, 60, 0.08);
	color: #f59e0b;
	border: 1px solid rgba(245, 158, 11, 0.2);
	border-radius: 8px;
	font-size: 11px;
}
.QI1hHpZt i { font-size: 11px; }

/* ── Draw tools ───────────────────────────────────────────── */
.PBjsfuNK {
	display: flex;
	align-items: center;
	gap: 3px;
	flex-shrink: 0;
}

.NC0ekjP1 {
	display: flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid #1e2035;
	border-radius: 7px;
	color: #4a5070;
	font-size: 12px;
	font-weight: 500;
	padding: 5px 10px;
	cursor: pointer;
	transition: all 0.12s;
	white-space: nowrap;
}
.NC0ekjP1:hover { background: #141624; color: #8892b0; border-color: #2a2d42; }
.r2xa5cd7 {
	background: #0f1e38;
	color: #4a9eed;
	border-color: #1a4a7a;
	font-weight: 600;
}
.r2xa5cd7:hover { background: #0f1e38; color: #4a9eed; }

.dYqaxb8V {
	width: 1px;
	height: 22px;
	background: #1a1d2e;
	margin: 0 6px;
	flex-shrink: 0;
}

/* ── Resize handles ───────────────────────────────────────── */
.qZnuBtUE {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.LsF12E3R {
	position: absolute;
	width: 8px;
	height: 8px;
	background: #fff;
	border: 1.5px solid #4a9eed;
	border-radius: 2px;
	transform: translate(-50%, -50%);
	pointer-events: all;
	z-index: 10;
	transition: background 0.1s;
}
.LsF12E3R:hover { background: #4a9eed; }

/* handle positions */
.zaPqyKlK { left: 0%;   top: 0%;   }
.TQZExAx4  { left: 50%;  top: 0%;   }
.VoWnXMuX { left: 100%; top: 0%;   }
.Pn7KRBpR  { left: 100%; top: 50%;  }
.oNWLabWo { left: 100%; top: 100%; }
.FL3tJCNh  { left: 50%;  top: 100%; }
.AZiUpDXV { left: 0%;   top: 100%; }
.gg1AJCsu  { left: 0%;   top: 50%;  }

/* ── Draw preview ─────────────────────────────────────────── */
.RB2yXP4C {
	position: absolute;
	border: 1.5px dashed #64748b;
	background: rgba(100, 116, 139, 0.06);
	pointer-events: none;
	border-radius: 2px;
}

/* ── Shape color dots in selection toolbar ────────────────── */
.KYkKCqey {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,0.15);
	cursor: pointer;
	transition: transform 0.12s, border-color 0.12s;
	padding: 0;
	flex-shrink: 0;
}
.KYkKCqey:hover { transform: scale(1.2); }
.EK5iLTdT {
	border-color: #fff;
	transform: scale(1.25);
	box-shadow: 0 0 0 2px rgba(255,255,255,0.2);
}

/* ── Canvas toolbar additions ─────────────────────────────── */
.jx2WX3hZ {
	font-size: 11px;
	color: #4a5070;
	background: #111320;
	border: 1px solid #1e2035;
	border-radius: 6px;
	padding: 3px 8px;
}

/* ── Status bar ───────────────────────────────────────────── */
.YWpdjfkc {
	height: 28px;
	flex-shrink: 0;
	background: #0d0e18;
	border-top: 1px solid #14162a;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	font-size: 11px;
	color: #2a3050;
}
.YWpdjfkc kbd {
	background: #1a1d2e;
	border: 1px solid #2a2d42;
	border-radius: 3px;
	padding: 1px 5px;
	font-size: 10px;
	color: #4a5070;
	font-family: inherit;
}
.ReN2CRSD { color: #3a4060; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ── Level element count badge ────────────────────────────── */
.vYZGgNjX {
	background: rgba(74, 158, 237, 0.2);
	color: #4a9eed;
	font-size: 10px;
	font-weight: 600;
	padding: 1px 5px;
	border-radius: 8px;
	margin-left: 5px;
}

/* ── Label edit popup ─────────────────────────────────────── */
._aaHFnoy {
	position: fixed;
	inset: 0;
	z-index: 1300;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0.5);
}
.vcbUOGJs {
	background: #0f1122;
	border: 1px solid #2a2d42;
	border-radius: 14px;
	padding: 24px;
	width: 340px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.7);
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.mxBWc4fq {
	font-size: 13px;
	color: #6a7a9a;
	margin: 0;
}
.mxBWc4fq strong { color: #ccd6f6; }
.LZg3JEij {
	background: #141624;
	border: 1px solid #2a2d42;
	border-radius: 8px;
	color: #ccd6f6;
	font-size: 14px;
	padding: 10px 14px;
	outline: none;
	transition: border-color 0.15s;
}
.LZg3JEij:focus { border-color: #2a5a8a; }
.LZg3JEij::placeholder { color: #3a4060; }
.PmwmtytY {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}
.yapNf7gC {
	background: transparent;
	border: 1px solid #2a2d42;
	border-radius: 8px;
	color: #6a7a9a;
	font-size: 13px;
	padding: 8px 16px;
	cursor: pointer;
	transition: all 0.12s;
}
.yapNf7gC:hover { background: #1a1d2e; color: #ccd6f6; }
.nsY1qmlQ {
	background: #0d3a6a;
	border: 1px solid #1a5aaa;
	border-radius: 8px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	cursor: pointer;
	transition: all 0.12s;
}
.nsY1qmlQ:hover { background: #1a4a8a; }

/* empty state */
.L8F0Ldjf {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	pointer-events: none;
	padding: 40px;
}

.spkBKaI9 {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #0d1020;
	border: 1px solid #1e2545;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32px;
	color: #1a3a6a;
	margin-bottom: 4px;
}

.bpg8ZjlG {
	font-size: 20px;
	font-weight: 700;
	color: #3a4565;
	margin: 0;
}

.gEXP5bt4 {
	font-size: 14px;
	color: #2a3050;
	text-align: center;
	line-height: 1.6;
	margin: 0;
}

.JjtwKxQA {
	display: flex;
	gap: 24px;
	margin-top: 8px;
}

.X_B5XaJY {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	color: #2a3050;
	background: #0d0f1e;
	border: 1px solid #1a1d35;
	border-radius: 8px;
	padding: 8px 14px;
}

/* Guest Line public-profile device mock.
   Renders as a phone-shaped container. All colours come in as
   props (brandColor) so the preview updates live as the user edits. */

.mp1qouYJ {
	width: 320px;
	/* Cap the phone to the preview column so it never overflows. The
	   inner .scroll clips with overflow: hidden, so when the content
	   doesn't fit, the bottom of the events list is what gets cut off. */
	height: 100%;
	max-height: 100%;
	background: #080810;
	border-radius: 36px;
	border: 6px solid #1a1a2e;
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.06),
		0 24px 60px rgba(0,0,0,0.6);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.kz524cmH {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 18px 6px;
	font-size: 10px;
	font-weight: 700;
	color: rgba(255,255,255,0.7);
}

.mfE3CGwk {
	display: flex;
	gap: 5px;
	font-size: 9px;
}

.JiiPPPl_ {
	flex: 1 1;
	min-height: 0;
	overflow: hidden;
	padding: 0 0 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Avatar */
.o6qeR0xY {
	position: relative;
	margin: 16px 0 10px;
}

.hhBwSEHY,
.JPmUsUfq {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
}

.JPmUsUfq {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 800;
	color: #fff;
}

.aeCErdX6 {
	position: absolute;
	bottom: 0;
	right: -2px;
	font-size: 18px;
	color: #06b6d4;
	background: #080810;
	border-radius: 50%;
	line-height: 1;
}

.cmTGS3Yv {
	font-size: 17px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 4px;
	text-align: center;
	padding: 0 16px;
}

.IiUemUOR {
	font-size: 12px;
	color: rgba(255,255,255,0.45);
	margin: 0 0 8px;
}

.O7tVnVZl {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 12px;
}

.frBCMucr {
	font-size: 10px;
	color: rgba(255,255,255,0.5);
	text-decoration: underline;
	-webkit-text-decoration-color: rgba(255,255,255,0.2);
	        text-decoration-color: rgba(255,255,255,0.2);
}

.dtJLhQK8 {
	background: none;
	border: none;
	color: rgba(255,255,255,0.35);
	cursor: pointer;
	font-size: 10px;
	padding: 0;
}

.z1Yr8sHZ {
	font-size: 11px;
	color: rgba(255,255,255,0.6);
	text-align: center;
	line-height: 1.55;
	margin: 0 0 12px;
	padding: 0 16px;
	white-space: pre-line;
}

/* Socials */
.RKqLM27E {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

.oc8yJ_ak {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(255,255,255,0.07);
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.6);
	font-size: 12px;
	text-decoration: none;
}

/* Address card */
.LDg2lG7r {
	width: calc(100% - 20px);
	margin: 0 10px 10px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 12px;
	padding: 10px 12px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.pUvNCXkw {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.pUvNCXkw i {
	color: rgba(255,255,255,0.4);
	font-size: 12px;
	margin-top: 2px;
}

.lYVHSqBC {
	font-size: 11px;
	font-weight: 700;
	color: rgba(255,255,255,0.85);
	margin: 0 0 3px;
}

.xdi_SwXl {
	font-size: 10px;
	color: rgba(255,255,255,0.4);
	margin: 0;
}

._8Cu9p3q {
	font-size: 10px;
	color: rgba(255,255,255,0.45);
	background: none;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 0;
}

/* Featured card */
.a1Ifp9vT {
	width: calc(100% - 20px);
	margin: 0 10px 14px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	padding: 10px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.tF5ZcpRc {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1;
}

.WBkF9bAX {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	flex-shrink: 0;
}

.SRUxqCLt {
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 2px;
}

.yt8x12kH {
	font-size: 10px;
	color: rgba(255,255,255,0.45);
	margin: 0;
}

/* Events */
.KCEQCTLM {
	width: 100%;
	padding: 0 10px;
	box-sizing: border-box;
}

.FjsHiy1g {
	display: flex;
	gap: 6px;
	margin-bottom: 12px;
}

.KAiaua0s {
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,0.1);
	background: transparent;
	color: rgba(255,255,255,0.5);
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}

.bOpWbJXi {
	color: #fff;
	border-color: transparent;
}

.BZbmSCtz {
	font-size: 12px;
	color: rgba(255,255,255,0.25);
	text-align: center;
	margin: 20px 0;
}

.DvDYLLg0 {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.P2Fe_3F2 {
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: 12px;
	overflow: hidden;
}

.lRLlq18q {
	height: 64px;
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 8px 10px;
}

.IKHlAVey {
	position: absolute;
	inset: 0;
}

.KwzCjmBz {
	position: relative;
	font-size: 13px;
	font-weight: 800;
	color: rgba(255,255,255,0.9);
	letter-spacing: 0.02em;
	text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}

.raKbF4Hy {
	padding: 10px 10px 12px;
}

.pJSI12nG {
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 3px;
}

.wvBTGOLo {
	font-size: 10px;
	color: rgba(255,255,255,0.4);
	margin: 0 0 3px;
}

.FqTyp1JX {
	font-size: 10px;
	color: rgba(255,255,255,0.35);
	margin: 0 0 8px;
}

.Hj3Znfo0 {
	width: 100%;
	padding: 8px;
	background: transparent;
	border: 1px solid;
	border-radius: 8px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
}

/* CRM page shell.
   ──────────────────────────────────────────────────────────────
   No-scroll page methodology: shell fills viewport, the active
   tab body is the only region that scrolls. Mirrors the IndEvent
   shell so the user can move between event-mode and CRM-mode
   without a context switch in feel. */

.Pw2gsW5n {
	display: flex;
	height: 100vh;
	width: 100%;
	overflow: hidden;
	background: var(--bg-dark);
	color: var(--text-primary);
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	box-sizing: border-box;
}

.wMPBKIEN {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.m7e6yFRm {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	padding: 28px 32px 0 32px;
	min-height: 0;
	min-width: 0;
}

/* Greeting + global search row. Search is the only header
   chrome - actions specific to a tab live inside the tab. */
.ch3gGheV {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.KWiRj5AZ {
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--white);
	margin: 0;
}

.CqpQz4Z2 {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.lsvIwVG_ {
	position: relative;
	width: 280px;
}

.lsvIwVG_ input {
	width: 100%;
	height: 38px;
	box-sizing: border-box;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-pill);
	color: var(--white);
	padding: 0 14px 0 38px;
	font-family: inherit;
	font-size: 13px;
	transition: border-color 0.15s ease;
}

.lsvIwVG_ input:focus {
	outline: none;
	border-color: rgba(13, 122, 199, 0.55);
}

.lsvIwVG_ i {
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
	color: var(--text-muted);
	font-size: 12px;
}

.Sn57mpZe {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-pill);
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	color: var(--text-secondary);
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.Sn57mpZe:hover {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.18);
}

/* Tab body wrapper - flex grow + min-height:0 lets the inner
   tab module own its scroll container instead of the page. */
.VYHwcRyM {
	flex: 1 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
}

@media (max-width: 768px) {
	.m7e6yFRm { padding: 18px 18px 0 18px; }
	.KWiRj5AZ { font-size: 22px; }
	.lsvIwVG_ { width: 180px; }
}

/* CRM Dashboard - layout + cards.
   ──────────────────────────────────────────────────────────────
   Grid:
     Row 1 - 4 KPI tiles (Total / Avg Age / Avg Spend / Attendance)
     Row 2 - Gender Pie + Free-vs-Pay + Guest Stream (3-col)
     Row 3 - Leaderboard (left, 2fr) + right rail
              ├─ Upcoming Events
              ├─ Action Items
              └─ Suggested Groups */

/* No-scroll page methodology (mirrors the IndEvent dashboard):
   the wrapper fills the available body height EXACTLY and the
   bottom row is sized to absorb whatever's left after the KPI tiles
   and chart row. Without height: 100% + overflow: hidden the third
   row's `1fr` falls back to max-content, the leaderboard expands
   the row to fit all 20 entries, and the right rail gets a tall
   gap below it. */
/* No scroll on the dashboard wrapper itself - scroll happens at the
   parent `.body` level via an inline style in CRM/index.jsx, mirroring
   how Reports scrolls at content_container. Putting the overflow up
   one level sidesteps the Chromium bug where padding-bottom on a
   nested scroll container is clipped when scrolled to the bottom. */
.xZX7tGlV {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto auto;
	grid-gap: 1rem;
	gap: 1rem;
	min-width: 0;
}

/* ── Row 1: KPI tiles ─────────────────────────────────────── */
.tpkcfbSQ {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-gap: 1rem;
	gap: 1rem;
}

@media (max-width: 1100px) {
	.tpkcfbSQ { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Override the shared StatCard spacing for the dashboard KPI tiles.
   The default StatCard is 160px tall with justify-content: space-between
   which leaves a big visual gap between the heading row and the number.
   For the dashboard we want a tighter, more "stat panel" feel. */
.dZHSsqdZ {
	min-height: 0 !important;
	padding: 18px 22px !important;
	justify-content: flex-start !important;
	row-gap: 0.65rem !important;
}

/* ── Row 2: charts ────────────────────────────────────────── */
.TD4gzlFp {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) minmax(0, 1.3fr);
	grid-gap: 1rem;
	gap: 1rem;
}

@media (max-width: 1280px) {
	.TD4gzlFp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.TD4gzlFp > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
	.TD4gzlFp { grid-template-columns: minmax(0, 1fr); }
	.TD4gzlFp > :first-child { grid-column: auto; }
}

/* ── Row 3: leaderboard + right rail ───────────────────────── */
.OCRb9Zho {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	grid-gap: 1rem;
	gap: 1rem;
	min-height: 0;
}

@media (max-width: 1100px) {
	.OCRb9Zho { grid-template-columns: minmax(0, 1fr); }
}

/* The leaderboard (left, 2fr) sets the row height. To stop the
   right rail from leaving dead space at the bottom, the rail is a
   flex column where Upcoming Events + Action Items keep their
   natural height and Suggested Groups (last child) flex-grows to
   absorb whatever space is left. The card's inner list scrolls
   internally if too long; otherwise the card just gets a bit of
   extra breathing room. Either way - no visible gap below. */
.unW6e3vB {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-height: 0;
}

.unW6e3vB > * {
	flex-shrink: 0;
}

.unW6e3vB > *:last-child {
	flex: 1 1;
	min-height: 0;
}

/* ── Card chrome (shared) ─────────────────────────────────── */
.dIlsHsmS {
	background: var(--sub-bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 16px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.025),
		0 1px 2px rgba(0, 0, 0, 0.35),
		0 8px 24px rgba(0, 0, 0, 0.18);
	/* overflow stays visible so Nivo chart tooltips can extend past
	   the card / row / viewport edges. Children that need clipping
	   handle it themselves. */
	overflow: visible;
	display: flex;
	flex-direction: column;
}

.VmF6LlTn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.55);
	flex-shrink: 0;
}

.APItOaLp {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	color: var(--white);
	font-size: 14px;
	font-weight: 700;
}

.APItOaLp i {
	color: var(--accent-1);
	font-size: 12px;
}

.E8a9qHJC {
	font-size: 11px;
	color: var(--text-muted);
	font-weight: 500;
}

.B_JFbUwa {
	background: none;
	border: none;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0;
	transition: color 0.15s ease;
}

.B_JFbUwa:hover { color: var(--accent-1); }

.CfqJUx33 {
	padding: 1.1rem 1.25rem;
	flex: 1 1;
	min-height: 0;
}

.TLwyBVVk {
	padding: 0;
	flex: 1 1;
	min-height: 0;
}

/* Used by the three middle chart cards (Gender / FreeVsPay / GuestStream)
   so their legends all sit on the same baseline at the bottom of the
   card regardless of the chart shape inside. The chart wrapper grows to
   fill remaining space and the legend gets margin-top: auto. */
.LHBH9tr6 {
	padding: 1.1rem 1.25rem;
	flex: 1 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	overflow: visible;
}

.Iqi8IndV {
	flex: 1 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.sqUkW4AN { align-items: stretch; }

/* Wrapper for a Nivo Responsive chart. ResponsivePie / ResponsiveBar
   need a definite size on the parent (not just min-height) or they
   render at 0 and snap up on first resize - producing the "skewed and
   tiny" look. Fixed height + full width gives them a real bounding box. */
.Ni4BoOGL {
	width: 100%;
	height: 240px;
	position: relative;
	/* Tooltip is positioned absolutely by Nivo - parents up the chain
	   need overflow: visible too (see .card / .card_body_chart). */
	overflow: visible;
}

.OVV3gOx6 { margin-top: auto; }

/* Expandable-card affordance.
   Mirrors the IndEvent dashboard pattern (Revenue / Sales Channels /
   Top Promoters cards) so the visual language is identical across
   the in-event and CRM modes:
     - subtle ::after icon (fa-up-right-and-down-left-from-center)
       in the top-right corner, hidden at rest
     - on hover/focus the card lifts 1px, the subtitle text fades
       OUT (so the icon has a clean slot and doesn't sit on top of
       e.g. "62% paid · last 12 months"), and the icon fades IN
     - on focus-visible the card gets a blue ring + the icon shows */
._keOQ8v0 {
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
	position: relative;
}

._keOQ8v0:hover {
	transform: translateY(-1px);
	border-color: rgba(255, 255, 255, 0.08);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.04),
		0 2px 4px rgba(0, 0, 0, 0.4),
		0 12px 32px rgba(0, 0, 0, 0.28);
}

._keOQ8v0:active { transform: translateY(0); }

._keOQ8v0:focus-visible {
	outline: none;
	border-color: rgba(13, 122, 199, 0.55);
	box-shadow: 0 0 0 2px rgba(13, 122, 199, 0.18);
}

._keOQ8v0::after {
	content: '\f424';
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	font-size: 10px;
	color: rgba(255, 255, 255, 0.25);
	opacity: 0;
	transition: opacity 0.15s ease, color 0.15s ease;
	pointer-events: none;
	z-index: 2;
}

._keOQ8v0:hover::after,
._keOQ8v0:focus-visible::after {
	opacity: 1;
	color: rgba(255, 255, 255, 0.55);
}

/* Some cards (e.g. Guest Stream) have tabs in their header where
   the corner expand glyph would normally sit. Suppress the ::after
   icon for those - they render an inline expand button instead so
   it never overlaps the tab strip. */
.wZg50lqe::after { content: none !important; }

/* Inline expand button - visible at rest at low opacity, brightens
   on card hover. Use for cards that can't fit the corner icon. */
.tGVMLusl {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: transparent;
	border: 1px solid var(--border-soft);
	color: var(--text-muted);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	font-size: 10px;
	transition: all 0.15s ease;
	flex-shrink: 0;
}

._keOQ8v0:hover .tGVMLusl,
._keOQ8v0:focus-visible .tGVMLusl {
	color: var(--white);
	border-color: rgba(13, 122, 199, 0.55);
}

.tGVMLusl:hover {
	background: rgba(13, 122, 199, 0.15);
	color: var(--white);
	border-color: rgba(13, 122, 199, 0.55);
}

/* Fade the header subtitle / link out on hover so the expand icon
   has a clean target and doesn't overlap "62% paid · last 12 months"
   or "271 sold · $5,420". The text returns the moment focus leaves. */
._keOQ8v0 .E8a9qHJC,
._keOQ8v0 .B_JFbUwa {
	transition: opacity 0.15s ease;
}

._keOQ8v0:hover .E8a9qHJC,
._keOQ8v0:hover .B_JFbUwa,
._keOQ8v0:focus-visible .E8a9qHJC,
._keOQ8v0:focus-visible .B_JFbUwa {
	opacity: 0;
}

/* ── Free vs Pay (stacked bars per month) ──────────────────
   Layout:
     .fvp_chart  - fixed 220px row, columns stretch to its full
                   height so children can size with percentages
     .fvp_col    - one column per month: chart area on top, label
                   pinned at the bottom
     .fvp_bars   - flex:1 area within the column, align flex-end so
                   the stack hugs the baseline
     .fvp_stack  - explicit height % of .fvp_bars (column height
                   relative to the tallest column = max)
     .fvp_seg    - free segment on top + pay segment below, each
                   with height % of the parent stack */
.JKu4wuys {
	flex: 1 1;
	min-height: 180px;
	width: 100%;
	display: flex;
	align-items: stretch;
	gap: 8px;
	padding: 0 4px;
	position: relative;
}

/* Each column is a 2-row grid so the bars area + label are pinned
   to their rows. This guarantees every label sits on the same baseline
   regardless of how tall the bar above it is. */
.eAZrUSmM {
	flex: 1 1;
	min-width: 0;
	display: grid;
	grid-template-rows: 1fr auto;
	height: 100%;
}

.S1_NGHYE {
	display: flex;
	align-items: flex-end;
	justify-content: stretch;
	min-height: 0;
	min-width: 0;
}

.JtN0jk00 {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius: 6px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.03);
	min-height: 2px;
}

.QhZiywTp {
	width: 100%;
	transition: filter 0.15s ease;
}

/* Two-tone blue: solid brand blue on the bottom (Pay = the
   foundation), lighter sky blue stacked on top (Free). */
.GnSSrYek  { background: var(--accent-1); }
.XVb1_Qbj { background: #6db8ed; }

.eAZrUSmM:hover .QhZiywTp { filter: brightness(1.15); }

.I79coKYx {
	margin-top: 8px;
	font-size: 10px;
	color: var(--text-muted);
	text-align: center;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.FoadBISP {
	display: flex;
	gap: 1rem;
	margin-top: 0.6rem;
	font-size: 11px;
	color: var(--text-secondary);
}

.ykcF9946 {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.ADMebgiQ {
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

/* ── Gender Pie ──────────────────────────────────────────── */
.MjCAZeWS {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.CrB9uvEi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 0.45rem 1.2rem;
	gap: 0.45rem 1.2rem;
	margin-top: 0.4rem;
	width: 100%;
	font-size: 12px;
	color: var(--text-secondary);
}

.pjwoaYD4 {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
}

.l1bOgdpm {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}

.GlI1zxvT {
	flex: 1 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: capitalize;
}

.re6jWN3k {
	color: var(--white);
	font-weight: 700;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

/* ── Guest Stream (line chart) ─────────────────────────────── */
/* Flex:1 so it fills remaining height of card_body_chart between
   the range row at top and the legend pinned at the bottom. */
.P8NUoNzw {
	position: relative;
	width: 100%;
	flex: 1 1;
	min-height: 180px;
}

.XtQ3wZXP { width: 100%; height: 100%; display: block; }

.zohg1nst {
	position: absolute;
	transform: translate(-50%, -130%);
	min-width: 200px;
	background: #14161c;
	border: 1px solid #2d2f39;
	border-radius: 12px;
	padding: 14px 16px;
	font-size: 13px;
	color: #ffffff;
	pointer-events: none;
	white-space: nowrap;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
	font-family: inherit;
}

.Y1WwAAXe {
	font-size: 15px;
	font-weight: 700;
	color: #ffffff;
}

.jflkDkFP {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgb(120, 132, 150);
	margin-top: 4px;
}

._NIMNGg0 {
	display: flex;
	gap: 0.35rem;
	margin-bottom: 0.6rem;
}

.rQMeQVaz {
	background: transparent;
	border: 1px solid var(--border-soft);
	color: var(--text-secondary);
	border-radius: var(--radius-pill);
	padding: 4px 10px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}

.rQMeQVaz:hover {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.18);
}

.iFfAboXa {
	color: var(--white);
	background: rgba(13, 122, 199, 0.18);
	border-color: rgba(13, 122, 199, 0.55);
}

/* ── Leaderboard ──────────────────────────────────────────── */
/* The leaderboard card is the left-hand neighbour of the right rail
   (3 stacked cards) so the row stretches to match. We let the list
   fill the available card height and scroll if needed - that means
   we can show 12+ entries instead of 8 with no dead space below. */
.FZpWWGl2 {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
}

.FZpWWGl2::-webkit-scrollbar { width: 4px; }
.FZpWWGl2::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

.XAG_U1EU {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.55rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.4);
	transition: background 0.15s ease;
}

.XAG_U1EU:hover { background: rgba(255, 255, 255, 0.025); }
.XAG_U1EU:last-child { border-bottom: none; }

.G0FhQX_E {
	width: 22px;
	font-size: 11px;
	font-weight: 700;
	color: var(--text-muted);
	text-align: center;
	flex-shrink: 0;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.coibXsix {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.02em;
	flex-shrink: 0;
}

.pyvUhsU8 {
	flex: 1 1;
	min-width: 0;
}

.Cm6ROwBz {
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.UuypThk4 {
	font-size: 11px;
	color: var(--text-muted);
	margin: 2px 0 0 0;
}

.jXvrdKht {
	font-size: 12px;
	font-weight: 700;
	color: var(--white);
	background: rgba(13, 122, 199, 0.15);
	border: 1px solid rgba(13, 122, 199, 0.35);
	border-radius: var(--radius-pill);
	padding: 3px 10px;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

/* ── Upcoming Events ──────────────────────────────────────── */
.UoSucuGK {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
}

.UoSucuGK::-webkit-scrollbar { width: 4px; }
.UoSucuGK::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

.D7FVGwvE {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.75rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.4);
}

.D7FVGwvE:last-child { border-bottom: none; }

.kxqeDOhZ {
	width: 36px;
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	color: var(--text-secondary);
}

.N5oOpyF5 {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
}

.Xv9ipN6E {
	font-size: 18px;
	font-weight: 800;
	color: var(--white);
	line-height: 1;
}

.iGjBGsa5 {
	flex: 1 1;
	min-width: 0;
}

.Gn5GWeWB {
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	margin: 0;
}

.QZFLIRBK {
	font-size: 11px;
	color: var(--text-muted);
	margin: 2px 0 0 0;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.hlFSpxM8 {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 1px solid rgba(13, 122, 199, 0.35);
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.15s ease;
}

.hlFSpxM8:hover {
	background: var(--accent-1);
	color: var(--white);
}

/* ── Insights card tab strip ──────────────────────────────── */
/* Sits in the card header where the subtitle would normally go.
   Active tab gets the accent underline pattern used by the inner
   tabs inside the guest detail drawer, so the visual language is
   consistent across the whole CRM. */
.SV6SZHWQ {
	display: inline-flex;
	gap: 2px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-pill);
	padding: 2px;
}

.jpu0parJ {
	background: transparent;
	border: none;
	padding: 4px 10px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	color: var(--text-muted);
	cursor: pointer;
	border-radius: var(--radius-pill);
	transition: all 0.15s ease;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.jpu0parJ:hover { color: var(--white); }

.eJYVJHYs {
	background: rgba(13, 122, 199, 0.18);
	color: var(--white);
	box-shadow: inset 0 0 0 1px rgba(13, 122, 199, 0.55);
}

.CiPFGcHb {
	font-size: 9px;
	font-weight: 700;
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
	padding: 1px 6px;
	border-radius: var(--radius-pill);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.eJYVJHYs .CiPFGcHb {
	background: rgba(13, 122, 199, 0.4);
}

/* ── Action Items / Suggested Groups (right rail) ──────────── */
.voxyxe9n,
.lfiEzatz {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
}

.voxyxe9n::-webkit-scrollbar,
.lfiEzatz::-webkit-scrollbar { width: 4px; }
.voxyxe9n::-webkit-scrollbar-thumb,
.lfiEzatz::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

.P3rqzhPR,
.uDUmXH2D {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.85rem 1.25rem;
	border-bottom: 1px solid rgba(45, 47, 57, 0.4);
	background: none;
	border-left: none;
	border-right: none;
	border-top: none;
	width: 100%;
	text-align: left;
	color: inherit;
	font-family: inherit;
	cursor: pointer;
	transition: background 0.15s ease;
}

.P3rqzhPR:last-child,
.uDUmXH2D:last-child { border-bottom: none; }

.P3rqzhPR:hover,
.uDUmXH2D:hover { background: rgba(255, 255, 255, 0.025); }

.yoPrv6oJ,
.pO8zA58Z {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.RIHRKDYK,
.XH_gFVw_ {
	flex: 1 1;
	min-width: 0;
}

.MqT9mP6U,
.eDkJ54lK {
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	margin: 0;
}

.bYRlyN2C,
.Ub5iTX6j {
	font-size: 11px;
	color: var(--text-muted);
	margin: 2px 0 0 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.wqcg_YWk {
	font-size: 14px;
	font-weight: 800;
	color: var(--white);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 0.35rem;
}

.wqcg_YWk i {
	font-size: 9px;
	color: var(--text-muted);
}

.I0k1_A4k {
	font-size: 12px;
	font-weight: 700;
	color: var(--text-secondary);
	background: rgba(255, 255, 255, 0.04);
	border-radius: var(--radius-pill);
	padding: 3px 10px;
	flex-shrink: 0;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

/* ── Skeleton states ──────────────────────────────────────── */
.AzOPDVUx {
	min-height: 130px;
	border-radius: 16px;
	background: var(--sub-bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.04);
}

.CEJdchR5 {
	min-height: 280px;
	border-radius: 16px;
	background: var(--sub-bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.04);
}

.Rx6hJHvN {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	gap: 0.5rem;
	color: var(--text-muted);
	font-size: 12px;
}

.Rx6hJHvN i { font-size: 24px; opacity: 0.4; }

.zNO_PZ2U {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 32px 16px;
	text-align: center;
	color: var(--text-muted);
}
.zNO_PZ2U i { font-size: 22px; opacity: 0.45; }
.zNO_PZ2U p { margin: 0; font-size: 12px; }

.MszhLq3L {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.7);
	font-size: 11px;
	font-weight: 600;
}

:root {
	--white: #ffffff;
	--black: #000000;
	--bg-dark: #01000D;
	--sub-bg-dark: #161824;
	--sub-bg-light: #f0f1f2;
	--accent-1: #0D7AC7;
	--success-green: #3CA259;
	--cancelled-red: #ff2626;

	--text-primary: #ffffff;
	--text-secondary: rgb(151, 163, 180);
	--text-muted: rgb(120, 132, 150);
	--border-soft: #2d2f39;
	--border-softer: rgba(255, 255, 255, 0.08);

	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-pill: 999px;
}

.t-xs1 { font-size: 8px; }
.t-xs2 { font-size: 10px; }
.t-xs3 { font-size: 12px; }
.t-s1  { font-size: 14px; }
.t-s2  { font-size: 15px; }
.t-s3  { font-size: 16px; }
.t-m1  { font-size: 17px; }
.t-m2  { font-size: 22px; }
.t-m3  { font-size: 25px; }
.t-l1  { font-size: 28px; }
.t-l2  { font-size: 31px; }
.t-l3  { font-size: 34px; }
.t-xl1 { font-size: 37px; }
.t-xl2 { font-size: 40px; }
.t-xl3 { font-size: 43px; }

.t-bold   { font-weight: 600; }
.t-bolder { font-weight: 700; }

.t-muted   { color: var(--text-muted); }
.t-subtle  { color: var(--text-secondary); }
.t-primary { color: var(--text-primary); }

/* Mirrors the Hub's `.hb_add_btn` (the "+ Event" button on the hub
   header) so primary buttons across GuestiisNew have one visual
   language - gradient body, soft lift on hover, no border. */
.Tc6Tsb3X {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0 1.15rem;
	height: 34px;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.07);
	color: rgba(255, 255, 255, 0.75);
	border-radius: 8px;
	cursor: pointer;
	font-family: var(--font-family);
	font-size: 13px;
	font-weight: 500;
	transition: all 0.2s ease;
	white-space: nowrap;
	-webkit-user-select: none;
	        user-select: none;
}

.Tc6Tsb3X:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.07);
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.12);
}

.Tc6Tsb3X:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.Tc6Tsb3X .kW9y3wOS { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.Tc6Tsb3X .kW9y3wOS i { font-size: 11px; color: rgba(255, 255, 255, 0.55); transition: color 0.15s ease; }
.Tc6Tsb3X:hover:not(:disabled) .kW9y3wOS i { color: var(--white); }

/* `size` is a no-op now - the Hub button is a single size. The
   `md` / `sm` classes stay as identity selectors so callers passing
   `size="md"` / `size="sm"` don't error out. */
.v59nS_yJ {}
.dNDFnre2 {}

/* Primary mirrors the Hub `.hb_add_btn` exactly: accent-1 → #0099cc
   gradient body, no border, white text + icon, soft cyan glow on
   hover with a 1px upward lift. */
.Z6ABCLf_ {
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border-color: transparent;
	color: var(--white);
}
.Z6ABCLf_ .kW9y3wOS i { color: var(--white); }
.Z6ABCLf_:hover:not(:disabled) {
	background: linear-gradient(135deg, var(--accent-1) 0%, #0099cc 100%);
	border-color: transparent;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 191, 255, 0.3);
}
.Z6ABCLf_:hover:not(:disabled) .kW9y3wOS i { color: var(--white); }

.HSuEJHPI {
	background-color: var(--sub-bg-dark);
	border-color: var(--border-soft);
	color: var(--white);
}
.HSuEJHPI:hover:not(:disabled) { border-color: var(--border-softer); }

.tdBKmGZl {
	background-color: transparent;
	border-color: var(--border-soft);
	color: var(--white);
}
.tdBKmGZl:hover:not(:disabled) { background-color: var(--sub-bg-dark); }

.OScfzJjz {
	background-color: var(--cancelled-red);
	color: var(--white);
}
.OScfzJjz:hover:not(:disabled) { background-color: #e01d1d; }

.kW9y3wOS {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	flex-shrink: 0;
}

.x7oOyPDk {
	width: 100%;
	min-height: 160px;
	border-radius: var(--radius-lg);
	background-color: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	padding: 22px 24px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	row-gap: 0.75rem;
	position: relative;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.x7oOyPDk:hover {
	border-color: var(--border-softer);
}

.qdoVMmir {
	min-height: 120px;
	border-radius: var(--radius-md);
	padding: 14px 16px;
	row-gap: 0.55rem;
}

.vhnKFcHK {
	display: flex;
	align-items: center;
	column-gap: 0.75rem;
}

.hAOmFMDy {
	column-gap: 0.55rem;
}

.QrfBpEzg {
	height: 36px;
	width: 36px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.nReOOi3N {
	height: 28px;
	width: 28px;
	border-radius: 8px;
}

.QrfBpEzg i {
	font-size: 14px;
}

.nReOOi3N i {
	font-size: 12px;
}

.ku4aGgIF {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.j5yGic1p {
	font-size: 10px;
}

.yVJNVGIY {
	font-size: 32px;
	font-weight: 800;
	color: var(--text-primary);
	line-height: 1;
	letter-spacing: -0.02em;
	display: flex;
	align-items: baseline;
	column-gap: 0.25rem;
}

.TeEvy2_B {
	font-size: 22px;
}

.mxmsdBz8 {
	font-size: 20px;
	font-weight: 600;
	color: var(--text-secondary);
}

.XE8WBqN7 {
	font-size: 14px;
}

.PJZznnKM {
	font-size: 11px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--text-muted);
	margin: 0;
	letter-spacing: 0.01em;
}

.j_OtM4wM {
	width: 100%;
	min-height: 420px;
	border-radius: var(--radius-lg);
	background-color: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	padding: 24px 26px 22px 26px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	position: relative;
	overflow: hidden;
}

.de0W0ZqC {
	display: flex;
	flex-direction: column;
	row-gap: 0.2rem;
	flex-shrink: 0;
}

.t7U8u20o {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	column-gap: 1rem;
}

.mQxt3i9X {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: -0.01em;
}

.ZzTTUNmd {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
}

.yKxAX4Wo {
	width: 100%;
	flex: 1 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.q4hiU7fr {
	height: 320px;
	flex-shrink: 0;
}

.Oc9VjNz1 {
	display: flex;
	align-items: center;
	column-gap: 8px;
	border-bottom: 1px solid var(--border-soft);
	padding-bottom: 0;
}

.taD0OeH6 {
	flex: 1 1;
}

.UtsxHdUi {
	background: transparent;
	border: none;
	padding: 10px 18px;
	margin-bottom: -1px;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-secondary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	column-gap: 6px;
	border-bottom: 2px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.UtsxHdUi:hover {
	color: var(--text-primary);
}

.r7Zi6UGK {
	color: var(--text-primary);
	border-bottom-color: var(--accent-1);
}

.r_3sdP6C {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	padding: 0 6px;
	height: 18px;
	border-radius: var(--radius-pill);
	background-color: var(--border-soft);
	color: var(--text-primary);
	font-size: 10px;
	font-weight: 700;
}

.r7Zi6UGK .r_3sdP6C {
	background-color: var(--accent-1);
}

.xoeVOz7a {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	column-gap: 1rem;
	padding-bottom: 12px;
}

.tg3g9tAk {
	display: flex;
	flex-direction: column;
	row-gap: 2px;
	min-width: 0;
}

.x4NtSL07 {
	font-size: 18px;
	font-weight: 700;
	color: var(--text-primary);
	letter-spacing: -0.01em;
}

.PwZU7q0m {
	font-size: 12px;
	font-weight: 500;
	color: var(--text-muted);
}

.pQqZ3bRV {
	display: flex;
	align-items: center;
	column-gap: 8px;
	flex-shrink: 0;
}

.WCPa6TVx {
	display: inline-flex;
	align-items: center;
	column-gap: 8px;
	padding: 10px 14px;
	border-radius: var(--radius-pill);
	background-color: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	width: 350px;
	box-sizing: border-box;
	transition: border-color 0.15s ease;
}

.WCPa6TVx:focus-within {
	border-color: var(--accent-1);
}

.BjDCt6S3 {
	width: 100%;
}

.WRuYRp5e {
	color: var(--text-muted);
	font-size: 13px;
	flex-shrink: 0;
}

.odWGhpDd {
	flex: 1 1;
	background: transparent;
	border: none;
	outline: none;
	color: var(--text-primary);
	font-size: 14px;
	min-width: 0;
}

.odWGhpDd::placeholder {
	color: var(--text-muted);
}

.UxaM74KW {
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
}

.UxaM74KW:hover {
	color: var(--text-primary);
}

.A2j5RKV3 {
	position: fixed;
	inset: 0;
	background-color: rgba(1, 0, 13, 0.72);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	padding: 20px;
	box-sizing: border-box;
	animation: mauqGtBe 0.15s ease;
}

.b8jXpJll {
	background-color: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	max-height: 88vh;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
	animation: Qg_5fdwN 0.18s ease;
	overflow: hidden;
}

.VflsZqyE { width: 100%; max-width: 420px; }
.qb4H7RPv { width: 100%; max-width: 600px; }
.wkdZ3HSt { width: 100%; max-width: 880px; }

.HThKuBhC {
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 12px;
	padding: 18px 22px;
	border-bottom: 1px solid var(--border-soft);
	flex-shrink: 0;
}

.gbqUcnEe {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-primary);
}

.zu2_Y2Lg {
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-sm);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.zu2_Y2Lg:hover {
	background-color: var(--border-soft);
	color: var(--text-primary);
}

.yyPcPHNR {
	padding: 20px 22px;
	overflow-y: auto;
	flex: 1 1;
}

.HYGUfU2D {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	column-gap: 10px;
	padding: 16px 22px;
	border-top: 1px solid var(--border-soft);
	flex-shrink: 0;
}

@keyframes mauqGtBe {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes Qg_5fdwN {
	from { opacity: 0; transform: translateY(8px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.CHMYdxJe {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	row-gap: 12px;
	padding: 48px 24px;
	text-align: center;
	color: var(--text-muted);
}

.FnVjNrDH {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-pill);
	background-color: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-secondary);
	font-size: 20px;
}

._l_3xbIm {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
}

.pSyEM1M2 {
	font-size: 12px;
	color: var(--text-muted);
	max-width: 360px;
	line-height: 1.5;
}

.fLBmj3lq {
	margin-top: 4px;
}

.V2dan9P7 {
	display: block;
	border-radius: var(--radius-md);
}

.zIths0hN {
	display: flex;
	align-items: center;
	column-gap: 12px;
	padding: 14px;
	border-radius: var(--radius-md);
	background-color: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
}

.N1LVyoFj {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}

.c2_VFTKG {
	display: flex;
	flex-direction: column;
	row-gap: 6px;
	flex: 1 1;
	min-width: 0;
}

.wxp6_JJJ { width: 60%; height: 12px; border-radius: 4px; }
.N9iFck9B { width: 40%; height: 10px; border-radius: 4px; }

.WZOwZvtm {
	display: inline-flex;
	align-items: center;
	column-gap: 6px;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	border: 1px solid transparent;
}

.UYvaQ07x {
	background-color: rgba(151, 163, 180, 0.12);
	border-color: rgba(151, 163, 180, 0.28);
	color: var(--text-secondary);
}

.ovFzkrZ_ {
	background-color: rgba(13, 122, 199, 0.15);
	border-color: rgba(13, 122, 199, 0.35);
	color: #3aa0e0;
}

.xs_aNTiR {
	background-color: rgba(60, 162, 89, 0.12);
	border-color: rgba(60, 162, 89, 0.35);
	color: var(--success-green);
}

.wqUDXrjb {
	background-color: rgba(245, 158, 11, 0.12);
	border-color: rgba(245, 158, 11, 0.35);
	color: #f59e0b;
}

.liCSFINB {
	background-color: rgba(255, 38, 38, 0.12);
	border-color: rgba(255, 38, 38, 0.35);
	color: var(--cancelled-red);
}

.E6M_UlyM {
	width: 6px;
	height: 6px;
	border-radius: var(--radius-pill);
	background-color: currentColor;
}

.MKWqoxDH {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	color: var(--text-primary);
	font-weight: 700;
	letter-spacing: 0.02em;
	flex-shrink: 0;
	-webkit-user-select: none;
	        user-select: none;
}

.BG4NHrij  { width: 28px; height: 28px; font-size: 10px; }
.Tswr8bYS  { width: 36px; height: 36px; font-size: 12px; }
.eLeu5JKZ  { width: 52px; height: 52px; font-size: 16px; }
.ndZ12cdT  { width: 72px; height: 72px; font-size: 22px; }

.XkLn4rNx {
	width: 100%;
	height: 100%;
	border-radius: inherit;
	object-fit: cover;
	display: block;
}

.KTJDrfLj {
	height: 56px;
	background: #0a0b11;
	border-bottom: 1px solid #2d2f39;
	display: flex;
	align-items: center;
	padding: 0 24px;
	flex-shrink: 0;
	gap: 0;
}

.drXLkGcD {
	color: var(--white);
	font-size: 14px;
	font-weight: 600;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.oXvSbDI7 {
	margin-left: 10px;
	font-size: 11px;
	font-weight: 500;
	color: rgb(120, 132, 150);
}

/* CRM shared drawer chrome.
   ──────────────────────────────────────────────────────────────
   Same recipe as indevent-project/src/components/IndEvent/drawers/
   Drawer.module.css - kept local to the CRM module so future
   tweaks (wider rail, different stack rules) don't ripple into
   the in-event experience. */

.T7cegaR3 {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 1000;
	animation: HWgcfuCC 0.2s ease;
}

.K7tjWi8I {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 720px;
	max-width: 92vw;
	background: rgba(20, 22, 30, 0.78);
	backdrop-filter: blur(24px) saturate(170%);
	-webkit-backdrop-filter: blur(24px) saturate(170%);
	border-left: 1px solid rgba(255, 255, 255, 0.08);
	z-index: 1001;
	display: flex;
	flex-direction: column;
	box-shadow: -16px 0 40px rgba(0, 0, 0, 0.4);
	animation: nCae0WkN 0.28s ease;
}

.PFGXhNR5 { width: 540px; }
.lA_R5wpF   { width: 920px; }

@keyframes HWgcfuCC    { from { opacity: 0; }    to { opacity: 1; } }
@keyframes k2owkB1m { from { opacity: 1; }    to { opacity: 0; } }
@keyframes nCae0WkN   { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes TW_GtSvU{ from { transform: translateX(0); } to   { transform: translateX(100%); } }

.UPNG7FYL          { animation: TW_GtSvU 0.26s cubic-bezier(0.4, 0, 1, 1) forwards; }
.lqaulh2A { animation: k2owkB1m 0.22s ease forwards; }

.EXdzWbW4 {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.4rem 1.5rem;
	background:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.045) 0%,
			rgba(255, 255, 255, 0.012) 100%),
		rgba(20, 22, 30, 0.55);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 4px 14px rgba(0, 0, 0, 0.18);
	flex-shrink: 0;
	z-index: 2;
}

.PsV42B01 {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	border: 1px solid #2d2f39;
	background: rgba(255, 255, 255, 0.02);
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-family: inherit;
	transition: all 0.15s ease;
}

.PsV42B01:hover {
	background: rgba(255, 255, 255, 0.06);
	color: var(--white);
	border-color: #3d4052;
}

.mDXptRpI { flex: 1 1; min-width: 0; }

.hk_rPzEQ {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--white);
}

.pkHVvupw {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.4rem;
	font-size: 12px;
	color: var(--text-muted);
	flex-wrap: wrap;
}

.JUtRU4P1 { color: rgba(255, 255, 255, 0.18); }
.DaLzu4Pp { color: var(--white); font-weight: 600; }

.b2B6jKrb {
	flex: 1 1;
	overflow-y: auto;
	padding: 1.5rem;
	background: var(--bg-dark);
}

.b2B6jKrb::-webkit-scrollbar { width: 4px; }
.b2B6jKrb::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

.uto3Ha65 {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	background:
		linear-gradient(0deg,
			rgba(255, 255, 255, 0.045) 0%,
			rgba(255, 255, 255, 0.012) 100%),
		rgba(20, 22, 30, 0.55);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow:
		inset 0 -1px 0 rgba(255, 255, 255, 0.04),
		0 -4px 14px rgba(0, 0, 0, 0.18);
	flex-shrink: 0;
	z-index: 2;
}

.qrBeVXMr { flex: 1 1; }

.gZKhc1N1 {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.65rem 1.1rem;
	background: var(--accent-1);
	color: var(--white);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

.gZKhc1N1:hover:not(:disabled) { background: #1389d8; }
.gZKhc1N1:active:not(:disabled) { transform: scale(0.98); }
.gZKhc1N1:disabled { opacity: 0.4; cursor: not-allowed; }

.aVVhc8BU {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.65rem 1rem;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.85);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}

.aVVhc8BU:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.08);
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.14);
}

.LCFPtpMp { margin-bottom: 1.75rem; }
.LCFPtpMp:last-child { margin-bottom: 0; }

.HYOX_1LJ {
	margin: 0 0 0.85rem;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 600px) {
	.K7tjWi8I, .PFGXhNR5, .lA_R5wpF {
		width: 100vw;
		max-width: 100vw;
	}
	.EXdzWbW4 { padding: 1.1rem 1.1rem; }
	.b2B6jKrb   { padding: 1.1rem; }
	.uto3Ha65 { padding: 0.85rem 1.1rem; }
}

/* GuestDetailDrawer-specific bits.
   Drawer chrome reuses the shared Drawer.module.css. */

.CFaH3vnu {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 1.5rem;
}

.jAIVCEtR {
	flex: 1 1;
	min-width: 0;
}

.byhnNqfn {
	font-size: 18px;
	font-weight: 700;
	color: var(--white);
	margin: 0;
}

.NmKrKpMi {
	font-size: 12px;
	color: var(--text-muted);
	margin-top: 1px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.PYITNFU2 {
	display: flex;
	gap: 6px;
	flex-shrink: 0;
}

.kSX8NpKg {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	color: var(--text-secondary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
}

.kSX8NpKg:hover {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.18);
}

.H_z00Mdn {
	background: var(--accent-1);
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.08);
}

.H_z00Mdn:hover { background: #1389d8; color: var(--white); }

/* ── Stat row: Events / Attendance / Spend ────────────── */
.lBNcUKCB {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
	gap: 10px;
	margin-bottom: 1.5rem;
}

.k3NxiRhp {
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hQH36coC {
	font-size: 22px;
	font-weight: 800;
	color: var(--white);
	line-height: 1;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.GXaUBpaD {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* ── Inner tab strip ────────────────────────────────────── */
._dc1Lpil {
	display: flex;
	gap: 6px;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--border-soft);
}

.Quk8f1HG {
	background: transparent;
	border: none;
	padding: 8px 14px;
	margin-bottom: -1px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: all 0.15s ease;
}

.Quk8f1HG:hover { color: var(--white); }
.LGk_rELB { color: var(--white); border-bottom-color: var(--accent-1); }

.Pkw74iZg {
	margin-left: 6px;
	background: var(--border-soft);
	color: var(--white);
	font-size: 9px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 999px;
	letter-spacing: 0;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

/* ── Details tab ────────────────────────────────────────── */
.vu6T2o3I {
	display: grid;
	grid-template-columns: 100px 1fr;
	grid-row-gap: 10px;
	row-gap: 10px;
	grid-column-gap: 16px;
	column-gap: 16px;
	font-size: 13px;
}

.C6ncjfG4 {
	color: var(--text-muted);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.BNQvjTjH {
	color: var(--white);
	font-weight: 500;
}

.IhUC2ULX { display: flex; flex-wrap: wrap; gap: 6px; }

.wPneojV1 {
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-secondary);
	border: 1px solid var(--border-soft);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.a0mnWTCr {
	background: transparent;
	border: none;
	padding: 0 0 0 2px;
	margin-left: 2px;
	color: var(--text-muted);
	font-family: inherit;
	font-size: 10px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	width: 14px;
	height: 14px;
	transition: all 0.15s ease;
}

.a0mnWTCr:hover {
	color: var(--white);
	background: rgba(239, 68, 68, 0.25);
}

/* ── Events tab ────────────────────────────────────────── */
.icMDIaKi {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-gap: 12px;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(45, 47, 57, 0.4);
	align-items: center;
}

.gEYAtLuq {
	font-size: 9px;
	font-weight: 700;
	padding: 3px 7px;
	border-radius: 5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.RzgORTyL  { background: rgba(13, 122, 199, 0.18); color: var(--accent-1); border: 1px solid rgba(13, 122, 199, 0.4); }
.KB0vgT40 { background: rgba(34, 197, 94, 0.15);  color: #22c55e;          border: 1px solid rgba(34, 197, 94, 0.35); }
.Ly3JWa08 { background: rgba(148, 163, 184, 0.15); color: var(--text-muted); border: 1px solid rgba(148, 163, 184, 0.35); }

.x0Zc7TR1 { color: var(--white); font-weight: 600; font-size: 13px; margin: 0; }
.ddCX7FMR { color: var(--text-muted); font-size: 11px; margin: 2px 0 0; }

.j_99rdRX { color: var(--white); font-weight: 700; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ── Expandable event card ─────────────────────────────── */
.V3pUSuqv {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(45, 47, 57, 0.6);
	border-radius: 12px;
	margin-bottom: 10px;
	overflow: hidden;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
	position: relative;
}

.V3pUSuqv:hover {
	background: rgba(255, 255, 255, 0.035);
	border-color: rgba(13, 122, 199, 0.35);
}

.EufzbQHk {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	grid-gap: 14px;
	gap: 14px;
	width: 100%;
	padding: 14px 16px;
	background: transparent;
	border: none;
	color: inherit;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	align-items: center;
}

.EufzbQHk:hover .x0Zc7TR1 { color: var(--accent-1); }

.p2NCEpF1 { min-width: 0; }

/* Calendar-tile date block on the left. Big day number, short month
   above. Reads as a glanceable date stamp without competing with the
   event name. */
.Pa3oUW17 {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	padding: 4px 8px;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(45, 47, 57, 0.8);
	line-height: 1;
}

.ByRZ08Ec {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.BtwX5Dh4 {
	font-size: 18px;
	font-weight: 800;
	color: var(--white);
	margin-top: 2px;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.P7tgXS83 {
	color: var(--text-muted);
	font-size: 11px;
	transition: color 0.15s ease, transform 0.15s ease;
}

.EufzbQHk:hover .P7tgXS83 { color: var(--white); }

.aeG0bn70 {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.TvI4JRdk {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 10px;
	font-weight: 600;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-secondary);
	border: 1px solid var(--border-soft);
	letter-spacing: 0.02em;
}

.Tro8ABsj {
	background: rgba(34, 197, 94, 0.1);
	color: #22c55e;
	border-color: rgba(34, 197, 94, 0.35);
}

.UaREVH0C {
	background: rgba(239, 68, 68, 0.1);
	color: #ef4444;
	border-color: rgba(239, 68, 68, 0.35);
}

.paea6Tkn {
	background: rgba(234, 179, 8, 0.1);
	color: #eab308;
	border-color: rgba(234, 179, 8, 0.35);
}

/* ── Expanded detail panel ─────────────────────────────── */
.ZeGmj7qY {
	padding: 16px;
	background: rgba(255, 255, 255, 0.015);
	border-top: 1px solid rgba(45, 47, 57, 0.6);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Each section is its own little card so the expand panel reads as
   distinct zones (invite / ticket / admission / event) rather than
   one long stripe of key-value rows. */
.FBlWcKgK {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(45, 47, 57, 0.6);
	border-radius: 10px;
	padding: 12px 14px;
}

.pwNcpp0V {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 10px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.pwNcpp0V i { color: var(--accent-1); font-size: 10px; }

.DBClROSU {
	display: grid;
	grid-template-columns: 130px 1fr;
	grid-row-gap: 8px;
	row-gap: 8px;
	grid-column-gap: 14px;
	column-gap: 14px;
	font-size: 12px;
	align-items: start;
}

.KZaa_aWv {
	color: var(--text-muted);
	font-size: 11px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.KZaa_aWv i { color: var(--text-muted); font-size: 10px; width: 12px; text-align: center; }

.NKW4LGxP {
	color: var(--white);
	font-weight: 500;
	word-break: break-word;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

._xRiWLHW { color: var(--text-muted); font-weight: 400; }

.DMhjlZeR {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--border-soft);
	font-size: 11px;
	font-weight: 600;
	color: var(--white);
}

.xGDMaV_n { display: flex; flex-wrap: wrap; gap: 4px; }

.E6ZxRgN5 {
	margin: 0;
	padding: 8px 10px;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 6px;
	font-size: 11px;
	color: var(--text-secondary);
	white-space: pre-wrap;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.uWImF4K4 {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.uWImF4K4 li {
	font-size: 12px;
	color: var(--white);
}

.LLuGwoph {
	color: var(--text-muted);
	font-weight: 400;
	margin-left: 4px;
}

.A1dkr4B3 {
	max-width: 100%;
	max-height: 120px;
	border-radius: 8px;
	border: 1px solid var(--border-soft);
}

/* ── Spending tab ──────────────────────────────────────── */
.qQrWDShn {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 10px;
	gap: 10px;
	margin-bottom: 1rem;
}

.FGewEaud {
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	padding: 12px;
}

.g5EMFP9k { color: var(--white); font-weight: 800; font-size: 18px; line-height: 1; font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }
.Ot8wdG63 { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }

.UuTNAwH6 { display: flex; align-items: baseline; gap: 5px; min-width: 0; }


/* ── Spending loading skeleton ─────────────────────────── */
.BImBU9ks {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 4px 16px;
	color: var(--text-muted);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.E_yobnXO {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.12);
	border-top-color: #0d7ac7;
	border-top-color: var(--accent-1, #0d7ac7);
	animation: EZuX_JEX 1.2s linear infinite;
}

@keyframes EZuX_JEX {
	to { transform: rotate(360deg); }
}

.cRClZ2IT {
	display: flex;
	align-items: stretch;
	gap: 12px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(45, 47, 57, 0.6);
	border-radius: 12px;
	padding: 12px 14px;
	margin-bottom: 10px;
}

.C5fvykmN {
	width: 42px;
	height: 42px;
	border-radius: 8px;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.04) 0%,
		rgba(255, 255, 255, 0.09) 50%,
		rgba(255, 255, 255, 0.04) 100%
	);
	background-size: 200% 100%;
	animation: XhCUR6r5 2.8s ease-in-out infinite;
	flex-shrink: 0;
	align-self: flex-start;
}

.TsoXChgl {
	flex: 1 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
}

.D7ALd9rd {
	height: 10px;
	border-radius: 5px;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.04) 0%,
		rgba(255, 255, 255, 0.09) 50%,
		rgba(255, 255, 255, 0.04) 100%
	);
	background-size: 200% 100%;
	animation: XhCUR6r5 2.8s ease-in-out infinite;
}

.t3hbP8LK { width: 60%; height: 14px; }
.cOvp9OYR  { width: 80%; }
.qTEreWjk { width: 30%; height: 18px; border-radius: 999px; margin-top: 2px; }

.vWLa7Q1q {
	width: 60px;
	height: 22px;
	border-radius: 999px;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0.04) 0%,
		rgba(255, 255, 255, 0.09) 50%,
		rgba(255, 255, 255, 0.04) 100%
	);
	background-size: 200% 100%;
	animation: XhCUR6r5 2.8s ease-in-out infinite;
	align-self: center;
	flex-shrink: 0;
}

@keyframes XhCUR6r5 {
	0%, 100% { background-position: 200% 0; }
	50%      { background-position: -200% 0; }
}
.hKXLIAIx { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.CF7QQJwX { color: var(--text-muted); font-weight: 700; font-size: 12px; flex-shrink: 0; }

/* ── Activity chart placeholder ────────────────────────── */
.d5otX_bB {
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	padding: 12px;
	margin-bottom: 1rem;
	height: 140px;
}

/* ── Action button: active state ───────────────────────── */
.FjKdWztO {
	background: rgba(13, 122, 199, 0.18);
	color: var(--white);
	border-color: rgba(13, 122, 199, 0.55);
}

/* ── "Add" chip variants ───────────────────────────────── */
/* Used in the Details tab next to the Tags / Groups chip rows
   so the user has an inline "+ Add" affordance without leaving
   the tab. Same shape as a regular chip but with a dashed border
   to read as "this is empty / awaiting input". */
.M6bPSICU {
	border-style: dashed;
	cursor: pointer;
	color: var(--text-secondary);
	background: transparent;
	font-family: inherit;
	transition: all 0.15s ease;
}
.M6bPSICU:hover {
	color: var(--white);
	border-color: rgba(13, 122, 199, 0.55);
	background: rgba(13, 122, 199, 0.08);
}

.icR7RmxS {
	cursor: pointer;
	font-family: inherit;
	transition: all 0.15s ease;
}
.icR7RmxS:hover {
	color: var(--white);
	border-color: rgba(13, 122, 199, 0.55);
	background: rgba(13, 122, 199, 0.1);
}

/* ── "Message sent" inline banner ──────────────────────── */
.aPRLMpjY {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 10px 14px;
	background: rgba(34, 197, 94, 0.1);
	border: 1px solid rgba(34, 197, 94, 0.35);
	border-radius: 8px;
	color: #22c55e;
	font-size: 12px;
	font-weight: 600;
}

/* ── Inline action sheet (Add tag / Add to group / Send) ─
   Slides up from the bottom of the drawer. Same backdrop +
   slide animation pattern as the main drawer chrome so it
   feels like a natural sub-surface. */
.mBB4yHnG {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 5;
	animation: YiMxLy32 0.18s ease;
}

.qhBzmL9_ {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: 70%;
	background: rgba(20, 22, 30, 0.98);
	backdrop-filter: blur(24px) saturate(170%);
	-webkit-backdrop-filter: blur(24px) saturate(170%);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px 16px 0 0;
	z-index: 6;
	display: flex;
	flex-direction: column;
	animation: lPJHmDMA 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
	box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.4);
}

@keyframes YiMxLy32  { from { opacity: 0; }    to { opacity: 1; } }
@keyframes lPJHmDMA { from { transform: translateY(20%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.Le5qc2aW {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	flex-shrink: 0;
}

.GRqm63A4 {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--white);
}

.IqLCgDjM {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 1px solid var(--border-soft);
	background: rgba(255, 255, 255, 0.02);
	color: var(--text-secondary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
}
.IqLCgDjM:hover {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.18);
}

.m70uqHis {
	padding: 16px 20px 20px;
	overflow-y: auto;
}

.B_nTVR2b {
	font-size: 11px;
	color: var(--text-muted);
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
}

.r9SH_m3z {
	width: 100%;
	box-sizing: border-box;
	height: 36px;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	color: var(--white);
	padding: 0 12px;
	font-family: inherit;
	font-size: 13px;
	transition: border-color 0.15s ease;
}
.r9SH_m3z:focus {
	outline: none;
	border-color: rgba(13, 122, 199, 0.55);
}

.AJkdllvm {
	width: 100%;
	box-sizing: border-box;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	color: var(--white);
	padding: 10px 12px;
	font-family: inherit;
	font-size: 13px;
	line-height: 1.45;
	resize: vertical;
	min-height: 100px;
	transition: border-color 0.15s ease;
}
.AJkdllvm:focus {
	outline: none;
	border-color: rgba(13, 122, 199, 0.55);
}

.fPBCuotq {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 14px;
	height: 36px;
	background: var(--accent-1);
	color: var(--white);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
	flex-shrink: 0;
}
.fPBCuotq:hover:not(:disabled) { background: #1389d8; }
.fPBCuotq:disabled { opacity: 0.4; cursor: not-allowed; }

.T2WsDJ2i {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 12px;
}

.x1UEUUdJ {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

/* ── Group picker rows ─────────────────────────────────── */
.OPszP8Kd {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.uqO4tdUg {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	cursor: pointer;
	font-family: inherit;
	color: var(--white);
	font-size: 13px;
	transition: all 0.15s ease;
}

.uqO4tdUg:hover {
	border-color: rgba(255, 255, 255, 0.18);
}

.fNlejpo0 {
	border-color: rgba(13, 122, 199, 0.55);
	background: rgba(13, 122, 199, 0.08);
}

.dXNWZGKO { flex: 1 1; text-align: left; font-weight: 600; }

.yQbXPSAF {
	font-size: 11px;
	color: var(--text-muted);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
}

.fNlejpo0 .yQbXPSAF {
	color: var(--accent-1);
}

/* ── Invite to event sheet ─────────────────────────────── */
.cufSwMkU {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.R8MckEV3 {
	position: absolute;
	left: 12px;
	color: var(--text-muted);
	font-size: 12px;
	pointer-events: none;
}

.gSjYb2Fc {
	width: 100%;
	box-sizing: border-box;
	height: 38px;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	color: var(--white);
	padding: 0 36px 0 32px;
	font-family: inherit;
	font-size: 13px;
	transition: border-color 0.15s ease;
}
.gSjYb2Fc:focus {
	outline: none;
	border-color: rgba(13, 122, 199, 0.55);
}

.gkY1HYj6 {
	position: absolute;
	right: 8px;
	width: 22px;
	height: 22px;
	border-radius: 6px;
	border: none;
	background: transparent;
	color: var(--text-muted);
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.gkY1HYj6:hover {
	color: var(--white);
	background: rgba(255, 255, 255, 0.06);
}

.X88cH797 {
	margin: 0 0 12px;
	padding: 10px 12px;
	background: rgba(239, 68, 68, 0.1);
	border: 1px solid rgba(239, 68, 68, 0.35);
	border-radius: 8px;
	color: #ef4444;
	font-size: 12px;
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.NHDiQKg8 {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hYf895mH {
	display: grid;
	grid-template-columns: 52px 1fr auto;
	align-items: center;
	grid-gap: 12px;
	gap: 12px;
	padding: 10px 12px;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
}

.EJd8ydNt {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(13, 122, 199, 0.12);
	border: 1px solid rgba(13, 122, 199, 0.35);
	border-radius: 8px;
	padding: 6px 0;
	min-width: 52px;
}

.jlVFhFBS {
	font-size: 18px;
	font-weight: 800;
	color: var(--white);
	line-height: 1;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.ceMsTp0O {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--accent-1);
	margin-top: 2px;
}

.PZ0Hqe1Z {
	min-width: 0;
}

.MGwbkI3X {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.uvScm1u3 {
	margin: 2px 0 0;
	font-size: 11px;
	color: var(--text-muted);
}

.rwy6FFaR {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 6px;
}

.T3oeIXNs {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-secondary);
	border: 1px solid var(--border-soft);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.VTONHsFK {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	flex-shrink: 0;
	width: 140px;
}

.uf37gJ7b {
	width: 100%;
	padding: 6px 8px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--white);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	font-family: inherit;
	font-size: 11px;
	cursor: pointer;
}
.uf37gJ7b:disabled { opacity: 0.6; cursor: not-allowed; }

.mnuEJIGv {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 0 14px;
	height: 32px;
	background: var(--accent-1);
	color: var(--white);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
	flex-shrink: 0;
}
.mnuEJIGv:hover:not(:disabled) {
	background: #1389d8;
}
.mnuEJIGv:disabled {
	cursor: not-allowed;
}

.f4ppxT8u {
	background: rgba(34, 197, 94, 0.15);
	color: #22c55e;
	border-color: rgba(34, 197, 94, 0.4);
}
.f4ppxT8u:hover:not(:disabled) {
	background: rgba(34, 197, 94, 0.15);
}

.wAuvj9zL {
	margin-top: 12px;
	width: 100%;
	height: 36px;
	background: transparent;
	border: 1px dashed var(--border-soft);
	border-radius: 8px;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
}
.wAuvj9zL:hover:not(:disabled) {
	color: var(--white);
	border-color: rgba(13, 122, 199, 0.55);
	background: rgba(13, 122, 199, 0.08);
}
.wAuvj9zL:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Bits specific to GroupDetailDrawer. The drawer chrome (header,
   body, sections, primary/secondary buttons) comes from the shared
   CRM Drawer.module.css so this drawer reads the same as the
   dashboard drawers (GuestStream, Gender, FreeVsPay, etc.). */

.zwvNOZxs {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.zwvNOZxs i { font-size: 12px; }

.ZS4TH1iX { color: rgba(255, 120, 120, 0.95); }
.ZS4TH1iX:hover { color: var(--cancelled-red) !important; border-color: rgba(255,38,38,0.45) !important; }

.nck1TvaD { color: rgba(255, 140, 140, 0.85); }
.nck1TvaD:hover {
	color: var(--cancelled-red);
	border-color: rgba(255, 38, 38, 0.45);
	background: rgba(255, 38, 38, 0.08);
}

.yKsz4q7R { font-size: 13px; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.yyijndPi { font-size: 12px; color: var(--text-muted); margin: 0; }

.XSEODIrW {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.OQLrg2tP {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
}

.Pk2WBWHZ {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	flex-shrink: 0;
}

._bdxFS2F { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qGcez11b { font-size: 12px; font-weight: 700; color: var(--white); }
.nrM7FVYl  { font-size: 11px; color: var(--text-muted); }

.uiCHmvr1 {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--border-soft);
	border-radius: 999px;
}

.lATekXuX {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	background: transparent;
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--text-secondary);
	cursor: pointer;
	transition: all 0.15s ease;
}

.lATekXuX:hover { color: var(--white); }

.g6Ymc0pS {
	background: rgba(13, 122, 199, 0.18);
	border-color: rgba(13, 122, 199, 0.55);
	color: var(--white);
}

.ODh44Da9 {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid var(--border-soft);
	color: var(--text-secondary);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
	flex-shrink: 0;
}

.ODh44Da9:hover:not(:disabled) {
	color: var(--white);
	border-color: rgba(255, 255, 255, 0.18);
}

.pdgzsFsh:hover:not(:disabled) {
	color: var(--cancelled-red);
	border-color: rgba(255, 38, 38, 0.45);
}

.ODh44Da9:disabled { opacity: 0.5; cursor: not-allowed; }

.TAoVcVM7 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.NNrBG5BI {
	margin-left: 6px;
	padding: 2px 8px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 999px;
	font-size: 10px;
	color: var(--text-secondary);
	font-weight: 700;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
	text-transform: none;
	letter-spacing: 0;
}

.Ccy7gbzz {
	position: relative;
	min-width: 220px;
	flex: 0 1 auto;
}

.Ccy7gbzz input {
	width: 100%;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	color: var(--white);
	font-family: inherit;
	font-size: 12px;
	padding: 8px 12px 8px 32px;
}

.Ccy7gbzz input:focus { outline: none; border-color: rgba(13, 122, 199, 0.55); }

.Ccy7gbzz i {
	position: absolute;
	top: 50%;
	left: 12px;
	transform: translateY(-50%);
	color: var(--text-muted);
	font-size: 11px;
}

.mejCRPYy {
	display: flex;
	flex-direction: column;
}

.hqtqIona {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hqtqIona:last-child { border-bottom: none; }

.RSP_kA_T { flex: 1 1; min-width: 0; }

.rmWwWikk {
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.Xws0Kfmw {
	font-size: 11px;
	color: var(--text-muted);
	margin: 2px 0 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.P5JCFuxq {
	padding: 28px 14px;
	color: var(--text-muted);
	font-size: 12px;
	text-align: center;
}

/* Invite-history rows */
.siEeRbPD {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.siEeRbPD:last-child { border-bottom: none; }

.hlSRP1Mw {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	flex-shrink: 0;
}

.ayvPkmQD { flex: 1 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.NDTGaobZ {
	font-size: 13px;
	font-weight: 700;
	color: var(--white);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.RE7mW7Mj { font-size: 11px; color: var(--text-secondary); margin: 0; }
.Ybawtk4m  { font-size: 11px; color: var(--text-muted); margin: 4px 0 0; }
.RkRtzWtw { color: var(--white); font-weight: 700; }

.cYCgvmXS { height: 4px; }

/* ── Invite view ───────────────────────────────────────────── */
.QbRzOqBF {
	background: rgba(255, 80, 80, 0.08);
	border: 1px solid rgba(255, 80, 80, 0.35);
	color: #ffb3b3;
	font-size: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	margin-bottom: 12px;
}

.dSBPu5RM {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

._x9BIEUj {
	display: grid;
	grid-template-columns: 56px 1fr auto;
	grid-gap: 14px;
	gap: 14px;
	align-items: center;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
}

.qzd7OcSs {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(13, 122, 199, 0.12);
	border: 1px solid rgba(13, 122, 199, 0.25);
	border-radius: 10px;
	padding: 6px 0;
}

.Y9K9S14l {
	font-size: 18px;
	font-weight: 800;
	color: var(--white);
	line-height: 1;
}

.iPYkJn3J {
	margin-top: 2px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--accent-1);
}

.Vawv8suY { min-width: 0; display: flex; flex-direction: column; gap: 4px; }

.e5QvRDJw {
	font-size: 13px;
	font-weight: 700;
	color: var(--white);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.CzEB76Q0 { font-size: 11px; color: var(--text-muted); margin: 0; }

.Qpr2DOBX {
	margin-top: 4px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--border-soft);
	color: var(--white);
	border-radius: 8px;
	padding: 6px 10px;
	font-family: inherit;
	font-size: 12px;
	max-width: 220px;
}

.Qpr2DOBX:focus { outline: none; border-color: rgba(13, 122, 199, 0.55); }

.dCNkvrER { display: flex; align-items: center; }

.JdhwYhLm {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--accent-1);
	color: var(--white);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	padding: 8px 12px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}
.JdhwYhLm:hover:not(:disabled) { background: #1389d8; }
.JdhwYhLm:disabled { opacity: 0.5; cursor: not-allowed; }

.wfPLxP8M {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #6ee7b7;
	font-size: 12px;
	font-weight: 600;
}

/* Banner shown above the ticket+tag config explaining the side-effect */
.DYX6dN3T {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: rgba(245, 158, 11, 0.08);
	border: 1px solid rgba(245, 158, 11, 0.35);
	color: var(--text-secondary);
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.4;
}

.DYX6dN3T i {
	color: #f59e0b;
	font-size: 14px;
	flex-shrink: 0;
}

.DYX6dN3T strong { color: var(--white); font-weight: 700; }

/* Event card as a button (step 1) - same look as the static card */
.SY6nrmrs {
	all: unset;
	display: grid;
	grid-template-columns: 56px 1fr 16px;
	grid-gap: 14px;
	gap: 14px;
	align-items: center;
	padding: 12px 14px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.15s ease;
	box-sizing: border-box;
}

.SY6nrmrs:hover {
	border-color: rgba(13, 122, 199, 0.55);
	background: rgba(13, 122, 199, 0.06);
}

.SxYoDC3p { color: var(--text-muted); font-size: 12px; }

/* Compact event header card shown on steps 2 & 3 */
.ldGF0XMd {
	display: grid;
	grid-template-columns: 56px 1fr;
	grid-gap: 14px;
	gap: 14px;
	align-items: center;
	padding: 12px 14px;
	background: rgba(13, 122, 199, 0.06);
	border: 1px solid rgba(13, 122, 199, 0.25);
	border-radius: 12px;
}

.ILgvWW4b {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--white);
}

.bW0xEjEh {
	font-size: 11px;
	color: var(--text-muted);
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
	margin-left: 6px;
}

/* Ticket type cards (step 2) */
.UjvaSm0P {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.FMxaP_7f {
	all: unset;
	display: grid;
	grid-template-columns: 22px 1fr;
	grid-gap: 12px;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	cursor: pointer;
	transition: all 0.15s ease;
	box-sizing: border-box;
}

.FMxaP_7f:hover {
	border-color: rgba(13, 122, 199, 0.55);
	background: rgba(13, 122, 199, 0.06);
}

.xqUcHaz9 {
	border-color: rgba(13, 122, 199, 0.75) !important;
	background: rgba(13, 122, 199, 0.12) !important;
	box-shadow: 0 0 0 1px rgba(13, 122, 199, 0.55) inset;
}

.abv84Uv9 { color: var(--accent-1); font-size: 16px; display: inline-flex; align-items: center; justify-content: center; }

.kyDw85zv { display: flex; flex-direction: column; gap: 2px; }
.dnxMHAna { margin: 0; font-size: 13px; font-weight: 700; color: var(--white); }
.F5yMbl7L {
	margin: 0;
	font-size: 11px;
	color: var(--text-muted);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.ArXXea8a {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 9px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	background: rgba(13, 122, 199, 0.18);
	color: var(--white);
	border: 1px solid rgba(13, 122, 199, 0.45);
}

/* Tag chips (step 3) */
.RQJ4yZ3P {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.yYRa4qZH {
	all: unset;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--text-secondary);
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	transition: all 0.15s ease;
	box-sizing: border-box;
}

.HFdIlsHC {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #0D7AC7;
	background: var(--tag-color, #0D7AC7);
}

.yYRa4qZH:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.18); }

.KQoAAYHm {
	background: color-mix(in srgb, #0D7AC7 18%, transparent);
	background: color-mix(in srgb, var(--tag-color, #0D7AC7) 18%, transparent);
	border-color: #0D7AC7;
	border-color: var(--tag-color, #0D7AC7);
	color: var(--white);
}

.s2nRFqMt {
	background: rgba(148, 163, 184, 0.10);
	border-color: rgba(148, 163, 184, 0.35);
	color: var(--white);
	cursor: default;
	padding-right: 6px;
}

.InPe7mbJ {
	all: unset;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: var(--text-muted);
	cursor: pointer;
	font-size: 9px;
	transition: all 0.15s ease;
	margin-left: 2px;
}

.InPe7mbJ:hover {
	background: rgba(255, 38, 38, 0.18);
	color: var(--cancelled-red);
}

.qs06fW4b {
	display: flex;
	gap: 8px;
	align-items: center;
}

.QCood4PW {
	flex: 1 1;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--border-soft);
	color: var(--white);
	border-radius: 8px;
	padding: 8px 12px;
	font-family: inherit;
	font-size: 12px;
}

.QCood4PW::placeholder { color: var(--text-muted); }
.QCood4PW:focus { outline: none; border-color: rgba(13, 122, 199, 0.55); }

.lFTlgKXo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 12px;
	background: rgba(13, 122, 199, 0.14);
	border: 1px solid rgba(13, 122, 199, 0.45);
	color: var(--white);
	border-radius: 8px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.lFTlgKXo:hover:not(:disabled) { background: rgba(13, 122, 199, 0.22); }
.lFTlgKXo:disabled { opacity: 0.5; cursor: not-allowed; }

/* Success view (step 4) */
.lfgGp4kr {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	padding: 28px 18px;
	background: rgba(13, 122, 199, 0.06);
	border: 1px solid rgba(13, 122, 199, 0.25);
	border-radius: 14px;
}

.NvnkQMVe {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(13, 122, 199, 0.18);
	color: var(--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	margin-bottom: 6px;
}

.QvI1tlC1 {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
	color: var(--white);
}

.sQCd4kSV { margin: 0; font-size: 12px; color: var(--text-secondary); }

.MkkBaTxD {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-gap: 12px;
	gap: 12px;
	width: 100%;
	margin-top: 14px;
}

.vjqVewEz {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 12px 8px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 10px;
}

.M7LKICQu {
	font-size: 18px;
	font-weight: 800;
	color: var(--white);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.xGNEghXy {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	text-align: center;
}

.OHSJLKxu {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--text-secondary);
}

.u3YB0sLA {
	margin-top: 12px;
	width: 100%;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--border-soft);
	color: var(--text-secondary);
	border-radius: 8px;
	padding: 10px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.u3YB0sLA:hover:not(:disabled) { color: var(--white); border-color: rgba(255,255,255,0.18); }
.u3YB0sLA:disabled { opacity: 0.5; cursor: not-allowed; }

/* CRM Groups list. */

.i3ki26x_ {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.km4ilHMn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.fRIxCBgp { display: flex; flex-direction: column; gap: 4px; }

.ioRTpAlS { font-size: 18px; font-weight: 700; color: var(--white); margin: 0; }
.L18poFQi { font-size: 12px; color: var(--text-muted); margin: 0; }

.mmcn8Jpn {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* 5-column grid:
   icon | name + desc | type pill | member count | date
   The dedicated type-pill column makes the badges line up vertically
   down the list, instead of being inline next to each group name.
   Row-level actions used to live in a 6th column; they've moved into
   the drawer that opens when the row is clicked. */
.ytzTmM3a {
	display: grid;
	grid-template-columns: 56px minmax(0, 2fr) 110px auto auto;
	grid-gap: 16px;
	gap: 16px;
	align-items: center;
	padding: 16px 20px;
	background: var(--sub-bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 14px;
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.ytzTmM3a:hover { border-color: rgba(255, 255, 255, 0.1); }

.i371o8ik {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.nrPDYKkh { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.odUyNqZR {
	font-size: 14px;
	font-weight: 700;
	color: var(--white);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Type pill column - centers the Smart / Manual badge so the whole
   column reads as a tidy vertical strip of pills down the list. */
.L2eniDGZ {
	display: flex;
	align-items: center;
	justify-content: center;
}

.UOLKPDzl {
	font-size: 12px;
	color: var(--text-muted);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cl2pP0a_ {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 80px;
}

.PNXGDIQ0 {
	font-size: 22px;
	font-weight: 800;
	color: var(--white);
	line-height: 1;
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.d4hzC875 {
	margin-top: 4px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.hZWSJfmC {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 110px;
}

.UR4DPWgT {
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.LaIFJI7h {
	margin-top: 4px;
	font-size: 12px;
	color: var(--text-secondary);
	font-weight: 600;
}

.y4X1pEAC {
	margin-top: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	color: var(--text-muted);
}
.y4X1pEAC i { font-size: 32px; opacity: 0.5; }
.y4X1pEAC p { margin: 0; font-size: 13px; }

@media (max-width: 768px) {
	.ytzTmM3a {
		grid-template-columns: 44px minmax(0, 1fr) auto;
	}
	.hZWSJfmC, .L2eniDGZ { display: none; }
}

/* CreateGroupDrawer-specific bits.
   Drawer chrome reuses the shared Drawer.module.css. */

.jEs0whAi {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 12px;
	gap: 12px;
	margin-bottom: 1.25rem;
}

.js5HK4G6 {
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 12px;
	padding: 14px;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: left;
	font-family: inherit;
	color: var(--text-primary);
}

.js5HK4G6:hover { border-color: rgba(255, 255, 255, 0.12); }

.cSQuiCcO {
	border-color: var(--accent-1);
	background: rgba(13, 122, 199, 0.08);
}

.UtzSMW4E {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.iXltbqLa { display: flex; flex-direction: column; gap: 4px; }
.veJG4Opw { font-size: 13px; font-weight: 700; color: var(--white); }
.r6aIivNF  { font-size: 11px; color: var(--text-muted); }

/* ── Form fields ──────────────────────────────────────────── */
.LWOjUvOJ {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin: 0 0 6px;
}

.CPrdanjv {
	color: rgba(255, 255, 255, 0.3);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	margin-left: 6px;
	font-size: 11px;
}

.GkjoIXuq,
.OVsJxVLy {
	width: 100%;
	box-sizing: border-box;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	color: var(--white);
	font-family: inherit;
	font-size: 13px;
	padding: 10px 14px;
	transition: border-color 0.15s ease;
}

.GkjoIXuq:focus,
.OVsJxVLy:focus { outline: none; border-color: rgba(13, 122, 199, 0.55); }

.OVsJxVLy {
	resize: vertical;
	min-height: 70px;
	font-family: inherit;
}

.s5JCKAPX { margin-bottom: 1.25rem; }

/* ── Manual member picker ─────────────────────────────────── */
.ZI0gtIOX {
	position: relative;
	margin-bottom: 10px;
}

.ZI0gtIOX input {
	width: 100%;
	box-sizing: border-box;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	color: var(--white);
	font-family: inherit;
	font-size: 13px;
	padding: 10px 14px 10px 38px;
}

.ZI0gtIOX input:focus { outline: none; border-color: rgba(13, 122, 199, 0.55); }

.ZI0gtIOX i {
	position: absolute;
	top: 50%;
	left: 14px;
	transform: translateY(-50%);
	color: var(--text-muted);
	font-size: 12px;
}

.zpVurPk3 {
	max-height: 320px;
	overflow-y: auto;
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	background: var(--sub-bg-dark);
}

.zpVurPk3::-webkit-scrollbar { width: 4px; }
.zpVurPk3::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

.U8NA0ZfX {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	cursor: pointer;
	border-bottom: 1px solid rgba(45, 47, 57, 0.4);
	transition: background 0.15s ease;
}

.U8NA0ZfX:hover { background: rgba(255, 255, 255, 0.025); }
.U8NA0ZfX:last-child { border-bottom: none; }

.QcQuy_GU {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	border: 1px solid var(--border-soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--white);
	font-size: 9px;
}

.bPXiXNrZ {
	background: var(--accent-1);
	border-color: var(--accent-1);
}

.PKOzksjP { flex: 1 1; min-width: 0; }
.mkpRebtD {
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.nIUoUzz7 { font-size: 11px; color: var(--text-muted); margin: 2px 0 0; }

.gqfrChl6 {
	font-size: 12px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(13, 122, 199, 0.18);
	color: var(--white);
	border: 1px solid rgba(13, 122, 199, 0.55);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.oINsD71K {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 7px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background: rgba(255, 255, 255, 0.03);
	color: var(--text-muted);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: inherit;
	transition: all 0.15s ease;
}

.oINsD71K:hover {
	background: rgba(214, 69, 69, 0.15);
	border-color: rgba(214, 69, 69, 0.4);
	color: #f0a0a0;
}

.LZ4tvn5j {
	width: 100%;
	padding: 0.55rem;
	background: rgba(255, 255, 255, 0.03);
	color: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 8px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.15s ease;
}

.LZ4tvn5j:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.07);
	color: var(--white);
}

.LZ4tvn5j:disabled { opacity: 0.5; cursor: not-allowed; }

/* Smart-rule builder layout. Lives inside the CreateGroupDrawer. */

.YtgevjHf {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

/* ── Quick templates ─────────────────────────────────────── */
.w6LdZtvm {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.7px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.Wmo8DrJE {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	grid-gap: 8px;
	gap: 8px;
}

.IUuAWkfu {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	text-align: left;
	transition: all 0.15s ease;
}

.IUuAWkfu:hover {
	color: var(--white);
	border-color: rgba(13, 122, 199, 0.55);
	background: rgba(13, 122, 199, 0.08);
}

.IUuAWkfu i { color: var(--accent-1); }

.offw67xt {
	color: var(--white);
	background: rgba(13, 122, 199, 0.18);
	border-color: rgba(13, 122, 199, 0.55);
}
.offw67xt i { color: var(--white); }

/* ── Match-mode toggle ────────────────────────────────────── */
.qJWoSEGP {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 999px;
	width: -webkit-fit-content;
	width: fit-content;
}

.QVL3e24a {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding: 0 8px 0 10px;
}

.hz3bGk7n {
	background: transparent;
	border: none;
	font-family: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--text-muted);
	padding: 5px 12px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.hz3bGk7n:hover { color: var(--white); }

.UYiraK0I {
	background: var(--accent-1);
	color: var(--white);
}

/* ── Rule rows ────────────────────────────────────────────── */
.YNMoY6Dz {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cobmcYaA {
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 12px;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.GLRYRO6Y {
	display: flex;
	align-items: center;
	gap: 10px;
}

.XZRRLVX_ {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	flex-shrink: 0;
}

.ClKcLux7 {
	color: var(--white);
	font-size: 13px;
	font-weight: 700;
	flex: 1 1;
}

.Jm9UT7jq {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid var(--border-soft);
	color: var(--text-muted);
	cursor: pointer;
	transition: all 0.15s ease;
}

.Jm9UT7jq:hover { color: var(--cancelled-red); border-color: rgba(255,38,38,0.45); }

.Hy7jpVxL {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.uJSo7KWZ {
	background: var(--bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	color: var(--white);
	font-family: inherit;
	font-size: 12px;
	padding: 8px 12px;
	min-width: 90px;
}

.uJSo7KWZ:focus { outline: none; border-color: rgba(13, 122, 199, 0.55); }

.ILb67FCO { width: 90px; }

/* ── DOB stack (pills row above, picker below) ────────────── */
.FvXLegjx {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.FvXLegjx .wT479BTY { width: auto; min-width: 180px; }
.FvXLegjx .nzZkcWy7 { width: auto !important; }

/* ── DOB pills (mode switcher) ────────────────────────────── */
.lFWQJwxP {
	display: inline-flex;
	gap: 2px;
	padding: 4px;
	background: var(--bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 999px;
	flex-shrink: 0;
}

.NyHSDz7n {
	padding: 5px 12px;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	border-radius: 999px;
	background: transparent;
	border: 1px solid transparent;
	color: var(--text-muted);
	cursor: pointer;
	transition: all 0.15s ease;
	white-space: nowrap;
}

.NyHSDz7n:hover { color: var(--white); }

.HT8TWhqn {
	background: rgba(13, 122, 199, 0.18);
	border-color: rgba(13, 122, 199, 0.55);
	color: var(--white);
}

/* ── DOB date-mode picker (antd, themed to match rule rows) ─ */
.wT479BTY.wT479BTY {
	background: var(--bg-dark) !important;
	border: 1px solid var(--border-soft) !important;
	border-radius: 8px !important;
	padding: 6px 12px !important;
	min-width: 160px;
	box-shadow: none !important;
}
.wT479BTY.wT479BTY:hover { border-color: rgba(13, 122, 199, 0.55) !important; }
.wT479BTY.wT479BTY.i3c4PxOZ {
	border-color: rgba(13, 122, 199, 0.55) !important;
	box-shadow: none !important;
}
.wT479BTY.wT479BTY .o_4RKbxS > input {
	color: var(--white) !important;
	font-family: inherit !important;
	font-size: 12px !important;
}
.wT479BTY.wT479BTY .o_4RKbxS > input::placeholder { color: var(--text-muted) !important; }
.wT479BTY.wT479BTY .KjMdjXSe { color: var(--text-muted) !important; }

/* Popup chrome lives in document.body, so it has to be addressed via
   :global selectors keyed off popupClassName. */
.smart-dob-date-popup .L7Hqh5QR {
	background: rgba(20, 22, 30, 0.98) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	border-radius: 10px !important;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5) !important;
}
.smart-dob-date-popup .cc_FZUEX,
.smart-dob-date-popup .cc_FZUEX button {
	color: var(--white) !important;
}
.smart-dob-date-popup .OWv0SrYT th { color: var(--text-muted) !important; }
.smart-dob-date-popup .peBk0qg1 { color: rgba(255,255,255,0.35) !important; }
.smart-dob-date-popup .BaaEpEmj { color: var(--text-secondary) !important; }
.smart-dob-date-popup .BaaEpEmj:hover .lqpwaXDN {
	background: rgba(13, 122, 199, 0.18) !important;
	color: var(--white) !important;
}
.smart-dob-date-popup .dLWgznpW .lqpwaXDN,
.smart-dob-date-popup .BaaEpEmj.dLWgznpW .lqpwaXDN {
	background: var(--accent-1) !important;
	color: var(--white) !important;
}
.smart-dob-date-popup .NmBScWK3 .lqpwaXDN::before {
	border: 1px solid rgba(13, 122, 199, 0.55) !important;
}

/* Week / month / year panel rows + range hover so they all share
   the accent treatment. */
.smart-dob-date-popup .Ds3nZ13d:hover td {
	background: rgba(13, 122, 199, 0.10) !important;
}
.smart-dob-date-popup .s0ZthkI8 td,
.smart-dob-date-popup .s0ZthkI8:hover td {
	background: var(--accent-1) !important;
	color: var(--white) !important;
}
.smart-dob-date-popup .glZLcteN::before,
.smart-dob-date-popup .P2MAbbYF::before {
	background: rgba(13, 122, 199, 0.18) !important;
}
.smart-dob-date-popup .V8WkoSab .lqpwaXDN,
.smart-dob-date-popup ._1dL8fVF .lqpwaXDN {
	background: var(--accent-1) !important;
	color: var(--white) !important;
}

/* RangePicker input - two inputs + a separator. */
.wT479BTY.wT479BTY .vFyCTpyL .e3RfzDt3 {
	color: var(--text-muted) !important;
}
.wT479BTY.wT479BTY .tw1sKmao {
	background: var(--accent-1) !important;
}

.LJEspyCZ {
	font-size: 11px;
	color: var(--text-muted);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.05em;
}

/* ── Spending histogram ───────────────────────────────────── */
.XLoEiWNM {
	margin-top: 4px;
	background: var(--bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	padding: 10px 12px;
}

.E84QIeQj {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
	font-size: 11px;
	color: var(--text-muted);
}

.N7nOD_pS { color: var(--white); font-weight: 700; }

.RgHya3XP {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 56px;
}

.DK8K9M1O {
	flex: 1 1;
	height: 100%;
	display: flex;
	align-items: flex-end;
	cursor: pointer;
}

.ue3pSNoW {
	width: 100%;
	background: rgba(45, 47, 57, 0.8);
	border-radius: 3px 3px 0 0;
	transition: background 0.15s ease;
}

.LA0TneFo { background: var(--accent-1); }
.DK8K9M1O:hover .ue3pSNoW { background: #1389d8; opacity: 0.85; }

/* ── Add rule button ──────────────────────────────────────── */
.cghjfomd {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	background: transparent;
	border: 1px dashed var(--border-soft);
	border-radius: 10px;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.15s ease;
	align-self: flex-start;
}

.cghjfomd:hover {
	color: var(--white);
	border-color: var(--accent-1);
	background: rgba(13, 122, 199, 0.06);
}

/* ── Rule picker popover ──────────────────────────────────── */
.H7Gxj0qw {
	position: relative;
	align-self: flex-start;
}

.QfN86Wku {
	position: absolute;
	bottom: calc(100% + 6px);
	left: 0;
	min-width: 280px;
	background: rgba(20, 22, 30, 0.98);
	-webkit-backdrop-filter: blur(12px);
	        backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
	padding: 6px;
	z-index: 9999;
}

.vSkOTkuP {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	width: 100%;
	padding: 10px;
	background: transparent;
	border: none;
	border-radius: 8px;
	color: var(--text-primary);
	font-family: inherit;
	cursor: pointer;
	text-align: left;
	transition: background 0.15s ease;
}

.vSkOTkuP:hover { background: rgba(255, 255, 255, 0.04); }

.sK_SEKE1 {
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgba(13, 122, 199, 0.12);
	color: var(--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	flex-shrink: 0;
}

.kFIINWhv { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.m1OsoiWO { color: var(--white); font-weight: 600; font-size: 13px; }
.Zswu3180  { color: var(--text-muted); font-size: 11px; }

/* ── Logic summary ────────────────────────────────────────── */
.Eg6JsZM8 {
	background: rgba(13, 122, 199, 0.06);
	border: 1px solid rgba(13, 122, 199, 0.25);
	border-radius: 12px;
	padding: 14px 16px;
}

.d8gHZ5DB {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 10px;
}

.CIk4IHEl {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--white);
}

.CIk4IHEl i { color: var(--accent-1); }

.WK0q5e87 {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	background: rgba(13, 122, 199, 0.18);
	color: var(--white);
	border: 1px solid rgba(13, 122, 199, 0.55);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.VFDXhlYt {
	color: var(--text-secondary);
	font-size: 12px;
	margin: 0 0 8px;
}

.rYpUqs5c {
	margin: 0;
	padding-left: 18px;
	color: var(--text-secondary);
	font-size: 12px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.rYpUqs5c li::marker { color: var(--accent-1); }

.JQu0qrli {
	margin-top: 10px;
	font-size: 11px;
	color: var(--text-muted);
}

.JQu0qrli strong { color: var(--text-secondary); font-weight: 600; }

/* Guestii's tab - filter sidebar + main pane (table | tile view).
   ──────────────────────────────────────────────────────────────
   Layout: 240px filter rail + flex main. The main pane owns its
   own scroll container so the filter rail stays sticky beside it. */

.h1uxnHh0 {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	/* Single explicit row that takes the full height of the flex parent.
	   Without this the row defaults to auto (content height), .main has
	   no constrained height, and .body's overflow-y:auto never kicks in -
	   the page scrolls instead, and the IntersectionObserver (rooted on
	   .body) never fires for infinite scroll. */
	grid-template-rows: minmax(0, 1fr);
	grid-gap: 1rem;
	gap: 1rem;
	min-height: 0;
	flex: 1 1;
}

@media (max-width: 980px) {
	.h1uxnHh0 { grid-template-columns: minmax(0, 1fr); }
	.fw0ya09J { display: none; }
}

/* ── Filter sidebar ──────────────────────────────────────── */
/* align-self: start makes the sidebar size to its content
   instead of stretching to fill the full grid row height (which
   was creating a tall empty card extending past the last filter
   chip). max-height: 100% still kicks in for tiny viewports so
   the sidebar scrolls internally rather than overflowing. */
.fw0ya09J {
	align-self: stretch;
	background: var(--sub-bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 14px;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	height: 100%;
	overflow-y: auto;
	min-width: 0;
}

.fw0ya09J::-webkit-scrollbar { width: 4px; }
.fw0ya09J::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

.IN_sqscp {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--white);
	font-size: 13px;
	font-weight: 700;
}

.IN_sqscp i { color: var(--accent-1); font-size: 11px; }

.yfLllCdo {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin: 0 0 8px;
}

.lXW8F9Xe { display: flex; flex-direction: column; gap: 4px; }

.bDETUy4b {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
	width: 100%;
	text-align: left;
	transition: all 0.15s ease;
}

.bDETUy4b:hover {
	color: var(--white);
	background: rgba(255, 255, 255, 0.025);
}

.rQD7zXrk {
	color: var(--white);
	background: rgba(13, 122, 199, 0.12);
	border-color: rgba(13, 122, 199, 0.4);
}

.VnyDhca1 {
	margin-left: auto;
	font-size: 11px;
	font-weight: 700;
	color: var(--text-muted);
	font-feature-settings: "tnum";
	font-variant-numeric: tabular-nums;
}

.rQD7zXrk .VnyDhca1 { color: var(--white); }

.PL4xsQXB {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	margin: 0 0 8px;
	background: transparent;
	border: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	transition: border-color 0.15s ease;
}

.PL4xsQXB:focus-within { border-bottom-color: rgba(13, 122, 199, 0.55); }

.PL4xsQXB > i {
	color: var(--text-muted);
	font-size: 11px;
}

.PL4xsQXB input {
	flex: 1 1;
	min-width: 0;
	background: transparent;
	border: none;
	color: var(--white);
	font-family: inherit;
	font-size: 12px;
	padding: 0;
}

.PL4xsQXB input::placeholder { color: var(--text-muted); }
.PL4xsQXB input:focus { outline: none; }

.LhRTt3mD {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 2px;
	font-size: 11px;
}

.LhRTt3mD:hover { color: var(--white); }

.LXH_QTGe {
	margin: 6px 10px 0;
	font-size: 11px;
	color: var(--text-muted);
}

._JcwiTCb {
	background: rgba(13, 122, 199, 0.05);
	border: 1px solid rgba(13, 122, 199, 0.18);
	border-radius: 10px;
	padding: 12px;
}

/* ── Main pane ──────────────────────────────────────────── */
.UKQnfDax {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.x_UAprzf {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 0 12px 0;
}

.ySyrLjFI {
	flex: 1 1;
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	padding: 8px 14px;
}

.ySyrLjFI:focus-within { border-color: rgba(13, 122, 199, 0.55); }

.ySyrLjFI i { color: var(--text-muted); font-size: 12px; }

.ySyrLjFI input {
	background: transparent;
	border: none;
	flex: 1 1;
	color: var(--white);
	font-family: inherit;
	font-size: 13px;
}
.ySyrLjFI input:focus { outline: none; }

.qH1mowNK {
	display: inline-flex;
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	padding: 3px;
}

.ApqmhvGX {
	background: transparent;
	border: none;
	color: var(--text-muted);
	width: 32px;
	height: 30px;
	border-radius: 7px;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
}

.ApqmhvGX:hover { color: var(--white); }

.TauYX7Fo {
	background: var(--accent-1);
	color: var(--white);
}

.LUoJWCcz {
	flex: 1 1;
	min-height: 0;
	overflow-y: auto;
	background: var(--sub-bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 14px;
}

/* Tile view drops the card chrome - the grid of avatars+names
   reads better as a free-floating gallery than as boxed rows
   inside a boxed body. */
.GnXOGtC5 {
	background: transparent;
	border: none;
	border-radius: 0;
	/* The outer page wrapper (Team.module.css .content_container) has
	   padding-bottom: 40px. In tile mode we want the grid to extend
	   under that padding so the rows reach the actual viewport bottom.
	   Negative margin consumes the parent padding; the inner .tiles
	   adds its own padding-bottom so the last row keeps breathing room. */
	margin-bottom: -40px;
}

.LUoJWCcz::-webkit-scrollbar { width: 4px; }
.LUoJWCcz::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

/* ── Table view ──────────────────────────────────────────── */
.l_XFUc50 {
	width: 100%;
	border-collapse: collapse;
}

.l_XFUc50 thead th {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	background: var(--sub-bg-dark);
	z-index: 1;
	text-align: left;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	padding: 12px 16px;
	border-bottom: 1px solid var(--border-soft);
	cursor: pointer;
	-webkit-user-select: none;
	        user-select: none;
}

.l_XFUc50 thead th:hover { color: var(--white); }

.l_XFUc50 thead th.z0JHJ5__ { color: var(--white); }

.l_XFUc50 tbody td {
	padding: 12px 16px;
	border-bottom: 1px solid rgba(45, 47, 57, 0.4);
	font-size: 13px;
	color: var(--text-primary);
}

.l_XFUc50 tbody tr {
	cursor: pointer;
	transition: background 0.15s ease;
}

.l_XFUc50 tbody tr:hover { background: rgba(255, 255, 255, 0.025); }

.pjDvFJRP {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.uQ7zFysz { display: flex; flex-direction: column; min-width: 0; }
.NhOHZRZt { color: var(--white); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zXvIKmZq  { color: var(--text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.e2BCtszB { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; color: var(--white); font-weight: 600; }

.HbMM2N0y { display: flex; flex-wrap: wrap; gap: 4px; }

.WJ70X_bc {
	font-size: 10px;
	font-weight: 700;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--text-secondary);
	border: 1px solid var(--border-soft);
}

/* ── Tile view ──────────────────────────────────────────── */
.NkJVuy86 {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	grid-gap: 8px;
	gap: 8px;
	/* No padding around the grid so the rows can extend to the bottom
	   of the scroll viewport. Only the trailing padding (below the last
	   row) keeps the final row off the bottom edge - matches the 40px
	   bottom padding the outer container would have applied. */
	padding: 0 0 40px 0;
}

/* Backgroundless tiles - the avatar circle + text sit on the
   page directly. A subtle hover state still hints "this is
   clickable" without putting card chrome around every guest. */
.DpnO14c4 {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--sub-bg-dark);
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 14px;
	padding: 12px 14px;
	cursor: pointer;
	transition: all 0.15s ease;
	text-align: left;
	font-family: inherit;
	color: var(--text-primary);
}

.DpnO14c4:hover {
	border-color: rgba(13, 122, 199, 0.35);
}

.lQp_Jo3K { display: flex; flex-direction: column; min-width: 0; flex: 1 1; }
.RH_vfS5Z { color: var(--white); font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.Qf0aED5Z { color: var(--text-muted); font-size: 10px; }

.lr3lhdWr {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 80px 20px;
	color: var(--text-muted);
}
.lr3lhdWr i { font-size: 32px; opacity: 0.5; }
.lr3lhdWr p { margin: 0; font-size: 13px; }

.uJMMcekV {
	font-size: 11px;
	color: var(--text-muted);
	padding-left: 4px;
}

/* ── Custom select (filter sidebar) ─────────────────────────── */
.ONLi3Myj { position: relative; width: 100%; }

.bWO4bxaX {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 12px;
	background: transparent;
	border: 1px solid var(--border-soft);
	border-radius: 8px;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.bWO4bxaX:hover { color: var(--white); border-color: rgba(255, 255, 255, 0.12); }
.YulIkmfx { border-color: rgba(13, 122, 199, 0.55); color: var(--white); }

.m1x8EyzL { flex: 1 1; text-align: left; color: var(--text-muted); }
.Eqo97f0Q { flex: 1 1; text-align: left; color: var(--white); font-weight: 600; }

.UTKinRq3 { color: var(--text-muted); font-size: 10px; transition: transform 0.15s ease; }
.maJFKFjn { transform: rotate(180deg); color: var(--accent-1); }

.OXgcaBL9 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 6px;
	color: var(--text-muted);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.OXgcaBL9:hover { background: rgba(255, 255, 255, 0.06); color: var(--white); }

.JcQ4DJRQ {
	background: var(--sub-bg-dark);
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	max-height: 280px;
	overflow-y: auto;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
	padding: 4px;
}
.JcQ4DJRQ::-webkit-scrollbar { width: 4px; }
.JcQ4DJRQ::-webkit-scrollbar-thumb { background: #2d2f39; border-radius: 4px; }

.y7bfojOL {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	margin-bottom: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.y7bfojOL i { color: var(--text-muted); font-size: 11px; }
.y7bfojOL input {
	flex: 1 1;
	background: transparent;
	border: none;
	color: var(--white);
	font-family: inherit;
	font-size: 12px;
	padding: 0;
}
.y7bfojOL input:focus { outline: none; }

.POj8ZfLa {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	background: transparent;
	border: none;
	border-radius: 6px;
	color: var(--text-secondary);
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
	text-align: left;
}
.POj8ZfLa:hover { background: rgba(255, 255, 255, 0.04); color: var(--white); }
.ryOP8epN { color: var(--white); background: rgba(13, 122, 199, 0.12); }

.VLeosLZ9 { flex: 1 1; display: flex; flex-direction: column; min-width: 0; }
.sg0hNTbL { color: inherit; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.QbTjI40c { color: var(--text-muted); font-size: 10px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qQcXg1fb { padding: 12px; color: var(--text-muted); font-size: 12px; text-align: center; }


/*# sourceMappingURL=main.f3d99ee8.css.map*/