:root {
    --bg-body: #e8f5fd;
    --bg-white: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-header: #1b7dba;
    --bg-header-top: #04538a;
    --bg-input: #ffffff;
    --bg-tweet-box: #f9f9f9;
    --text-primary: #333333;
    --text-secondary: #999999;
    --text-link: #0084b4;
    --text-link-hover: #003366;
    --text-username: #333333;
    --text-meta: #999999;
    --text-white: #ffffff;
    --border-main: #d0dfe8;
    --border-dark: #b0cce1;
    --border-input: #c0ccd4;
    --btn-primary-bg: #1b7dba;
    --btn-primary-bg-hover: #1269a0;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #f5f5f5;
    --btn-secondary-border: #c0ccd4;
    --badge-admin: #d94f00;
    --badge-verified-biz: #1da1f2;
    --badge-verified-gov: #6c3fa0;
    --badge-admin-text: #ffffff;
}

body.theme-night {
    --bg-body: #1f2b35;
    --bg-white: #101820;
    --bg-sidebar: #131e27;
    --bg-header: #245f86;
    --bg-header-top: #0d2538;
    --bg-input: #f8fbfd;
    --bg-tweet-box: #17232d;
    --text-primary: #eaf2f8;
    --text-secondary: #9caebc;
    --text-link: #7fc8ee;
    --text-link-hover: #d9f1ff;
    --text-username: #ffffff;
    --text-meta: #9caebc;
    --border-main: #315064;
    --border-dark: #47677c;
    --border-input: #7390a2;
    --btn-secondary-bg: #203240;
    --btn-secondary-border: #426073;
}

body.theme-forest {
    --bg-body: #e9f5ee;
    --bg-header: #2d8058;
    --bg-header-top: #1e523a;
    --text-link: #14714b;
    --text-link-hover: #0d3f2b;
    --border-main: #c9dfd2;
    --border-dark: #9dc0ac;
    --btn-primary-bg: #2d8058;
    --btn-primary-bg-hover: #216645;
}

body.theme-ruby {
    --bg-body: #fff0f4;
    --bg-header: #b92856;
    --bg-header-top: #781836;
    --text-link: #b92856;
    --text-link-hover: #63162f;
    --border-main: #ebc6d1;
    --border-dark: #dca4b5;
    --btn-primary-bg: #b92856;
    --btn-primary-bg-hover: #922044;
}

body.theme-ocean {
    --bg-body: #e4f6f7;
    --bg-header: #16828c;
    --bg-header-top: #07535d;
    --text-link: #087f8f;
    --text-link-hover: #04404a;
    --border-main: #bddde2;
    --border-dark: #8ebbc2;
    --btn-primary-bg: #16828c;
    --btn-primary-bg-hover: #0f6570;
}

body.theme-lavender {
    --bg-body: #f2edfb;
    --bg-header: #7660a8;
    --bg-header-top: #4b3c77;
    --text-link: #654aa5;
    --text-link-hover: #2e2352;
    --border-main: #d8cdea;
    --border-dark: #b8a7d7;
    --btn-primary-bg: #7660a8;
    --btn-primary-bg-hover: #5c488d;
}

body.theme-gold {
    --bg-body: #fff7df;
    --bg-header: #a36f18;
    --bg-header-top: #6a470d;
    --text-link: #875a0f;
    --text-link-hover: #3f2907;
    --border-main: #ead7a7;
    --border-dark: #d0b56c;
    --btn-primary-bg: #a36f18;
    --btn-primary-bg-hover: #805511;
}

body.theme-bubblegum {
    --bg-body: #ffeff8;
    --bg-header: #d34a8a;
    --bg-header-top: #8b2858;
    --text-link: #b72e72;
    --text-link-hover: #5e173c;
    --border-main: #efc6dc;
    --border-dark: #da94b9;
    --btn-primary-bg: #d34a8a;
    --btn-primary-bg-hover: #a9346b;
}

body.theme-grayscale {
    --bg-body: #eeeeee;
    --bg-header: #575757;
    --bg-header-top: #242424;
    --text-link: #333333;
    --text-link-hover: #000000;
    --border-main: #cfcfcf;
    --border-dark: #a8a8a8;
    --btn-primary-bg: #575757;
    --btn-primary-bg-hover: #333333;
}

body.theme-midnight {
    --bg-body: #111827;
    --bg-white: #101723;
    --bg-sidebar: #121c2a;
    --bg-header: #315f9c;
    --bg-header-top: #07111f;
    --bg-tweet-box: #142033;
    --text-primary: #e9f1f8;
    --text-secondary: #9fb1c3;
    --text-link: #8cc9ff;
    --text-link-hover: #d6ecff;
    --text-username: #ffffff;
    --text-meta: #9fb1c3;
    --border-main: #28445d;
    --border-dark: #3e5f7b;
    --border-input: #6f8ba3;
    --btn-secondary-bg: #182638;
    --btn-secondary-border: #42627f;
}

body.theme-terminal {
    --bg-body: #07140c;
    --bg-white: #07100a;
    --bg-sidebar: #09170e;
    --bg-header: #147a39;
    --bg-header-top: #031f0e;
    --bg-tweet-box: #0b1c11;
    --text-primary: #daf7df;
    --text-secondary: #89b992;
    --text-link: #64d982;
    --text-link-hover: #c9ffd3;
    --text-username: #ffffff;
    --text-meta: #89b992;
    --border-main: #214f2e;
    --border-dark: #347246;
    --border-input: #5a9168;
    --btn-secondary-bg: #102718;
    --btn-secondary-border: #3d744b;
}

body.theme-high_contrast {
    --bg-body: #ffffff;
    --bg-white: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-header: #003f73;
    --bg-header-top: #000000;
    --text-primary: #000000;
    --text-secondary: #444444;
    --text-link: #0044cc;
    --text-link-hover: #000000;
    --text-username: #000000;
    --text-meta: #333333;
    --border-main: #000000;
    --border-dark: #000000;
    --border-input: #000000;
    --btn-primary-bg: #000000;
    --btn-primary-bg-hover: #333333;
}

body.theme-custom {
    --bg-input: #ffffff;
}

* {
    box-sizing: border-box;
}

html {
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg-body);
    color: var(--text-primary);
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    line-height: 18px;
    max-width: 100%;
    overflow-x: hidden;
}

body:is(.theme-night, .theme-midnight, .theme-terminal) .page-wrap,
body:is(.theme-night, .theme-midnight, .theme-terminal) .page-wrap-wide,
body:is(.theme-night, .theme-midnight, .theme-terminal) .main-col,
body:is(.theme-night, .theme-midnight, .theme-terminal) .main-col-wide,
body:is(.theme-night, .theme-midnight, .theme-terminal) .sidebar,
body:is(.theme-night, .theme-midnight, .theme-terminal) .tweet-row,
body:is(.theme-night, .theme-midnight, .theme-terminal) .landing-hero,
body:is(.theme-night, .theme-midnight, .theme-terminal) .landing-preview,
body:is(.theme-night, .theme-midnight, .theme-terminal) .profile-header,
body:is(.theme-night, .theme-midnight, .theme-terminal) .side-box,
body:is(.theme-night, .theme-midnight, .theme-terminal) .dm-thread,
body:is(.theme-night, .theme-midnight, .theme-terminal) .dm-messages,
body:is(.theme-night, .theme-midnight, .theme-terminal) .settings-form,
body:is(.theme-night, .theme-midnight, .theme-terminal) .static-page {
    background: var(--bg-white);
}

body:is(.theme-night, .theme-midnight, .theme-terminal) .content-header,
body:is(.theme-night, .theme-midnight, .theme-terminal) .side-header,
body:is(.theme-night, .theme-midnight, .theme-terminal) .landing-login,
body:is(.theme-night, .theme-midnight, .theme-terminal) .tweet-row:hover,
body:is(.theme-night, .theme-midnight, .theme-terminal) .dm-message.mine,
body:is(.theme-night, .theme-midnight, .theme-terminal) .account-switch-row.active {
    background: var(--bg-tweet-box);
}

