/* Page-specific styles split from hongyi-mobile.css: bulletin */

.bulletin-page {
  gap: 12px;
}

.bulletin-title-strip {
  display: grid;
  gap: 10px;
}

.bulletin-title-strip > div {
  min-width: 0;
}

.bulletin-title-strip span {
  display: block;
  margin-top: 7px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.55;
}

.bulletin-create-btn {
  display: inline-flex;
  width: fit-content;
  min-width: 112px;
  height: 38px;
  align-items: center;
  justify-content: center;
  justify-self: start;
  padding: 0 17px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  background: rgba(255, 248, 233, 0.13);
  color: #fff7dd;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 12px 22px rgba(7, 18, 37, 0.18);
}

.bulletin-create-btn::before {
  content: "+";
  margin-right: 6px;
  font-size: 16px;
  line-height: 1;
}

body:not(.desktop-page) .bulletin-title-strip > div > span {
  display: block;
}

body:not(.desktop-page) .bulletin-title-strip {
  padding-right: 178px;
}

body:not(.desktop-page) .bulletin-create-btn {
  position: absolute;
  top: 45px;
  right: 58px;
  z-index: 2;
  min-width: 108px;
  height: 34px;
  padding: 0 14px;
  transform: translateY(-50%);
}

.bulletin-metrics,
.bulletin-rank-grid,
.bulletin-announcement-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.bulletin-metrics {
  grid-template-columns: 1fr;
}

.bulletin-dark-card {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 15px;
  border: 1px solid rgba(246, 197, 111, 0.36);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 145, 31, 0.23), transparent 38%),
    linear-gradient(135deg, #071229 0%, #17191a 72%, #0a0d12 100%);
  box-shadow:
    0 14px 26px rgba(7, 18, 37, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.bulletin-card-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid rgba(255, 209, 128, 0.82);
  border-radius: 12px;
  color: #f7c66b;
  font-size: 21px;
  font-weight: 950;
}

.bulletin-dark-card small,
.bulletin-mini-card small {
  display: block;
  color: rgba(255, 247, 221, 0.82);
  font-size: 12px;
  font-weight: 900;
}

.bulletin-dark-card strong {
  display: block;
  margin-top: 3px;
  color: #ffffff;
  font-size: 23px;
  line-height: 1.1;
}

.bulletin-dark-card em,
.bulletin-mini-card em {
  display: block;
  margin-top: 5px;
  color: rgba(255, 247, 221, 0.76);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.bulletin-dark-card button {
  grid-column: 1 / -1;
  display: inline-flex;
  width: min(100%, 154px);
  height: 32px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(247, 198, 107, 0.42);
  border-radius: 999px;
  background: rgba(255, 205, 126, 0.06);
  color: #f7c66b;
  font-size: 12px;
  font-weight: 900;
}

.bulletin-rank-grid {
  grid-template-columns: 1fr;
}

.bulletin-mini-card {
  display: grid;
  min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(216, 190, 151, 0.56);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 22px rgba(72, 50, 24, 0.09);
}

.bulletin-mini-card > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--mini-accent);
  font-size: 27px;
}

.bulletin-mini-card small {
  color: #6b7788;
}

.bulletin-mini-card b {
  display: block;
  margin-top: 2px;
  color: #d38722;
  font-size: 12px;
}

.bulletin-mini-card strong {
  display: block;
  margin-top: 2px;
  color: #071229;
  font-size: 18px;
  line-height: 1.12;
}

.bulletin-mini-card em {
  color: #516179;
}

.accent-gold {
  --mini-accent: #c89530;
}

.accent-amber {
  --mini-accent: #d59f35;
}

.accent-copper {
  --mini-accent: #bf7b31;
}

.accent-ring {
  --mini-accent: #c89530;
}

.bulletin-kpi-ring {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #fff 58%, transparent 59%),
    conic-gradient(#c89530 0 87%, #ece2d3 87% 100%);
}

.bulletin-kpi-ring strong {
  margin: 0;
  color: #9a6418;
  font-size: 14px;
}

.bulletin-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 14px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(224, 213, 198, 0.8);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 10px 22px rgba(72, 50, 24, 0.06);
}

.bulletin-category-tabs {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.bulletin-category-tabs button,
.bulletin-search-row input,
.bulletin-filter-btn {
  border: 1px solid #e7dfd2;
  background: #ffffff;
  color: #1f2937;
  font-weight: 900;
}

.bulletin-category-tabs button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: max-content;
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 12px;
  box-shadow: 0 6px 14px rgba(25, 35, 50, 0.04);
}

