#upro-banner {
    height: 120px;
    border-radius: 10px;
    background: #dfe6ea linear-gradient(135deg, #cfe0ea, #eef3f6);
    background-size: cover;
    background-position: center;
    margin: 12px auto 0;
    max-width: 1300px;
    padding: 0 16px;
    box-sizing: border-box;
    position: relative;
}

#upro-banner-edit-trigger {
    position: absolute;
    left: 26px;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
}

#upro-banner-edit-trigger:hover {
    background: rgba(0, 0, 0, 0.7);
}

.upro-avatar,
img.upro-avatar {
    width: 56px !important;
    height: 56px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 3px solid #fff;
    flex-shrink: 0;
    display: block;
}

#upro-display-name {
    margin: 0 0 4px;
    font-size: 18px;
}

#upro-bio {
    margin: 0 0 6px;
    font-size: 13px;
    color: #555;
}

#upro-meta-row {
    margin: 0 0 4px;
    font-size: 12px;
    color: #666;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

#upro-website {
    color: #3c96c6;
    text-decoration: none;
}

#upro-member-since {
    margin: 0 0 6px;
    font-size: 12px;
    color: #999;
}

#upro-stats {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
}

#upro-username {
    margin: 0 0 6px;
    font-size: 13px;
    color: #888;
}

#upro-verified-badge {
    font-size: 14px;
}

#upro-action-buttons {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-self: flex-start;
}

#upro-message-btn,
#upro-share-btn {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    text-align: center;
    white-space: nowrap;
}

#upro-message-btn {
    color: #3c96c6;
    border-color: #bcdcec;
    font-weight: 600;
}

#upro-friend-btn {
    background: #3c96c6;
    color: #fff;
    border: 1px solid #3c96c6;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
}

#upro-friend-btn.upro-friend-pending {
    background: #fff;
    color: #555;
    border-color: #ddd;
    cursor: pointer;
}

#upro-friend-respond {
    display: flex;
    gap: 6px;
}

#upro-friend-respond button {
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #fff;
}

.upro-friend-accept {
    background: #3c96c6 !important;
    color: #fff;
    border-color: #3c96c6 !important;
}

.upro-friend-reject {
    color: #c0392b;
}

@media (max-width: 600px) {
    #upro-banner {
        height: 90px;
        margin-top: 8px;
    }

    .upro-avatar {
        width: 56px;
        height: 56px;
    }

    #upro-meta-row {
        justify-content: center;
    }

    #upro-action-buttons {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-self: stretch;
        width: 100%;
        gap: 8px;
        margin-top: 4px;
    }

    #upro-message-btn,
    #upro-share-btn {
        font-size: 11px;
        padding: 6px 10px;
        white-space: normal;
    }
}

/* ---------- Personal Space page: real dashboard layout ---------- */

#upro-space-app {
    max-width: 1300px;
    margin: 10px auto;
    padding: 0 16px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

#upro-space-sidebar {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 16px;
}

#upro-corner-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#upro-edit-btn,
#upro-corner-actions #upro-share-btn {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 11px;
    cursor: pointer;
    white-space: nowrap;
    color: #555;
}

#upro-space-sidebar-header {
    text-align: center;
}

#upro-avatar-wrap {
    position: relative;
    width: 56px;
    margin: -40px auto 0;
    z-index: 2;
}

#upro-space-sidebar-header .upro-avatar {
    display: block;
    margin: 0;
    position: relative;
}

#upro-space-sidebar-header h2 {
    margin: 8px 0 4px;
    font-size: 16px;
}

#upro-space-sidebar-header #upro-username,
#upro-space-sidebar-header #upro-bio,
#upro-space-sidebar-header #upro-member-since {
    text-align: center;
}

#upro-meta-row {
    justify-content: center;
}

#upro-stats {
    text-align: center;
}

#fact-publish-open-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: #3c96c6;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    margin: 10px 0 6px;
}

#fact-publish-open-btn:hover {
    background: #2f7ba5;
}

#upro-space-nav {
    background: #fff;
    border: 1px solid #e2e5e8;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 6px;
}

#upro-space-nav .upro-tab {
    text-align: left;
    padding: 10px 12px;
    border-radius: 8px;
}

#upro-space-nav .upro-tab:hover {
    background: #f4f6f8;
    color: #3c96c6;
}

#upro-space-nav .upro-tab-active {
    background: #eaf5fb;
    color: #3c96c6;
}

