:root {
    --wk-user-bg: linear-gradient(180deg, rgba(248, 255, 251, 0.96), rgba(239, 247, 243, 0.99));
    --wk-user-surface: rgba(255, 255, 255, 0.86);
    --wk-user-border: rgba(81, 167, 118, 0.16);
    --wk-user-border-strong: rgba(59, 145, 97, 0.26);
    --wk-user-shadow: 0 24px 52px rgba(16, 48, 28, 0.08);
    --wk-user-shadow-hover: 0 28px 62px rgba(16, 48, 28, 0.14);
    --wk-user-title: #153124;
    --wk-user-text: #4e6359;
    --wk-user-muted: #728579;
    --wk-user-accent: #279766;
    --wk-user-accent-strong: #17784f;
    --wk-user-accent-soft: rgba(60, 183, 122, 0.1);
}

body.dark {
    --wk-user-bg: linear-gradient(180deg, rgba(14, 30, 22, 0.97), rgba(9, 20, 15, 0.99));
    --wk-user-surface: rgba(255, 255, 255, 0.05);
    --wk-user-border: rgba(105, 223, 162, 0.12);
    --wk-user-border-strong: rgba(105, 223, 162, 0.22);
    --wk-user-shadow: 0 26px 58px rgba(0, 0, 0, 0.34);
    --wk-user-shadow-hover: 0 30px 68px rgba(0, 0, 0, 0.4);
    --wk-user-title: #effff4;
    --wk-user-text: rgba(223, 245, 231, 0.9);
    --wk-user-muted: rgba(194, 223, 204, 0.72);
    --wk-user-accent: #6fdb9c;
    --wk-user-accent-strong: #42b378;
    --wk-user-accent-soft: rgba(111, 219, 156, 0.12);
}

#profile-header {
    overflow: hidden;
    border-radius: 30px !important;
    border: 1px solid var(--wk-user-border) !important;
    box-shadow: var(--wk-user-shadow);
    min-height: 260px;
}

#profile-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 22, 16, 0.18), rgba(8, 22, 16, 0.58));
    pointer-events: none;
}

#profile-header > * {
    position: relative;
    z-index: 1;
}

#profile-header .ui.header,
#profile .ui.header,
#user .ui.header,
#user-settings .ui.header,
#messages .ui.header,
#view-message .ui.header,
#alerts .ui.header,
#notification_settings .ui.header,
#new-message .ui.header,
#tfa-code .ui.header {
    color: var(--wk-user-title) !important;
}

#profile-header .ui.header,
#profile-header .sub.header {
    color: #f5fff9 !important;
}

#profile .ui.segment,
#user .ui.segment,
#user-settings .ui.segment,
#messages .ui.segment,
#view-message .ui.segment,
#notification_settings .ui.segment,
#alerts .ui.segment,
#new-message .ui.segment,
#tfa-code .ui.segment,
#message.ui.fluid.card,
.ui.fluid.vertical.menu {
    border-radius: 24px !important;
    border: 1px solid var(--wk-user-border) !important;
    background: var(--wk-user-bg) !important;
    box-shadow: var(--wk-user-shadow);
}

#profile .ui.segment,
#user .ui.segment,
#user-settings .ui.segment,
#messages .ui.segment,
#view-message .ui.segment,
#notification_settings .ui.segment,
#alerts .ui.segment,
#new-message .ui.segment,
#tfa-code .ui.segment,
#message.ui.fluid.card .content,
.ui.fluid.vertical.menu .item,
#profile .ui.bottom.attached.tab.segment,
#profile .ui.top.attached.tabular.menu {
    color: var(--wk-user-text) !important;
}

.ui.fluid.vertical.menu {
    overflow: hidden;
    padding: .45rem;
}

.ui.fluid.vertical.menu .item {
    margin: 0 !important;
    border-radius: 14px !important;
    font-weight: 700 !important;
}

.ui.fluid.vertical.menu .item.active,
.ui.fluid.vertical.menu .item:hover {
    background: var(--wk-user-accent-soft) !important;
    color: var(--wk-user-title) !important;
}

#profile .ui.top.attached.tabular.menu {
    padding: .5rem;
    border-radius: 20px 20px 14px 14px !important;
    border: 1px solid var(--wk-user-border) !important;
    background: var(--wk-user-surface) !important;
}

