/* UIV8 member dialog and drawer from the MapleStory Classic booklet. */

.tw-icon-\[fluent--games-24-filled\] {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.tw-icon-\[fluent--games-24-filled\] {
    --svg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M14.998 5a7 7 0 0 1 .24 13.996l-.24.004H9.002a7 7 0 0 1-.24-13.996L9.001 5zm-.248 7.5a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5M8 9a.75.75 0 0 0-.743.648l-.007.102v1.498h-1.5a.75.75 0 0 0-.102 1.494l.102.007 1.5-.001v1.502a.75.75 0 0 0 1.493.102l.007-.102v-1.502h1.5a.75.75 0 0 0 .102-1.492l-.102-.007-1.5-.001V9.75A.75.75 0 0 0 8 9m8.75 0a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5'/%3E%3C/svg%3E");
}

.member-drawer {
    position: fixed;
    right: 0;
    top: 0;
    display: flex;
    height: 100vh;
    width: 100%;
    max-width: 94vw;
    --tw-translate-x: 100%;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
    flex-direction: column;
    border-left-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(237 240 244/var(--tw-border-opacity,1));
    transition-property: transform;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .2s;
    transition-timing-function: cubic-bezier(0,0,.2,1);
}

.member-drawer:is(.tw-dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(42 42 42/var(--tw-border-opacity,1));
    background-color: rgb(23 23 23/var(--tw-bg-opacity,1));
}

@media (min-width:768px) {

.member-drawer {
    width: 460px;
}
}

.member-drawer.is-open {
    --tw-translate-x: 0px;
    transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.member-drawer-head {
    display: flex;
    height: 3.5rem;
    align-items: center;
    justify-content: space-between;
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(237 240 244/var(--tw-border-opacity,1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity,1));
    padding-left: 1rem;
    padding-right: 1rem;
}

.member-drawer-head:is(.tw-dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(42 42 42/var(--tw-border-opacity,1));
    --tw-bg-opacity: 1;
    background-color: rgb(23 23 23/var(--tw-bg-opacity,1));
}

.member-drawer-icon {
    display: flex;
    height: 2.25rem;
    width: 2.25rem;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    background-color: rgb(241 245 249/var(--tw-bg-opacity,1));
    color: rgb(71 85 105/var(--tw-text-opacity,1));
}

.member-drawer-icon:is(.tw-dark *) {
    background-color: hsla(0,0%,100%,.1);
    color: rgb(163 163 163/var(--tw-text-opacity,1));
}

.member-drawer-body {
    flex: 1 1 0%;
    overflow-y: auto;
    background-color: rgb(245 246 248/var(--tw-bg-opacity,1));
    padding: 1rem;
}

.member-drawer-body:is(.tw-dark *) {
    background-color: rgb(16 16 16/var(--tw-bg-opacity,1));
}

.member-drawer-foot {
    display: flex;
    flex-shrink: 0;
    justify-content: flex-end;
    border-top-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(237 240 244/var(--tw-border-opacity,1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity,1));
    padding: .75rem 1rem;
}

.member-drawer-foot:is(.tw-dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(42 42 42/var(--tw-border-opacity,1));
    --tw-bg-opacity: 1;
    background-color: rgb(23 23 23/var(--tw-bg-opacity,1));
}

.member-camera-btn {
    position: absolute;
    bottom: -.25rem;
    right: -.25rem;
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: .375rem;
    border-width: 1px;
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(255 219 34/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(25 26 28/var(--tw-text-opacity,1));
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

.member-camera-btn:focus-within {
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
    --tw-ring-color: rgba(251,191,36,.4);
}

.member-camera-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(240 201 0/var(--tw-bg-opacity,1));
}

.member-camera-btn:is(.tw-dark *) {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(255 219 34/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(25 26 28/var(--tw-text-opacity,1));
}

.member-camera-btn:hover:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(255 228 91/var(--tw-bg-opacity,1));
}

.booklet-craft-item-wrap>.booklet-craft-children.member-auth-modal,
body .booklet-switcher-mobile-backdrop.member-auth-modal {
    display: none;
}

.member-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(15,23,42,.35);
    padding: 1rem;
}

.member-auth-modal:is(.tw-dark *) {
    background-color: rgba(0,0,0,.8);
}

.member-auth-modal.is-open {
    display: flex;
}

.member-auth-dialog {
    max-height: calc(100dvh - 32px);
    width: 100%;
    max-width: 420px;
    overflow-y: auto;
    border-radius: .375rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity,1));
}

.member-auth-dialog:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 33 34/var(--tw-bg-opacity,1));
}