body:is(.theme-night, .theme-midnight, .theme-terminal) input,
body:is(.theme-night, .theme-midnight, .theme-terminal) textarea,
body:is(.theme-night, .theme-midnight, .theme-terminal) select {
    background: #f8fbfd;
    color: #111;
}

body:is(.theme-night, .theme-midnight, .theme-terminal) .admin-table th,
body:is(.theme-night, .theme-midnight, .theme-terminal) .admin-stats div,
body:is(.theme-night, .theme-midnight, .theme-terminal) .tweet-poll,
body:is(.theme-night, .theme-midnight, .theme-terminal) .tweet-link-card,
body:is(.theme-night, .theme-midnight, .theme-terminal) .tweet-embed,
body:is(.theme-night, .theme-midnight, .theme-terminal) .tweet-audio {
    background: var(--bg-tweet-box);
}

@keyframes oldFadeIn {
    from {
        opacity: 0;
        transform: translateY(3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes oldNoticeSlide {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

a {
    color: var(--text-link);
    text-decoration: none;
}

a:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

h1,
h2,
h3 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    margin: 0;
}

h2 {
    font-size: 14px;
    margin: 12px 10px 6px;
}

button,
input,
textarea,
select {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
}

button,
.primary-button,
.secondary-button,
.mini-button,
.admin-nav a {
    transition: background-color .12s ease-out, border-color .12s ease-out, color .12s ease-out, opacity .12s ease-out;
}

.topbar {
    height: 30px;
    background: var(--bg-header-top);
    color: var(--text-white);
    transition: background-color .16s ease-out;
}

.topbar-inner {
    width: 900px;
    height: 30px;
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: center;
    height: 30px;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    line-height: 30px;
}

.brand:hover {
    color: #fff;
    text-decoration: none;
}

.brand-word {
    letter-spacing: 0;
}

.brand-bird {
    width: 18px;
    height: 18px;
    margin-left: 5px;
}

.topnav {
    color: #fff;
    font-size: 12px;
    margin-left: auto;
    white-space: nowrap;
}

.topnav a {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

.topnav a:hover {
    text-decoration: underline;
}

.header-account-menu {
    position: relative;
    margin-left: 10px;
    height: 30px;
    display: flex;
    align-items: center;
    z-index: 10000; /* ensure badge tooltips and dropdown win over header */
}

.header-account-button {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 1px 5px 1px 3px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    cursor: pointer;
}

.header-account-button:hover,
.header-account-button.open {
    background: rgba(255, 255, 255, .18);
}

.header-account-avatar-frame,
.header-account-avatar-frame img {
    width: 22px;
    height: 22px;
}

.header-account-avatar-frame img {
    border-radius: 3px;
    object-fit: cover;
}

.header-account-avatar-frame .avatar-admin-badge {
    right: -5px;
    bottom: -5px;
}

.header-account-avatar-frame .avatar-admin-badge img {
    width: 13px;
    height: 13px;
}

.header-account-caret {
    font-size: 10px;
    line-height: 1;
}

.header-account-dropdown {
    position: absolute;
    right: 0;
    top: 30px;
    z-index: 10001; /* always above header and other elements, including badge tooltips */
    width: 304px;
    background: #fff;
    border: 1px solid var(--border-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .24);
    color: #333;
}

.header-account-dropdown[hidden] {
    display: none;
}

.account-menu-heading {
    padding: 7px 9px;
    background: #e8f5fd;
    border-bottom: 1px solid var(--border-main);
    color: #555;
    font-size: 11px;
    font-weight: bold;
}

.account-menu-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    gap: 7px;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #e8e8e8;
}

.account-menu-row.active {
    background: #f7fbfe;
    grid-template-columns: 34px minmax(0, 1fr);
}

.account-menu-row form {
    margin: 0;
}

.account-menu-user {
    min-width: 0;
}

.account-menu-add {
    display: block;
    padding: 8px 9px;
    font-size: 12px;
    font-weight: bold;
}

.subheader {
    background: var(--bg-header);
    min-height: 104px;
    color: #fff;
}

.subheader-inner {
    width: 900px;
    margin: 0 auto;
    padding: 12px 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 90px;
    position: relative;
}

.compose-avatar {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    object-fit: cover;
    margin-top: 20px;
}

.compose-form {
    display: grid;
    grid-template-columns: 1fr;
    width: 520px;
}

.compose-form label {
    color: #fff;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 3px;
}

.compose-form textarea {
    width: 360px;
    height: 55px;
    border: 1px solid #ccc;
    background: var(--bg-input);
    padding: 4px;
    resize: none;
    line-height: 17px;
}

.compose-bottom {
    width: 360px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.compose-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: 500px;
    margin: 4px 0 0;
}

.compose-tools button {
    background: #e8f5fd;
    border: 1px solid #0e5fa5;
    color: #04538a;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 5px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.compose-tools button:hover,
.compose-tools button.active {
    background: #fff;
}

.compose-tools img {
    width: 14px;
    height: 14px;
}

.hidden-file {
    display: none;
}

.compose-panel {
    display: none;
    width: 500px;
    background: #f7fbfe;
    border: 1px solid #0e5fa5;
    padding: 6px;
    margin-top: 5px;
    color: #333;
}

.compose-panel.open {
    display: block;
}

.compose-panel input {
    width: 100%;
    border: 1px solid var(--border-input);
    padding: 4px 5px;
    margin: 2px 0;
}

.tool-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px;
    align-items: center;
}

.tool-search button,
.compose-panel button {
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    color: #333;
    cursor: pointer;
    font-size: 11px;
    padding: 3px 7px;
}

.gif-results {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin: 6px 0;
    min-height: 0;
}

.gif-results button {
    padding: 0;
    border: 2px solid transparent;
    background: #fff;
    height: 58px;
    overflow: hidden;
}

.gif-results button.selected {
    border-color: var(--text-link);
}

.gif-results img {
    width: 100%;
    height: 58px;
    object-fit: cover;
    display: block;
}

.location-results {
    max-height: 96px;
    overflow-y: auto;
    margin: 5px 0;
}

.location-results button {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 3px;
}

.map-picker {
    height: 116px;
    border: 1px solid var(--border-dark);
    background:
        linear-gradient(90deg, rgba(0,132,180,.18) 1px, transparent 1px),
        linear-gradient(rgba(0,132,180,.18) 1px, transparent 1px),
        #d9eefb;
    background-size: 32px 32px;
    position: relative;
    overflow: hidden;
    cursor: crosshair;
}

.map-picker::before {
    content: "map";
    position: absolute;
    right: 6px;
    bottom: 4px;
    color: #5288a8;
    font-size: 10px;
}

.map-pin {
    display: none;
    position: absolute;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -100%);
    background: var(--badge-admin);
    border-radius: 50% 50% 50% 0;
    rotate: -45deg;
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
}

.map-pin::after {
    content: "";
    position: absolute;
    width: 5px;
    height: 5px;
    left: 4px;
    top: 4px;
    background: #fff;
    border-radius: 50%;
}

.selected-location,
.tool-hint {
    color: #777;
    font-size: 11px;
    margin-top: 4px;
}

.char-counter {
    color: #d9eefb;
    font-size: 12px;
    font-weight: bold;
}

.char-counter.danger {
    color: #ffcccc;
}

.compose-bottom button,
.primary-button {
    background: var(--btn-primary-bg);
    border: 1px solid #0e5fa5;
    color: var(--btn-primary-text);
    cursor: pointer;
    font-size: 12px;
    padding: 3px 8px;
}

.compose-bottom button:hover,
.primary-button:hover {
    background: var(--btn-primary-bg-hover);
    color: #fff;
    text-decoration: none;
}

.compose-bottom button:disabled,
.primary-button:disabled {
    opacity: .55;
    cursor: default;
}

.header-search {
    margin-left: auto;
    margin-top: 28px;
}

.header-search input {
    width: 190px;
    border: 1px solid #0e5fa5;
    padding: 4px 6px;
}

.guest-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
}

.guest-cta strong {
    font-size: 17px;
}

.guest-cta a {
    color: #fff;
    font-weight: bold;
    text-decoration: underline;
}

.landing-hero {
    min-height: 238px;
    padding: 22px 22px 18px 150px;
    border-bottom: 1px solid var(--border-main);
    background: #fff;
    position: relative;
}

.landing-bird-wrap {
    position: absolute;
    left: 24px;
    top: 24px;
    width: 96px;
    height: 96px;
    border-radius: 6px;
    background: var(--bg-header);
    border: 1px solid #0e5fa5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.landing-bird {
    width: 62px;
    height: 62px;
}

.landing-hero h1 {
    font-size: 24px;
    line-height: 30px;
    margin: 4px 0 8px;
}

.landing-hero p {
    color: #555;
    font-size: 14px;
    line-height: 21px;
    margin: 0 0 14px;
    max-width: 390px;
}

.landing-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.landing-primary {
    display: inline-block;
    font-weight: bold;
    padding: 5px 12px;
}

.landing-stats {
    color: #777;
    font-size: 12px;
}

.landing-stats span {
    margin-right: 12px;
}

.landing-login {
    background: #f7fbfe;
    border-bottom: 1px solid var(--border-main);
    padding: 10px;
}

.landing-login h2 {
    margin: 0 0 8px;
}

.landing-login-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: 6px;
}

