/* Prototype-only styles — new feature placeholders */

.fake-ad {
    border: 2px dashed #C0C0C0;
    background: #F5F5F5;
    text-align: center;
    padding: 20px 10px;
    font-style: italic;
    color: #999;
    font-size: 10px;
    font-family: verdana, arial, sans-serif;
}

.fake-ad .ad-label {
    display: block;
    font-weight: bold;
    font-size: 11px;
    color: #4E99B2;
    margin-bottom: 6px;
    font-style: normal;
}


/* Drop cap fallback for missing big_X.gif images */
.drop-cap {
    float: left;
    font-family: georgia, times, serif;
    font-size: 58px;
    line-height: 48px;
    padding-right: 6px;
    padding-top: 4px;
    color: #4E99B2;
    font-weight: normal;
}

/* "X years old" novelty desk clock counter */
.time-counter {
    background: #2C2C2C;
    color: #33FF33;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    padding: 10px 14px;
    border-radius: 4px;
    border: 2px solid #555;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
    text-align: center;
    margin: 12px 0;
    display: inline-block;
}

.time-counter .counter-label {
    font-size: 9px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 4px;
    font-family: verdana, arial, sans-serif;
}

.time-counter .counter-value {
    font-size: 16px;
    letter-spacing: 2px;
}

/* "Buy This Review On A T-Shirt" button */
.tshirt-button {
    display: inline-block;
    background: #C0392B;
    color: #fff;
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 16px;
    border: none;
    cursor: pointer;
    margin: 8px 0;
    text-decoration: none;
}

.tshirt-button:hover {
    background: #A93226;
}

/* Comment box */
.comment-box {
    border: 1px solid #D5D5D5;
    padding: 12px;
    margin: 15px 0;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #808080;
}

.comment-box .comment-title {
    font-weight: bold;
    font-size: 12px;
    color: #4E99B2;
    margin-bottom: 8px;
}

.comment-box textarea {
    width: 95%;
    height: 60px;
    border: 1px solid #D5D5D5;
    padding: 6px;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #606060;
    resize: vertical;
}

.comment-box .comment-submit {
    background: #A6CCD8;
    color: #606060;
    border: 1px solid #8BB8C6;
    padding: 4px 14px;
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 6px;
}

.comment-box .comment-submit:hover {
    background: #8BB8C6;
}

/* "Argue With The Reviewer" button */
.argue-button {
    display: inline-block;
    background: #C0392B;
    color: #fff;
    font-family: georgia, times, serif;
    font-size: 11px;
    font-weight: bold;
    padding: 6px 14px;
    border: none;
    cursor: pointer;
    margin: 4px 0;
    text-decoration: none;
}

.argue-button:hover {
    background: #A93226;
}

/* Message board header */
.msgboard-header {
    border-left: 4px solid #C0392B;
    border-top: 1px solid #D5D5D5;
    border-bottom: 3px double #D5D5D5;
    font-weight: bold;
    font-size: 11px;
    color: #C0392B;
    padding: 6px 0 6px 8px;
}

/* Age pill/badge counter */
.age-pill {
    background: #4E99B2;
    color: #fff;
    text-align: center;
    padding: 8px 14px;
    border-radius: 6px;
    font-family: georgia, times, serif;
    min-width: 100px;
    margin-top: 4px;
}

.age-pill-prefix {
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.7;
    margin-bottom: 1px;
}

.age-pill-years {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.1;
    letter-spacing: 1px;
}

.age-pill-label {
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.85;
    margin-bottom: 4px;
}

.age-pill-detail {
    font-size: 10px;
    font-family: 'Courier New', monospace;
    opacity: 0.75;
    letter-spacing: 1px;
}

/* Thread teaser in sidebar */
.thread-teaser {
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    color: #808080;
    padding: 8px 0;
}

.thread-teaser .thread-item {
    padding: 4px 0;
    border-bottom: 1px solid #EFEFEF;
}

.thread-teaser .thread-item:last-child {
    border-bottom: none;
}

.thread-teaser .thread-title {
    color: #4E99B2;
    font-weight: bold;
}

.thread-teaser .thread-replies {
    font-size: 9px;
    color: #999;
}

.thread-teaser .thread-meta {
    font-size: 9px;
    color: #4E99B2;
}

/* Annotation — clickable inline trigger */
.annotation-trigger {
    background: #FFFACD;
    border-left: 3px solid #4E99B2;
    padding: 2px 4px;
    cursor: pointer;
    position: relative;
}