.member-auth-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    border-top-left-radius: .375rem;
    border-top-right-radius: .375rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 219 34/var(--tw-bg-opacity,1));
    padding: .75rem 1.25rem;
    font-size: 18px;
    font-weight: 700;
    --tw-text-opacity: 1;
    color: rgb(25 26 28/var(--tw-text-opacity,1));
}

.member-auth-brand:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(41 42 38/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(255 219 34/var(--tw-text-opacity,1));
}

.member-auth-brand>span:first-child {
    font-size: 28px;
}

.member-auth-brand>span:first-child:is(.tw-dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 219 34/var(--tw-text-opacity,1));
}

.member-auth-brand-caption {
    margin-left: .5rem;
    font-size: 12px;
    font-weight: 500;
}

.member-auth-brand-caption:is(.tw-dark *) {
    --tw-text-opacity: 1;
    color: rgb(193 195 189/var(--tw-text-opacity,1));
}

.member-auth-tab {
    border-bottom-width: 2px;
    border-color: transparent;
    padding-bottom: .25rem;
    --tw-text-opacity: 1;
    color: rgb(100 116 139/var(--tw-text-opacity,1));
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

.member-auth-tab:hover {
    --tw-text-opacity: 1;
    color: rgb(15 23 42/var(--tw-text-opacity,1));
}

.member-auth-tab:focus-visible {
    outline-style: solid;
    outline-width: 2px;
    outline-color: #fbbf24;
}

.member-auth-tab:is(.tw-dark *) {
    --tw-text-opacity: 1;
    color: rgb(169 173 180/var(--tw-text-opacity,1));
}

.member-auth-tab:hover:is(.tw-dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity,1));
}

.member-auth-tab.is-active {
    --tw-border-opacity: 1;
    border-color: rgb(229 189 0/var(--tw-border-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(2 6 23/var(--tw-text-opacity,1));
}

.member-auth-tab.is-active:is(.tw-dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(255 219 34/var(--tw-border-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(255 219 34/var(--tw-text-opacity,1));
}

.member-auth-modal .member-input {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(242 243 245/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(15 23 42/var(--tw-text-opacity,1));
}

.member-auth-modal .member-input::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139/var(--tw-text-opacity,1));
}

.member-auth-modal .member-input::placeholder {
    --tw-text-opacity: 1;
    color: rgb(100 116 139/var(--tw-text-opacity,1));
}

.member-auth-modal .member-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(212 173 0/var(--tw-border-opacity,1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 253 243/var(--tw-bg-opacity,1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
    --tw-ring-color: rgba(251,191,36,.2);
}

.member-auth-modal .member-input:is(.tw-dark *) {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(44 46 49/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(241 242 244/var(--tw-text-opacity,1));
}

.member-auth-modal .member-input:is(.tw-dark *)::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(169 173 180/var(--tw-text-opacity,1));
}

.member-auth-modal .member-input:is(.tw-dark *)::placeholder {
    --tw-text-opacity: 1;
    color: rgb(169 173 180/var(--tw-text-opacity,1));
}

.member-auth-modal .member-input:focus:is(.tw-dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(255 219 34/var(--tw-border-opacity,1));
    --tw-bg-opacity: 1;
    background-color: rgb(48 48 49/var(--tw-bg-opacity,1));
}

.member-auth-modal .member-round-btn {
    --tw-bg-opacity: 1;
    background-color: rgb(242 243 245/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(71 85 105/var(--tw-text-opacity,1));
}

.member-auth-modal .member-round-btn:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(48 50 54/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(198 202 209/var(--tw-text-opacity,1));
}

.member-auth-modal .member-round-btn:hover:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(59 62 66/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity,1));
}

.member-auth-modal .member-auth-brand-close {
    margin-left: auto;
    height: 2rem;
    width: 2rem;
    flex-shrink: 0;
    background-color: rgba(0,0,0,.06);
    --tw-text-opacity: 1;
    color: rgb(25 26 28/var(--tw-text-opacity,1));
}

.member-auth-modal .member-auth-brand-close:hover {
    background-color: rgba(0,0,0,.1);
}

.member-auth-modal .member-auth-brand-close:is(.tw-dark *) {
    background-color: hsla(0,0%,100%,.06);
    --tw-text-opacity: 1;
    color: rgb(198 202 209/var(--tw-text-opacity,1));
}

.member-auth-modal .member-auth-brand-close:hover:is(.tw-dark *) {
    background-color: hsla(0,0%,100%,.1);
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity,1));
}

.member-auth-modal [data-submit-login],
.member-auth-modal [data-submit-register] {
    height: 2.5rem;
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(255 219 34/var(--tw-bg-opacity,1));
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(25 26 28/var(--tw-text-opacity,1));
}

.member-auth-modal [data-submit-login]:hover,
.member-auth-modal [data-submit-register]:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(240 201 0/var(--tw-bg-opacity,1));
}

.member-auth-modal [data-submit-login]:focus-visible,
.member-auth-modal [data-submit-register]:focus-visible {
    --tw-ring-color: rgba(251,191,36,.4);
}

.member-auth-modal [data-submit-login]:is(.tw-dark *),
.member-auth-modal [data-submit-register]:is(.tw-dark *) {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(255 219 34/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(25 26 28/var(--tw-text-opacity,1));
}

.member-auth-modal [data-submit-login]:hover:is(.tw-dark *),
.member-auth-modal [data-submit-register]:hover:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(255 228 91/var(--tw-bg-opacity,1));
}

.member-auth-modal .member-btn-soft {
    --tw-bg-opacity: 1;
    background-color: rgb(242 243 245/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(51 65 85/var(--tw-text-opacity,1));
}

.member-auth-modal .member-btn-soft:is(.tw-dark *) {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(54 56 59/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(226 228 232/var(--tw-text-opacity,1));
}

.member-auth-modal .member-btn-soft:hover:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(67 70 74/var(--tw-bg-opacity,1));
}

.member-auth-modal [data-open-forgot],
.member-auth-modal label {
    --tw-text-opacity: 1;
    color: rgb(71 85 105/var(--tw-text-opacity,1));
}

.member-auth-modal [data-open-forgot]:is(.tw-dark *),
.member-auth-modal label:is(.tw-dark *) {
    --tw-text-opacity: 1;
    color: rgb(185 190 198/var(--tw-text-opacity,1));
}

.member-auth-modal [data-open-forgot]:hover {
    text-decoration-line: underline;
    text-underline-offset: 4px;
}

.member-auth-modal input[type=checkbox] {
    accent-color: #d5af00;
    height: .875rem;
    width: .875rem;
    flex-shrink: 0;
}

.member-auth-modal #register-email-policy-tip {
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 242/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(71 85 105/var(--tw-text-opacity,1));
}

.member-auth-modal #register-email-policy-tip:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(43 44 43/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(185 190 198/var(--tw-text-opacity,1));
}

