:root{
    --theme-plum:#34253f;
    --theme-plum-dark:#241b32;
    --theme-plum-mid:#71417d;
    --theme-pink:#ff4f81;
    --theme-orange:#ff8957;
    --theme-violet:#7c4dff;
    --theme-bg:#f7f5fa;
    --theme-text:#30283a;
    --theme-muted:#8d8494;
    --theme-border:#eee8f1;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Arial,Helvetica,sans-serif !important;
    color:var(--theme-text) !important;
    background:
        radial-gradient(circle at 10% 10%,rgba(255,79,129,.12),transparent 25%),
        radial-gradient(circle at 90% 15%,rgba(124,77,255,.12),transparent 25%),
        radial-gradient(circle at 50% 100%,rgba(255,139,87,.10),transparent 30%),
        var(--theme-bg) !important;
}

button,
input,
select,
textarea{
    font-family:Arial,Helvetica,sans-serif !important;
}

button,
[class*="btn"]{
    transition:background .2s ease,box-shadow .2s ease,transform .15s ease,color .2s ease,border-color .2s ease;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
    outline:3px solid rgba(124,77,255,.24);
    outline-offset:2px;
}

.login-button,
.register-btn,
.submit-btn,
.submit-button,
.generate-btn,
.primary-btn,
.action-button,
button[type="submit"]{
    border:0 !important;
    border-radius:10px !important;
    background:linear-gradient(120deg,var(--theme-plum),var(--theme-plum-mid) 52%,#a84d72) !important;
    color:#fff !important;
    box-shadow:0 8px 18px rgba(65,38,76,.14);
    cursor:pointer;
}

.login-button:hover,
.register-btn:hover,
.submit-btn:hover,
.submit-button:hover,
.generate-btn:hover,
.primary-btn:hover,
.action-button:hover,
button[type="submit"]:hover{
    transform:translateY(-1px);
    box-shadow:0 11px 22px rgba(65,38,76,.20);
}

.login-button:disabled,
.register-btn:disabled,
.submit-btn:disabled,
.submit-button:disabled,
.generate-btn:disabled,
.primary-btn:disabled,
.action-button:disabled,
button[type="submit"]:disabled{
    opacity:.62;
    cursor:not-allowed;
    transform:none;
}

.top-btn,
.header-btn,
.back-btn,
.top-action,
.nav-button{
    border-radius:10px !important;
}

.card,
.panel,
.stat,
.stat-card,
.summary-card,
.overview-card,
.form-card,
.content-card{
    border-color:var(--theme-border) !important;
    box-shadow:0 8px 25px rgba(54,35,62,.06) !important;
}

input,
select,
textarea{
    border-color:#e6e0e9;
    color:var(--theme-text);
}

input:focus,
select:focus,
textarea:focus{
    border-color:#9b70d8 !important;
    box-shadow:0 0 0 3px rgba(124,77,255,.10) !important;
}

.badge,
.admin-badge,
.status-badge,
.page-label span{
    background:#f0e7ff !important;
    color:#7745c7 !important;
}

.success,
.success-message{
    color:#1d9a57;
}

.error,
.error-message{
    color:#b74462;
}

@media(max-width:850px){
    .app .member-box{
        display:block;
        padding:8px 0 0;
        background:transparent;
        border:0;
    }

    .app .member-caption,
    .app .member-name,
    .app .member-status{
        display:none;
    }

    .app .logout-btn{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        height:38px;
        padding:0;
        font-size:0;
    }

    .app .logout-btn::before{
        content:"↪";
        font-size:18px;
    }

}