/* ============================================================
   UIT 站点外观对齐层
   目标：让开源版 handsome-oss 的外观尽量贴近参考站
   （uit.kokomi.ltd 使用的 handsome 9.2.1），仅使用 CSS 覆盖，
   不引入付费主题的加密代码。
   ============================================================ */

/* ---------- 全局文字颜色 ---------- */
body {
  color: #777;
}

/* ---------- 顶部横向 dock 菜单（参考站为白底浅灰） ---------- */
#aside.bg-white {
  background-color: #f9f9f9 !important;
  color: #777;
}
#aside.bg-white .navi > ul > li > a {
  color: #777;
}
#aside.bg-white .navi > ul > li > a:hover,
#aside.bg-white .navi > ul > li.active > a {
  color: #333;
  background-color: rgba(0, 0, 0, .03);
}

/* small-dock：图标与文字同一行，菜单条高度 40px */
.small-dock .aside-wrap {
  display: flex;
}
.small-dock .aside-wrap .navi-wrap {
  height: auto;
}
.small-dock .app-aside .navi > ul > li > a {
  height: auto;
  padding: 10px;
  text-align: left;
}
.small-dock .app-aside .navi > ul > li > a > i {
  display: inline;
  float: none;
  width: auto;
  line-height: 20px;
  margin: 0 6px 0 0;
  font-size: 14px;
}
.small-dock .app-aside .navi > ul > li > a > span {
  display: inline;
}
.small-dock .navbar-header {
  width: 195px;
}
.small-dock.app-aside-fix.app-header-fixed,
.small-dock.app-aside-fixed.app-header-fixed {
  padding-top: 90px;
}
.app-aside-dock .hbox {
  min-height: calc(100vh - 90px);
}

/* ---------- 内容区：居中列背景与卡片圆角 ---------- */
.app-content-body .center-part {
  position: relative;
  background: #f1f3f4;
}
.single-post.panel {
  border-radius: 6px;
  border: none;
  position: relative;
  overflow: hidden;
}

/* 首页标题的注音排版 */
ruby rt {
  font-size: 50%;
  letter-spacing: 1px;
}

/* ---------- 顶部导航细节 ---------- */
.app-header {
  box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
}
#header_left {
  width: 195px;
}
#header_left .navbar-brand {
  padding: 0 15px;
}
.navbar-brand-day {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.navbar-brand-day img {
  vertical-align: middle;
}

/* 参考站顶部只保留“时光机”入口，隐藏登录下拉（侧栏仍保留登录） */
.app-header .navbar-right > li.dropdown:last-child {
  display: none;
}

/* 搜索框样式贴近参考站的半透明样式 */
#searchform1 .input-group {
  background: rgba(255, 255, 255, .16) !important;
  border-radius: 4px;
  box-shadow: none;
}
#searchform1 .form-control {
  background: transparent !important;
  color: #fff !important;
  box-shadow: none !important;
}
#searchform1 .form-control::placeholder {
  color: rgba(220, 242, 248, .8);
}
#searchform1 .btn {
  background: transparent !important;
  color: #dcf2f8 !important;
}

/* ---------- 页脚 ---------- */
.footer_wrapper {
  padding: 15px 20px;
}
.app-footer {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---------- 正文内短代码组件对齐参考站 ---------- */

/* DPlayer：高度由视频原始比例决定，避免旧版播放器把容器高度算成 0 */
.dplayer-video-wrap {
  height: auto !important;
  aspect-ratio: 16 / 9;
}
.dplayer-video-wrap .dplayer-video {
  width: 100% !important;
  height: 100% !important;
}

/* 相册：参考站为 3 列、每张 321×321 的正方形网格 */
.handsome-album {
  display: grid !important;
  grid-template-columns: repeat(3, 321px) !important;
  gap: 20px 20px !important;
  margin: 12px 0 12px 40px !important;
}
.handsome-album a {
  display: block !important;
  width: 321px !important;
  height: 321px !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}
.handsome-album a img {
  width: 321px !important;
  height: 321px !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transition: transform .2s;
}
.handsome-album a:hover img {
  transform: scale(1.03);
}

/* 文章卡片：参考站为整行横向卡片（145px 高，左侧 145×145 图片） */
.handsome-postcard {
  display: flex !important;
  width: 100% !important;
  height: 145px !important;
  margin: 20px 0 !important;
  padding: 12px !important;
  border: none !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08) !important;
  text-decoration: none !important;
  color: inherit !important;
  overflow: hidden !important;
}
.handsome-postcard-thumb {
  flex: 0 0 145px !important;
  width: 145px !important;
  height: 145px !important;
  margin: -12px 20px -12px -12px !important;
  overflow: hidden !important;
  background: #f0f3f4 !important;
}
.handsome-postcard-thumb img {
  width: 145px !important;
  height: 145px !important;
  object-fit: cover !important;
  display: block !important;
}
.handsome-postcard-body {
  flex: 1 1 auto !important;
  min-width: 0;
  padding: 0 !important;
}
.handsome-postcard-body h3 {
  margin: 0 0 10px !important;
  font-size: 17px !important;
  line-height: 28px !important;
  font-weight: 700 !important;
  color: #58666e !important;
}
.handsome-postcard-body p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 28px !important;
  color: #58666e !important;
}