.annotation-trigger:hover {
    background: #FFF5A0;
}

.annotation-indicator {
    color: #4E99B2;
    font-size: 14px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Expanded annotation panel */
.annotation-expanded {
    background: #FFFDE8;
    border: 1px solid #E8E0B0;
    padding: 14px 16px;
    margin: 10px 0;
    font-family: georgia, times, serif;
    font-size: 11px;
    color: #606060;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    line-height: 1.5;
}

.annotation-close {
    position: absolute;
    top: 6px;
    right: 10px;
    font-size: 18px;
    color: #AAA;
    cursor: pointer;
    font-family: arial, sans-serif;
    line-height: 1;
}

.annotation-close:hover {
    color: #606060;
}

.annotation-quote {
    font-style: italic;
    color: #4E99B2;
    border-left: 3px solid #4E99B2;
    padding: 6px 10px;
    margin-bottom: 10px;
    background: rgba(78, 153, 178, 0.05);
}

.annotation-reply {
    font-style: normal;
    font-size: 13px;
    line-height: 1.6;
    color: #606060;
    margin-bottom: 10px;
}

.annotation-author {
    font-size: 11px;
    color: #808080;
    padding-top: 6px;
    border-top: 1px solid #E8E0B0;
    margin-bottom: 8px;
}

.annotation-board-link {
    font-size: 10px;
    border-top: 1px solid #E8E0B0;
    padding-top: 6px;
    margin-top: 6px;
}

/* Footer icon text fallbacks */
.footer-icon-text {
    display: inline-block;
    background: #A6CCD8;
    color: #fff;
    font-family: verdana, arial, sans-serif;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 3px 8px;
    margin: 0 2px;
    text-decoration: none;
    border-radius: 2px;
}

.footer-icon-text:hover {
    background: #4E99B2;
    color: #fff;
}

/* Under the Covers: outbound album link */
.utc-link-out {
    display: inline-block;
    background: #F5F0E0;
    border: 1px solid #D4C9A8;
    padding: 4px 10px;
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    color: #4E99B2;
    text-decoration: none;
    margin: 2px 0;
}
.utc-link-out:hover {
    background: #EBE4CE;
    border-color: #4E99B2;
}

/* New feature badge */
.new-feature {
    display: inline-block;
    background: #E74C3C;
    color: #fff;
    font-family: verdana, arial, sans-serif;
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 6px;
    margin-left: 6px;
    vertical-align: middle;
    border-radius: 2px;
}

/* James Murphy page transition spinner */
#page-transition-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.95);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: georgia, times, serif;
    color: #4E99B2;
}

#page-transition-overlay.active {
    display: flex;
}

#page-transition-overlay .spinner-text {
    font-size: 18px;
    font-style: italic;
    margin-bottom: 20px;
}

#page-transition-overlay .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #D5D5D5;
    border-top: 3px solid #4E99B2;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Reader mode */
.reader-mode-btn {
    display: inline-block;
    background: none;
    border: 1px solid #D5D5D5;
    color: #AAA;
    font-family: georgia, times, serif;
    font-size: 10px;
    padding: 3px 10px;
    cursor: pointer;
    letter-spacing: 0.5px;
}

.reader-mode-btn:hover {
    border-color: #4E99B2;
    color: #4E99B2;
}

body.reader-mode .page-chrome {
    display: none !important;
}

body.reader-mode table.page {
    width: 100% !important;
    max-width: 620px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

body.reader-mode td.preleftbar,
body.reader-mode td.rightbar,
body.reader-mode td[width="8"],
body.reader-mode table.navbar,
body.reader-mode table.footer,
body.reader-mode td.footer,
body.reader-mode .fake-ad,
body.reader-mode .msgboard-header,
body.reader-mode .thread-teaser,
body.reader-mode td.leftbarborder {
    display: none !important;
}

body.reader-mode td.content {
    width: 100% !important;
    padding: 0 !important;
}

body.reader-mode table.content {
    width: 100% !important;
}

body.reader-mode td[width="470"] {
    width: 100% !important;
}

body.reader-mode div.content {
    margin-top: 20px;
}

body.reader-mode .reviewtitle {
    font-size: 32px;
}

body.reader-mode div.textbody {
    font-family: georgia, times, serif;
    font-size: 16px;
    line-height: 1.8;
    color: #404040;
    max-width: 580px;
}

body.reader-mode .drop-cap {
    font-size: 72px;
    line-height: 58px;
}

body.reader-mode .age-pill {
    display: none !important;
}

body.reader-mode .reader-mode-btn {
    display: none !important;
}

body.reader-mode table.authorbox {
    width: 100% !important;
}

body.reader-mode table.recentauthor {
    width: 100% !important;
}

body.reader-mode .comment-box {
    max-width: 580px;
}

body.reader-mode #reader-top-bar {
    display: block !important;
}

