/* =========================================================
   MediaCMS 视觉美化 v5 (2026-10-23) —— YouTube 桌面版对齐
   搜索框 540×40 居中胶囊（图标移到胶囊内左侧，去竖杠）
   14px 字体体系 / 无底框卡片 / 红胶囊上传按钮
   配套缓存戳：head-links.html ?v=yt5
   ========================================================= */

:root {
  --mc-red: #ff0033;             /* YouTube 红 */
  --mc-red-hover: #e6002e;
  --mc-bg: #f9f9f9;              /* 暖白底 */
  --mc-text: #0f0f0f;            /* 近黑文字 */
  --mc-text-sub: #606060;        /* 次要文字 */
}

/* ---------- 全局：14px 体系 + Roboto 字体栈 ---------- */
body {
  background: var(--mc-bg) !important;
  color: var(--mc-text) !important;
  font-size: 14px !important;
  font-family: Roboto, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", Arial, sans-serif !important;
}

/* ---------- 顶栏：白底、logo 30px、图标按钮灰圆底悬停 ---------- */
.page-header {
  position: relative !important;
  background: #ffffff !important;
  border-bottom: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06) !important;
}
.page-header::before { display: none !important; }   /* 去掉渐变线 */
.page-header .logo img { height: 30px !important; }
.page-header .circle-icon-button {
  border-radius: 50% !important;
  transition: background .2s ease !important;
}
.page-header .circle-icon-button:hover {
  background: #f2f2f2 !important;
  color: var(--mc-text) !important;
}

/* ---------- 上传按钮：红胶囊（登录态是 button.button-link，非 a 标签） ---------- */
.page-header-right .button-link,
.page-header-right a[href="/upload"] {
  background: var(--mc-red) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 18px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
}
.page-header-right .button-link:hover,
.page-header-right a[href="/upload"]:hover {
  background: var(--mc-red-hover) !important;
}

/* ---------- 视频卡片：YouTube 无底框式（透明、无阴影、无边框） ---------- */
.item.video-item {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}
.item.video-item .item-thumb {
  border-radius: 12px !important;
  overflow: hidden !important;
}
.item.video-item .item-thumb img,
.item.video-item .item-thumb video {
  border-radius: 12px !important;
  transform: none !important;
  transition: none !important;
}
.item-duration {
  background: rgba(0, 0, 0, .8) !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 500;
  padding: 2px 5px !important;
}
.item-title {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: var(--mc-text) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.item-author {
  color: var(--mc-text-sub) !important;
  font-size: 12px !important;
}
.item-views, .item-date {
  color: var(--mc-text-sub) !important;
  font-size: 12px !important;
}

/* ---------- 主内容区 / 页脚 / 滚动条 ---------- */
.page-main-wrap { background: var(--mc-bg) !important; }
.page-main-inner { padding-top: 22px !important; }
#app-footer {
  border-top: 1px solid rgba(0, 0, 0, .06) !important;
  color: var(--mc-text-sub) !important;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d4d4d4; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #b0b0b0; }

/* =========================================================
   搜索框 v5 —— 桌面端专用（≥1024px）
   ≤1023px 是移动模式（原生隐藏/展开逻辑），完全不触碰
   ========================================================= */
@media (min-width: 1024px) {

  /* wrap 只保留定位职责：透明、无边框，540px 居中 */
  .search-field-wrap {
    position: relative !important;
    display: table !important;
    width: 540px !important;
    max-width: 40% !important;
    height: 100% !important;
    margin: 0 auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  /* 胶囊本体转移到 .text-field-wrap：40px 高灰底圆角 */
  .search-field-wrap .text-field-wrap {
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;               /* 清零原生 64px 右侧按钮预留 */
    height: 40px !important;
    background: #f2f2f2 !important;
    border: 1px solid #f2f2f2 !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease !important;
  }
  .search-field-wrap .text-field-wrap:hover {
    background: #e9e9e9 !important;
  }
  .search-field-wrap .text-field-wrap:focus-within {
    background: #ffffff !important;      /* YouTube 行为：聚焦白底描边 */
    border-color: #1c62b9 !important;
  }

  /* 输入框：15px，左侧给图标留 44px，无右侧预留 */
  .search-field-wrap input[type="text"] {
    width: 100% !important;
    height: 38px !important;
    margin: 0 !important;
    padding: 0 16px 0 44px !important;
    font-size: 15px !important;
    font-family: inherit !important;
    color: var(--mc-text) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: none !important;
    outline: none !important;
  }
  .search-field-wrap input[type="text"]::placeholder {
    color: #888888 !important;
  }

  /* 放大镜图标：移到胶囊内左侧 */
  .search-field-wrap button[type="submit"] {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    border-radius: 20px 0 0 20px !important;
    box-shadow: none !important;
    cursor: pointer;
  }
  .search-field-wrap button[type="submit"] .material-icons {
    font-size: 20px !important;
    color: #606060 !important;
    opacity: 1 !important;
  }
}