body:not(.desktop-page) .bulletin-toolbar {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  overflow: hidden;
}

body:not(.desktop-page) .bulletin-category-tabs {
  width: auto;
  margin: 0;
  padding-bottom: 4px;
}

.bulletin-category-tabs button > span {
  display: inline-grid;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  place-items: center;
  color: currentColor;
  opacity: 0.9;
}

.bulletin-category-tabs button > span::before {
  width: 14px;
  height: 14px;
  background: currentColor;
  content: "";
  mask: var(--bulletin-tab-icon) center / contain no-repeat;
  -webkit-mask: var(--bulletin-tab-icon) center / contain no-repeat;
}

.bulletin-category-tabs button[data-bulletin-icon="all"] {
  --bulletin-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5a2 2 0 0 1 2-2h5v8H4V5Zm2 0v4h3V5H6Zm7-2h5a2 2 0 0 1 2 2v5h-7V3Zm2 2v3h3V5h-3ZM4 13h7v8H6a2 2 0 0 1-2-2v-6Zm2 2v4h3v-4H6Zm7-3h7v7a2 2 0 0 1-2 2h-5v-9Zm2 2v5h3v-5h-3Z'/%3E%3C/svg%3E");
}

.bulletin-category-tabs button[data-bulletin-icon="company"] {
  --bulletin-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 21V4.8C5 3.8 5.8 3 6.8 3h6.4c1 0 1.8.8 1.8 1.8V8h2.2c1 0 1.8.8 1.8 1.8V21h-2v-3h-2v3H5Zm2-2h2v-2h2v2h2V5H7v14Zm8-3h2v-2h-2v2Zm0-4h2v-2h-2v2ZM8 8h2V6H8v2Zm0 4h2v-2H8v2Zm0 4h2v-2H8v2Z'/%3E%3C/svg%3E");
}

.bulletin-category-tabs button[data-bulletin-icon="sales"] {
  --bulletin-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 21.1 10.6 20C5.8 16.1 3 13.8 3 10.2 3 7.3 5.3 5 8.2 5c1.6 0 3.1.7 4.1 1.9C13.3 5.7 14.8 5 16.4 5 19.3 5 21.6 7.3 21.6 10.2c0 3.6-2.8 5.9-7.6 9.8l-2 1.1Zm0-2.6.7-.6c4.2-3.4 6.9-5.6 6.9-7.7 0-1.8-1.4-3.2-3.2-3.2-1.4 0-2.8.9-3.3 2.2h-1.6C11 7.9 9.6 7 8.2 7 6.4 7 5 8.4 5 10.2c0 2.1 2.7 4.3 7 7.7Z'/%3E%3C/svg%3E");
}

.bulletin-category-tabs button[data-bulletin-icon="policy"] {
  --bulletin-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 3h10a2 2 0 0 1 2 2v16H5V5a2 2 0 0 1 2-2Zm0 2v14h10V5H7Zm2 4h6v2H9V9Zm0 4h6v2H9v-2Zm0-6h6v1H9V7Z'/%3E%3C/svg%3E");
}

.bulletin-category-tabs button[data-bulletin-icon="event"] {
  --bulletin-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m12 3 2.7 5.5 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.8 1-6.1-4.4-4.3 6.1-.9L12 3Zm0 4.5-1.4 2.9-3.2.5 2.3 2.2-.6 3.2 2.9-1.5 2.9 1.5-.6-3.2 2.3-2.2-3.2-.5L12 7.5Z'/%3E%3C/svg%3E");
}

.bulletin-category-tabs .active {
  border-color: #ead2ae;
  background: linear-gradient(180deg, #fffaf2 0%, #f7ead5 100%);
  color: #9a5f12;
  box-shadow: 0 7px 16px rgba(154, 95, 18, 0.12);
}

.bulletin-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
}

.bulletin-search-row label {
  min-width: 0;
}

.bulletin-search-row span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.bulletin-search-row input {
  width: 100%;
  height: 40px;
  min-width: 0;
  padding: 0 13px;
  border-radius: 8px;
  font-size: 12px;
}

.bulletin-filter-btn {
  height: 40px;
  border-radius: 8px;
  font-size: 17px;
}

.bulletin-announcement-list {
  grid-template-columns: 1fr;
}

