/* 橘子门户 · Tabler 皮肤（深色）
   只负责品牌色、导航栏、服务卡片的细节；基础样式全部来自 tabler.min.css */

:root{
  --tblr-font-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  /* 深色基础色（Tabler 深色调色板实值，避免老浏览器不支持 light-dark() 时掉色）*/
  --tblr-body-bg:#111827;
  --tblr-body-color:#e5e7eb;
  --tblr-emphasis-color:#ffffff;
  --tblr-secondary-color:rgba(229,231,235,.75);
  --tblr-bg-surface:#1f2937;
  --tblr-bg-surface-secondary:#111827;
  --tblr-bg-surface-tertiary:#18252f;
  --tblr-tertiary-bg:#18252f;
  --tblr-secondary-bg:#1f2937;
  --tblr-border-color:#2d3c51;
  --tblr-border-color-translucent:rgba(255,255,255,.1);
  --tblr-primary:#8b5cf6;
  --tblr-primary-rgb:139,92,246;
  --accent:#8b5cf6;
  --accent-2:#a78bfa;
  --accent-dim:rgba(139,92,246,.14);
  --accent-glow:rgba(139,92,246,.3);
}

body{ -webkit-font-smoothing:antialiased; }

/* ---------- 顶部导航 ---------- */
.portal-nav{
  position:sticky; top:0; z-index:1020;
  background:color-mix(in srgb,var(--tblr-bg-surface) 88%,transparent);
  background:var(--tblr-bg-surface);
  border-bottom:1px solid var(--tblr-border-color);
  backdrop-filter:saturate(150%) blur(12px);
}
.navbar-brand{gap:11px;margin-right:auto}
.brand-mark{
  width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;font-size:19px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 6px 18px var(--accent-glow);
}
.brand-text{display:flex;flex-direction:column;line-height:1.25}
.brand-name{font-size:15.5px;font-weight:700;color:var(--tblr-emphasis-color)}
.brand-sub{font-size:11.5px;font-weight:400;color:var(--tblr-secondary-color)}
.navbar .navbar-nav{align-items:center}

/* 时钟 */
.clock-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:var(--tblr-border-radius);
  border:1px solid var(--tblr-border-color);background:var(--tblr-bg-surface-secondary);
  font-size:12.5px;font-family:var(--tblr-font-monospace);color:var(--tblr-secondary-color);
  white-space:nowrap;
}
.clock-pill .clock-time{color:var(--accent);font-weight:700;letter-spacing:.02em}

/* ---------- 服务卡片 ---------- */
.service-card{border:1px solid var(--tblr-border-color)}
.service-card .card-body{padding:16px 18px}
.service-icon{
  width:44px;height:44px;border-radius:var(--tblr-border-radius);flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;font-size:21px;
}
.min-w-0{min-width:0}
.service-title{font-size:15px;font-weight:600;color:var(--tblr-emphasis-color)}
.service-desc{font-size:12.5px;color:var(--tblr-secondary-color);line-height:1.55;margin-top:2px}
.service-host{
  display:flex;align-items:center;gap:6px;margin-top:14px;padding-top:12px;
  border-top:1px solid var(--tblr-border-color);
  font-size:12px;font-family:var(--tblr-font-monospace);color:var(--tblr-secondary-color);
}
.service-card:hover .service-host{color:var(--accent)}
.service-arrow{width:14px;height:14px;transition:transform .15s ease-out}
.service-card:hover .service-arrow{transform:translateX(3px)}


/* ---------- 让内容在视口内垂直居中（服务少时不至于大片留白）---------- */
.page-wrapper{display:flex;flex-direction:column;min-height:calc(100vh - 60px)}
.page-body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;padding:32px 0}
@media(max-width:768px){
  .page-wrapper{min-height:calc(100vh - 56px)}
  .page-body{justify-content:flex-start;padding:20px 0}
}


/* ---------- 服务图标（支持 emoji 或上传/外链图片）---------- */
.service-icon img{width:100%;height:100%;object-fit:cover;border-radius:var(--tblr-border-radius);display:block}

/* ---------- 页头 / 页脚 ---------- */
.page-title{letter-spacing:-.2px}
.footer{margin-top:24px}

/* ---------- 移动端 ---------- */
@media(max-width:768px){
  .brand-sub{display:none}
  .clock-pill{padding:5px 10px;font-size:11.5px}
  .clock-pill .clock-date{display:none}
  .service-card .card-body{padding:14px 15px}
  .service-icon{width:40px;height:40px;font-size:19px}
}


/* ---------- 图标统一 + 卡片观感（2026-09-16 UI 优化）---------- */
.icon-svg{width:21px;height:21px;display:block}
.service-icon{font-size:20px;line-height:1;font-variant-emoji:text}
.service-card{transition:border-color .16s ease-out,box-shadow .16s ease-out}
.service-card:hover{border-color:rgba(var(--tblr-primary-rgb),.5);box-shadow:0 6px 20px rgba(var(--tblr-primary-rgb),.14)}
.service-card .card-body{padding:18px 18px 16px}
.service-title{letter-spacing:-.1px}
@media(min-width:1200px){
  /* 四列时卡片矮一点，一行放得下更像"导航中心" */
  .service-card .card-body{padding:16px 16px 14px}
  .service-desc{font-size:12px}
}