.landing-login-form input {
    border: 1px solid var(--border-input);
    padding: 5px 6px;
    min-width: 0;
}

.landing-preview {
    background: #fff;
}

.landing-more {
    padding: 8px 10px;
    border-bottom: 1px solid #e8e8e8;
    font-size: 12px;
}

.page-wrap {
    width: 900px;
    max-width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 629px 270px;
    background: #fff;
    border: 1px solid var(--border-main);
    border-top: none;
    min-height: 500px;
}

.page-wrap-centered {
    display: block;
    width: 900px;
    max-width: 100%;
    background: transparent;
    border: none;
    padding: 40px 0;
}

.page-wrap-wide {
    display: block;
    width: 1100px;
    max-width: calc(100vw - 40px);
    background: #fff;
    border: 1px solid var(--border-main);
    border-top: none;
    padding: 0;
}

.main-col {
    width: 629px;
    background: #fff;
    min-height: 500px;
}

.main-col-centered {
    width: 420px;
    min-height: 0;
    margin: 0 auto;
    background: transparent;
}

.main-col-wide {
    width: 100%;
    min-height: 500px;
    margin: 0;
    background: #fff;
}

.sidebar {
    width: 270px;
    background: var(--bg-sidebar);
    border-left: 1px solid var(--border-main);
    min-height: 500px;
}

.content-header {
    background: #f7fbfe;
    border-bottom: 1px solid var(--border-main);
    padding: 9px 10px;
}

.secondary-heading {
    border-top: 1px solid var(--border-main);
}

.timeline {
    background: #fff;
}

.tweet-row {
    min-height: 67px;
    padding: 9px 10px;
    border-bottom: 1px solid #e8e8e8;
    background: #fff;
    position: relative;
    animation: oldFadeIn .14s ease-out;
    transition: background-color .12s ease-out;
}

.tweet-row:hover {
    background: #f8fcff;
}

.tweet-row::after,
.profile-header::after,
.suggestion::after,
.user-result::after,
.notification-row::after,
.dm-message::after {
    clear: both;
    content: "";
    display: block;
}

.tweet-avatar {
    width: 48px;
    height: 48px;
    border-radius: 4px;
    float: left;
    margin-right: 10px;
    object-fit: cover;
}

.tweet-content {
    margin-left: 58px;
}

.tweet-content strong {
    font-size: 14px;
    font-weight: bold;
    color: var(--text-username);
    margin-right: 5px;
}

.username {
    color: var(--text-username);
    font-weight: bold;
}