#reader-top-bar {
    display: none;
    position: sticky;
    top: 0;
    background: #fff;
    border-bottom: 1px solid #EFEFEF;
    padding: 12px 0;
    text-align: center;
    z-index: 100;
    margin-bottom: 10px;
}

.reader-mode-exit-btn {
    display: inline-block;
    background: #4E99B2;
    color: #fff;
    border: 1px solid #4E99B2;
    font-family: georgia, times, serif;
    font-size: 13px;
    padding: 6px 20px;
    cursor: pointer;
    letter-spacing: 0.5px;
}

.reader-mode-exit-btn:hover {
    background: #2E7992;
    border-color: #2E7992;
}

/* Consistent spacing between review body and footer icons */
div.textbody + center,
div.textbody + br + center {
    margin-top: 20px;
}

/* Homepage "Today on Stylus" main content area */
.home-section-title {
    font-family: georgia, times, serif;
    font-size: 18px;
    color: #4E99B2;
    padding: 8px 0 4px 0;
    border-bottom: 1px solid #D5D5D5;
    margin-bottom: 10px;
}

.home-review-item {
    padding: 8px 0;
    border-bottom: 1px solid #EFEFEF;
    font-size: 11px;
    color: #606060;
}

.home-review-item .review-grade {
    float: right;
    font-family: georgia, times, serif;
    font-size: 18px;
    font-weight: bold;
    color: #4E99B2;
    padding: 0 0 0 10px;
}

.home-review-item .review-artist {
    font-weight: bold;
    font-size: 12px;
    color: #4E99B2;
}

.home-review-item .review-album {
    font-size: 11px;
    color: #808080;
}

.home-review-item .review-author {
    font-size: 9px;
    color: #AAA;
}

/* === Message Board === */

.board-wrapper {
    width: 960px;
    margin: 0 auto;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #808080;
}

.board-header {
    border-bottom: 3px solid #4E99B2;
    padding-bottom: 0;
    margin-bottom: 0;
}

.board-header-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
}

.board-header-title {
    font-family: georgia, times, serif;
    font-size: 22px;
    color: #4E99B2;
    font-weight: normal;
}

.board-nav {
    background: none;
    padding: 6px 0;
    font-size: 11px;
    font-weight: normal;
    border-bottom: 1px solid #D3E6EC;
}

.board-nav a {
    color: #4E99B2;
    text-decoration: none;
    margin: 0 6px;
}

.board-nav a:hover {
    color: #2E7992;
    text-decoration: underline;
}

.board-nav-staff {
    color: #4E99B2;
    font-size: 10px;
    margin-left: 4px;
}

.board-nav-logout {
    font-size: 9px;
    color: #AAA !important;
}

.board-breadcrumb {
    font-size: 10px;
    color: #AAA;
    padding: 8px 0;
    border-bottom: 1px solid #EFEFEF;
    margin-bottom: 15px;
}

.board-breadcrumb a {
    color: #4E99B2;
    text-decoration: none;
}

.board-breadcrumb a:hover {
    color: #2E7992;
}

.board-content {
    min-height: 400px;
}

.board-footer {
    border-top: 1px solid #D5D5D5;
    padding: 12px 0;
    margin-top: 30px;
    font-size: 9px;
    color: #AAA;
    text-align: center;
}

/* Board index — thread list table */

.board-thread-list {
    border-collapse: collapse;
    width: 100%;
}

.board-thread-list-header td {
    background: #A6CCD8;
    color: #fff;
    font-weight: bold;
    font-size: 11px;
    padding: 8px 10px;
}

.board-thread-row td {
    padding: 10px;
    border-bottom: 1px solid #EFEFEF;
    vertical-align: top;
}

.board-row-alt td {
    background: #D3E6EC;
}

.board-thread-icon {
    font-size: 18px;
    color: #4E99B2;
    vertical-align: middle !important;
}