/* 选项卡：参考站为白底、49px 导航、15px 内边距 */
.handsome-tabs {
  margin: 0 0 15px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}
.handsome-tabs .nav-tabs {
  background: #fff;
}
.handsome-tabs .nav-tabs > li > a {
  padding: 10px 15px !important;
  line-height: 28px !important;
}
.handsome-tabs .tab-content {
  padding: 15px !important;
  border: 1px solid #e5e9ef !important;
  border-top: 0 !important;
  background: #fff !important;
}

/* 移动端：相册与卡片自适应 */
@media (max-width: 768px) {
  .handsome-album {
    grid-template-columns: 1fr !important;
    margin-left: 0 !important;
  }
  .handsome-album a,
  .handsome-album a img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
  .handsome-postcard {
    height: auto !important;
  }
}

/* ---------- 细节尺寸对齐 ---------- */
/* 首页标题字号（参考站 30px） */
.center-part > header h1 {
  font-size: 30px;
}

/* 顶部导航右半区与 195px 的左侧 logo 区严格衔接 */
#header_right.navbar-collapse {
  margin-left: 195px !important;
}
#header_left {
  float: left;
}

/* 页脚：参考站为 10px 内边距、13px 字号、#f9f9f9 背景 */
.footer_wrapper {
  padding: 10px !important;
  font-size: 13px;
  line-height: 18.5714px;
  background-color: #f9f9f9 !important;
}
.app-footer {
  padding: 10px 0 !important;
}

/* 引用块：参考站为浅灰底色 + 左侧细边框 */
.entry-content blockquote {
  background: #f3f5f7;
  border: 0;
  border-left: 3px solid #dde6e9;
  padding: 13px 45px;
  color: #555;
}

/* 选项卡内的横幅配图：参考站铺满宽度、固定 300px 高 */
.handsome-tabs .tab-content .light-link > img {
  width: 100% !important;
  height: 300px !important;
  object-fit: cover;
}

/* ---------- 友情链接页 ---------- */
#post-panel .title-icons {
  margin-right: 8px;
  color: #23b7e5;
}
#post-panel .link-card {
  display: block;
  min-height: 69px;
  margin-bottom: 5px;
  padding: 15px;
  background: #fff;
  text-decoration: none;
}
#post-panel .link-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f3f4;
}
#post-panel .link-avatar img.img-square {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
#post-panel .link-name {
  font-size: 14px;
  font-weight: 500;
  color: #58666e;
}
#post-panel .link-desc {
  display: block;
  margin-top: 6px;
  font-size: 12px;
}
#post-panel .box-shadow-wrap-lg {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

/* ---------- 右侧栏：与参考站一致 ---------- */
#tabs-4 .tab-pane .widget-title {
  display: none;
}
#widget-tabs-4-hots .thumb-sm {
  display: none;
}
#widget-tabs-4-hots .list-group-item .clear {
  margin-left: 0 !important;
}

/* ---------- 时光机页 ---------- */
#rightAside .contact-avatar,
#rightAside .contact-avatar img {
  width: 40px;
  height: 40px;
}
#rightAside .contact-avatar img {
  object-fit: cover;
  border-radius: 4px;
}
#time_content .social_icon .btn-icon {
  margin-right: 4px;
}
#tag_list .nav-sub > li > a {
  display: block;
  padding: 8px 10px;
}

/* ---------- 右侧悬浮外观设置（参考站齿轮） ---------- */
.uit-settings {
  position: fixed;
  right: 0;
  top: 165px;
  z-index: 1100;
  display: flex;
  align-items: flex-start;
}
.uit-settings-btn {
  width: 43px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 20px 0 0 20px;
  background: #f9f9f9;
  color: #777;
  font-size: 16px;
  line-height: 40px;
  cursor: pointer;
  box-shadow: -3px 0 2px rgba(0, 0, 0, .06);
}
.uit-settings-panel {
  display: none;
  width: 240px;
  margin-right: 0;
  background: #fff;
  border-radius: 6px 0 0 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
  overflow: hidden;
}
.uit-settings.active .uit-settings-panel {
  display: block;
}
.uit-settings-heading {
  padding: 12px 15px;
  border-bottom: 1px solid #edf1f2;
  font-size: 14px;
  color: #58666e;
}
.uit-settings-body {
  padding: 10px 15px 14px;
}
.uit-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  font-size: 13px;
  color: #58666e;
}
@media (max-width: 768px) {
  .uit-settings { top: 115px; }
}