#upro-space-main {
    flex: 1;
    min-width: 0;
}

/* Only true phone-width screens get the stacked, centered "mobile" look
   now — anything wider (including tablets) keeps the PC sidebar layout
   as-is, with no separate in-between "tablet" treatment. */
@media (max-width: 600px) {
    #upro-space-app {
        flex-direction: column;
        padding: 0 8px;
    }
    #upro-space-sidebar {
        width: 100%;
        position: static;
    }
    #upro-space-main {
        width: 100%;
        box-sizing: border-box;
    }
    #upro-space-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    #upro-space-nav .upro-tab {
        border: 1px solid #e2e5e8;
        border-radius: 8px;
        text-align: center;
        padding: 10px 4px;
        font-size: 12px;
    }
    #upro-dashboard-panel {
        grid-template-columns: 1fr;
    }

    #fact-publish-open-btn {
        max-width: 100%;
        width: 100%;
        margin: 8px 0 0;
    }
}

/* ---------- Dashboard overview cards ---------- */

#upro-dashboard-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.upro-dash-card {
    background: #fff;
    border: 1px solid #e2e5e8;
    border-radius: 10px;
    padding: 16px;
}

.upro-dash-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.upro-dash-card-header h3 {
    margin: 0;
    font-size: 14px;
}

.upro-dash-see-all {
    background: none;
    border: none;
    color: #3c96c6;
    font-size: 12px;
    cursor: pointer;
}

/* Publish takes over the entire main area — no floating modal look here,
   it visually replaces the dashboard rather than sitting on top of it. */
/* The editor always fully covers the screen — a solid, opaque takeover —
   rather than trying to hide the rest of the page's own elements (menus,
   footer…) individually. Covering everything visually is reliable no
   matter how the page itself is built; hiding things one by one wasn't. */
#upro-space-app #fact-publish-overlay {
    position: fixed;
    inset: 0;
    background: #fff;
    display: flex;
    padding: 16px;
    z-index: 999999;
}

#upro-edit-form {
    background: #fff;
    border: 1px solid #e2e5e8;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
}

#upro-edit-form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
}

#upro-edit-close {
    border: none;
    background: none;
    font-size: 16px;
    cursor: pointer;
    color: #888;
}

#upro-edit-avatar-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

#upro-edit-avatar-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #eee;
}

#upro-edit-form label {
    font-size: 12px;
    color: #555;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.upro-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.upro-field-label {
    font-size: 12px;
    color: #555;
}

.upro-file-input-wrap {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    width: fit-content;
}

.upro-file-input-btn {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    color: #555;
    white-space: nowrap;
}

.upro-file-input-wrap:hover .upro-file-input-btn {
    background: #f5f5f5;
}

.upro-file-input-name {
    font-size: 11px;
    color: #999;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#upro-edit-form input[type="text"],
#upro-edit-form textarea {
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
}

#upro-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

#upro-edit-actions button {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #fff;
    color: #333;
}

#upro-edit-form #upro-edit-save {
    background: #3c96c6 !important;
    color: #fff !important;
    border-color: #3c96c6 !important;
}

/* ---------- Tabs ---------- */

#upro-tabs {
    background: #fff;
    border: 1px solid #e2e5e8;
    border-radius: 10px;
    padding: 4px 12px;
}

#upro-tabs {
    background: #fff;
    border: 1px solid #e2e5e8;
    border-radius: 10px;
    padding: 4px 12px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.upro-tab {
    background: none;
    border: none;
    font-size: 13px;
    color: #555;
    cursor: pointer;
    padding: 10px 2px;
    text-decoration: none;
}

.upro-tab:hover {
    color: #3c96c6;
}

.upro-tab-active {
    color: #3c96c6;
    font-weight: 600;
}

#upro-placeholder-panel {
    background: #fff;
    border: 1px solid #e2e5e8;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
}

.upro-placeholder-text {
    color: #999;
    font-size: 13px;
    margin: 0;
}

/* ---------- Single content panel (Photos / Videos / Documents / Articles) ---------- */

.upro-single-panel {
    background: #fff;
    border: 1px solid #e2e5e8;
    border-radius: 10px;
    padding: 16px;
}

.upro-content-col-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    min-height: 40px;
}

/* Right after leaving mobile, the sidebar eats into the available width,
   so a naive auto-fill can briefly drop to 1 column before there's
   enough room again — force exactly 2 here so it never dips. */