.tweet-body {
    font-size: 14px;
    line-height: 20px;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.tweet-body a {
    color: var(--text-link);
    text-decoration: none;
}

.tweet-body a:hover {
    color: var(--text-link-hover);
    text-decoration: underline;
}

.tweet-meta {
    color: var(--text-meta);
    font-size: 11px;
    margin-top: 3px;
}

.tweet-meta a,
.tweet-action,
.inline-form button {
    color: #999;
    text-decoration: none;
    font-size: 11px;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.tweet-meta a:hover,
.tweet-action:hover,
.inline-form button:hover {
    color: var(--text-link);
    text-decoration: underline;
}

.tweet-action.is-favorited {
    color: var(--text-link);
    font-weight: bold;
}

.tweet-action.is-retweeted {
    color: #3e8500;
    font-weight: bold;
}

.tweet-action:disabled,
.inline-form button:disabled {
    opacity: .72;
    cursor: default;
}

.tweet-action:disabled:hover,
.inline-form button:disabled:hover {
    color: #999;
    text-decoration: none;
}

.inline-form {
    display: inline;
    margin: 0;
}

.delete-action {
    vertical-align: baseline;
}

.deleted-text {
    color: #777;
    font-style: italic;
}

.tweet-row-deleted .tweet-avatar {
    opacity: .45;
}

.note-preview {
    display: inline-block;
    margin-left: 5px;
    color: #8a6d00;
}

.tweet-gif,
.tweet-media {
    margin-top: 6px;
}

.tweet-gif img,
.tweet-media img,
.tweet-media video {
    display: block;
    width: 324px;
    height: 186px;
    max-width: 100%;
    border: 1px solid #d8e6ef;
    border-radius: 3px;
    background: #f7fbfe;
    object-fit: cover;
}

.tweet-gif img {
    object-fit: cover;
}

.tweet-media {
    display: block;
    max-width: 324px;
}

.tweet-media a,
.tweet-audio {
    display: block;
    margin-bottom: 5px;
}

.tweet-media.media-count-1 img,
.tweet-media.media-count-1 video {
    width: 324px;
    height: 186px;
    object-fit: cover;
}

.tweet-media:not(.media-count-1) img,
.tweet-media:not(.media-count-1) video {
    width: 324px;
    height: 186px;
    object-fit: cover;
}

.tweet-audio {
    width: 324px;
    max-width: 100%;
    border: 1px solid #d8e6ef;
    background: #f7fbfe;
    padding: 6px;
}

.tweet-audio audio {
    width: 100%;
}

.tweet-embed {
    width: 324px;
    max-width: 100%;
    margin-top: 6px;
    border: 1px solid #d8e6ef;
    background: #f7fbfe;
}

.tweet-embed iframe {
    display: block;
    width: 100%;
    height: 186px;
    border: 0;
}

.tweet-link-card {
    display: block;
    width: 324px;
    max-width: 100%;
    margin-top: 6px;
    padding: 7px 8px;
    border: 1px solid #d8e6ef;
    background: #f7fbfe;
    color: #333;
}

.tweet-link-card strong,
.tweet-link-card span {
    display: block;
}

.tweet-link-card span {
    color: #777;
    font-size: 11px;
    margin-top: 2px;
}

.tweet-poll {
    max-width: 428px;
    margin-top: 7px;
    padding: 7px;
    border: 1px solid #d8e6ef;
    background: #f7fbfe;
    border-radius: 3px;
}

.poll-question {
    color: #333;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 5px;
}

.poll-option-form {
    margin: 0 0 4px;
}

.poll-option {
    width: 100%;
    min-height: 28px;
    border: 1px solid var(--border-input);
    background: #fff;
    color: #333;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding: 5px 7px;
    text-align: left;
}

.poll-option:hover {
    border-color: var(--text-link);
}

.poll-option:disabled {
    cursor: default;
    color: #777;
}

.poll-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: #dff1fb;
    z-index: 0;
}

.poll-text,
.poll-percent {
    position: relative;
    z-index: 1;
}

.poll-percent {
    color: #777;
    font-size: 11px;
}

.poll-meta,
.tweet-location {
    color: #777;
    font-size: 11px;
}

.tweet-location {
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.tweet-location img {
    width: 13px;
    height: 13px;
}

.inline-reply {
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
    margin-top: 0;
}

.inline-reply.open {
    max-height: 124px;
    margin-top: 6px;
}

.inline-reply textarea {
    width: 360px;
    height: 42px;
    border: 1px solid var(--border-input);
    padding: 4px;
    resize: none;
    display: block;
}

.inline-reply button,
.mini-button,
.secondary-button {
    background: var(--btn-secondary-bg);
    border: 1px solid var(--btn-secondary-border);
    color: #333;
    cursor: pointer;
    font-size: 11px;
    padding: 2px 7px;
    margin-top: 4px;
}

.reply-attach {
    margin-right: 4px;
}

.reply-context {
    color: #777;
    font-size: 11px;
    margin: 0 0 2px;
}

.retweet-context {
    color: #777;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    margin: 0 0 2px;
}

.reply-context span {
    display: block;
    color: #999;
}

.follows-you {
    display: inline-block;
    border: 1px solid #c9d9e4;
    background: #f4f9fc;
    color: #666;
    font-size: 10px;
    line-height: 14px;
    padding: 0 4px;
    margin-left: 4px;
    vertical-align: middle;
}

.secondary-button {
    display: inline-block;
    font-size: 12px;
    margin-top: 0;
}

.mini-button:hover,
.secondary-button:hover {
    border-color: var(--text-link);
    color: var(--text-link);
    text-decoration: none;
}

.badge {
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
    vertical-align: middle;
    font-family: Verdana, Geneva, sans-serif;
    line-height: 14px;
    display: inline-block;
}

.image-badge {
    width: 18px;
    height: 18px;
    margin-left: 0;
    vertical-align: middle;
    object-fit: contain;
    image-rendering: pixelated;
}

.avatar-frame {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
    overflow: visible;
}

.avatar-frame img {
    display: block;
}

.avatar-admin-badge.tooltip-wrap {
    position: absolute;
    right: -5px;
    bottom: -5px;
    z-index: 4;
    width: 18px;
    height: 18px;
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.avatar-admin-badge img {
    width: 18px;
    height: 18px;
    border: 1px solid rgba(0, 0, 0, .24);
    border-radius: 4px;
    background: #fff;
    object-fit: contain;
    image-rendering: auto;
}

.tweet-avatar-frame {
    float: left;
    margin-right: 10px;
}

.tweet-avatar-frame .tweet-avatar {
    float: none;
    margin-right: 0;
}

.tweet-avatar-frame .avatar-admin-badge,
.compose-avatar-frame .avatar-admin-badge,
.profile-mini-avatar-frame .avatar-admin-badge {
    right: -6px;
    bottom: -6px;
    width: 22px;
    height: 22px;
}

.tweet-avatar-frame .avatar-admin-badge img,
.compose-avatar-frame .avatar-admin-badge img,
.profile-mini-avatar-frame .avatar-admin-badge img {
    width: 22px;
    height: 22px;
    border-radius: 5px;
}

.compose-avatar-frame {
    flex: 0 0 auto;
    margin-top: 20px;
}

.compose-avatar-frame .compose-avatar {
    margin-top: 0;
}

.profile-mini-avatar-frame {
    display: block;
    width: 73px;
    height: 73px;
}

.profile-avatar-frame {
    float: left;
    margin-right: 12px;
}

.profile-avatar-frame .profile-avatar {
    float: none;
    margin-right: 0;
}

.profile-avatar-frame .avatar-admin-badge {
    right: -8px;
    bottom: -8px;
    width: 30px;
    height: 30px;
}

.profile-avatar-frame .avatar-admin-badge img {
    width: 30px;
    height: 30px;
    border-radius: 7px;
}

.suggestion-avatar-frame {
    float: left;
    margin-right: 8px;
}

.suggestion-avatar-frame .suggestion-avatar {
    float: none;
    margin-right: 0;
}

.small-avatar-frame,
.dm-avatar-frame,
.tiny-avatar-frame {
    flex: 0 0 auto;
}

.tiny-avatar-frame .avatar-admin-badge {
    right: -4px;
    bottom: -4px;
    width: 13px;
    height: 13px;
}

.tiny-avatar-frame .avatar-admin-badge img {
    width: 13px;
    height: 13px;
    border-radius: 3px;
}

.tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
}

.tooltip-wrap::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 5px);
    z-index: 10000;
    min-width: max-content;
    max-width: 240px;
    transform: translateX(-50%) translateY(2px);
    padding: 3px 6px;
    border: 1px solid #222;
    background: #333;
    color: #fff;
    font-size: 11px;
    line-height: 14px;
    font-weight: normal;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .04s linear, transform .04s linear;
}

.tooltip-wrap::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: calc(100% + 1px);
    z-index: 10001;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #333;
    pointer-events: none;
    opacity: 0;
    transition: opacity .04s linear;
}

.tooltip-wrap:hover::after,
.tooltip-wrap:focus-visible::after,
.tooltip-wrap:hover::before,
.tooltip-wrap:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.admin-image-badge {
    border-radius: 4px;
}

