/* Article detail */
.article-shell { padding-top: 13px; padding-bottom: 34px; }
.article-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 3px 0 16px; color: #6c7890; font-size: 13px; }
.article-breadcrumb a { color: var(--navy); text-decoration: none; }
.article-breadcrumb a:hover { color: var(--red); text-decoration: underline; }
.article-heading-grid, .article-content-grid { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(265px, .9fr); align-items: start; gap: clamp(24px, 3vw, 42px); }
.article-heading { min-width: 0; padding: 3px 0 0; }
.article-heading .blog-category { margin-bottom: 8px; font-size: 12px; }
.article-heading h1 { max-width: 820px; margin: 0 0 10px; color: var(--navy); font-size: clamp(38px, 4.2vw, 54px); line-height: 1.06; letter-spacing: -.035em; }
.article-deck { max-width: 760px; margin: 0 0 15px; color: var(--slate); font-size: clamp(17px, 2vw, 20px); line-height: 1.48; }
.article-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #66748a; font-size: 12px; }
.article-byline strong { color: var(--navy); font-size: 12px; }
.byline-icon, .comment-avatar { width: 31px; height: 31px; display: inline-grid; flex: 0 0 31px; place-items: center; border-radius: 50%; color: var(--navy); background: #e8edf4; font-size: 13px; font-weight: 800; }
.article-separator { width: 1px; height: 17px; background: #d7dde6; }
.article-sidebar { min-width: 0; }
.article-sidebar--top { position: sticky; top: 14px; }
.article-panel { padding: 18px; border: 1px solid #edf0f4; border-radius: 10px; background: #f7f8fa; }
.article-panel > .gold-rule, .article-share > .gold-rule { margin-bottom: 5px; }
.article-panel h2 { margin: 0 0 11px; font-size: 18px; line-height: 1.25; }
.article-toc nav { display: grid; gap: 2px; }
.article-toc nav a { position: relative; padding: 6px 0 6px 14px; color: #66748a; font-size: 13px; line-height: 1.35; text-decoration: none; }
.article-toc nav a::before { position: absolute; left: 0; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #d3d9e2; content: ""; transform: translateY(-50%); }
.article-toc nav a:hover, .article-toc nav a.is-current { color: var(--red); }
.article-toc nav a.is-current::before { width: 2px; height: 20px; border-radius: 2px; background: var(--red); }
.article-share { margin-top: 14px; padding-top: 14px; border-top: 1px solid #e2e6ec; }
.article-share h2 { margin-bottom: 9px; }
.share-actions { display: flex; gap: 8px; }
.share-button { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 0; border-radius: 6px; color: #fff; font: 700 17px/1 var(--font-body); text-decoration: none; cursor: pointer; }
.share-linkedin { background: #0878b8; }.share-x { background: #121212; }.share-facebook { background: #2168d7; }.share-copy { color: var(--navy); background: #e9edf3; font-size: 22px; }
.share-button:focus-visible, .article-toc a:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.share-status { min-height: 15px; margin: 5px 0 0; color: #60708a; font-size: 11px; }
.article-content-grid { margin-top: 18px; }
.article-main { min-width: 0; }
.article-hero-image { margin: 0 0 15px; overflow: hidden; border-radius: 8px; background: #e8edf4; }
.article-hero-image img { width: 100%; max-height: 400px; aspect-ratio: 1.9 / 1; object-fit: cover; }
.article-hero-image figcaption, .article-body figcaption { padding: 7px 10px; color: #68768b; font-size: 12px; line-height: 1.4; }
.article-body { color: #34435a; font-size: 16px; line-height: 1.72; }
.article-body > :first-child { margin-top: 0; }
.article-body p { margin: 0 0 15px; }
.article-body h2 { position: relative; margin: 24px 0 9px; padding-top: 8px; color: var(--navy); font-size: clamp(23px, 2.6vw, 29px); line-height: 1.2; letter-spacing: -.02em; }
.article-body h2::before { position: absolute; top: 0; left: 0; width: 30px; height: 2px; background: var(--gold); content: ""; }
.article-body h3 { margin: 20px 0 7px; color: var(--navy); font-size: 21px; line-height: 1.25; }
.article-body ul, .article-body ol { margin: 0 0 15px; padding-left: 24px; }
.article-body li { padding: 2px 0 2px 2px; }
.article-body li::marker { color: #bd951d; }
.article-body blockquote { margin: 20px 0; padding: 14px 18px; border-left: 3px solid var(--gold); color: var(--navy); background: #f4f6f9; }
.article-body figure { max-width: 75%; margin: 20px 0; overflow: hidden; border-radius: 8px; background: #f5f7fa; }
.article-body figure img { width: 100%; max-height: 300px; object-fit: cover; }
.article-body figure video, .article-body figure iframe { display: block; width: 100%; max-height: 410px; aspect-ratio: 16 / 9; border: 0; background: #071832; }
.article-body a { color: #174c9d; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.article-sidebar--related { position: sticky; top: 14px; }
.related-panel { margin-top: 0; }
.related-article { overflow: hidden; margin-top: 12px; border: 1px solid #e7ebf0; border-radius: 7px; background: #fff; }
.related-article__image { display: block; overflow: hidden; background: #e8edf4; }
.related-article__image img { width: 100%; aspect-ratio: 16 / 7.5; object-fit: cover; transition: transform .3s ease; }
.related-article:hover .related-article__image img { transform: scale(1.025); }
.related-article__body { padding: 11px 12px 12px; }
.related-article__body .blog-category { margin-bottom: 6px; padding-top: 6px; font-size: 9px; }
.related-article__body h3 { margin: 0 0 7px; font-size: 16px; line-height: 1.25; }
.related-article__body h3 a { color: var(--navy); text-decoration: none; }
.related-article__body h3 a:hover { color: var(--red); text-decoration: underline; }
.related-meta { margin: 0 0 7px; color: #718097; font-size: 11px; }
.related-article__body .text-link { font-size: 12px; }
.article-video { margin: 20px 0; }
.article-video[hidden] { display: none; }
.video-preview-button { width: 100%; min-height: 230px; display: grid; place-items: center; border: 0; border-radius: 8px; background: linear-gradient(135deg, #071832, #17437b 60%, #0d2444); cursor: pointer; }
.video-play { width: 62px; height: 62px; display: grid; place-items: center; padding-left: 4px; border-radius: 50%; color: var(--navy); background: #fff; box-shadow: 0 3px 14px #07183244; }
.article-video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }
.article-video > p { margin: 6px 0 0; color: #66748a; font-size: 12px; }
.article-comments { margin-top: 24px; padding-top: 15px; border-top: 1px solid #e0e5ec; }
.article-comments > .gold-rule { margin-bottom: 5px; }
.article-comments h2 { margin: 0 0 10px; color: var(--navy); font-size: 22px; }
.comment-count { color: #6d7890; font-size: 16px; font-weight: 500; }
.comment-list { display: grid; }
.public-comment { display: grid; grid-template-columns: 42px minmax(90px, .65fr) minmax(0, 2fr); align-items: start; gap: 10px; padding: 12px 2px; border-bottom: 1px solid #edf0f4; }
.public-comment .comment-avatar { width: 38px; height: 38px; flex-basis: 38px; }
.public-comment__who { display: grid; gap: 3px; padding-top: 2px; }
.public-comment__who strong { color: var(--navy); font-size: 13px; }
.public-comment__who time { color: #78859a; font-size: 11px; }
.public-comment__body { margin: 0; color: #57667d; font-size: 13px; line-height: 1.55; }
.comment-empty { padding: 10px 0 14px; color: #6a778c; font-size: 13px; }
.comment-empty[hidden] { display: none; }
.comment-empty p { margin: 0; }
.comment-form { margin-top: 12px; padding: 16px; border-radius: 9px; background: #f4f6f9; }
.comment-form > .gold-rule { margin-bottom: 4px; }
.comment-form h3 { margin: 0 0 12px; color: var(--navy); font-size: 19px; }
.comment-form__fields { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 12px; }
.comment-form__fields label { display: grid; align-content: start; gap: 6px; color: #45546b; font-size: 12px; font-weight: 650; }
.comment-form__fields label span { font-weight: 400; }
.comment-form input:not([type="checkbox"]), .comment-form textarea { width: 100%; min-height: 43px; padding: 10px 11px; border: 1px solid #d5dce6; border-radius: 5px; color: var(--navy); background: #fff; font: 400 13px/1.4 var(--font-body); }
.comment-form textarea { min-height: 94px; resize: vertical; }
.comment-form input:focus, .comment-form textarea:focus { border-color: var(--navy); outline: 3px solid #0b1f4417; }
.comment-consent { display: flex; align-items: center; gap: 8px; margin-top: 11px; color: #68768b; font-size: 12px; }
.privacy-inline { padding: 0; border: 0; color: var(--red); background: transparent; font: inherit; text-decoration: underline; cursor: pointer; }
.comment-consent input { width: 15px; height: 15px; accent-color: var(--red); }
.comment-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }
.comment-submit-row .button { min-height: 43px; padding-inline: 16px; font-size: 13px; }
.comment-submit-row p { margin: 0; color: #758198; font-size: 11px; }
.form-feedback { margin: 8px 0 0; color: var(--navy); font-size: 13px; }
.article-not-found { max-width: 680px; margin: 90px auto; padding: 35px; border: 1px solid var(--border); border-radius: 12px; background: #f7f8fa; }
.article-not-found h1 { margin: 7px 0; color: var(--navy); font-size: 36px; }
.article-not-found p { color: var(--slate); }
.article-preview-notice { margin: 0 0 17px; }

/* Local content workspace */
.admin-page { min-height: 100vh; margin: 0; color: #10254a; background: #f2f5f9; font-family: var(--font-body); }
.admin-topbar { position: fixed; z-index: 20; inset: 0 0 auto; height: 64px; display: flex; align-items: center; gap: 22px; padding: 0 25px; border-bottom: 1px solid #e3e8ef; background: #fff; }
.admin-brand { display: inline-flex; align-items: center; color: var(--navy); text-decoration: none; }
.admin-brand .brand__image { width: 220px; height: auto; }
.admin-workspace-label { padding-left: 20px; border-left: 1px solid #d8dee8; color: #5e6d83; font-size: 14px; }
.admin-profile { display: flex; align-items: center; gap: 10px; margin-left: auto; color: var(--navy); font-size: 13px; }
.profile-avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: #e7ebf2; font-size: 12px; font-weight: 750; }
.admin-rail { position: fixed; z-index: 15; inset: 64px auto 0 0; width: 190px; padding-top: 22px; background: #0b2349; }
.admin-rail nav { display: grid; gap: 4px; }
.admin-nav-item { min-height: 48px; display: flex; align-items: center; gap: 13px; padding: 0 18px; border-left: 3px solid transparent; color: #e8edf5; font-size: 13px; text-decoration: none; }
.admin-nav-item > span { width: 23px; color: #d9e3f2; font-size: 20px; text-align: center; }
.admin-nav-item:hover { background: #13335f; }
.admin-nav-item.is-active { border-left-color: var(--gold); color: #fff; background: var(--red); font-weight: 700; }
.admin-main { min-height: 100vh; margin-left: 190px; padding: 84px 30px 30px; }
.preview-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 12px; margin-bottom: 14px; padding: 10px 13px; border: 1px solid #e5d493; border-radius: 7px; color: #655212; background: #fffbea; font-size: 12px; }
.preview-notice strong { color: #594800; }
.admin-breadcrumb { display: flex; gap: 9px; margin: 10px 0 12px; color: #68778e; font-size: 12px; }
.admin-breadcrumb a { color: #52627b; text-decoration: none; }
.editor-titlebar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.editor-titlebar > div:first-child { margin-right: auto; }
.editor-titlebar h1 { margin: 0 0 5px; color: var(--navy); font-size: clamp(29px, 3vw, 38px); line-height: 1.08; }
.editor-status { display: flex; align-items: center; gap: 14px; color: #69778b; font-size: 12px; }
.status-pill { display: flex; align-items: center; gap: 6px; padding: 6px 9px; border-radius: 20px; color: #536176; background: #e9edf2; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; background: #8390a3; }
.save-state { color: #3c8651; }
.editor-actions { display: flex; gap: 8px; }
.admin-button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid #d4dce7; border-radius: 6px; color: var(--navy); background: #fff; font: 650 12px/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: border-color .15s ease, transform .15s ease, background-color .15s ease; }
.admin-button:hover { border-color: #8c9bb0; transform: translateY(-1px); }
.admin-button:focus-visible, .admin-icon-button:focus-visible { outline: 3px solid #d4af3799; outline-offset: 2px; }
.admin-button--primary { border-color: var(--navy); color: #fff; background: var(--navy); }
.admin-button--primary:hover { border-color: #18396b; background: #18396b; }
.admin-button--light { color: var(--navy); background: #fff; }
.admin-button--danger-light { border-color: #edc9cf; color: #d31f38; background: #fff; }
.admin-button--danger-light:hover { border-color: #dc4559; background: #fff7f8; }
.editor-columns { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .95fr); align-items: start; gap: 16px; }
.editor-card { min-width: 0; border: 1px solid #e7ebf1; border-radius: 9px; background: #fff; box-shadow: 0 3px 15px #132c4c08; }
.editor-writing { padding: 19px; }
.admin-field { min-width: 0; display: grid; gap: 6px; margin-bottom: 15px; color: #10254a; font-size: 12px; font-weight: 700; }
.admin-field > b { display: contents; color: var(--red); }
.admin-field > span:not(.slug-input) { color: #75839a; font-weight: 400; }
.admin-field input, .admin-field textarea, .admin-field select, .settings-card > input, .settings-card > textarea { width: 100%; min-width: 0; min-height: 39px; padding: 9px 11px; border: 1px solid #cfd8e5; border-radius: 5px; color: #203654; background: #fff; font: 400 12px/1.45 var(--font-body); }
.admin-field textarea, .settings-card > textarea { resize: vertical; }
.admin-field input:focus, .admin-field textarea:focus, .admin-field select:focus, .settings-card > input:focus, .settings-card > textarea:focus { border-color: #254c80; outline: 3px solid #18407818; }
.admin-field small, .field-help { color: #7d8ba0; font-size: 10px; font-weight: 400; line-height: 1.4; }
.slug-input { display: flex; min-width: 0; overflow: hidden; border: 1px solid #cfd8e5; border-radius: 5px; background: #f7f8fa; }
.slug-input span { display: grid; align-items: center; padding: 0 10px; border-right: 1px solid #dce2ea; color: #61718a; font-size: 12px; white-space: nowrap; }
.slug-input input { border: 0; border-radius: 0; outline: none; }
.editor-toolbar { min-height: 45px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px; border: 1px solid #d5dce6; border-bottom: 0; border-radius: 6px 6px 0 0; background: #f8f9fb; }
.editor-toolbar select { max-width: 130px; min-height: 32px; padding: 4px 7px; border: 1px solid #dce2e9; border-radius: 4px; color: var(--navy); background: #fff; font: 500 11px/1.2 var(--font-body); }
.editor-toolbar button { min-width: 31px; min-height: 31px; padding: 0 7px; border: 0; border-radius: 4px; color: #19365f; background: transparent; font: 650 14px/1 var(--font-body); cursor: pointer; }
.editor-toolbar button:hover { background: #e7ebf2; }
.editor-toolbar .paste-document { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding-inline: 9px; border: 1px solid #d5deea; background: #fff; font-size: 11px; }
.rich-editor { min-height: 460px; padding: 18px; border: 1px solid #d5dce6; border-radius: 0 0 6px 6px; color: #30415d; background: #fff; font-size: 14px; line-height: 1.65; outline: none; }
.rich-editor:empty::before { color: #9ba6b7; content: attr(data-placeholder); pointer-events: none; }
.rich-editor:focus { border-color: #254c80; box-shadow: inset 0 0 0 1px #254c80; }
.rich-editor h2, .rich-editor h3 { color: var(--navy); line-height: 1.25; }
.rich-editor img { max-width: 100%; height: auto; border-radius: 6px; }
.rich-editor figcaption { color: #7a879b; font-size: 11px; }
.editor-counts { display: flex; flex-wrap: wrap; gap: 5px 13px; padding: 8px 2px 0; color: #77859a; font-size: 10px; }
.editor-counts span:last-child { margin-left: auto; }
.editor-settings { display: grid; gap: 12px; }
.settings-card { padding: 14px; }
.settings-heading { margin-bottom: 10px; }
.settings-heading .gold-rule { margin-bottom: 4px; }
.settings-heading h2 { margin: 0; color: var(--navy); font-size: 15px; line-height: 1.25; }
.settings-heading h2 span { color: #76839a; font-size: 11px; font-weight: 400; }
.featured-preview { min-height: 120px; display: grid; place-items: center; overflow: hidden; margin-bottom: 11px; border-radius: 5px; color: #8390a3; background: #e7ecf3; font-size: 12px; }
.featured-preview img { width: 100%; height: 150px; object-fit: cover; }
.settings-card .admin-field { margin-bottom: 10px; }
.settings-card .admin-field input, .settings-card .admin-field select { min-height: 35px; padding: 7px 9px; font-size: 11px; }
.settings-card .field-help { display: block; margin: -5px 0 10px; }
.media-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.media-buttons .admin-button { min-height: 34px; font-size: 11px; }
.file-button { position: relative; overflow: hidden; }
.file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.settings-card > input, .settings-card > textarea { min-height: 35px; font-size: 11px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.publish-choice { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; color: var(--navy); font-size: 11px; }
.publish-choice input { margin: 1px 0 0; accent-color: var(--red); }
.publish-choice span { display: grid; gap: 3px; }
.publish-choice small { color: #77859b; font-size: 10px; }
.schedule-field { margin: 7px 0 0; }
.editor-feedback, .moderation-feedback { min-height: 20px; margin: 10px 0 0; color: #44546b; font-size: 12px; }

/* Comment moderation */
.moderation-main { padding-top: 82px; }
.moderation-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, .85fr); align-items: start; gap: 18px; }
.moderation-list-panel { min-width: 0; }
.moderation-heading { display: flex; align-items: end; gap: 12px; margin: 14px 0 16px; }
.moderation-heading > div { margin-right: auto; }
.moderation-heading h1 { margin: 0 0 6px; color: var(--navy); font-size: clamp(28px, 3vw, 38px); line-height: 1.1; }
.moderation-heading .gold-rule { margin-bottom: 5px; }
.moderation-heading p { margin: 0; color: #66758d; font-size: 14px; }
.pending-counter { padding: 7px 10px; border-radius: 20px; color: #8b6900; background: #fff4cf; font-size: 11px; font-weight: 650; white-space: nowrap; }
.moderation-tabs { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 12px; padding: 4px; border: 1px solid #dce3ed; border-radius: 7px; background: #fff; }
.moderation-tabs button { min-height: 37px; display: flex; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid transparent; border-right-color: #e5e9ef; color: #51627b; background: transparent; font: 550 11px/1.2 var(--font-body); cursor: pointer; }
.moderation-tabs button:last-child { border-right-color: transparent; }
.moderation-tabs button[aria-selected="true"] { border-color: #f2b6c0; border-radius: 5px; color: var(--navy); background: #fff7f8; font-weight: 700; }
.moderation-tabs button > i { width: 8px; height: 8px; border-radius: 50%; background: #bac3d0; }
.moderation-tabs button[aria-selected="true"] > i { background: var(--red); }
.moderation-tabs button > span { color: #77849a; }
.moderation-tools { display: grid; grid-template-columns: minmax(170px, 1fr) minmax(125px, .48fr) minmax(120px, .45fr); gap: 8px; margin-bottom: 12px; }
.moderation-tools input, .moderation-tools select { width: 100%; min-width: 0; min-height: 39px; padding: 8px 10px; border: 1px solid #d4dce7; border-radius: 5px; color: #384b67; background: #fff; font: 400 11px/1.35 var(--font-body); }
.moderation-search { position: relative; }
.moderation-search > span { position: absolute; top: 7px; left: 10px; color: var(--navy); font-size: 20px; }
.moderation-search input { padding-left: 33px; }
.moderation-cards { display: grid; gap: 10px; }
.moderation-card { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 7px 10px; padding: 13px; border: 1px solid #e3e8ef; border-radius: 8px; background: #fff; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.moderation-card:hover, .moderation-card.is-selected { border-color: #76a0df; box-shadow: 0 0 0 2px #3d83d61b; }
.moderation-card__top { min-width: 0; display: grid; grid-template-columns: 34px 72px minmax(0, 1fr); align-items: start; gap: 8px; grid-column: 1 / 2; }
.moderation-card__top .comment-avatar { width: 34px; height: 34px; flex-basis: 34px; }
.moderation-identity { display: grid; gap: 3px; padding-top: 2px; }
.moderation-identity strong { color: var(--navy); font-size: 11px; }
.moderation-identity time { color: #79869a; font-size: 9px; }
.comment-article-ref { margin: 2px 0 0; color: #718097; font-size: 10px; line-height: 1.4; }
.comment-article-ref a { color: #1e5eaa; text-decoration: underline; text-underline-offset: 2px; }
.moderation-card__body { grid-column: 1 / 2; margin: 0; color: #52627a; font-size: 12px; line-height: 1.52; }
.moderation-card__actions { grid-column: 2; grid-row: 1 / span 2; display: grid; align-content: center; gap: 6px; }
.moderation-card__actions .admin-button { min-height: 33px; padding-inline: 7px; font-size: 10px; }
.moderation-empty { margin: 12px 0; padding: 35px 18px; border: 1px dashed #cfd8e5; border-radius: 8px; color: #64738a; background: #fff; text-align: center; }
.moderation-empty[hidden] { display: none; }
.empty-icon, .detail-icon { width: 40px; height: 40px; display: grid; place-items: center; margin: 0 auto 10px; border-radius: 50%; color: #397953; background: #e6f2e9; font-size: 20px; font-weight: 800; }
.moderation-empty h2 { margin: 0 0 5px; color: var(--navy); font-size: 17px; }
.moderation-empty p { max-width: 360px; margin: 0 auto 12px; font-size: 12px; line-height: 1.5; }
.moderation-empty .admin-button { min-height: 35px; }
.comment-detail-panel { position: sticky; top: 78px; min-height: 390px; padding: 18px; border: 1px solid #e3e8ef; border-radius: 9px; background: #fff; box-shadow: 0 3px 15px #132c4c08; }
.detail-empty { padding: 90px 16px 35px; color: #6f7d92; text-align: center; }
.detail-empty .detail-icon { color: #6d7c92; background: #edf0f4; }
.detail-empty h2 { margin: 0 0 5px; color: var(--navy); font-size: 18px; }
.detail-empty p { margin: 0; font-size: 12px; }
.detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }
.detail-heading h2 { margin: 0; color: var(--navy); font-size: 21px; }
.detail-heading h2::after { width: 27px; height: 2px; display: block; margin-top: 6px; background: var(--gold); content: ""; }
.admin-icon-button { width: 34px; height: 34px; border: 1px solid #dce3eb; border-radius: 5px; color: var(--navy); background: #f8f9fb; font-size: 20px; cursor: pointer; }
.detail-author { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.comment-avatar--large { width: 44px; height: 44px; flex-basis: 44px; font-size: 17px; }
.detail-author > div { display: grid; gap: 4px; margin-right: auto; }
.detail-author strong { color: var(--navy); font-size: 13px; }
.detail-author time { color: #75839a; font-size: 11px; }
.moderation-status { padding: 7px 9px; border-radius: 20px; color: #7d6000; background: #fff3cb; font-size: 10px; white-space: nowrap; }
.moderation-status--approved { color: #28633b; background: #e7f3e9; }.moderation-status--rejected { color: #982d3b; background: #fdecef; }
.comment-detail-panel > h3 { margin: 15px 0 8px; color: var(--navy); font-size: 14px; }
.comment-detail-panel blockquote { margin: 0; padding: 15px; border-radius: 6px; color: #53647d; background: #f3f6f9; font-size: 13px; line-height: 1.55; }
.detail-article-card { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; padding: 8px; border: 1px solid #dce3ec; border-radius: 6px; color: var(--navy); text-decoration: none; }
.detail-article-card img { width: 110px; height: 70px; border-radius: 4px; object-fit: cover; }
.detail-article-card > span { display: grid; gap: 5px; }
.detail-article-card strong { font-size: 12px; line-height: 1.35; }
.detail-article-card small { color: #718097; font-size: 10px; }
.detail-article-card b { color: #1e5eaa; font-size: 10px; }
.detail-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.detail-actions .admin-button { flex: 1; }
.detail-privacy-note { margin: 7px 0 0; color: #718097; font-size: 10px; line-height: 1.45; }

@media (max-width: 1050px) {
  .admin-main { padding-inline: 20px; }
  .editor-columns { grid-template-columns: minmax(0, 1fr) minmax(270px, .78fr); }
  .moderation-layout { grid-template-columns: minmax(0, 1fr); }
  .comment-detail-panel { position: static; min-height: 0; }
  .detail-empty { padding: 35px 16px; }
}
@media (max-width: 760px) {
  .article-shell { padding-top: 9px; }
  .article-heading-grid, .article-content-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .article-heading h1 { font-size: clamp(35px, 8vw, 46px); }
  .article-sidebar--top { position: static; }
  .article-sidebar--related { position: static; }
  .article-toc { padding: 14px; }
  .article-toc nav { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .article-share { margin-top: 10px; padding-top: 10px; }
  .article-content-grid { margin-top: 0; }
  .article-body { font-size: 15px; }
  .article-body figure { max-width: 100%; }
  .article-comments { margin-top: 20px; }
  .comment-form__fields { grid-template-columns: 1fr 1fr; }
  .comment-message { grid-column: 1 / -1; }
  .admin-topbar { height: 58px; gap: 11px; padding-inline: 13px; }
  .admin-brand .brand__image { width: 190px; }
  .admin-workspace-label { padding-left: 10px; font-size: 11px; }
  .admin-profile > span:not(.profile-avatar) { display: none; }
  .admin-rail { inset: 58px 0 auto; width: auto; height: 48px; padding: 0; overflow-x: auto; }
  .admin-rail nav { width: max-content; height: 48px; display: flex; }
  .admin-nav-item { min-height: 48px; gap: 6px; padding: 0 12px; font-size: 11px; white-space: nowrap; }
  .admin-nav-item > span { width: auto; font-size: 16px; }
  .admin-main, .moderation-main { margin-left: 0; padding: 120px 13px 25px; }
  .editor-titlebar { align-items: start; }
  .editor-titlebar > div:first-child { flex-basis: 100%; }
  .editor-status { margin-right: auto; }
  .editor-actions { width: 100%; }
  .editor-actions .admin-button { flex: 1; padding-inline: 7px; font-size: 10px; }
  .editor-actions #preview-post { flex: .8; }
  .editor-columns { grid-template-columns: 1fr; }
  .rich-editor { min-height: 330px; }
  .moderation-heading { align-items: start; }
  .moderation-heading p { font-size: 12px; }
  .moderation-tools { grid-template-columns: 1fr 1fr; }
  .moderation-search { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .article-breadcrumb { gap: 7px; font-size: 11px; }
  .article-byline { gap: 7px; font-size: 10px; }
  .article-hero-image img { aspect-ratio: 1.45 / 1; }
  .article-toc nav { grid-template-columns: 1fr; }
  .public-comment { grid-template-columns: 38px minmax(0, 1fr); gap: 7px 9px; }
  .public-comment__body { grid-column: 2; }
  .comment-form { padding: 13px; }
  .comment-form__fields { grid-template-columns: 1fr; }
  .comment-message { grid-column: auto; }
  .comment-submit-row { align-items: flex-start; flex-direction: column; }
  .comment-submit-row .button { width: 100%; justify-content: center; }
  .admin-workspace-label { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .admin-profile { gap: 0; }
  .moderation-heading { flex-wrap: wrap; }
  .moderation-heading > div { flex-basis: 100%; }
  .moderation-tabs { justify-content: space-between; }
  .moderation-tabs button { gap: 5px; padding-inline: 7px; font-size: 10px; }
  .moderation-card { grid-template-columns: 1fr; }
  .moderation-card__top { grid-template-columns: 32px minmax(55px, .35fr) minmax(0, 1fr); }
  .moderation-card__body, .moderation-card__actions { grid-column: 1; grid-row: auto; }
  .moderation-card__actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .comment-detail-panel { padding: 14px; }
  .detail-article-card { grid-template-columns: 78px 1fr; }
  .detail-article-card img { width: 78px; height: 60px; }
  .detail-actions { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .related-article__image img, .admin-button { transition: none; }
}