.board-thread-title {
    font-weight: bold;
    font-size: 14px;
    color: #4E99B2;
    text-decoration: none;
}

.board-thread-title:hover {
    color: #2E7992;
}

.board-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 2px;
    margin-left: 6px;
    vertical-align: middle;
}

.board-tag-article {
    background: #4E99B2;
    color: #fff;
}

.board-tag-general {
    background: #D5D5D5;
    color: #606060;
}

.board-article-link {
    font-size: 9px;
    color: #4E99B2;
    text-decoration: none;
}

.board-article-link:hover {
    color: #2E7992;
}

.board-thread-meta {
    font-size: 10px;
    color: #AAA;
    margin-top: 3px;
}

.board-thread-meta a {
    color: #4E99B2;
    text-decoration: none;
}

.board-thread-replies {
    font-weight: bold;
    font-size: 12px;
    color: #606060;
    vertical-align: middle !important;
}

.board-thread-lastpost {
    font-size: 10px;
    vertical-align: middle !important;
}

.board-thread-lastpost a {
    color: #4E99B2;
    text-decoration: none;
    font-weight: bold;
}

.board-thread-lastdate {
    color: #AAA;
    font-size: 9px;
}

/* Thread view — posts */

.board-thread-header-bar {
    padding: 10px 0 12px;
    border-bottom: 2px solid #4E99B2;
    margin-bottom: 15px;
}

.board-thread-heading {
    font-family: georgia, times, serif;
    font-size: 20px;
    color: #606060;
    font-weight: normal;
    margin: 0 0 4px;
}

.board-post {
    display: flex;
    border: 1px solid #D5D5D5;
    margin-bottom: 12px;
}

.board-post-sidebar {
    width: 140px;
    min-width: 140px;
    background: #F5F5F5;
    padding: 12px 10px;
    text-align: center;
    border-right: 1px solid #D5D5D5;
}

.board-avatar {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    background: #D5D5D5;
    color: #fff;
    font-family: georgia, times, serif;
    font-size: 28px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
}

.board-avatar-staff {
    background: #A6CCD8;
}

.board-avatar-large {
    width: 80px;
    height: 80px;
    font-size: 36px;
}

.board-post-username {
    display: block;
    font-weight: bold;
    font-size: 11px;
    color: #4E99B2;
    text-decoration: none;
    margin-bottom: 4px;
}

.board-post-username:hover {
    color: #2E7992;
}

.board-username-staff {
    color: #C0392B !important;
}

.board-badge-staff {
    display: inline-block;
    background: #C0392B;
    color: #fff;
    font-size: 8px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 6px;
    border-radius: 8px;
    margin-bottom: 4px;
}

.board-post-rank {
    font-size: 9px;
    color: #AAA;
    font-style: italic;
    margin-bottom: 6px;
}

.board-post-stat {
    font-size: 9px;
    color: #AAA;
}

.board-post-content {
    flex: 1;
    padding: 12px 16px;
}

.board-post-date {
    font-size: 9px;
    color: #AAA;
    margin-bottom: 8px;
}

.board-post-body {
    font-size: 12px;
    color: #606060;
    line-height: 1.6;
}

/* Annotation post */

.board-post-annotation {
    border-color: #4E99B2;
    border-left: 4px solid #4E99B2;
}

.board-post-annotation .board-post-content {
    background: #FDFAF0;
}

.board-annotation-badge {
    display: inline-block;
    background: #4E99B2;
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 2px;
    margin-bottom: 8px;
}

.board-annotation-quote {
    font-family: georgia, times, serif;
    font-style: italic;
    color: #4E99B2;
    border-left: 3px solid #4E99B2;
    padding: 8px 12px;
    margin-bottom: 10px;
    background: rgba(78, 153, 178, 0.05);
    font-size: 13px;
}

/* Reply box */

.board-reply-box {
    border: 1px solid #D5D5D5;
    padding: 16px;
    margin-top: 20px;
}

.board-reply-title {
    font-weight: bold;
    font-size: 12px;
    color: #4E99B2;
    margin-bottom: 8px;
}

.board-reply-textarea {
    width: 98%;
    height: 80px;
    border: 1px solid #D5D5D5;
    padding: 8px;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #606060;
    resize: vertical;
    margin-bottom: 8px;
}

/* Profile page */

.board-profile {
    display: flex;
    gap: 24px;
}

