:root {
    --wk-user-bg: linear-gradient(180deg, rgba(255, 248, 245, 0.96), rgba(255, 243, 238, 0.99));
    --wk-user-surface: rgba(255, 255, 255, 0.86);
    --wk-user-border: rgba(232, 93, 10, 0.16);
    --wk-user-border-strong: rgba(232, 93, 10, 0.26);
    --wk-user-shadow: 0 24px 52px rgba(183, 76, 0, 0.08);
    --wk-user-shadow-hover: 0 28px 62px rgba(183, 76, 0, 0.14);
    --wk-user-title: #8b4513;
    --wk-user-text: #5f2d0a;
    --wk-user-muted: rgba(93, 54, 28, 0.72);
    --wk-user-accent: #e85d0a;
    --wk-user-accent-strong: #dc520c;
    --wk-user-accent-soft: rgba(232, 93, 10, 0.1);
}

body.dark {
    --wk-user-bg: linear-gradient(180deg, rgba(40, 22, 8, 0.97), rgba(28, 14, 4, 0.99));
    --wk-user-surface: rgba(255, 255, 255, 0.05);
    --wk-user-border: rgba(255, 140, 66, 0.12);
    --wk-user-border-strong: rgba(255, 140, 66, 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: #fff5eb;
    --wk-user-text: rgba(255, 245, 235, 0.9);
    --wk-user-muted: rgba(255, 220, 185, 0.72);
    --wk-user-accent: #ff8c42;
    --wk-user-accent-strong: #ff6b35;
    --wk-user-accent-soft: rgba(255, 140, 66, 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 header - modern layout with actions on the right */
#profile-header {
    position: relative;
    padding: 1.5rem 1.75rem !important;
}

.wk-profile-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.wk-profile-avatar-section {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.wk-profile-avatar-section img.ui.small.circular.image {
    width: 90px;
    height: 90px;
    border: 3px solid rgba(255, 140, 66, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.wk-profile-user-info .ui.header {
    margin: 0 0 0.35rem 0;
    font-size: 1.65rem;
}

body:not(.dark) .wk-profile-user-info .ui.header span {
    color: var(--primaryColor);
}

body.dark .wk-profile-user-info .ui.header span {
    color: var(--secondaryColor);
}

.wk-profile-user-info .sub.header {
    font-size: 0.95rem;
}

body:not(.dark) .wk-profile-user-info .sub.header {
    color: rgba(93, 54, 28, 0.75);
}

body.dark .wk-profile-user-info .sub.header {
    color: rgba(255, 220, 185, 0.75);
}

.wk-profile-actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.wk-profile-actions .ui.tiny.icon.button {
    border-radius: 12px !important;
    min-width: 42px;
    min-height: 42px;
    transition: all 0.2s ease;
}

.wk-profile-actions .ui.tiny.icon.button:hover {
    transform: translateY(-2px);
}

body.dark .wk-profile-actions .ui.tiny.primary.icon.button {
    background: linear-gradient(135deg, var(--wk-user-accent), var(--wk-user-accent-strong)) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(255, 140, 66, 0.3);
}

body.dark .wk-profile-actions .ui.tiny.teal.icon.button {
    background: rgba(255, 140, 66, 0.15) !important;
    border: 1px solid rgba(255, 140, 66, 0.25) !important;
    color: var(--secondaryColor) !important;
}

body.dark .wk-profile-actions .ui.tiny.default.icon.button {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff5eb !important;
}

body.dark .wk-profile-actions .ui.tiny.negative.icon.button {
    background: rgba(239, 68, 68, 0.15) !important;
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
    color: #ff8a97 !important;
}

/* Profile groups styling - preserve original group labels/cards */
.wk-profile-groups {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
    margin-top: 0.35rem !important;
    align-items: center !important;
}

.wk-profile-groups > .ui.label,
.wk-profile-groups > .wk-group-label,
.wk-profile-groups > span,
.wk-profile-groups > div {
    border-radius: 12px !important;
    font-weight: 700 !important;
    padding: 0.45rem 0.75rem !important;
    font-size: 0.82rem !important;
    display: inline-block !important;
}

/* About section dark theme - fix text color */
body.dark #profile-about .ui.relaxed.list .item {
    border-bottom: 1px solid rgba(255, 140, 66, 0.08);
}

body.dark #profile-about .ui.relaxed.list .item:last-child {
    border-bottom: none;
}

body.dark #profile-about .ui.relaxed.list .content .header {
    color: var(--wk-user-title) !important;
}

body.dark #profile-about .ui.relaxed.list .content .description {
    color: var(--wk-user-text) !important;
}

body.dark #profile-about .ui.relaxed.list .icon {
    color: var(--wk-user-accent) !important;
}

