/* 导航栏最外层圆角矩形，圆角与输入框一致 */
.navigation-bar {
  border-radius: 12px !important;
  overflow: hidden !important;
}
/* 导航栏头像区及相关容器全部透明 */
.account--minimal,
.account__wrapper,
.account__info-wrapper,
.account__contents,
.display-name,
.display-name__html {
  background: transparent !important;
}
/* ===========================================
   Mastodon 4.4 青春校园风格主题
   Youth Campus Theme - 清新柔和的色彩搭配
   =========================================== */

/* 主色调变量定义 - 青春校园配色方案 */
:root {
  --primary-color: #ff9ec8;           /* 樱花粉 */
  --secondary-color: #a8d5ff;         /* 天空蓝 */
  --accent-color: #b4e7ce;            /* 薄荷绿 */
  --highlight-color: #ffd4a3;         /* 暖橙色 */
  --text-primary: #4a5568;            /* 柔和深灰 */
  --text-secondary: #718096;          /* 中灰 */
  --bg-primary: #fff5f7;              /* 淡粉底色 */
  --bg-secondary: #f0f9ff;            /* 淡蓝底色 */
  --bg-card: #ffffff;                 /* 纯白卡片 */
  --border-light: #ffd4e5;            /* 淡粉边框 */
  --shadow-soft: rgba(255, 158, 200, 0.15); /* 柔和阴影 */
}

/* ==================== 全局背景和基础样式 ==================== */

