/* Shared shell for every page in /social/. */
:root {
    --bg: #102b31;
    --surface: #14393f;
    --text: #e6f0ed;
    --border: rgba(231, 212, 79, .18);
    --primary: #e7d44f;
    --primary-hover: #f1df68;
    --accent: #0e6974;
    --social-accent: #e7d44f;
    --social-bg: #102b31;
    --social-panel: rgba(20, 57, 63, .92);
    --social-text: #f3f7f4;
    --social-muted: #a9bab7;
}

body.social-page,
body:has(.social-page-marker) {
    background: radial-gradient(circle at 80% 0, rgba(231, 212, 79, .12), transparent 32rem), var(--social-bg);
    color: var(--social-text);
}

.social-page-marker { display: none; }
body.social-page .header,
body.social-page .footer,
body:has(.social-page-marker) .header,
body:has(.social-page-marker) .footer {
    background: rgba(10, 35, 40, .9);
    color: var(--social-text);
    border-color: rgba(231, 212, 79, .16);
}

body.social-page .header a,
body.social-page .footer a,
body:has(.social-page-marker) .header a,
body:has(.social-page-marker) .footer a { color: var(--social-text); }
body.social-page .layout,
body:has(.social-page-marker) .layout { min-height: calc(100vh - 140px); }
body.social-page .main-content,
body:has(.social-page-marker) .main-content,
body.social-page .profile-articles,
body:has(.social-page-marker) .profile-articles,
body.social-page .account-card,
body:has(.social-page-marker) .account-card {
    background: var(--social-panel);
    border-color: rgba(255, 255, 255, .09);
    color: var(--social-text);
    border-radius: 14px;
    box-shadow: 0 14px 38px rgba(0, 0, 0, .18);
}
body.social-page h1,
body.social-page h2,
body.social-page h3,
body:has(.social-page-marker) h1,
body:has(.social-page-marker) h2,
body:has(.social-page-marker) h3 { color: #fff; }
body.social-page p,
body:has(.social-page-marker) p { color: var(--social-muted); }
body.social-page .btn,
body.social-page button.btn,
body:has(.social-page-marker) .btn,
body:has(.social-page-marker) button.btn {
    min-width: 132px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-color: rgba(231, 212, 79, .35);
    background: rgba(231, 212, 79, .1);
    color: var(--social-accent);
}
body.social-page .btn:hover,
body:has(.social-page-marker) .btn:hover { background: var(--social-accent); color: #17363a; }
body.social-page .form-control,
body:has(.social-page-marker) .form-control,
body.social-page input,
body.social-page textarea,
body:has(.social-page-marker) input,
body:has(.social-page-marker) textarea { background: rgba(0, 0, 0, .18); color: #fff; border-color: rgba(255, 255, 255, .14); }
body.social-page .sidebar-left,
body:has(.social-page-marker) .sidebar-left { background: transparent; }
body.social-page .action-link,
body:has(.social-page-marker) .action-link { color: var(--social-muted); border-color: transparent; }
body.social-page .action-link:hover,
body:has(.social-page-marker) .action-link:hover { color: var(--social-accent); background: rgba(231, 212, 79, .1); }

body { background: radial-gradient(circle at 80% 0, rgba(231, 212, 79, .12), transparent 32rem), var(--social-bg); color: var(--social-text); }
body .header, body .footer { background: rgba(10, 35, 40, .9); color: var(--social-text); border-color: rgba(231, 212, 79, .16); }
body .header a, body .footer a { color: var(--social-text); }
body .layout { min-height: calc(100vh - 140px); }
body .main-content, body .profile-articles, body .account-card { background: var(--social-panel); border-color: rgba(255, 255, 255, .09); color: var(--social-text); border-radius: 14px; box-shadow: 0 14px 38px rgba(0, 0, 0, .18); }
body h1, body h2, body h3 { color: #fff; }
body p { color: var(--social-muted); }
body .btn, body button.btn { min-width: 132px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-color: rgba(231, 212, 79, .35); background: rgba(231, 212, 79, .1); color: var(--social-accent); }
body .btn:hover { background: var(--social-accent); color: #17363a; }
body .btn-secondary,
body .btn-secondary:hover { background: rgba(255, 255, 255, .06); color: var(--social-accent); border-color: rgba(231, 212, 79, .35); }
body .form-control, body input, body textarea { background: rgba(0, 0, 0, .18); color: #fff; border-color: rgba(255, 255, 255, .14); }
body .provider-card { background: var(--surface); color: var(--social-text); border-color: rgba(255, 255, 255, .09); }
body .provider-card small { color: var(--social-muted); }
body .profile-callout,
body .profile-live-panel,
body .verification-request-card,
body .settings-danger-zone { background: rgba(10, 35, 40, .72); color: var(--social-text); border-color: rgba(231, 212, 79, .2); }
body .profile-hero,
body .profile-settings-section,
body .settings-page-card,
body .settings-section-card,
body .account-sidebar,
body .account-overview-panel,
body .profile-picker-card,
body .member-card,
body .notification-item,
body .dm-chat-button,
body .dm-chat-window,
body .dm-chat-window .dm-chat-message,
body .dm-compose-modal h2,
body .dm-compose-modal label,
body .dm-compose-modal textarea,
body .dm-compose-modal .form-status,
body .dm-modal-close { background: var(--surface) !important; color: var(--social-text); }
body .profile-hero { background: linear-gradient(135deg, #14393f, #102b31) !important; }
body .profile-banner,
body .profile-banner-preview { background-color: #0b252b; }
body .dm-chat-window .dm-chat-message.is-own { background: #1b4d52; border-color: rgba(231, 212, 79, .28); }
body .settings-card,
body .account-overview-panel { background: #173f44 !important; }
body .beta-badge { background: rgba(231, 212, 79, .12); color: var(--social-accent); border-color: rgba(231, 212, 79, .38); }
body .official-profile-info,
body .profile-admin-notice { background: #173f44; color: var(--social-text); border-color: rgba(231, 212, 79, .28); }
body .sidebar-left { background: transparent; }
body .action-link { color: var(--social-muted); border-color: transparent; }
body .action-link:hover { color: var(--social-accent); background: rgba(231, 212, 79, .1); }
body .profile-actions { display: flex; align-items: center; gap: .55rem; margin-top: .8rem; }
body .profile-follow-button { min-width: 120px; height: auto; padding: 10px 24px; border: 2px solid transparent; border-radius: 20px; background: #e7d44f; color: #1c1c1c; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; outline: none; user-select: none; text-align: center; box-shadow: 0 2px 6px rgba(231, 212, 79, .2); transition: all .2s ease-in-out; }
body .profile-follow-button:not(.is-following):hover { background: #cfbd3f; box-shadow: 0 4px 10px rgba(207, 189, 63, .3); }
body .profile-follow-button.is-following { background: #fff; color: #222; border-color: #e7d44f; box-shadow: none; }
body .profile-follow-button.is-following:hover { background: rgba(237, 73, 86, .08); color: #ed4956; border-color: #ed4956; }
body .profile-follow-button:disabled { cursor: wait; opacity: .65; }
body .profile-menu { position: relative; }
body .profile-menu-panel { position: absolute; top: calc(100% + .45rem); right: 0; z-index: 10; display: grid; min-width: 150px; padding: .35rem; border: 1px solid rgba(231, 212, 79, .25); border-radius: 9px; background: #173f44; box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
body .profile-menu-panel[hidden] { display: none; }
body .profile-menu-panel button { padding: .6rem .7rem; border: 0; background: transparent; color: var(--social-text); cursor: pointer; font: inherit; text-align: left; }
body .profile-menu-panel button:hover { border-radius: 5px; background: rgba(231, 212, 79, .12); color: var(--social-accent); }

html.social-light {
    --social-bg: #edf3f1;
    --social-panel: #ffffff;
    --social-text: #173237;
    --social-muted: #68787b;
}
html.social-light body,
html.social-light body.social-page,
html.social-light body:has(.social-page-marker) {
    background: radial-gradient(circle at 80% 0, rgba(231, 225, 52, .18), transparent 32rem), var(--social-bg);
    color: var(--social-text);
}
html.social-light body .header,
html.social-light body .footer,
html.social-light body.social-page .header,
html.social-light body:has(.social-page-marker) .header {
    background: rgba(255, 255, 255, .94);
    color: var(--social-text);
    border-color: #d6e2df;
}
html.social-light body .header a,
html.social-light body .footer a { color: var(--social-text); }
html.social-light body .main-content,
html.social-light body .profile-articles,
html.social-light body .account-card,
html.social-light body .profile-hero,
html.social-light body .profile-settings-section,
html.social-light body .settings-page-card,
html.social-light body .settings-section-card,
html.social-light body .account-sidebar,
html.social-light body .account-overview-panel,
html.social-light body .profile-picker-card,
html.social-light body .member-card,
html.social-light body .notification-item,
html.social-light body .dm-chat-button,
html.social-light body .dm-chat-window,
html.social-light body .dm-chat-window .dm-chat-message {
    background: var(--social-panel) !important;
    color: var(--social-text);
    border-color: #d6e2df;
    box-shadow: 0 12px 32px rgba(22, 67, 76, .08);
}
html.social-light body h1,
html.social-light body h2,
html.social-light body h3 { color: #173237; }
html.social-light body p { color: var(--social-muted); }
html.social-light body .form-control,
html.social-light body input,
html.social-light body textarea { background: #fff; color: var(--social-text); border-color: #c8d8d5; }
html.social-light body .provider-card { background: #fff; color: var(--social-text); border-color: #d6e2df; }
html.social-light body .provider-card small { color: var(--social-muted); }
html.social-light body .profile-callout,
html.social-light body .profile-live-panel,
html.social-light body .verification-request-card,
html.social-light body .settings-danger-zone { background: #f7fbfa; color: var(--social-text); border-color: #b8deda; }
html.social-light body .profile-post,
html.social-light body .settings-card,
html.social-light body .official-profile-info,
html.social-light body .profile-admin-notice,
html.social-light body .profile-link-card,
html.social-light body .profile-link-editor-row { background: #f7fbfa !important; color: var(--social-text); }
html.social-light body .profile-post { border-left-color: var(--social-accent); }
html.social-light body .action-link { color: var(--social-muted); }
body .verification-mark svg { width: 12px; height: 12px; fill: currentColor !important; stroke: none !important; }
body .verification-mark { width: 22px; height: 22px; background: transparent !important; color: #2389da; }
body .verification-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
body .verification-mark svg { width: 18px; height: 18px; }
body .verification-mark.trusted-verification-mark svg { width: 12px; height: 12px; }
body .verification-mark.verification-blue { color: #2389da; }
body .verification-mark.verification-gold { color: #d09b18; }
body .verification-mark.verification-gray { color: #6b7b83; }
body .verification-mark.verification-green { color: #2f9d63; }
body .profile-post { background: #173f44 !important; color: var(--social-text); border-left-color: var(--social-accent); }
body .verification-entry { border: 1px solid rgba(231, 212, 79, .28); background: rgba(20, 57, 63, .72); color: var(--social-text); }
body .verification-entry:hover { border-color: var(--social-accent); background: #173f44; }
body .verification-entry-header,
body .verification-entry-header strong { color: var(--social-accent); }
body .verification-entry small { color: var(--social-muted); }
body .verification-entry-badge { width: 16px; height: 16px; border: 0; border-radius: 0 !important; background: transparent !important; clip-path: none; }
body .trusted-verification-mark { border-radius: 0; clip-path: none; background: transparent !important; }
body .profile-links-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; }
body .profile-link-card { display: flex; align-items: center; gap: .75rem; min-height: 68px; padding: .75rem; border: 1px solid rgba(231, 212, 79, .2); border-radius: 10px; background: #173f44; color: var(--social-text); text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
body .profile-link-card:hover { border-color: var(--social-accent); background: #1b4d52; transform: translateY(-2px); }
body .profile-link-card span { display: grid; gap: .2rem; min-width: 0; }
body .profile-link-card strong { color: var(--social-accent); overflow-wrap: anywhere; }
body .profile-link-card small { color: var(--social-muted); overflow-wrap: anywhere; }
body .profile-link-icon { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; object-fit: contain; background: #0e6974; padding: 5px; }
body .account-nav-link { color: var(--social-text); }
body .account-nav-link:hover,
body .account-nav-link:focus-visible,
body .account-nav-link.active { color: var(--social-accent); }
body .profile-link-editor-row { border-color: rgba(231, 212, 79, .2); background: #173f44; color: var(--social-text); }
body .profile-link-editor-preview strong { color: var(--social-accent); }
body .profile-link-editor-preview small { color: var(--social-muted); }