.board-profile-sidebar {
    width: 180px;
    min-width: 180px;
    text-align: center;
    padding: 16px 12px;
    background: #F5F5F5;
    border: 1px solid #D5D5D5;
    border-radius: 4px;
    align-self: flex-start;
}

.board-profile-name {
    font-family: georgia, times, serif;
    font-size: 16px;
    font-weight: normal;
    margin: 8px 0 4px;
    color: #606060;
}

.board-profile-rank {
    font-size: 10px;
    color: #AAA;
    font-style: italic;
    margin: 4px 0 10px;
}

.board-profile-stats {
    border-top: 1px solid #D5D5D5;
    padding-top: 10px;
    text-align: left;
}

.board-profile-stat-item {
    font-size: 10px;
    color: #808080;
    margin-bottom: 4px;
}

.board-profile-main {
    flex: 1;
}

.board-profile-section {
    margin-bottom: 20px;
}

.board-profile-section-title {
    font-family: georgia, times, serif;
    font-size: 14px;
    color: #4E99B2;
    font-weight: normal;
    border-bottom: 1px solid #D5D5D5;
    padding-bottom: 4px;
    margin: 0 0 10px;
}

.board-profile-bio {
    font-size: 12px;
    color: #606060;
    line-height: 1.6;
    margin: 0;
}

/* Grade chart */

.board-grade-chart {
    max-width: 400px;
}

.board-grade-row {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

.board-grade-label {
    width: 28px;
    font-weight: bold;
    font-size: 11px;
    color: #606060;
    text-align: right;
    margin-right: 8px;
}

.board-grade-bar-bg {
    flex: 1;
    height: 16px;
    background: #EFEFEF;
    border-radius: 2px;
    overflow: hidden;
}

.board-grade-bar {
    height: 100%;
    background: #4E99B2;
    border-radius: 2px;
    min-width: 2px;
}

.board-grade-count {
    width: 28px;
    font-size: 10px;
    color: #AAA;
    margin-left: 8px;
}

/* Recent posts on profile */

.board-recent-post {
    padding: 8px 0;
    border-bottom: 1px solid #EFEFEF;
}

.board-recent-post a {
    font-weight: bold;
    font-size: 11px;
    color: #4E99B2;
    text-decoration: none;
}

.board-recent-post a:hover {
    color: #2E7992;
}

.board-recent-post-date {
    font-size: 9px;
    color: #AAA;
}

.board-recent-post-excerpt {
    font-size: 10px;
    color: #808080;
    margin-top: 3px;
    line-height: 1.4;
}

/* Login / Register */

.board-login-wrapper {
    display: flex;
    gap: 24px;
}

.board-login-panel {
    flex: 1;
    border: 1px solid #D5D5D5;
    border-radius: 4px;
    overflow: hidden;
}

.board-login-panel-title {
    background: #A6CCD8;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    padding: 8px 14px;
}

.board-login-panel-body {
    padding: 16px;
}

.board-form-label {
    display: block;
    font-size: 10px;
    font-weight: bold;
    color: #606060;
    margin-bottom: 3px;
    margin-top: 10px;
}

.board-form-label:first-child {
    margin-top: 0;
}

.board-form-input {
    width: 95%;
    border: 1px solid #D5D5D5;
    padding: 6px 8px;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #606060;
}

.board-form-input:disabled {
    background: #F5F5F5;
    color: #AAA;
}

.board-form-button {
    display: inline-block;
    background: #4E99B2;
    color: #fff;
    border: none;
    padding: 6px 20px;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 12px;
}

.board-form-button:hover {
    background: #2E7992;
}

.board-form-button:disabled {
    background: #D5D5D5;
    cursor: default;
}

.board-login-note {
    font-size: 9px;
    color: #AAA;
    font-style: italic;
    margin-top: 8px;
}

.board-login-note a {
    color: #4E99B2;
    text-decoration: none;
}

.board-login-note a:hover {
    text-decoration: underline;
}

/* Article link pill */
.board-article-pill {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #fff !important;
    background: #4E99B2;
    padding: 4px 14px;
    border-radius: 3px;
    text-decoration: none !important;
    vertical-align: middle;
}

.board-article-pill:hover {
    background: #3A7A94;
    color: #fff !important;
}

/* Avatar image (replaces letter circle) */
.board-avatar-img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
    margin: 0 auto 8px;
    display: block;
}