.bulletin-announcement-card {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(216, 190, 151, 0.58);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 24px rgba(72, 50, 24, 0.08);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.bulletin-announcement-card:hover,
.bulletin-announcement-card:focus-visible {
  border-color: rgba(213, 153, 46, 0.72);
  box-shadow: 0 16px 32px rgba(72, 50, 24, 0.14);
  transform: translateY(-1px);
}

.bulletin-announcement-card:focus-visible {
  outline: 3px solid rgba(213, 153, 46, 0.26);
  outline-offset: 2px;
}

.bulletin-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 22px;
  margin-bottom: 8px;
  padding: 0 8px;
  border-radius: 999px;
  color: #7a4d08;
  font-size: 11px;
  font-weight: 950;
}

.bulletin-tag.company {
  background: #fff3dc;
}

.bulletin-tag.sales {
  background: #eaf2ff;
  color: #2d5ca0;
}

.bulletin-tag.policy {
  background: #eaf8ef;
  color: #257042;
}

.bulletin-tag.event {
  background: #f4edff;
  color: #6e4ec4;
}

.bulletin-announcement-card h2 {
  margin: 0;
  color: #071229;
  font-size: 16px;
  line-height: 1.25;
}

.bulletin-announcement-card h2 i {
  color: #9a6418;
  font-style: normal;
}

.bulletin-announcement-card p {
  margin: 7px 0 10px;
  color: #46556b;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}

.bulletin-announcement-card footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  color: #596b83;
  font-size: 11px;
  font-weight: 850;
}

.bulletin-action-group {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}

.bulletin-read-chip {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 950;
}

.bulletin-action-button {
  min-width: 46px;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(181, 198, 218, 0.92);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f2f6fb 100%);
  color: #18375e;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 5px 12px rgba(24, 55, 94, 0.08);
}