.member-wechat-btn {
    margin-bottom: .75rem;
    display: flex;
    height: 2.75rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .375rem;
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87/var(--tw-bg-opacity,1));
    font-size: 14px;
    font-weight: 600;
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity,1));
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
    transition-property: color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: .15s;
}

.member-wechat-btn:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(6 95 70/var(--tw-bg-opacity,1));
}

.member-wechat-btn:focus-visible {
    outline-style: solid;
    outline-width: 2px;
    outline-color: #059669;
}

.member-wechat-btn:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(4 120 87/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255/var(--tw-text-opacity,1));
}

.member-wechat-btn:hover:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(6 95 70/var(--tw-bg-opacity,1));
}

.member-auth-divider {
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 12px;
    --tw-text-opacity: 1;
    color: rgb(100 116 139/var(--tw-text-opacity,1));
}

.member-auth-divider:is(.tw-dark *) {
    --tw-text-opacity: 1;
    color: rgb(169 173 180/var(--tw-text-opacity,1));
}

.member-auth-divider:after,
.member-auth-divider:before {
    content: "";
    height: 1px;
    flex: 1 1 0%;
    --tw-bg-opacity: 1;
    background-color: rgb(241 245 249/var(--tw-bg-opacity,1));
}

.member-auth-divider:is(.tw-dark *):after,
.member-auth-divider:is(.tw-dark *):before {
    background-color: hsla(0,0%,100%,.06);
}

.member-drawer {
    border-width: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity,1));
}

.member-drawer:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 33 34/var(--tw-bg-opacity,1));
}

.member-drawer {
    height: 100dvh;
    box-shadow: -8px 0 24px rgba(15,23,42,.16),-1px 0 3px rgba(15,23,42,.1);
}

:is(.dark,.tw-dark) .member-drawer {
    box-shadow: -10px 0 28px rgba(0,0,0,.46),-1px 0 0 hsla(0,0%,100%,.08);
}

.member-drawer-foot,
.member-drawer-head {
    border-width: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity,1));
}

.member-drawer-foot:is(.tw-dark *),
.member-drawer-head:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(32 33 34/var(--tw-bg-opacity,1));
}