.badge-admin {
    background: var(--badge-admin);
    color: var(--badge-admin-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-verified-biz {
    background: var(--badge-verified-biz);
}

.badge-verified-gov {
    background: var(--badge-verified-gov);
}

.affiliation-avatar {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    vertical-align: middle;
    margin-left: 4px;
    border: 1px solid #ccc;
    object-fit: cover;
}

.affiliation-link:hover .affiliation-avatar {
    border-color: var(--text-link);
}

.side-box {
    border-bottom: 1px solid var(--border-main);
}

.side-header {
    background: var(--bg-body);
    border-bottom: 1px solid var(--border-main);
    padding: 6px 10px;
    font-weight: bold;
    font-size: 13px;
}

.side-header a {
    float: right;
    font-weight: normal;
    font-size: 11px;
}

.profile-mini-body {
    padding: 10px;
}

.profile-mini-avatar {
    width: 73px;
    height: 73px;
    border-radius: 4px;
    object-fit: cover;
}

.profile-mini-body p {
    margin: 6px 0;
}

.mini-stats {
    display: flex;
    gap: 10px;
    font-size: 12px;
}

.unread-link {
    display: block;
    margin-top: 6px;
    font-weight: bold;
}

.trend-list {
    list-style-position: inside;
    margin: 0;
    padding: 0;
}

.trend-list li,
.side-empty {
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}

.trend-list span,
.muted {
    color: var(--text-secondary);
    font-size: 11px;
}

.suggestion {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
}

.suggestion-avatar {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    object-fit: cover;
    float: left;
    margin-right: 8px;
}

.suggestion-body {
    margin-left: 42px;
}

.suggestion-bio {
    color: var(--text-secondary);
    font-size: 11px;
}

.side-footer {
    color: #999;
    font-size: 11px;
    padding: 10px;
}

.site-footer {
    width: 900px;
    margin: 12px auto 24px;
    color: #777;
    font-size: 11px;
}

.site-footer div {
    border-top: 1px solid var(--border-main);
    padding: 10px;
}

.site-footer strong {
    margin-right: 8px;
}

.site-footer a {
    margin-right: 8px;
}

.flash {
    margin: 10px;
    padding: 7px 9px;
    border: 1px solid #cbdca6;
    background: #f5ffe6;
    color: #3e6500;
    font-size: 12px;
}

.flash-error {
    border-color: #d99;
    background: #fff1f1;
    color: #a00;
}

.auth-card {
    width: 400px;
    background: #fff;
    border: 1px solid var(--border-main);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    padding: 18px;
    margin: 0 auto;
}

.auth-card h1 {
    margin-bottom: 12px;
}

.auth-check {
    justify-content: flex-start;
    margin: 2px 0 10px;
}

.primary-passkey-login {
    margin-top: 10px;
}

.static-page {
    padding: 14px 16px 20px;
}

.static-page h2 {
    font-size: 14px;
    margin: 14px 0 5px;
}

.static-page p {
    margin: 0 0 9px;
}

.suspension-page,
.maintenance-page {
    min-height: 100vh;
    background:
        repeating-linear-gradient(45deg, rgba(4, 83, 138, .08) 0, rgba(4, 83, 138, .08) 10px, transparent 10px, transparent 20px),
        var(--bg-body);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.suspension-card,
.maintenance-card {
    width: 430px;
    max-width: 100%;
    background: #fff;
    border: 1px solid var(--border-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    padding: 18px;
    animation: oldFadeIn .18s ease-out;
}

.suspension-card {
    line-height: 20px;
}

.suspension-stamp {
    display: inline-block;
    background: #9b1c1c;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 7px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.suspension-card h1,
.maintenance-card h1 {
    font-size: 20px;
    line-height: 25px;
    margin-bottom: 12px;
}

.maintenance-card p {
    margin: 0 0 12px;
}

.maintenance-admin-panel {
    padding: 0 10px 10px;
    border-bottom: 1px solid var(--border-main);
}

.maintenance-admin-panel p {
    margin: 6px 0 8px;
}

.suspension-card dl {
    margin: 0 0 14px;
}

.suspension-card dt {
    color: #777;
    font-size: 11px;
    font-weight: bold;
    margin-top: 10px;
    text-transform: uppercase;
}

.suspension-card dt:first-child {
    margin-top: 0;
}

.suspension-card dd {
    line-height: 20px;
    margin: 2px 0 12px;
}

.moderation-note,
.appeal-note {
    border-top: 1px solid var(--border-main);
    line-height: 20px;
    margin: 12px 0 0;
    padding-top: 12px;
}

.logout-button {
    margin-top: 14px;
}

.account-switcher-settings {
    padding: 10px;
}

.account-switch-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    padding: 7px 0;
}

.account-switch-row.active {
    background: #f7fbfe;
}

.account-switch-row form {
    margin: 0;
}

.account-add-form {
    border-top: 1px solid var(--border-main);
    margin-top: 10px;
    padding-left: 0;
}

.auth-form label,
.settings-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

.auth-form input,
.settings-form input,
.settings-form select,
.settings-form textarea,
.search-page-form input,
.dm-form textarea,
.dm-form input {
    width: 100%;
    border: 1px solid var(--border-input);
    background: #fff;
    padding: 6px;
    margin-top: 3px;
    font-weight: normal;
}

.settings-form textarea {
    height: 76px;
    resize: vertical;
}

.settings-form .custom-theme-editor {
    min-height: 310px;
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 12px;
    line-height: 16px;
    white-space: pre;
    tab-size: 4;
}

.custom-theme-panel {
    margin-top: 6px;
}

.custom-theme-panel[hidden],
.image-cropper[hidden] {
    display: none;
}

.image-cropper {
    background: #f7fbfe;
    border: 1px solid var(--border-main);
    margin: -2px 0 12px;
    padding: 8px;
}

.crop-title {
    color: #333;
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 6px;
}

.crop-stage {
    position: relative;
    width: 100%;
    min-height: 170px;
    max-height: 360px;
    background: #d9edf8;
    border: 1px solid var(--border-input);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.crop-stage img {
    display: block;
    max-width: 100%;
    max-height: 360px;
    object-fit: contain;
    user-select: none;
}

.crop-box {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid #fff;
    outline: 1px solid #04538a;
    box-shadow: 0 0 0 999px rgba(0, 0, 0, .32);
    cursor: move;
    touch-action: none;
    background-image:
        linear-gradient(to right, transparent 33%, rgba(255, 255, 255, .72) 33%, rgba(255, 255, 255, .72) calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, rgba(255, 255, 255, .72) 66%, rgba(255, 255, 255, .72) calc(66% + 1px), transparent calc(66% + 1px)),
        linear-gradient(to bottom, transparent 33%, rgba(255, 255, 255, .72) 33%, rgba(255, 255, 255, .72) calc(33% + 1px), transparent calc(33% + 1px), transparent 66%, rgba(255, 255, 255, .72) 66%, rgba(255, 255, 255, .72) calc(66% + 1px), transparent calc(66% + 1px));
}

.crop-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #fff;
    border: 1px solid #04538a;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    z-index: 3;
    touch-action: none;
    box-sizing: border-box;
}
.crop-handle-nw { cursor: nwse-resize; }
.crop-handle-ne { cursor: nesw-resize; }
.crop-handle-sw { cursor: nesw-resize; }
.crop-handle-se { cursor: nwse-resize; }

.crop-hint {
    color: #777;
    font-size: 11px;
    line-height: 16px;
    margin-top: 6px;
}

.crop-zoom-label {
    display: grid;
    grid-template-columns: auto minmax(120px, 1fr);
    align-items: center;
    gap: 8px;
    color: #555;
    font-size: 11px;
    font-weight: bold;
    margin: 7px 0 0;
}

.settings-form .crop-zoom-label input {
    margin: 0;
    padding: 0;
}

.settings-section {
    border-top: 1px solid var(--border-main);
    margin-top: 12px;
    padding-top: 8px;
}

.settings-section h2 {
    margin-left: 0;
}

.two-factor-settings {
    margin: 0;
    border-bottom: 1px solid var(--border-main);
}

.security-status {
    display: inline-block;
    background: #f5f5f5;
    border: 1px solid var(--border-input);
    color: #555;
    font-size: 11px;
    font-weight: bold;
    margin: 0 0 8px;
    padding: 2px 6px;
}

.security-status.enabled {
    background: #e7f5e9;
    border-color: #9ac79d;
    color: #226b2d;
}

.security-status.pending {
    background: #fffde7;
    border-color: #f0c040;
    color: #8a6d00;
}

.totp-secret {
    display: inline-block;
    background: #f7fbfe;
    border: 1px solid var(--border-main);
    color: #333;
    font-family: "Courier New", monospace;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 4px 0 8px;
    padding: 6px 8px;
}

.break-word {
    overflow-wrap: anywhere;
}

.passkey-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border-bottom: 1px solid #e8e8e8;
    padding: 7px 0;
}

.passkey-login {
    border-top: 1px solid var(--border-main);
    margin-top: 10px;
    padding-top: 10px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
}

.checkbox-label input {
    width: auto;
    margin: 0;
}

.remove-media-option {
    color: #555;
    margin: -3px 0 10px;
}

.lock-badge {
    color: #777;
    font-size: 12px;
    margin-left: 3px;
    vertical-align: middle;
}

.site-alert {
    background: #fffde7;
    border-bottom: 1px solid #f0c040;
    color: #5d4b00;
    font-size: 12px;
    animation: oldNoticeSlide .18s ease-out;
}

.site-alert.hidden {
    display: none;
}

.site-alert-inner {
    width: 900px;
    margin: 0 auto;
    padding: 6px 10px;
}

.full-button {
    width: 100%;
    padding: 7px 8px;
}

.auth-switch {
    margin: 12px 0 0;
}

.field-error {
    display: block;
    color: #dd0000;
    font-size: 12px;
    font-weight: normal;
    min-height: 16px;
}

.username-status.ok {
    color: #3e8500;
}

.username-status.bad {
    color: #dd0000;
}

.empty-state,
.error-card {
    padding: 18px 10px;
    color: #777;
}

.error-card {
    background: #fff;
    border: 1px solid var(--border-main);
}

.pagination {
    padding: 10px;
    display: flex;
    justify-content: space-between;
}

.search-page-form {
    padding: 10px;
    display: flex;
    gap: 6px;
}

.search-page-form input {
    width: 100%;
}

.user-results {
    border-top: 1px solid var(--border-main);
}

.users-directory h2 {
    background: #e8f5fd;
    border-bottom: 1px solid var(--border-main);
    border-top: 1px solid var(--border-main);
    color: #333;
    font-size: 13px;
    margin: 0;
    padding: 7px 10px;
}

.featured-users {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border-bottom: 1px solid #e8e8e8;
}

.featured-user {
    display: flex;
    gap: 10px;
    min-width: 0;
    padding: 10px;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    background: #fff;
}

.featured-user:nth-child(2n) {
    border-right: none;
}

.featured-avatar-link {
    flex: 0 0 auto;
}

.featured-avatar-frame,
.featured-avatar {
    width: 73px;
    height: 73px;
}

.featured-avatar {
    border-radius: 4px;
    object-fit: cover;
}

.featured-user-body,
.directory-user-body {
    min-width: 0;
}

.featured-user-body p,
.directory-user-body p {
    color: #555;
    font-size: 12px;
    line-height: 17px;
    margin: 3px 0 5px;
}

.directory-user {
    background: #fff;
}

.directory-stats {
    color: #999;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 11px;
    line-height: 15px;
}

.user-result,
.notification-row {
    padding: 9px 10px;
    border-bottom: 1px solid #e8e8e8;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.notification-row.unread {
    background: #f7fbfe;
}

.small-avatar {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    object-fit: cover;
    flex: 0 0 auto;
}

.tiny-avatar {
    width: 24px;
    height: 24px;
    border-radius: 3px;
    object-fit: cover;
}

.profile-header {
    padding: 14px 10px;
    border-bottom: 1px solid var(--border-main);
    background: #fff;
    position: relative;
    overflow: visible;
    z-index: 2;
}

.profile-header.admin-profile {
    background: repeating-linear-gradient(135deg, #fff5f0 0px, #fff5f0 10px, #fff 10px, #fff 20px);
}

.profile-header.has-banner {
    padding-top: 128px;
}

.profile-header.has-banner > :not(.profile-banner) {
    position: relative;
    z-index: 1;
}

.profile-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background-image: var(--profile-banner);
    background-position: center;
    background-size: cover;
    border-bottom: 1px solid var(--border-main);
}

.profile-avatar {
    width: 73px;
    height: 73px;
    border-radius: 4px;
    float: left;
    margin-right: 12px;
    object-fit: cover;
}

.profile-info {
    margin-left: 85px;
    padding-right: 120px;
}

.profile-username {
    color: #777;
    margin-bottom: 5px;
}

.staff-label {
    display: inline-block;
    background: #f5f5f5;
    border: 1px solid var(--border-input);
    color: #555;
    font-size: 11px;
    line-height: 15px;
    padding: 2px 6px;
    margin: 0 0 5px;
    border-radius: 2px;
}

.owner-label,
.owner-protected-note {
    background: #fff7d6;
    border: 1px solid #d8a300;
    color: #5c4500;
    font-weight: bold;
}

.owner-protected-note {
    display: inline-block;
    font-size: 11px;
    line-height: 15px;
    padding: 4px 7px;
    border-radius: 2px;
}

.profile-info p {
    margin: 5px 0;
}

.profile-meta span,
.profile-stats a,
.profile-stats span {
    margin-right: 10px;
    font-size: 12px;
}

.profile-action {
    position: absolute;
    top: 14px;
    right: 10px;
    display: flex;
    gap: 5px;
    align-items: flex-start;
}

.suspended-banner {
    background: #fff1f1;
    border: 1px solid #d99;
    color: #900;
    padding: 6px 8px;
    margin-bottom: 10px;
    font-weight: bold;
}

.suspended-banner span {
    display: block;
    margin-top: 3px;
    color: #700;
    font-weight: normal;
}

.profile-analytics {
    background: #fff;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid var(--border-main);
}

.analytics-grid div {
    background: #f7fbfe;
    border: 1px solid var(--border-main);
    padding: 8px;
}

.analytics-grid span {
    display: block;
    color: #777;
    font-size: 11px;
}

.analytics-grid strong {
    display: block;
    color: #333;
    font-size: 18px;
    margin-top: 3px;
}

.profile-analytics h2 {
    background: #e8f5fd;
    border-bottom: 1px solid var(--border-main);
    font-size: 13px;
    margin: 0;
    padding: 7px 10px;
}

.analytics-row {
    display: flex;
    gap: 8px;
    padding: 9px 10px;
    border-bottom: 1px solid #e8e8e8;
}

.analytics-row p {
    color: #555;
    font-size: 12px;
    line-height: 17px;
    margin: 3px 0 0;
}

.tabs {
    display: flex;
    gap: 10px;
    padding: 8px 10px 0;
    border-bottom: 1px solid var(--border-main);
}

.tabs a {
    color: #999;
    padding: 5px 8px 7px;
    border-bottom: 2px solid transparent;
    font-weight: bold;
}

.tabs a.active {
    color: #333;
    border-bottom-color: var(--bg-header);
}

.settings-form {
    padding: 10px;
}

.compact-form {
    max-width: 460px;
}

.button-row {
    display: flex;
    gap: 6px;
    margin: 0;
}

.community-note {
    background: #fffde7;
    border: 1px solid #f0c040;
    border-left: 4px solid #f0c040;
    padding: 8px 12px;
    margin: 6px 10px 6px 68px;
    font-size: 12px;
    color: #555;
    border-radius: 2px;
}

.community-note .note-header {
    font-weight: bold;
    color: #8a6d00;
    margin-bottom: 4px;
    font-size: 12px;
}

.community-note .note-header button {
    float: right;
    background: transparent;
    border: 0;
    color: var(--text-link);
    cursor: pointer;
    font-size: 11px;
}

.community-note .note-actions {
    font-size: 11px;
    color: #777;
}

.community-note .note-actions button {
    font-size: 11px;
    color: var(--text-link);
    margin-right: 10px;
    text-decoration: none;
}

.community-note.is-collapsed .note-body {
    display: none;
}

/* Verified by The Community (majority of registered users voted helpful) */
.community-note.is-verified {
    background: #e8f5e9;
    border-color: #4caf50;
    border-left-color: #2e7d32;
}
.community-note.is-verified .note-header {
    color: #1b5e20;
}
.community-note.is-verified .verified-label {
    background: #4caf50;
    color: #fff;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 2px;
    margin-left: 6px;
    vertical-align: middle;
    font-weight: normal;
}

.note-form-wrap {
    margin: 10px;
    font-size: 12px;
}

.pending-note {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.pending-note p {
    margin: 6px 0;
}

.dm-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    min-height: 420px;
}

.dm-list {
    border-right: 1px solid var(--border-main);
    background: #f9fdff;
}

.dm-conversation {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px;
    border-bottom: 1px solid #e8e8e8;
    color: #333;
}

.dm-conversation.active {
    background: #fff;
    font-weight: bold;
}

.dm-avatar {
    width: 34px;
    height: 34px;
    border-radius: 4px;
    object-fit: cover;
}

.dm-thread {
    padding: 10px;
}

.dm-stats {
    color: #777;
    font-size: 11px;
    margin: -3px 0 8px;
}

.dm-messages {
    height: 270px;
    overflow-y: auto;
    border: 1px solid var(--border-main);
    background: #fff;
    margin: 8px 0;
}

.dm-message {
    display: flex;
    gap: 8px;
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.dm-message.mine {
    background: #f7fbfe;
}

.dm-message p {
    margin: 2px 0;
}

.dm-message span {
    color: #999;
    font-size: 11px;
}

.dm-message .avatar-frame,
.dm-conversation .avatar-frame {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
}

.dm-message .avatar-admin-badge,
.dm-conversation .avatar-admin-badge {
    right: -5px;
    bottom: -5px;
}

.dm-form textarea {
    height: 60px;
    resize: vertical;
}

.media-lightbox[hidden] {
    display: none;
}

.media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, .78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.media-lightbox button {
    position: absolute;
    top: 12px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: 1px solid #fff;
    background: #111;
    color: #fff;
    font-size: 24px;
    line-height: 28px;
    cursor: pointer;
}

.media-lightbox img,
.media-lightbox video {
    max-width: 92vw;
    max-height: 86vh;
    background: #000;
    border: 3px solid #fff;
}

.admin-nav {
    background: #f7fbfe;
    border-bottom: 1px solid var(--border-main);
    padding: 7px 10px;
}

.admin-mode {
    background: var(--bg-body);
}

.admin-mode .topbar {
    background: var(--bg-header-top, var(--bg-header));
    border-bottom: 1px solid var(--border-dark);
}

.admin-mode .topbar-inner {
    width: 100%;
    max-width: none;
    padding: 0 22px;
}

.admin-mode .page-wrap-wide {
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 30px);
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg-body);
    overflow: visible;
}

.admin-mode .main-col-wide {
    display: grid;
    grid-template-columns: 248px minmax(0, 1fr);
    align-content: start;
    min-height: calc(100vh - 30px);
    background: var(--bg-body);
    min-width: 0;
}

.admin-mode .admin-nav {
    grid-column: 1;
    grid-row: 1 / span 100;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: sticky;
    top: 30px;
    z-index: 20;
    min-height: calc(100vh - 30px);
    padding: 20px 14px;
    background: var(--bg-tweet-box);
    border: 0;
    box-shadow: inset -1px 0 0 var(--border-dark);
}

.admin-nav a {
    margin-right: 12px;
    font-weight: bold;
}

.admin-mode .admin-nav a {
    display: block;
    color: var(--text-primary);
    margin: 0;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.admin-nav a.active {
    color: var(--text-primary);
}

.admin-mode .admin-nav a:hover {
    color: var(--text-primary);
    background: rgba(0, 0, 0, .06);
    text-decoration: none;
}

.admin-mode .admin-nav a.active {
    color: var(--text-white);
    background: var(--bg-header);
    border-color: var(--border-dark);
    text-decoration: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset;
}

.admin-mode .flash,
.admin-mode .admin-security-banner,
.admin-mode .content-header,
.admin-mode .admin-stats,
.admin-mode h2,
.admin-mode .settings-form,
.admin-mode .maintenance-admin-panel,
.admin-mode .admin-table,
.admin-mode .empty-state,
.admin-mode .admin-auth-shell {
    grid-column: 2;
}

.admin-mode .flash {
    margin: 14px 18px 0;
    background: var(--bg-tweet-box);
    border-color: var(--border-main);
}

.admin-security-banner {
    margin: 16px 18px 0;
    padding: 10px 12px;
    background: var(--bg-tweet-box);
    border: 1px solid var(--border-main);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: bold;
}

.admin-mode .content-header {
    margin: 18px 18px 0;
    padding: 18px 20px;
    color: var(--text-primary);
    background: var(--bg-tweet-box);
    border: 1px solid var(--border-main);
    border-radius: 5px 5px 0 0;
}

.admin-mode .content-header h1 {
    color: var(--text-primary);
    font-size: 22px;
    letter-spacing: 0;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin: 0 18px 18px;
    padding: 14px;
    background: var(--bg-white);
    border: 1px solid var(--border-main);
    border-top: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.admin-stats div {
    background: var(--bg-tweet-box);
    border: 1px solid var(--border-main);
    border-radius: 4px;
    padding: 10px;
    color: var(--text-primary);
}

.admin-stats strong {
    display: block;
    margin-top: 4px;
    color: var(--text-primary);
    font-size: 19px;
}

.admin-mode h2 {
    margin: 18px 18px 8px;
    color: var(--text-primary);
    font-size: 16px;
}

.admin-mode .settings-form,
.admin-mode .maintenance-admin-panel,
.admin-mode .empty-state {
    margin: 0 18px 18px;
    background: var(--bg-white);
    border: 1px solid var(--border-main);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.admin-table {
    width: calc(100% - 36px);
    margin: 0 18px 24px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    table-layout: fixed;
    background: var(--bg-white);
    border: 1px solid var(--border-main);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.admin-mode .admin-table {
    table-layout: auto;
}

.admin-table th,
.admin-table td {
    border-bottom: 1px solid var(--border-main);
    padding: 9px 8px;
    text-align: left;
    vertical-align: top;
}

.admin-table th {
    background: var(--bg-tweet-box);
    color: var(--text-primary);
    border-bottom-color: var(--border-main);
}

.admin-mode .admin-table tbody tr:hover td {
    background: var(--bg-tweet-box);
}

.admin-table tr:last-child td {
    border-bottom: 0;
}

.admin-mode .admin-table th,
.admin-mode .admin-table td {
    color: var(--text-primary);
}

.admin-users-table th:nth-child(1),
.admin-users-table td:nth-child(1) {
    width: 34px;
}

.admin-users-table th:nth-child(2),
.admin-users-table td:nth-child(2) {
    width: 56px;
}

.admin-users-table th:nth-child(4),
.admin-users-table td:nth-child(4),
.admin-users-table th:nth-child(5),
.admin-users-table td:nth-child(5),
.admin-users-table th:nth-child(6),
.admin-users-table td:nth-child(6),
.admin-users-table th:nth-child(7),
.admin-users-table td:nth-child(7) {
    width: 66px;
}

.admin-users-table th:nth-child(8),
.admin-users-table td:nth-child(8) {
    width: 96px;
}

.admin-users-table th:nth-child(9),
.admin-users-table td:nth-child(9) {
    width: 92px;
}

.admin-users-table th:last-child,
.admin-users-table td:last-child {
    width: 520px;
}

.admin-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 5px;
    margin: 0;
    width: 100%;
    align-items: stretch;
}

.admin-actions button,
.admin-actions a {
    background: var(--bg-tweet-box);
    border: 1px solid var(--border-input);
    color: var(--text-primary);
    font-size: 11px;
    padding: 4px 6px;
    cursor: pointer;
    width: 100%;
    min-height: 26px;
    line-height: 16px;
    text-align: center;
    overflow-wrap: anywhere;
    border-radius: 3px;
}

.admin-actions button:hover,
.admin-actions a:hover {
    background: var(--bg-body);
    border-color: var(--border-dark);
    color: var(--text-link);
    text-decoration: none;
}

.admin-actions a {
    display: inline-block;
}

.admin-actions button:disabled,
.admin-actions input:disabled {
    opacity: 0.58;
    cursor: not-allowed;
}

.admin-actions textarea,
.admin-actions input[type="text"],
.admin-actions input[type="password"] {
    grid-column: 1 / -1;
    width: 100%;
    border: 1px solid var(--border-input);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 11px;
    padding: 5px 6px;
    border-radius: 3px;
}

.admin-actions textarea {
    min-height: 52px;
    resize: vertical;
}

.admin-auth-shell {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 30px);
    padding: 24px;
}

.admin-auth-card {
    width: 420px;
    max-width: 100%;
    padding: 22px;
    background: var(--bg-white);
    border: 1px solid var(--border-main);
    border-radius: 5px;
    box-shadow: 0 3px 14px rgba(0, 0, 0, .12);
}

.admin-auth-kicker {
    color: var(--text-link);
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}

.admin-auth-card h1 {
    margin: 5px 0 8px;
    font-size: 20px;
}

.admin-auth-card p {
    color: var(--text-secondary);
}

.admin-mode .admin-auth-form {
    margin: 14px 0;
    border: 0;
    box-shadow: none;
    padding: 0;
    background: transparent;
}

.passkey-admin-box {
    margin-top: 10px;
}

.admin-auth-links {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    font-size: 12px;
}

.autocomplete-box {
    position: absolute;
    z-index: 1000;
    width: 180px;
    background: #fff;
    border: 1px solid var(--border-dark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}

.autocomplete-box button {
    display: block;
    width: 100%;
    background: #fff;
    border: 0;
    border-bottom: 1px solid #eee;
    color: #333;
    cursor: pointer;
    font-size: 12px;
    padding: 5px 7px;
    text-align: left;
}

.autocomplete-box button:hover {
    background: var(--bg-body);
}

@media (max-width: 940px) {
    .topbar-inner,
    .subheader-inner,
    .site-alert-inner,
    .page-wrap,
    .page-wrap-centered {
        width: 100%;
    }

    .page-wrap {
        grid-template-columns: 1fr;
    }

    .main-col,
    .main-col-centered {
        width: 100%;
    }

    .sidebar {
        width: 100%;
        border-left: 0;
        border-top: 1px solid var(--border-main);
    }

    .subheader-inner {
        flex-wrap: wrap;
    }

    .compose-form,
    .compose-form textarea,
    .compose-bottom,
    .compose-tools,
    .compose-panel {
        width: min(360px, calc(100vw - 88px));
    }

    .tweet-media,
    .tweet-poll,
    .tweet-gif img,
    .tweet-media img,
    .tweet-media video,
    .tweet-audio,
    .tweet-embed,
    .tweet-link-card {
        max-width: 100%;
    }

    .site-footer {
        width: 100%;
    }

    .header-search {
        margin-left: 58px;
        margin-top: 0;
    }

    .landing-hero {
        padding: 138px 14px 18px;
    }

    .landing-bird-wrap {
        left: 14px;
        top: 18px;
    }

    .landing-login-form {
        grid-template-columns: 1fr;
    }

    .topbar {
        height: auto;
        min-height: 30px;
    }

    .topbar-inner {
        min-height: 30px;
        flex-wrap: wrap;
        position: relative;
    }

    .topnav {
        white-space: normal;
    }

    .header-account-dropdown {
        width: min(304px, calc(100vw - 16px));
    }
}

@media (max-width: 720px) {
    body {
        min-width: 0;
    }

    .topbar-inner {
        align-items: flex-start;
        gap: 4px;
        padding: 3px 54px 3px 8px;
    }

    .brand {
        flex: 0 0 auto;
    }

    .topnav {
        width: 100%;
        line-height: 20px;
        padding-bottom: 4px;
    }

    .header-account-menu {
        position: absolute;
        right: 8px;
        top: 2px;
        margin-left: 0;
        z-index: 10000;
    }

    .header-account-dropdown {
        right: 0;
        top: 28px;
        z-index: 10001;
    }

    .account-menu-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .account-menu-row form {
        grid-column: 2;
    }

    .subheader {
        min-height: 0;
    }

    .subheader-inner {
        align-items: flex-start;
        padding: 8px;
    }

    .compose-avatar-frame {
        margin-top: 18px;
    }

    .compose-form,
    .compose-form textarea,
    .compose-bottom,
    .compose-tools,
    .compose-panel {
        width: calc(100vw - 84px);
        min-width: 0;
    }

    .compose-tools button {
        flex: 1 1 calc(50% - 4px);
        justify-content: center;
        min-height: 26px;
    }

    .header-search {
        width: 100%;
        margin: 8px 0 0 58px;
    }

    .header-search input {
        width: calc(100vw - 82px);
    }

    .page-wrap,
    .page-wrap-centered,
    .page-wrap-wide {
        max-width: none;
        border-left: 0;
        border-right: 0;
    }

    .page-wrap-centered {
        padding: 16px 8px;
    }

    .auth-card,
    .main-col-centered {
        width: 100%;
        max-width: 420px;
    }

    .tweet-row {
        margin: 0;
        padding: 9px 8px;
    }

    .tweet-body {
        overflow-wrap: anywhere;
    }

    .tweet-gif img,
    .tweet-media img,
    .tweet-media video,
    .tweet-media.media-count-1 img,
    .tweet-media.media-count-1 video,
    .tweet-media:not(.media-count-1) img,
    .tweet-media:not(.media-count-1) video,
    .tweet-audio,
    .tweet-embed,
    .tweet-link-card {
        width: 100%;
        height: auto;
        max-height: 220px;
    }

    .tweet-embed iframe {
        height: 190px;
    }

    .profile-header {
        padding: 12px 8px;
    }

    .profile-header.has-banner {
        padding-top: 104px;
    }

    .profile-banner {
        height: 96px;
    }

    .profile-avatar-frame {
        float: none;
        margin: 0 0 8px;
    }

    .profile-info h1 {
        line-height: 22px;
    }

    .profile-action {
        position: static;
        margin-top: 10px;
    }

    .tabs {
        display: flex;
        overflow-x: auto;
    }

    .tabs a {
        flex: 1 0 auto;
        text-align: center;
    }

    .dm-layout {
        grid-template-columns: 1fr;
    }

    .dm-list {
        border-right: 0;
        border-bottom: 1px solid var(--border-main);
        max-height: 210px;
        overflow-y: auto;
    }

    .dm-thread {
        min-width: 0;
    }

    .settings-form,
    .account-switcher-settings {
        padding: 8px;
    }

    .analytics-grid {
        grid-template-columns: 1fr 1fr;
    }

    .analytics-row {
        align-items: flex-start;
    }

    .featured-users {
        grid-template-columns: 1fr;
    }

    .featured-user {
        border-right: 0;
    }

    .crop-stage {
        min-height: 140px;
        max-height: 270px;
    }

    .crop-stage img {
        max-height: 270px;
    }

    .account-switch-row {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .account-switch-row form {
        grid-column: 2;
    }

    .passkey-row {
        grid-template-columns: 1fr;
    }

    .landing-hero {
        min-height: 0;
    }

    .site-footer div {
        padding: 8px;
    }

    .admin-mode .topbar-inner {
        padding: 3px 8px;
    }

    .admin-mode .main-col-wide {
        display: block;
        min-height: 0;
        overflow-x: hidden;
    }

    .admin-mode .admin-nav {
        position: static;
        min-height: 0;
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
        white-space: nowrap;
    }

    .admin-mode .admin-nav a {
        padding: 10px 12px;
    }

    .admin-mode .content-header {
        margin: 10px 8px 0;
        padding: 12px 10px;
    }

    .admin-security-banner,
    .admin-stats,
    .admin-mode h2,
    .admin-mode .settings-form,
    .admin-mode .maintenance-admin-panel,
    .admin-mode .empty-state,
    .admin-mode .admin-auth-shell {
        margin-left: 8px;
        margin-right: 8px;
    }

    .admin-stats {
        grid-template-columns: 1fr;
    }

    .admin-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        table-layout: auto;
        width: calc(100% - 16px);
        margin-left: 8px;
        margin-right: 8px;
    }

    .admin-table th,
    .admin-table td {
        min-width: 88px;
        white-space: normal;
    }

    .admin-users-table th:last-child,
    .admin-users-table td:last-child {
        min-width: 260px;
        width: 260px;
    }

    .admin-actions {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    /* Additional mobile polish for 720px and below */
    .tweet-action {
        padding: 2px 4px;
        min-height: 28px;
    }
}

@media (max-width: 420px) {
    .compose-form,
    .compose-form textarea,
    .compose-bottom,
    .compose-tools,
    .compose-panel {
        width: calc(100vw - 76px);
    }

    .compose-tools button {
        flex-basis: 100%;
    }

    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .tweet-avatar-frame {
        margin-right: 8px;
    }

    .tweet-content {
        min-width: 0;
    }

    /* Mobile touch & polish fixes (non-redesign) */
    .topnav a,
    .tweet-action,
    .mini-button,
    .header-account-button {
        min-height: 36px;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    .compose-tools button {
        min-height: 38px;
        font-size: 12px;
    }
    .crop-handle {
        width: 18px;
        height: 18px;
    }
    .crop-stage {
        min-height: 120px;
    }
}