@media (min-width: 601px) and (max-width: 899px) {
    .upro-content-col-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Fixed card width from here on — cards never shrink as the screen grows
   wider, more of them just fit per row (or wrap to another row if not),
   staying the same comfortable size all the way up to a large desktop. */
@media (min-width: 900px) {
    .upro-content-col-grid {
        grid-template-columns: repeat(auto-fill, 190px);
    }
}

.upro-content-col-grid a {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #000;
    position: relative;
    cursor: pointer;
}

.upro-content-col-grid img,
.upro-content-col-grid video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.upro-content-col-grid .upro-video-thumb::after {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 18px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.upro-content-col-list {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.upro-private-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 10px;
}

.upro-status-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    line-height: 1;
    display: inline-flex;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
}

.upro-status-badge + .upro-status-badge {
    right: 22px;
}

.upro-status-private {
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    padding: 3px 5px;
    border-radius: 10px;
}

.upro-status-public,
.upro-status-feed {
    background: none;
}

/* ---------- Articles: square cards (photo + title/excerpt), click to open ---------- */

.upro-article-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    align-items: start;
}

@media (min-width: 601px) and (max-width: 899px) {
    .upro-article-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .upro-article-cards {
        grid-template-columns: repeat(auto-fill, 280px);
    }
}

.upro-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 6px 6px;
    background: #fff;
    border-bottom: 1px solid #eee;
    flex-wrap: nowrap;
}

.upro-card-header-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow: hidden;
    min-width: 0;
}

.upro-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: #666;
    white-space: nowrap;
}

.upro-card-badge-private {
    font-size: 12px;
    color: #888;
}

.upro-card-header .upro-media-item-delete,
.upro-card-header .upro-article-card-delete {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 4px;
    flex-shrink: 0;
}

.upro-article-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e6e9ec;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    position: relative;
}

.upro-article-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
    border-color: #d8dde1;
}

.upro-article-card-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #eef1f3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.upro-article-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.upro-article-card-fallback {
    font-size: 30px;
    opacity: 0.5;
}

.upro-article-card-title {
    font-weight: 600;
    font-size: 13px;
    color: #222;
    line-height: 1.4;
    padding: 10px 10px 0;
    min-height: 2.8em;
    flex-shrink: 0;
}

.upro-article-card-excerpt {
    font-size: 12px;
    color: #888;
    line-height: 1.3;
    padding: 4px 10px 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex-shrink: 0;
}

#upro-article-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10001;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

#upro-article-modal {
    background: #fff;
    border-radius: 12px;
    max-width: 680px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

#upro-article-modal-body {
    padding: 14px 16px calc(20px + env(safe-area-inset-bottom, 0px));
}

#upro-article-modal-title {
    margin: 0 0 16px 0;
    font-size: 22px;
}

#upro-article-modal-actions {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    border-bottom: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    align-items: center;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 44px 10px 14px;
}

#upro-article-modal-actions button {
    border: 1px solid #e2e2e2;
    background: #fff;
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 12px;
    cursor: pointer;
    color: #333;
}

#upro-article-modal-actions button:hover {
    background: #f5f5f5;
}

#upro-article-modal-status,
#upro-lightbox-status {
    font-size: 13px;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
}

#upro-article-modal-status.upro-status-private,
#upro-lightbox-status.upro-status-private {
    background: #fdf6e8;
    color: #7a5c1e;
    border-bottom-color: #f0e4c4;
}

#upro-article-modal-status.upro-status-published,
#upro-lightbox-status.upro-status-published {
    background: #eaf7ee;
    color: #2b6b3f;
    border-bottom-color: #cdeddb;
}

#upro-article-modal-delete {
    color: #c0392b;
    border-color: #f2d4d0;
}

#upro-article-modal-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    font-size: 16px;
    color: #555;
    padding: 0 !important;
    cursor: pointer;
}

#upro-article-modal-hero {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 10px;
}

#upro-article-modal-content {
    font-size: 15px;
    line-height: 1.6;
}

#upro-article-modal-content img {
    max-width: 100%;
    border-radius: 8px;
}

/* Belt and suspenders: the modal renders raw rich_content HTML, which
   can include an inline image sized/floated via activity.css classes —
   but activity.css isn't loaded on every page this modal can appear on.
   These two rules keep it safe either way, and match the same
   full-width-on-mobile fix applied in activity.css. */
#upro-article-modal-content .fact-publish-inline-media-wrap {
    max-width: 100%;
}