.member-drawer-icon {
    --tw-bg-opacity: 1;
    background-color: rgb(255 219 34/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(25 26 28/var(--tw-text-opacity,1));
}

.member-drawer-icon:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(255 219 34/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(25 26 28/var(--tw-text-opacity,1));
}

.member-drawer-body {
    min-height: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(242 243 245/var(--tw-bg-opacity,1));
    padding: .75rem;
}

.member-drawer-body:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(23 24 25/var(--tw-bg-opacity,1));
}

.member-drawer .member-card {
    border-width: 0;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255/var(--tw-bg-opacity,1));
}

.member-drawer .member-card:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(35 37 39/var(--tw-bg-opacity,1));
}

.member-drawer .member-input {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(242 243 245/var(--tw-bg-opacity,1));
}

.member-drawer .member-input:focus {
    --tw-border-opacity: 1;
    border-color: rgb(212 173 0/var(--tw-border-opacity,1));
    outline: 2px solid transparent;
    outline-offset: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
    box-shadow: var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);
    --tw-ring-color: rgba(251,191,36,.2);
}

.member-drawer .member-input:is(.tw-dark *) {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(48 50 53/var(--tw-bg-opacity,1));
}

.member-drawer .member-input:focus:is(.tw-dark *) {
    --tw-border-opacity: 1;
    border-color: rgb(255 219 34/var(--tw-border-opacity,1));
    --tw-bg-opacity: 1;
    background-color: rgb(52 54 56/var(--tw-bg-opacity,1));
}

.member-drawer .member-input-warn {
    --tw-bg-opacity: 1;
    background-color: rgb(255 251 235/var(--tw-bg-opacity,1));
}

.member-drawer .member-input-warn:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(57 52 38/var(--tw-bg-opacity,1));
}

.member-drawer .member-btn-amber,
.member-drawer .member-btn-dark {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(255 219 34/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(25 26 28/var(--tw-text-opacity,1));
}

.member-drawer .member-btn-amber:hover,
.member-drawer .member-btn-dark:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(240 201 0/var(--tw-bg-opacity,1));
}

.member-drawer .member-btn-amber:is(.tw-dark *),
.member-drawer .member-btn-dark:is(.tw-dark *) {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(255 219 34/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(25 26 28/var(--tw-text-opacity,1));
}

.member-drawer .member-btn-amber:hover:is(.tw-dark *),
.member-drawer .member-btn-dark:hover:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(255 228 91/var(--tw-bg-opacity,1));
}

.member-drawer .member-btn-sky {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(242 243 245/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(51 65 85/var(--tw-text-opacity,1));
}

.member-drawer .member-btn-sky:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(226 232 240/var(--tw-bg-opacity,1));
}

.member-drawer .member-btn-sky:is(.tw-dark *) {
    border-color: transparent;
    --tw-bg-opacity: 1;
    background-color: rgb(54 56 59/var(--tw-bg-opacity,1));
    --tw-text-opacity: 1;
    color: rgb(226 228 232/var(--tw-text-opacity,1));
}

.member-drawer .member-btn-sky:hover:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(67 70 74/var(--tw-bg-opacity,1));
}

.member-drawer .member-level-badge,
.member-drawer .member-pill,
.member-drawer .member-points-badge,
.member-drawer .member-points-bill-link,
.member-drawer .member-qq-group-link {
    border-color: transparent;
}

.member-drawer .member-level-badge:is(.tw-dark *),
.member-drawer .member-pill:is(.tw-dark *),
.member-drawer .member-points-badge:is(.tw-dark *),
.member-drawer .member-points-bill-link:is(.tw-dark *),
.member-drawer .member-qq-group-link:is(.tw-dark *) {
    border-color: transparent;
}

.member-drawer [data-profile-view] .member-card:first-child {
    --tw-bg-opacity: 1;
    background-color: rgb(255 252 237/var(--tw-bg-opacity,1));
}

.member-drawer [data-profile-view] .member-card:first-child:is(.tw-dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(44 43 35/var(--tw-bg-opacity,1));
}

.member-drawer .member-btn {
    flex-shrink: 0;
}

.dvg-member-agreement {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    color: #475569;
    font-size: 13px;
    line-height: 20px;
}

.dvg-member-agreement input[type="checkbox"] {
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    margin: 3px 0 0;
    padding: 0;
    accent-color: #d5af00;
    appearance: auto;
}

.dvg-member-agreement label {
    display: inline;
    cursor: pointer;
}

.dvg-member-agreement a {
    color: #1d4ed8;
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.dvg-member-agreement a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

:is(.dark, .tw-dark, [data-theme="dark"]) .dvg-member-agreement {
    color: #b9bec6;
}

:is(.dark, .tw-dark, [data-theme="dark"]) .dvg-member-agreement a {
    color: #7dd3fc;
}