/* ============================================================
   premium.css —— 商业化产品级精修层（最后加载，统一上浮）
   目标：从"演示 demo 样式" → "商用 SaaS 控制台"（对标 阿里云 / 火山引擎 / Linear / Ant Design Pro）
   原则：克制的层次与深度、精炼的微交互、统一圆角与柔和阴影体系、品牌深蓝点缀
   保持既有深机构蓝 #1B3C82 institutional 调性，仅做"产品级"打磨，不改信息架构。
   ============================================================ */

:root {
  --pm-sh-xs: 0 1px 2px rgba(16,33,72,.05);
  --pm-sh-sm: 0 1px 3px rgba(16,33,72,.06), 0 1px 2px rgba(16,33,72,.035);
  --pm-sh-md: 0 6px 16px rgba(16,33,72,.08), 0 2px 5px rgba(16,33,72,.04);
  --pm-sh-lg: 0 16px 40px rgba(16,33,72,.14), 0 4px 10px rgba(16,33,72,.06);
  --pm-ring: 0 0 0 3px rgba(27,60,130,.15);
  --pm-navy: #1B3C82; --pm-navy-d: #16336f; --pm-navy-l: #2b5099;
  --pm-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ---------- 统一过渡基线（克制，不缩放） ---------- */
.card, .ip-card, .kpi, .gov-kpi, .ae-kpi, .btn, .login-btn, .nav-item,
.scene-card, .rt-tool, .kg-comm, .mini-chip, .cmpl-badge, .ip-chip,
.role-menu-item, .dropdown-item, .gov-act, .tab, .login-sso-btn {
  transition: box-shadow .2s var(--pm-ease), transform .18s var(--pm-ease),
    border-color .18s var(--pm-ease), background-color .18s var(--pm-ease), color .15s var(--pm-ease);
}

/* ---------- 卡片：描边 + 柔和分层阴影；hover 加深（含图表卡，不位移避免重排） ---------- */
.card, .ip-card {
  box-shadow: var(--pm-sh-sm);
  border-color: #e9edf5;
  border-radius: 12px;
}
.card:hover, .ip-card:hover { box-shadow: var(--pm-sh-md); border-color: #e2e8f2; }
.card-pad { border-radius: 12px; }

/* 可点击卡片：hover 轻浮起 */
.scene-card:hover, .rt-tool:hover, .kg-comm:hover {
  box-shadow: var(--pm-sh-md); transform: translateY(-2px); border-color: #d8e0ee;
}

/* ---------- KPI 卡：恢复深度 + hover 浮起 + 顶部品牌微高光 ---------- */
.kpi, .gov-kpi, .ae-kpi {
  box-shadow: var(--pm-sh-sm) !important;
  border-radius: 12px;
}
.kpi:hover, .gov-kpi:hover, .ae-kpi:hover { box-shadow: var(--pm-sh-md) !important; transform: translateY(-2px); }
.kpi::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--pm-navy), #3a64b4 60%, transparent);
  opacity: .85;
}