#profile .ui.top.attached.tabular.menu .item {
    border: none !important;
    border-radius: 14px !important;
    color: var(--wk-user-text) !important;
    font-weight: 700 !important;
}

#profile .ui.top.attached.tabular.menu .item.active,
#profile .ui.top.attached.tabular.menu .item:hover {
    background: var(--wk-user-accent-soft) !important;
    color: var(--wk-user-title) !important;
}

#profile .ui.bottom.attached.tab.segment {
    border: 1px solid var(--wk-user-border) !important;
    border-radius: 0 0 24px 24px !important;
    background: var(--wk-user-surface) !important;
}

#profile .ui.comments .comment,
#view-message #message .content {
    border-radius: 18px;
}

#profile .ui.comments .comment {
    padding: .95rem 1rem;
    background: rgba(255, 255, 255, 0.24);
    border: 1px solid rgba(81, 167, 118, 0.08);
}

#profile .ui.reply.form textarea,
#user-settings .ui.form input:not(.button),
#user-settings .ui.form textarea,
#user-settings .ui.form .ui.selection.dropdown,
#new-message .ui.form input:not(.button),
#new-message .ui.form textarea,
#new-message .ui.form .ui.selection.dropdown,
#view-message .ui.form textarea,
#tfa-code .ui.form input:not(.button) {
    border-radius: 16px !important;
    border-color: var(--wk-user-border) !important;
    background: var(--wk-user-surface) !important;
    color: var(--wk-user-title) !important;
    box-shadow: none !important;
}

#profile .ui.reply.form textarea:focus,
#user-settings .ui.form input:not(.button):focus,
#user-settings .ui.form textarea:focus,
#user-settings .ui.form .ui.selection.dropdown.active,
#user-settings .ui.form .ui.selection.dropdown.visible,
#new-message .ui.form input:not(.button):focus,
#new-message .ui.form textarea:focus,
#new-message .ui.form .ui.selection.dropdown.active,
#new-message .ui.form .ui.selection.dropdown.visible,
#view-message .ui.form textarea:focus,
#tfa-code .ui.form input:not(.button):focus {
    border-color: var(--wk-user-border-strong) !important;
    box-shadow: 0 0 0 3px rgba(60, 183, 122, 0.1) !important;
}

#profile .ui.primary.button,
#user .ui.primary.button,
#user-settings .ui.primary.button,
#messages .ui.primary.button,
#view-message .ui.primary.button,
#new-message .ui.primary.button,
#tfa-code .ui.primary.button,
#profile-header .ui.primary.button,
#profile-header .ui.teal.button,
#user-settings .ui.positive.button {
    background: linear-gradient(135deg, var(--wk-user-accent), var(--wk-user-accent-strong)) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
}

#profile .ui.negative.button,
#user-settings .ui.red.button,
#profile-header .ui.negative.button,
#profile .ui.mini.icon.button,
#messages .ui.mini.primary.button {
    border-radius: 14px !important;
}

#messages table,
#view-message table,
#alerts table,
#notification_settings table,
#user-settings table {
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--wk-user-border) !important;
    background: var(--wk-user-surface) !important;
    box-shadow: none !important;
}

#messages table thead th,
#view-message table thead th,
#alerts table thead th,
#notification_settings table thead th,
#user-settings table thead th {
    background: var(--wk-user-accent-soft) !important;
    color: var(--wk-user-title) !important;
}

#messages table tbody td,
#view-message table tbody td,
#alerts table tbody td,
#notification_settings table tbody td,
#user-settings table tbody td {
    color: var(--wk-user-text) !important;
    border-top: 1px solid rgba(81, 167, 118, 0.08) !important;
}

#chartWrapper {
    padding: .8rem;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.22);
}

@media only screen and (max-width: 767px) {
    #profile-header,
    #profile .ui.segment,
    #user .ui.segment,
    #user-settings .ui.segment,
    #messages .ui.segment,
    #view-message .ui.segment,
    #notification_settings .ui.segment,
    #alerts .ui.segment,
    #new-message .ui.segment,
    #tfa-code .ui.segment,
    #message.ui.fluid.card,
    .ui.fluid.vertical.menu {
        border-radius: 20px !important;
    }
}