.bulletin-action-button.edit {
  border-color: rgba(213, 153, 46, 0.5);
  background: linear-gradient(180deg, #fff8e8 0%, #f6dfae 100%);
  color: #7a4d08;
}

.bulletin-action-button.danger {
  border-color: rgba(230, 88, 88, 0.42);
  background: linear-gradient(180deg, #fff8f8 0%, #ffecec 100%);
  color: #c43131;
}

.bulletin-action-button:hover {
  transform: translateY(-1px);
}

.bulletin-announcement-card > b {
  align-self: center;
  color: rgba(154, 101, 23, 0.72);
  font-size: 34px;
  line-height: 1;
}

.bulletin-pagination {
  display: grid;
  gap: 10px;
  justify-items: center;
  padding-bottom: 4px;
}

.bulletin-pagination nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.bulletin-pagination button {
  display: grid;
  min-width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgba(216, 190, 151, 0.58);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  color: #253246;
  font-weight: 900;
}

.bulletin-pagination button.active {
  border-color: rgba(194, 126, 29, 0.48);
  background: #d4a04a;
  color: #fff;
}

.bulletin-pagination p {
  margin: 0;
  color: #596b83;
  font-size: 12px;
  font-weight: 850;
}

.article-box {
  padding: 16px;
  line-height: 1.8;
}

body:not(.desktop-page) .mobile-modal[data-modal="announcement-detail"] .modal-body {
  display: grid;
  align-items: stretch;
}

body:not(.desktop-page) .mobile-modal[data-modal="announcement-detail"] .article-box {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

.article-box img {
  width: 170px;
  margin-top: 12px;
  border-radius: 12px;
}

.announcement-read-panel {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-radius: 12px;
  background: #f8fafc;
}

.announcement-read-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.announcement-read-panel header strong {
  display: block;
  color: #0f172a;
  font-size: 14px;
  font-weight: 950;
}

.announcement-read-panel header small {
  display: block;
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
}

.announcement-read-panel header button {
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid rgba(148, 163, 184, 0.72);
  border-radius: 999px;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 950;
}

.announcement-read-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.announcement-read-stats b {
  padding: 6px 10px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12px;
}

.announcement-read-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.announcement-read-columns article {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(226, 232, 240, 0.94);
  border-radius: 10px;
  background: #ffffff;
}

.announcement-read-columns h4 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 12px;
  font-weight: 950;
}

.announcement-read-columns article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.announcement-read-columns span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
}

.announcement-read-columns span.read {
  background: #dcfce7;
  color: #166534;
}

.announcement-read-columns span.unread {
  background: #fee2e2;
  color: #991b1b;
}

.announcement-read-columns span small {
  color: inherit;
  font-size: 10px;
  opacity: 0.72;
}

.announcement-read-columns em {
  color: #64748b;
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
}

@media (max-width: 640px) {
  .announcement-read-columns {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 700px) {
  .bulletin-metrics,
  .bulletin-rank-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

body.desktop-page .desktop-app .page[data-panel="bulletin"] .bulletin-title-strip {
  display: flex;
  min-height: 88px;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 22px;
  align-items: center;
}

body.desktop-page .desktop-app .page[data-panel="bulletin"] .bulletin-title-strip > div {
  display: grid;
  grid-column: 1;
  grid-row: 1 / 3;
  align-content: center;
  row-gap: 6px;
}

body.desktop-page .desktop-app .page[data-panel="bulletin"] .bulletin-title-strip .bulletin-create-btn {
  width: auto;
  min-width: 0;
  height: 42px;
  padding: 0 18px;
}

body.desktop-page .desktop-app .page[data-panel="bulletin"] .bulletin-title-strip span {
  display: none;
}

body.desktop-page .desktop-app .bulletin-page {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

body.desktop-page .desktop-app .bulletin-metrics {
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  justify-self: stretch;
}

body.desktop-page .desktop-app .bulletin-dark-card {
  min-height: 116px;
  padding: 18px 18px 16px;
  border-radius: 13px;
}

body.desktop-page .desktop-app .bulletin-dark-card button {
  width: min(100%, 132px);
  height: 28px;
  margin-top: 2px;
  font-size: 11px;
}

body.desktop-page .desktop-app .bulletin-rank-grid {
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  justify-self: stretch;
  margin-top: -2px;
}

body.desktop-page .desktop-app .bulletin-mini-card {
  min-height: 86px;
  padding: 16px;
  border-radius: 10px;
}

body.desktop-page .desktop-app .bulletin-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  font-size: 18px;
}

body.desktop-page .desktop-app .bulletin-dark-card small,
body.desktop-page .desktop-app .bulletin-mini-card small {
  font-size: 11px;
}

body.desktop-page .desktop-app .bulletin-dark-card strong {
  font-size: 22px;
}

body.desktop-page .desktop-app .bulletin-dark-card em,
body.desktop-page .desktop-app .bulletin-mini-card em {
  font-size: 10px;
}

body.desktop-page .desktop-app .bulletin-mini-card > span {
  width: 34px;
  height: 34px;
  font-size: 22px;
}

body.desktop-page .desktop-app .bulletin-mini-card strong {
  font-size: 16px;
}

body.desktop-page .desktop-app .bulletin-kpi-ring {
  width: 50px;
  height: 50px;
}

body.desktop-page .desktop-app .bulletin-kpi-ring strong {
  font-size: 12px;
}

body.desktop-page .desktop-app .bulletin-toolbar {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 14px;
  align-items: center;
  justify-self: stretch;
  margin-top: 0;
  padding: 10px 12px;
}

body.desktop-page .desktop-app .bulletin-category-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
}

body.desktop-page .desktop-app .bulletin-category-tabs button {
  height: 36px;
  padding: 0 16px;
  border-radius: 6px;
}

body.desktop-page .desktop-app .bulletin-announcement-list {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
  justify-self: stretch;
}

body.desktop-page .desktop-app .bulletin-announcement-card {
  min-height: 136px;
  padding: 18px;
}

body.desktop-page .desktop-app[data-active-page="bulletin"] .page-stack {
  padding-bottom: 86px;
}

body.desktop-page .desktop-app .page.active[data-panel="bulletin"] {
  padding-bottom: 70px;
}

body.desktop-page .desktop-app .bulletin-pagination {
  position: fixed;
  right: var(--desktop-gap);
  bottom: 12px;
  left: calc(var(--desktop-sidebar) + var(--desktop-gap));
  z-index: 8;
  width: auto;
  grid-template-columns: 1fr auto;
  justify-items: center;
  align-items: center;
  justify-self: stretch;
  box-sizing: border-box;
  padding: 10px 16px;
  border: 1px solid rgba(216, 190, 151, 0.58);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.96);
  box-shadow: 0 16px 34px rgba(17, 31, 52, 0.12);
  backdrop-filter: blur(10px);
}

body.desktop-page .desktop-app .bulletin-pagination p {
  justify-self: end;
}

@media (max-width: 920px) {
  .bulletin-toolbar,
  body.desktop-page .desktop-app .bulletin-toolbar {
    grid-template-columns: 1fr;
  }
}