/* ---------- 按钮：恢复品牌渐变 + 柔和阴影（覆盖 v2 的扁平 !important） ---------- */
.btn.primary, .btn.ai {
  background: linear-gradient(180deg, var(--pm-navy-l), var(--pm-navy)) !important;
  border-color: transparent !important; color: #fff !important;
  box-shadow: 0 1px 2px rgba(16,33,72,.18), 0 2px 8px rgba(27,60,130,.24) !important;
}
.btn.primary:hover, .btn.ai:hover {
  background: linear-gradient(180deg, #2f5aa8, var(--pm-navy-d)) !important;
  box-shadow: 0 2px 4px rgba(16,33,72,.2), 0 6px 16px rgba(27,60,130,.3) !important;
  transform: translateY(-1px);
}
.btn.primary:active, .btn.ai:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(16,33,72,.2) !important; }
.btn { border-radius: 9px; }
.btn.ghost:hover, .btn.sm:hover { border-color: #c3cee0; background: #f4f7fc; }
.btn:focus-visible { outline: none; box-shadow: var(--pm-ring); }

/* ---------- 顶栏：增加纵深 + 玻璃质感搜索框 ---------- */
.topbar { box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 4px 16px rgba(8,18,40,.22); }
.global-search {
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(150,178,235,.18) !important;
  border-radius: 10px !important;
}
.global-search:focus-within {
  background: rgba(255,255,255,.13) !important;
  border-color: rgba(120,160,235,.55) !important;
  box-shadow: 0 0 0 3px rgba(91,141,239,.16);
}
.global-search input::placeholder { color: rgba(199,214,239,.55); }
.brand-mark { background: linear-gradient(140deg, #2b5099, var(--pm-navy)) !important; box-shadow: 0 3px 10px rgba(27,60,130,.45) !important; border-radius: 9px !important; }
.region-tag, .role-switch-btn { transition: background .15s var(--pm-ease); }
.user-chip { border-radius: 10px; padding: 4px 6px; transition: background .15s var(--pm-ease); }
.user-chip:hover { background: rgba(255,255,255,.07); }

/* ---------- 侧栏：active 左强调条 + 精炼悬浮 ---------- */
.nav-item { position: relative; border-radius: 9px; }
.nav-item:hover { background: rgba(120,160,235,.10); }
.nav-item.active { background: rgba(120,160,235,.16) !important; }
.nav-item.active::before {
  content: ""; position: absolute; left: -2px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 17px; border-radius: 0 3px 3px 0; background: #6f9bf2;
  box-shadow: 0 0 8px rgba(111,155,242,.6);
}
.nav-group-head { letter-spacing: .3px; }
.nav-new { box-shadow: 0 1px 3px rgba(27,60,130,.28); }

/* ---------- 表格：弱化表头 + 精炼行悬浮 ---------- */
.cmm thead th, .ip-ch thead th { background: #f7f9fc; letter-spacing: .2px; }
.cmm tbody tr, .ip-ch tbody tr { transition: background .12s var(--pm-ease); }
.cmm tbody tr:hover, .ip-ch tbody tr:hover { background: #f6f9fe; }

/* ---------- 输入 / 选择框：统一聚焦光环 ---------- */
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus,
.kg-sel:focus, .ip-input:focus { outline: none; box-shadow: var(--pm-ring); border-color: var(--pm-navy-l) !important; }
.kg-sel, .ip-input { border-radius: 9px; }

/* ---------- 标签 / 徽标 / 资质角标：精炼 ---------- */
.cmpl-badge { box-shadow: var(--pm-sh-xs); }
.mini-chip:hover { border-color: #c3cee0; background: #fff; }

/* ---------- 总览「平台建设板块」彩色卡：加纵深 + 顶部高光 + hover 浮起 ---------- */
.arch-platform { border-radius: 14px; box-shadow: 0 6px 18px rgba(16,33,72,.14); }
.arch-platform::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  background: linear-gradient(157deg, rgba(255,255,255,.16), rgba(255,255,255,0) 52%);
}
.arch-platform:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16,33,72,.22); }
.hero { border-radius: 16px; }
.hero-stat { transition: transform .18s var(--pm-ease); }

/* ---------- 弹层：更柔和的浮层阴影 ---------- */
.dropdown, .notif-dropdown, .role-menu, .modal, .drawer, .overlay-card { box-shadow: var(--pm-sh-lg) !important; }

/* ---------- 自定义滚动条（浅色区域，产品级细节） ---------- */
* { scrollbar-width: thin; scrollbar-color: #cdd5e3 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cdd5e3; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #b3bdce; border: 2px solid transparent; background-clip: content-box; }
.content.dark ::-webkit-scrollbar-thumb, .dark ::-webkit-scrollbar-thumb { background: #2a3c5c; background-clip: content-box; }

/* ---------- 登录页：产品级打磨 ---------- */
.login-card { box-shadow: var(--pm-sh-lg); border-radius: 16px; }
.login-btn {
  background: linear-gradient(180deg, var(--pm-navy-l), var(--pm-navy)) !important;
  box-shadow: 0 2px 8px rgba(27,60,130,.28) !important; border-radius: 10px !important;
}
.login-btn:hover { background: linear-gradient(180deg, #2f5aa8, var(--pm-navy-d)) !important; box-shadow: 0 6px 18px rgba(27,60,130,.34) !important; transform: translateY(-1px); }
.login-input { border-radius: 10px; }
.login-field:focus-within { box-shadow: var(--pm-ring); border-color: var(--pm-navy-l); }
.login-feat { transition: transform .18s var(--pm-ease), background .18s var(--pm-ease); }
.login-feat:hover { transform: translateY(-2px); }
.login-sso-btn:hover { border-color: var(--pm-navy-l); color: var(--pm-navy); background: #f4f7fc; }
.login-sso-btn.sso-real { flex: 1 1 100%; width: 100%; background: linear-gradient(180deg, var(--pm-navy-l), var(--pm-navy)); color: #fff; border-color: transparent; font-weight: 600; box-shadow: 0 2px 8px rgba(27,60,130,.28); }
.login-sso-btn.sso-real:hover { background: linear-gradient(180deg, #2f5aa8, var(--pm-navy-d)); color: #fff; border-color: transparent; }
.lb-mark { box-shadow: 0 4px 14px rgba(27,60,130,.4); }

/* ---------- 标题层级微调（更紧致专业） ---------- */
.page-title { letter-spacing: -.2px; }
.section-title { letter-spacing: .1px; }

/* ============================================================
   持续精修 R3：总览产品卡 / 账户菜单 / 留白节奏
   ============================================================ */

/* ① 总览「平台建设板块」彩色卡 → 信息密度更高的产品卡（状态点 + 实时指标） */
.arch-platform { display: flex; flex-direction: column; }
.ap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; position: relative; z-index: 1; }
.ap-ico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.16); color: #fff; }
.ap-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: rgba(255,255,255,.9); background: rgba(255,255,255,.14); border-radius: 20px; padding: 2px 9px 2px 8px; }
.ap-dot { width: 6px; height: 6px; border-radius: 50%; background: #6ee7a8; box-shadow: 0 0 0 3px rgba(110,231,168,.28); animation: ap-pulse 2.2s var(--pm-ease) infinite; }
@keyframes ap-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.arch-platform h4, .arch-platform p, .ap-list { position: relative; z-index: 1; }
.ap-metrics { display: flex; gap: 16px; margin: 11px 0 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.18); border-bottom: 1px solid rgba(255,255,255,.18); position: relative; z-index: 1; }
.ap-metrics > div { display: flex; flex-direction: column; }
.ap-metrics b { font-size: 16px; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; letter-spacing: -.2px; }
.ap-metrics span { font-size: 10.5px; color: rgba(255,255,255,.72); margin-top: 2px; }

/* ③ 账户菜单：身份头（头像 + 姓名 + 角色徽标 + 邮箱 + 组织） */
#userMenu { min-width: 244px; padding-top: 0; overflow: hidden; }
.user-menu-head { display: flex; gap: 11px; align-items: center; padding: 14px 14px 12px; border-bottom: 1px solid #eef1f6; background: linear-gradient(180deg, #f7f9fc, #fff); }
.umh-avatar { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(140deg, #2b5099, #1B3C82); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px; flex: none; box-shadow: 0 3px 10px rgba(27,60,130,.32); }
.umh-name { font-size: 13.5px; font-weight: 700; color: #1c2536; display: flex; align-items: center; gap: 7px; }
.umh-role { font-size: 10px; font-weight: 600; color: #1B3C82; background: #eaf0fb; border-radius: 4px; padding: 1px 6px; }
.umh-mail { font-size: 11.5px; color: #5b6473; margin-top: 3px; }
.umh-org { font-size: 11px; color: #8a93a3; margin-top: 1px; }

/* ② 留白节奏统一：区块标题与卡片内距更从容、一致（不动栅格列） */
.section-title { margin-top: 22px; }
.section-title:first-child { margin-top: 0; }
.card-head { padding: 13px 18px; }
.page.wide > .page-head { margin-bottom: 16px; }
.help-note { border-radius: 12px; padding: 14px 16px; }