body.dark #profile-about .ui.header {
    color: var(--wk-user-title) !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(232, 93, 10, 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(232, 93, 10, 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(232, 93, 10, 0.08) !important;
}

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

/* Settings page additional styles */
#user-settings h2,
#user-settings h3,
#user-settings h4,
#user-settings .ui.header,
#user-settings .header,
#user-settings .field > label,
#user-settings .field .field > label,
#notification_settings h2,
#notification_settings h3,
#notification_settings h4,
#notification_settings .ui.header,
#notification_settings .header {
    color: var(--wk-user-title) !important;
}

body.dark #user-settings h2,
body.dark #user-settings h3,
body.dark #user-settings h4,
body.dark #user-settings .ui.header,
body.dark #user-settings .header,
body.dark #user-settings .field > label,
body.dark #user-settings .field .field > label,
body.dark #notification_settings h2,
body.dark #notification_settings h3,
body.dark #notification_settings h4,
body.dark #notification_settings .ui.header,
body.dark #notification_settings .header {
    color: #fff5eb !important;
}

@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;
    }
}

/* ============================================
   User Account Settings - All Sections Dark Theme
   ============================================ */

/* Overview section - username, group, registered */
body.dark #user .overview-section,
body.dark #user-settings .overview-section,
body.dark .overview-section {
    background: var(--wk-user-bg) !important;
}

body.dark #user .overview-section .content,
body.dark #user-settings .overview-section .content,
body.dark .overview-section .content {
    color: var(--wk-user-text) !important;
}

body.dark #user .overview-section .header,
body.dark #user-settings .overview-section .header,
body.dark .overview-section .header {
    color: var(--wk-user-title) !important;
}

body.dark #user .overview-section .meta,
body.dark #user-settings .overview-section .meta,
body.dark .overview-section .meta {
    color: var(--wk-user-muted) !important;
}

/* Messages section */
body.dark #messages,
body.dark #messages .ui.segment,
body.dark #messages h2,
body.dark #messages h3,
body.dark #messages .ui.header {
    background: var(--wk-user-bg) !important;
    color: var(--wk-user-title) !important;
}

body.dark #messages h2,
body.dark #messages h3,
body.dark #messages .ui.header {
    color: var(--wk-user-title) !important;
}

body.dark #messages .content,
body.dark #messages .description {
    color: var(--wk-user-text) !important;
}

/* New message section */
body.dark #new-message,
body.dark #new-message .ui.segment,
body.dark #new-message h2,
body.dark #new-message h3,
body.dark #new-message .ui.header,
body.dark #new-message .field label,
body.dark #new-message .field .field label {
    background: var(--wk-user-bg) !important;
    color: var(--wk-user-title) !important;
}

body.dark #new-message .field label,
body.dark #new-message .field .field label {
    color: var(--wk-user-title) !important;
}

body.dark #new-message textarea,
body.dark #new-message input {
    background: var(--wk-user-surface) !important;
    color: var(--wk-user-title) !important;
    border-color: var(--wk-user-border) !important;
}

/* Alerts section */
body.dark #alerts,
body.dark #alerts .ui.segment,
body.dark #alerts h2,
body.dark #alerts h3,
body.dark #alerts .ui.header {
    background: var(--wk-user-bg) !important;
    color: var(--wk-user-title) !important;
}

body.dark #alerts h2,
body.dark #alerts h3,
body.dark #alerts .ui.header {
    color: var(--wk-user-title) !important;
}