/* 主体背景 - 添加 Emoji 流动效果 */
body {
  background: linear-gradient(135deg, #fff5f7 0%, #f0f9ff 50%, #f0fff4 100%) !important;
  color: var(--text-primary) !important;
}
/* 顶部导航栏容器透明 */
.tabs-bar__wrapper {
  background: linear-gradient(135deg, #fff5f7 0%, #f0f9ff 50%, #f0fff4 100%) !important;
}
/* 显示名容器透明 */
.account__display-name {
  background: transparent !important;
}

/* 主容器背景 */
.ui,
.ui__header,
.columns-area,
.drawer {
  background: transparent !important;
}

/* 侧边栏背景 */
.drawer__inner,
.drawer__inner__mastodon {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(10px);
}

/* ==================== 导航栏和顶部区域 ==================== */

/* 顶部导航栏 */
.tabs-bar,
.ui__header {
  background: linear-gradient(90deg, #ff9ec8 0%, #ffc4e1 50%, #a8d5ff 100%) !important;
}

/* 左侧导航栏及子容器透明 */
.navigation-bar,
.navigation-bar__inner,
.navigation-bar__top,
.navigation-bar__actions,
.navigation-bar__profile,
.navigation-bar__tabs,
.navigation-bar__notifications,
.navigation-bar__item,
.navigation-bar__logo {
  background: transparent !important;
}

/* 导航栏链接 */
.tabs-bar__link {
  color: #ffffff !important;
  background: transparent !important;
}

.tabs-bar__link:hover,
.tabs-bar__link.active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.25) !important;
}

/* 搜索栏 */
.search__input {
  background: #ffffff !important;
  color: var(--text-primary) !important;
}

.search__input:focus {
  background: #ffffff !important;
}

/* ==================== 按钮样式 ==================== */

/* 主要按钮 */
.button,
.icon-button {
  color: var(--text-primary) !important;
  background: transparent !important;
}

.button:hover,
.icon-button:hover {
  color: #ff9ec8 !important;
  background: rgba(255, 158, 200, 0.1) !important;
}
.button.button-primary,
.button.button--block {
  background: linear-gradient(135deg, #ff9ec8 0%, #ffb8d9 100%) !important;
  color: #ffffff !important;
}

.button.button-primary:hover,
.button.button--block:hover {
  background: linear-gradient(135deg, #ff85b8 0%, #ff9ec8 100%) !important;
}

/* 次要按钮 */
.button.button-secondary {
  background: linear-gradient(135deg, #a8d5ff 0%, #c4e3ff 100%) !important;
  color: #ffffff !important;
}

.button.button-secondary:hover {
  background: linear-gradient(135deg, #8fc5ff 0%, #a8d5ff 100%) !important;
}

/* Boost 按钮激活状态 */
.icon-button.active[aria-label*="取消转嘟"],
.icon-button.active[aria-label*="Unboost"],
.status__action-bar-button.icon-button--with-counter.active {
  color: #b4e7ce !important;
}

/* 收藏按钮激活状态 */
.icon-button.active[aria-label*="取消喜欢"],
.icon-button.active[aria-label*="Unfavourite"],
.star-icon.active {
  color: #ffd4a3 !important;
}

/* ==================== 嘟文卡片和时间线 ==================== */

/* 嘟文容器 */
.status,
.detailed-status,
.notification,
.account {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.status:hover,
.notification:hover {
  background: #fffbfc !important;
}

/* 嘟文内容 */
.status__content,
.reply-indicator__content {
  color: var(--text-primary) !important;
}

.status__content__text,
.status__content p {
  color: var(--text-primary) !important;
}

/* 嘟文链接 */
.status__content a,
.reply-indicator__content a {
  color: #ff9ec8 !important;
}

.status__content a:hover,
.reply-indicator__content a:hover {
  color: #ff85b8 !important;
  text-decoration: underline !important;
}

/* 时间线分隔符 */
.status__prepend,
.notification__message {
  color: var(--text-secondary) !important;
}

/* ==================== 头像样式 - 全部改为圆形 ==================== */

/* 所有头像都改为圆形 */
.account__avatar,
.account__avatar-overlay-base,
.account__avatar-overlay-overlay,
.account-authorize__avatar,
.notification__message .account__avatar,
.status__avatar .account__avatar,
.detailed-status__display-avatar .account__avatar,
.accounts-table__avatar img,
.search-results__avatar img,
.follow-prompt__avatar img,
.account__header__avatar,
img[class*="avatar"],
.account__avatar img,
.account-card__header__avatar img {
  border-radius: 50% !important;
}

/* 头像样式 - 保持原有边框不做修改 */

/* ==================== 侧边栏和抽屉 ==================== */

/* 侧边栏导航项 */
.navigation-panel__sign-in-banner,
.getting-started,
.column-link,
.drawer__tab {
  background: transparent !important;
  color: var(--text-primary) !important;
}

.column-link:hover,
.drawer__tab:hover {
  background: rgba(255, 158, 200, 0.1) !important;
  color: #ff9ec8 !important;
}

.column-link.active {
  background: rgba(255, 158, 200, 0.15) !important;
  color: #ff9ec8 !important;
}

/* 侧边栏分隔线 */
.drawer__pager {
  background: transparent !important;
}

/* ==================== 撰写区域 ==================== */

/* 撰写框 */
.compose-form,
.compose-form__modifiers,
.autosuggest-textarea {
  background: transparent !important;
}

.autosuggest-textarea__textarea,
.compose-form__publish {
  background: #ffffff !important;
  color: var(--text-primary) !important;
}

/* 撰写按钮 */
.compose-form__publish-button-wrapper button {
  background: linear-gradient(135deg, #ff9ec8 0%, #ffb8d9 100%) !important;
  color: #ffffff !important;
}

.compose-form__publish-button-wrapper button:hover {
  background: linear-gradient(135deg, #ff85b8 0%, #ff9ec8 100%) !important;
}

/* 工具栏 */
.compose-form__buttons {
  background: transparent !important;
}

.compose-form__buttons-wrapper {
  background: #fffbfc !important;
}

/* ==================== 列和滚动区域 ==================== */

/* 列容器 */
.column,
.column-back-button,
.column-header,
.column-header__wrapper {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(10px);
}

/* 列标题 */
.column-header {
  background: linear-gradient(135deg, #a8d5ff 0%, #c4e3ff 100%) !important;
  color: #ffffff !important;
}

.column-header__button {
  color: #ffffff !important;
}

.column-header__button:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.2) !important;
}

/* 列返回按钮 */
.column-back-button {
  background: linear-gradient(135deg, #b4e7ce 0%, #d0f4e4 100%) !important;
  color: #ffffff !important;
}

/* 滚动区域 */
.scrollable {
  background: transparent !important;
}

/* ==================== 通知栏 ==================== */

/* 通知项 */
.notification {
  background: var(--bg-card) !important;
}

.notification.notification-favourite {
  background: linear-gradient(135deg, rgba(255, 212, 163, 0.15) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

.notification.notification-reblog {
  background: linear-gradient(135deg, rgba(180, 231, 206, 0.15) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

.notification.notification-follow {
  background: linear-gradient(135deg, rgba(168, 213, 255, 0.15) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

.notification.notification-mention {
  background: linear-gradient(135deg, rgba(255, 158, 200, 0.15) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

/* ==================== 模态框和弹出窗口 ==================== */

/* 模态框背景 */
.modal-root__overlay {
  background: rgba(255, 158, 200, 0.6) !important;
  backdrop-filter: blur(5px);
}

/* 模态框容器 */
.modal-root__container,
.modal-root__modal,
.actions-modal,
.boost-modal,
.confirmation-modal,
.mute-modal,
.report-modal {
  background: var(--bg-card) !important;
}

/* 模态框标题 */
.actions-modal__item-label,
.boost-modal__action-bar,
.confirmation-modal__action-bar {
  background: linear-gradient(135deg, #ff9ec8 0%, #ffc4e1 100%) !important;
  color: #ffffff !important;
}

/* ==================== 个人资料页面 ==================== */

/* 个人资料头部 */
.account__header {
  background: linear-gradient(135deg, #fff5f7 0%, #f0f9ff 100%) !important;
}

.account__header__bar {
  background: rgba(255, 255, 255, 0.9) !important;
}

/* 个人资料标签 */
.account__header__tabs__buttons .button,
.account__header__tabs__buttons .icon-button {
  color: var(--text-primary) !important;
  background: #ffffff !important;
}

.account__header__tabs__buttons .button:hover,
.account__header__tabs__buttons .icon-button:hover {
  background: #fffbfc !important;
}

/* 统计数字 */
.account__header__tabs__name h1,
.account__header__extra__links a {
  color: var(--text-primary) !important;
}

.account__header__extra__links a strong {
  color: #ff9ec8 !important;
}

/* ==================== 标签和徽章 ==================== */

/* 话题标签 */
.status__content__text a.mention,
.status__content__text a.hashtag {
  color: #a8d5ff !important;
}

.status__content__text a.mention:hover,
.status__content__text a.hashtag:hover {
  color: #8fc5ff !important;
}

/* 徽章 */
.account-role,
.account__header__account-note label {
  background: linear-gradient(135deg, #b4e7ce 0%, #d0f4e4 100%) !important;
  color: #ffffff !important;
}

/* 用户组域名标识 - 金光闪闪效果 */
.account-role__domain {
  background: linear-gradient(90deg, #ffd700 0%, #ffed4e 25%, #ffd700 50%, #ffed4e 75%, #ffd700 100%) !important;
  background-size: 200% 100% !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8), 0 0 20px rgba(255, 215, 0, 0.5) !important;
  animation: shimmer 2s linear infinite !important;
  font-weight: bold !important;
  padding: 4px 12px !important;
  border-radius: 12px !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4), inset 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ==================== 媒体和附件 ==================== */

/* 媒体画廊 */
.media-gallery,
.video-player,
.audio-player {
  background: #f8f9fa !important;
}

/* 媒体项保持原有样式 */

/* 敏感内容遮罩 */
.status__content__spoiler-link {
  background: linear-gradient(135deg, #ff9ec8 0%, #ffb8d9 100%) !important;
  color: #ffffff !important;
}

.status__content__spoiler-link:hover {
  background: linear-gradient(135deg, #ff85b8 0%, #ff9ec8 100%) !important;
}

/* ==================== 投票 ==================== */

/* 投票选项 */
.poll {
  background: transparent !important;
}

.poll__option {
  background: #ffffff !important;
  color: var(--text-primary) !important;
}

.poll__option:hover {
  background: #fffbfc !important;
}

/* 投票选项输入框保持原样 */

.poll__chart {
  background: linear-gradient(90deg, #ff9ec8 0%, #ffc4e1 100%) !important;
}

/* ==================== 表情和自定义表情 ==================== */

/* 表情选择器 */
.emoji-mart,
.emoji-picker-dropdown__menu {
  background: var(--bg-card) !important;
}

.emoji-mart-category-label span {
  background: linear-gradient(135deg, #a8d5ff 0%, #c4e3ff 100%) !important;
  color: #ffffff !important;
}

.emoji-mart-search input {
  background: #ffffff !important;
  color: var(--text-primary) !important;
}

/* ==================== 趋势和发现 ==================== */

/* 趋势标签 */
.trends__item {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.trends__item:hover {
  background: #fffbfc !important;
}

.trends__item__name a {
  color: #ff9ec8 !important;
}

.trends__item__sparkline path {
  stroke: #a8d5ff !important;
}

/* ==================== 设置和首选项 ==================== */

/* 设置页面 */
.simple_form,
.admin-wrapper {
  background: var(--bg-card) !important;
}

.simple_form h1,
.simple_form h2,
.admin-wrapper h2 {
  color: var(--text-primary) !important;
}

.simple_form .input,
.simple_form textarea,
.simple_form select {
  background: #ffffff !important;
  color: var(--text-primary) !important;
}

/* 设置按钮 */
.simple_form .button {
  background: linear-gradient(135deg, #ff9ec8 0%, #ffb8d9 100%) !important;
  color: #ffffff !important;
}

.simple_form .button:hover {
  background: linear-gradient(135deg, #ff85b8 0%, #ff9ec8 100%) !important;
}

/* ==================== 滚动条美化 ==================== */

/* Webkit 滚动条 */
.columns-area__panels__main::-webkit-scrollbar,
.scrollable::-webkit-scrollbar,
.drawer__inner::-webkit-scrollbar {
  width: 12px !important;
  background: transparent !important;
}

.columns-area__panels__main::-webkit-scrollbar-thumb,
.scrollable::-webkit-scrollbar-thumb,
.drawer__inner::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff9ec8 0%, #ffc4e1 100%) !important;
  border-radius: 10px !important;
}

.columns-area__panels__main::-webkit-scrollbar-thumb:hover,
.scrollable::-webkit-scrollbar-thumb:hover,
.drawer__inner::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ff85b8 0%, #ff9ec8 100%) !important;
}

/* ==================== 加载动画和进度条 ==================== */

/* 加载指示器 */
.loading-indicator {
  color: #ff9ec8 !important;
}

.loading-bar {
  background: linear-gradient(90deg, #ff9ec8 0%, #a8d5ff 50%, #b4e7ce 100%) !important;
}

/* ==================== 反应栏和互动元素 ==================== */

/* 反应按钮 */
.detailed-status__button,
.status__action-bar-button {
  color: var(--text-secondary) !important;
}

.detailed-status__button:hover,
.status__action-bar-button:hover {
  color: #ff9ec8 !important;
}

/* 回复计数 */
.status__action-bar__counter {
  color: var(--text-secondary) !important;
}

.status__action-bar__counter:hover {
  color: #ff9ec8 !important;
}

/* ==================== 下拉菜单 ==================== */

/* 下拉菜单容器 */
.dropdown-menu,
.privacy-dropdown__dropdown {
  background: var(--bg-card) !important;
}

.dropdown-menu__item a,
.privacy-dropdown__option {
  background: transparent !important;
  color: var(--text-primary) !important;
}

.dropdown-menu__item a:hover,
.privacy-dropdown__option:hover,
.privacy-dropdown__option.active {
  background: rgba(255, 158, 200, 0.1) !important;
  color: #ff9ec8 !important;
}

/* ==================== 探索和搜索结果 ==================== */

/* 搜索结果 */
.search-results,
.search-results__section {
  background: var(--bg-card) !important;
}

.search-results__header {
  background: linear-gradient(135deg, #b4e7ce 0%, #d0f4e4 100%) !important;
  color: #ffffff !important;
}

.account__display-name,
.display-name {
  color: var(--text-primary) !important;
}

.account__display-name strong,
.display-name__html {
  color: #ff9ec8 !important;
}

/* ==================== 时间戳和元信息 ==================== */

/* 时间戳 */
.status__relative-time,
.detailed-status__datetime {
  color: var(--text-secondary) !important;
}

.status__relative-time:hover,
.detailed-status__datetime:hover {
  color: #ff9ec8 !important;
}

/* 可见性标识 */
.status__visibility-icon {
  color: var(--text-secondary) !important;
}

/* ==================== 错误和警告提示 ==================== */

/* 错误消息 */
.error-column,
.empty-column-indicator {
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* 警告横幅 */
.dismissable-banner {
  background: linear-gradient(135deg, #ffd4a3 0%, #ffe4b8 100%) !important;
  color: #4a5568 !important;
}

/* ==================== 关注建议和推荐 ==================== */

/* 关注建议卡片 */
.account-card {
  background: var(--bg-card) !important;
}

.account-card:hover {
  background: #fffbfc !important;
}

.account-card__title a {
  color: #ff9ec8 !important;
}

/* ==================== 列表和筛选器 ==================== */

/* 列表项 */
.list,
.list-editor {
  background: var(--bg-card) !important;
}

.list__wrapper {
  background: #ffffff !important;
}

.list__display-name {
  color: var(--text-primary) !important;
}

/* ==================== 登录和注册页面 ==================== */

/* 登录表单 */
.simple_form .user_email,
.simple_form .user_password {
  background: #ffffff !important;
}

/* ==================== 附加优化 ==================== */

/* 链接颜色统一 */
a {
  color: #ff9ec8 !important;
}

a:hover {
  color: #ff85b8 !important;
}

/* 代码块 */
code,
pre {
  background: #f8f9fa !important;
  color: var(--text-primary) !important;
}

/* 引用块 - 保留左边框作为视觉标识 */
blockquote {
  border-left: 3px solid #ff9ec8 !important;
  color: var(--text-secondary) !important;
}

/* 分隔线 */
hr {
  border-color: var(--border-light) !important;
}

/* ==================== 响应式优化 ==================== */

/* 移动端优化 */
@media screen and (max-width: 768px) {
  .tabs-bar {
    background: linear-gradient(90deg, #ff9ec8 0%, #a8d5ff 100%) !important;
  }
  
  .column,
  .columns-area {
    background: rgba(255, 255, 255, 0.95) !important;
  }
}

/* ==================== 深色模式兼容 ==================== */

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  body {
    background: linear-gradient(135deg, #2a2435 0%, #1a2332 50%, #1f2b29 100%) !important;
  }
  
  :root {
    --text-primary: #e2e8f0 !important;
    --text-secondary: #cbd5e0 !important;
    --bg-card: rgba(45, 45, 55, 0.9) !important;
    --bg-primary: #2d2d37 !important;
    --bg-secondary: #25283d !important;
    --border-light: rgba(255, 158, 200, 0.2) !important;
  }
  
  .status,
  .detailed-status,
  .notification,
  .account {
    background: rgba(45, 45, 55, 0.9) !important;
  }
  
  .column,
  .column-back-button,
  .column-header,
  .column-header__wrapper {
    background: rgba(45, 45, 55, 0.85) !important;
  }
  
  .drawer__inner,
  .drawer__inner__mastodon {
    background: rgba(45, 45, 55, 0.7) !important;
  }
}

/* ==================== 辅助功能优化 ==================== */

/* 焦点状态 - 缩小边框且圆角与容器一致 */
*:focus {
  outline: 1px solid #ff9ec8 !important;
  outline-offset: -1px !important;
  border-radius: 12px !important;
}

/* 选中文本 */
::selection {
  background: rgba(255, 158, 200, 0.3) !important;
  color: var(--text-primary) !important;
}

/* ==================== 结束 ==================== */