@media (max-width: 500px) {
    #upro-article-modal-content .fact-publish-inline-media-wrap {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 10px 0;
    }
}

@media (max-width: 600px) {
    #upro-article-modal-overlay {
        padding: 0;
    }

    #upro-article-modal {
        max-width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    #upro-article-modal-actions button {
        font-size: 11px;
        padding: 5px 7px;
    }

    #upro-article-modal-body {
        padding: 16px 16px calc(40px + env(safe-area-inset-bottom, 0px));
    }
}

.upro-content-empty,
.upro-content-loading {
    font-size: 12px;
    color: #999;
    grid-column: 1 / -1;
}

.upro-notification-item {
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #e2e5e8;
    border-radius: 8px;
    font-size: 13px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.upro-notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.upro-notification-body {
    flex: 1;
}

.upro-notification-body a {
    color: #3c96c6;
    font-weight: 600;
    text-decoration: none;
}

.upro-notification-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.upro-notification-actions button {
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #fff;
}

.upro-notif-accept {
    background: #3c96c6 !important;
    color: #fff;
    border-color: #3c96c6 !important;
}

.upro-notif-reject {
    color: #c0392b;
}

#upro-notification-badge {
    display: inline-block;
    background: #c0392b;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    margin-left: 4px;
    vertical-align: middle;
}

#upro-notifications-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.upro-notification-item a {
    color: #3c96c6;
}

#upro-feed-title {
    margin: 0;
    font-size: 16px;
}

#upro-feed-wrap {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- Lightbox ---------- */

#upro-lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}

#upro-lightbox-frame {
    background: #fff;
    border-radius: 12px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

#upro-lightbox-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    padding: 10px 14px;
    border-bottom: 1px solid #eee;
}

#upro-lightbox-actions:empty {
    display: none;
}

#upro-lightbox-actions button {
    border: 1px solid #e2e2e2;
    background: #fff;
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 12px;
    cursor: pointer;
    color: #333;
}

#upro-lightbox-actions button:hover {
    background: #f5f5f5;
}

.upro-lightbox-delete {
    color: #c0392b;
    border-color: #f2d4d0;
}

#upro-lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

#upro-lightbox-content img,
#upro-lightbox-content video {
    max-width: 84vw;
    max-height: 72vh;
    border-radius: 6px;
}

#upro-lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
}

@media (max-width: 600px) {
    #upro-lightbox-frame {
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }

    #upro-lightbox-actions button {
        font-size: 11px;
        padding: 5px 7px;
    }
}

/* Read-only summary shown under a card in the grid — reacting itself
   only happens after opening the item (article modal / lightbox). */
.upro-content-col-grid .upro-media-item {
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fff;
    border: 1px solid #e6e9ec;
    border-radius: 10px;
    overflow: hidden;
}

.upro-reactions-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 4px 8px 6px;
    min-height: 26px;
    box-sizing: border-box;
}

.upro-reaction-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 10px;
    line-height: 1;
    background: transparent;
    border: 1px solid #eee;
    border-radius: 4px;
    padding: 0 8px;
    height: 16px;
    box-sizing: border-box;
    color: #777;
}

.upro-reaction-emoji,
.upro-reaction-count {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* Interactive version — inside the lightbox (dark background) or the
   article modal (light background), so it needs to work on both. */
.upro-interactive-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 10px 0;
}

#upro-lightbox-content .upro-interactive-reactions {
    padding: 0;
}

.upro-reaction-clickable {
    cursor: pointer;
    font-size: 13px;
    padding: 4px 10px;
    border: 1px solid transparent;
}

#upro-lightbox-content .upro-reaction-pill {
    background: #f0f2f4;
    color: #555;
}

.upro-reaction-mine {
    border-color: #3c96c6 !important;
    background: #eaf5fb !important;
    color: #237ba6 !important;
}

.upro-add-reaction {
    border: none;
    background: transparent;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
}

#upro-lightbox-content .upro-add-reaction {
    background: #fff;
    border-color: #d8dde1;
    color: #333;
}

#upro-quick-picker {
    position: fixed;
    z-index: 100000;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    padding: 6px 10px;
    display: flex;
    gap: 8px;
}

#upro-quick-picker span {
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.1s ease;
}

#upro-quick-picker span:hover {
    transform: scale(1.25);
}

#upro-app #fact-composer,
#upro-app #fact-feed,
#upro-app #fact-load-more-wrap {
    width: 100%;
}