/* Notification settings section - table text */
body.dark #notification_settings,
body.dark #notification_settings .ui.segment,
body.dark #notification_settings table,
body.dark #notification_settings h2,
body.dark #notification_settings h3,
body.dark #notification_settings .ui.header {
    background: var(--wk-user-bg) !important;
    color: var(--wk-user-title) !important;
}

body.dark #notification_settings h2,
body.dark #notification_settings h3,
body.dark #notification_settings .ui.header {
    color: var(--wk-user-title) !important;
}

body.dark #notification_settings table thead th {
    background: var(--wk-user-accent-soft) !important;
    color: var(--wk-user-title) !important;
}

body.dark #notification_settings table tbody td {
    color: var(--wk-user-text) !important;
}

/* Settings section labels - all account settings */
body.dark #user-settings,
body.dark #user-settings .ui.segment,
body.dark #user-settings h2,
body.dark #user-settings h3,
body.dark #user-settings h4,
body.dark #user-settings .ui.header,
body.dark #user-settings .header,
body.dark #user-settings .field > label,
body.dark #user-settings .field .field > label,
body.dark #user-settings p,
body.dark #user-settings .description {
    background: var(--wk-user-bg) !important;
    color: var(--wk-user-title) !important;
}

/* All h2, h3, h4 headers in user settings */
body.dark #user-settings h2,
body.dark #user-settings h3,
body.dark #user-settings h4 {
    color: var(--wk-user-title) !important;
}

/* Field labels in all user sections */
body.dark #user-settings .field > label,
body.dark #user-settings .field .field > label,
body.dark #user .field > label,
body.dark #user .field .field > label,
body.dark #messages .field > label,
body.dark #messages .field .field > label,
body.dark #alerts .field > label,
body.dark #alerts .field .field > label,
body.dark #notification_settings .field > label,
body.dark #notification_settings .field .field > label,
body.dark #new-message .field > label,
body.dark #new-message .field .field > label {
    color: var(--wk-user-title) !important;
}

/* General text in all user sections */
body.dark #user,
body.dark #user h2,
body.dark #user h3,
body.dark #user h4,
body.dark #user p,
body.dark #user .ui.header {
    color: var(--wk-user-title) !important;
}

body.dark #user .content,
body.dark #user .description,
body.dark #user .text {
    color: var(--wk-user-text) !important;
}

/* Fix for "No messages" text in dark theme */
body.dark #messages .ui.info.message .content,
body.dark #messages .ui.info.message .content .description,
body.dark #messages .ui.info.message .content p,
body.dark #messages .ui.info.message .content span,
body.dark #messages .ui.info.message p {
    color: #2d1b0e !important;
}

/* Fix for notification settings - toggle labels */
body.dark #notification_settings table tbody td:first-child {
    color: var(--wk-user-text) !important;
}

/* Account tabs sidebar */
body.dark .ui.fluid.vertical.menu .item {
    color: var(--wk-user-text) !important;
}

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

/* Input fields in all user sections */
body.dark #user-settings input,
body.dark #user-settings textarea,
body.dark #user-settings .ui.selection.dropdown,
body.dark #user input,
body.dark #user textarea,
body.dark #user .ui.selection.dropdown,
body.dark #messages input,
body.dark #messages textarea,
body.dark #messages .ui.selection.dropdown,
body.dark #new-message input,
body.dark #new-message textarea,
body.dark #new-message .ui.selection.dropdown,
body.dark #notification_settings input,
body.dark #notification_settings textarea,
body.dark #notification_settings .ui.selection.dropdown {
    background: var(--wk-user-surface) !important;
    color: var(--wk-user-title) !important;
    border-color: var(--wk-user-border) !important;
}

body.dark #user-settings input:focus,
body.dark #user-settings textarea:focus,
body.dark #user-settings .ui.selection.dropdown.active,
body.dark #user input:focus,
body.dark #user textarea:focus,
body.dark #user .ui.selection.dropdown.active,
body.dark #new-message input:focus,
body.dark #new-message textarea:focus,
body.dark #new-message .ui.selection.dropdown.active {
    border-color: var(--wk-user-border-strong) !important;
    box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.12) !important;
}