.board-avatar-img.board-avatar-large {
    width: 80px;
    height: 80px;
}

/* Reply form extras */
.board-reply-error {
    background: #FDE8E8;
    border: 1px solid #E8B0B0;
    padding: 6px 8px;
    margin-bottom: 8px;
    font-size: 10px;
    color: #C0392B;
}

.board-reply-as {
    font-size: 9px;
    color: #AAA;
    margin-left: 10px;
}

/* Staff profile link on board user page */
.board-staff-profile-link {
    font-size: 9px;
    color: #4E99B2;
    text-decoration: none;
}

.board-staff-profile-link:hover {
    color: #2E7992;
    text-decoration: underline;
}

/* Avatar upload section */
.board-avatar-upload {
    border-top: 1px solid #D5D5D5;
    padding-top: 10px;
    margin-top: 10px;
}

/* Board pagination */

.board-pagination {
    text-align: center;
    padding: 12px 10px;
    font-size: 11px;
}

.board-page-link {
    display: inline-block;
    padding: 3px 8px;
    margin: 0 2px;
    color: #4E99B2;
    text-decoration: none;
    border: 1px solid #D3E6EC;
}

.board-page-link:hover {
    background: #D3E6EC;
    color: #2E7992;
}

.board-page-current {
    display: inline-block;
    padding: 3px 8px;
    margin: 0 2px;
    background: #4E99B2;
    color: #fff;
    font-weight: bold;
    border: 1px solid #4E99B2;
}

.board-page-dots {
    display: inline-block;
    padding: 3px 4px;
    color: #AAA;
}

.board-page-info {
    margin-left: 10px;
    color: #AAA;
}

/* Staff annotation popover */

.annotate-popover {
    position: absolute;
    background: #4E99B2;
    color: #fff;
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    white-space: nowrap;
    display: none;
}

.annotate-popover:hover {
    background: #3A8BA8;
}

.annotate-popover::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #4E99B2;
}

.annotate-popover:hover::after {
    border-top-color: #3A8BA8;
}

/* Annotation compose form (inline) */

.annotation-compose {
    background: #FFFDE8;
    border: 1px solid #E8E0B0;
    padding: 14px 16px;
    margin: 10px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
}

.annotation-compose-quote {
    font-family: georgia, times, serif;
    font-style: italic;
    color: #4E99B2;
    border-left: 3px solid #4E99B2;
    padding: 6px 10px;
    margin-bottom: 10px;
    background: rgba(78, 153, 178, 0.05);
    font-size: 11px;
}

.annotation-compose-label {
    font-family: verdana, arial, sans-serif;
    font-size: 9px;
    color: #808080;
    margin-bottom: 4px;
    font-weight: bold;
}

.annotation-compose-textarea {
    width: 100%;
    min-height: 80px;
    padding: 8px;
    border: 1px solid #D5D5D5;
    font-family: georgia, times, serif;
    font-size: 12px;
    line-height: 1.5;
    color: #606060;
    resize: vertical;
    box-sizing: border-box;
}

.annotation-compose-textarea:focus {
    outline: none;
    border-color: #4E99B2;
}

.annotation-compose-actions {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.annotation-compose-submit {
    background: #4E99B2;
    color: #fff;
    border: 1px solid #3A8BA8;
    padding: 4px 14px;
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
}

.annotation-compose-submit:hover {
    background: #3A8BA8;
}

.annotation-compose-cancel {
    background: none;
    border: none;
    color: #AAA;
    font-family: verdana, arial, sans-serif;
    font-size: 10px;
    cursor: pointer;
}

.annotation-compose-cancel:hover {
    color: #606060;
}

.annotation-compose-byline {
    font-family: verdana, arial, sans-serif;
    font-size: 9px;
    color: #AAA;
    margin-left: auto;
}

/* Staff mode highlight on textbody */

body.staff-annotate-mode .textbody::selection {
    background: rgba(78, 153, 178, 0.3);
}

/* Annotation staff indicator in textbody */
.textbody .staff-annotate-hint {
    font-family: verdana, arial, sans-serif;
    font-size: 9px;
    color: #AAA;
    text-align: center;
    margin-top: 10px;
    padding: 6px;
    border-top: 1px solid #EFEFEF;
}

/* Blurred article content (legal/content redaction) */
.blurred-content {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
}
.blurred-content::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 100%);
    pointer-events: none;
}