/* ==========================================================================
   Q 版（卡通可爱）统一视觉主题 —— 跨系统共享皮肤
   设计基调：糖果色 + 大圆角 + 厚描边 + 软投影 + 弹跳动效
   部署：所有站点统一通过 /qtheme/q-theme.css 引用（nginx alias 到 /var/www/qtheme）
   配套：/qtheme/q-sys-<系统代码>.css —— 各系统主题色与品牌面桥接层
   原则：只重置「视觉」（颜色/圆角/字体/描边/投影/动效），不改结构契约与类名，
         保证任何系统自身的 JS 依赖的类名、层级、显隐逻辑完全不变。
   ========================================================================== */

/* 站酷快乐体（子集化，自托管；服务器在国内，不依赖任何外部 CDN） */
@font-face {
  font-family: "Q Cute";
  src: url("/qtheme/fonts/q-theme.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* —— 糖果色令牌（各系统可用 q-sys-*.css 覆盖 --q-primary 系列）—— */
  --q-primary: #1e3a8a;
  --q-primary-d: #2f5fd0;
  --q-primary-l: #e8eefc;
  --q-primary-grad: linear-gradient(135deg, #1e3a8a 0%, #6f93e0 100%);

  --q-accent: #12c7a0;
  --q-accent-d: #0fa686;
  --q-ok: #12c7a0;
  --q-warn: #f5a524;
  --q-danger: #ff6b81;
  --q-info: #4cb8f5;
  --q-pink: #ff8fb1;
  --q-sky: #4cb8f5;
  --q-lemon: #ffc453;

  --q-bg: #f2f4ff;
  --q-bg2: #e6ecfa;
  --q-card: #ffffff;
  --q-line: #e1e8f6;
  --q-line2: #d9e2f5;
  --q-text: #2c3550;
  --q-muted: #8b93b8;
  --q-field: #f6f9ff;

  /* —— 大圆角体系 —— */
  --q-r-xl: 30px;
  --q-r-lg: 22px;
  --q-r-md: 16px;
  --q-r-sm: 11px;
  --q-r-pill: 999px;
  --q-bd: 2.5px;

  --q-sh: 0 6px 18px rgba(30, 58, 138, .10);
  --q-sh-h: 0 14px 30px rgba(30, 58, 138, .18);
  --q-sh-pop: 0 20px 48px rgba(30, 58, 138, .22);

  --q-f-cute: "Q Cute", "PingFang SC", "Hiragino Sans GB", "YouYuan", "幼圆",
              "Microsoft YaHei UI", "Microsoft YaHei",
              "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  --q-f-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
              "Segoe UI", system-ui, -apple-system,
              "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  --q-f-emoji: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

/* ======================== 全局基底 ======================== */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--q-f-body) !important;
  color: var(--q-text) !important;
  background:
    radial-gradient(920px 520px at 8% -10%, #e7ecfa 0%, rgba(30, 58, 138, 0) 62%),
    radial-gradient(820px 480px at 102% 4%, #ffe9f3 0%, rgba(255, 233, 243, 0) 58%),
    radial-gradient(700px 520px at 50% 108%, #e4f7ff 0%, rgba(228, 247, 255, 0) 60%),
    var(--q-bg) !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
}

/* 标题/表头/按钮：走圆润字体，Q 版最主要的气质来源 */
h1, h2, h3, h4, h5, legend, th,
.card-title, .panel-title, .page-head-title, .brand-title, .modal-title,
.q-cute, .brand-name, .brand-text, .ph {
  font-family: var(--q-f-cute) !important;
  font-weight: 400 !important;
  letter-spacing: .4px;
}
h1, h2, h3 { color: var(--q-primary-d) !important; }

a { color: var(--q-primary-d); }

::selection { background: #d6e0f7; color: #2f4a8a; }

/* 圆润滚动条 */
* { scrollbar-width: thin; scrollbar-color: #cdd9ef transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
  background: #cdd9ef; border: 3px solid transparent;
  background-clip: content-box; border-radius: var(--q-r-pill);
}
::-webkit-scrollbar-thumb:hover { background: #b6c6e8; background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* 图标/表情容器：永远走 emoji 字体（彩色），且不参与文本翻译 */
.q-emoji, .vi, .nav-icon, .tab-ic, .metric-icon, .qa-icon, .tips-ico, .side .nv i {
  font-family: var(--q-f-emoji) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1;
}

/* ======================== 按钮 ======================== */
button, input[type="submit"], input[type="button"], input[type="reset"],
.btn, .btn-sm, .tb-btn, .q-btn, .seg-btn, .sub-tab, .preset {
  font-family: var(--q-f-cute) !important;
  border-radius: var(--q-r-pill) !important;
  font-weight: 400 !important;
  letter-spacing: .3px;
  transition: transform .16s cubic-bezier(.2, 1.4, .5, 1), box-shadow .16s, filter .16s !important;
}
button:hover:not(:disabled), .btn:hover, .tb-btn:hover, .q-btn:hover {
  transform: translateY(-1.5px);
  box-shadow: var(--q-sh-h);
}
button:active:not(:disabled), .btn:active, .q-btn:active { transform: translateY(0) scale(.98); }

/* 主按钮：糖果渐变胶囊 */
.btn-primary, .btn.pri, .btn.primary, .btn-block.btn-primary,
button.primary, .pri, .q-btn.primary, input[type="submit"] {
  background: var(--q-primary-grad) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(30, 58, 138, .30) !important;
}
.btn-primary:hover, .pri:hover, .q-btn.primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 12px 26px rgba(30, 58, 138, .40) !important;
}
/* 幽灵按钮：白底描边 */
.btn-ghost, .ghost, .btn.gray, .btn-gray {
  background: #fff !important;
  border: var(--q-bd) solid var(--q-line) !important;
  color: var(--q-text) !important;
}
.btn-ghost:hover, .ghost:hover { border-color: #c2d1ef !important; color: var(--q-primary-d) !important; }
/* 危险按钮 */
.btn-red, .btn.danger, .danger .btn, .btn-danger {
  background: linear-gradient(135deg, #ff8095, #ff6b81) !important;
  border: 0 !important; color: #fff !important;
  box-shadow: 0 6px 16px rgba(255, 107, 129, .28) !important;
}

/* ======================== 表单控件 ======================== */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):not([type="range"]),
select, textarea {
  border: var(--q-bd) solid var(--q-line) !important;
  border-radius: var(--q-r-md) !important;
  background: var(--q-field) !important;
  color: var(--q-text) !important;
  font-family: var(--q-f-body) !important;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus, textarea:focus {
  outline: none !important;
  border-color: #aebfe8 !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(30, 58, 138, .13) !important;
}
select { border-radius: var(--q-r-md) !important; padding-right: 26px; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--q-primary); width: 16px; height: 16px; }
label { color: var(--q-muted); font-weight: 700; }
::placeholder { color: #aab6cf !important; }

/* ======================== 卡片 / 面板 / 弹层 ======================== */
.card, .panel, .box, .sheet, .wrap-card, .modal, .modal-card, .modal-box, .dialog,
.dialog-box, .q-modal-card, .login-box, .login-card, .qa-card, .metric-card,
.venue-card, .stat-card, .dev-card, .dev-reset-card, .tips-pop, .dropdown-menu,
.nv-sub, .side, .content, .main, .tbl-wrap, .table-wrap, .items, .preview {
  border-radius: var(--q-r-lg) !important;
}
.card, .panel, .box, .sheet, .modal-card, .modal-box, .login-box, .login-card,
.qa-card, .metric-card, .dev-card, .dev-reset-card {
  box-shadow: var(--q-sh) !important;
}
.card, .panel, .box, .login-box, .login-card, .modal-card, .modal-box {
  border: var(--q-bd) solid var(--q-line) !important;
}
.card:hover, .metric-card:hover, .qa-card:hover {
  box-shadow: var(--q-sh-h) !important;
  transition: transform .18s cubic-bezier(.2, 1.3, .5, 1), box-shadow .18s !important;
}

/* 小徽章 / 标签 / 胶囊 */
.badge, .chip, .tag, .pill, .u-pill, .seg, .seg-btn, .step,
[class*="tag-"], .status-pill, .nav-badge, .brand-badge, .mode-badge {
  border-radius: var(--q-r-pill) !important;
}
.badge, .chip, .tag, .pill, .u-pill, .nav-badge { font-family: var(--q-f-cute) !important; }
.badge { background: var(--q-primary-grad) !important; }

/* 侧栏导航：胶囊化 */
.sidebar, .side { background: var(--q-card) !important; }
.nav-item, .nv, .sub-tab, .tab, .tabbar .tab {
  border-radius: var(--q-r-md) !important;
  transition: background .16s, color .16s, transform .16s !important;
}
.nav-item:hover, .nv:hover { transform: translateX(2px); }

/* 表格：只加圆角与裁剪，**不改 border-collapse**——
   各系统数据表用 collapse 把 1px 边框合并成细线，一旦改成 separate 会变成 2px 双线，
   属于可见回归，故此处刻意不动。表头用糖果底 + 圆润字体。 */
table { border-radius: var(--q-r-md) !important; overflow: hidden; }
table thead th, table th {
  background: var(--q-primary-l) !important;
  color: var(--q-primary-d) !important;
  font-family: var(--q-f-cute) !important;
  font-weight: 400 !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: var(--q-bd) solid var(--q-line2) !important;
}
table td, table th { border-color: var(--q-line) !important; }
table tbody tr:hover td { background: #f6f9ff !important; }
.tbl-wrap, .table-wrap { border: var(--q-bd) solid var(--q-line) !important; background: var(--q-card) !important; box-shadow: var(--q-sh) !important; overflow: auto !important; }

/* 提示条 */
.msg, .alert, .note, .hint, .banner, .offline-banner {
  border-radius: var(--q-r-md) !important;
  font-family: var(--q-f-body) !important;
}

/* 模态遮罩：轻雾感 */
.modal-mask, .sheet-mask, .mask, .overlay {
  background: rgba(30, 58, 138, .34) !important;
  backdrop-filter: blur(3px);
}

/* ======================== 动效 ======================== */
@keyframes q-pop { from { transform: scale(.94); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes q-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-16px) } }
@keyframes q-fade-up { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: translateY(0) } }
.modal-card, .modal-box, .dialog-box, .login-box, .login-card, .q-modal-card { animation: q-pop .34s cubic-bezier(.2, 1.45, .5, 1); }
.card, .metric-card, .qa-card { animation: q-fade-up .3s ease both; }

/* ======================== 登录页 Q 化 ======================== */
body:has(.login-box), body:has(.login-card), body:has(.login-wrap), body:has(.login-page) {
  background: linear-gradient(135deg, #2f5fd0 0%, #6f93e0 38%, #ff9dc0 100%) !important;
}
.login-box, .login-card {
  border: 4px solid #fff !important;
  box-shadow: var(--q-sh-pop) !important;
}
.login-box h1, .login-card h1, .login-brand, .brand-main,
.login-box .logo, .login-logo, .flogo, .login-wf-logo {
  font-family: var(--q-f-cute) !important;
}
.login-box .logo, .login-logo, .flogo, .login-wf-logo {
  border-radius: var(--q-r-lg) !important;
  background: linear-gradient(150deg, #e9f0fb, #ffe6f1) !important;
  color: var(--q-primary-d) !important;
  box-shadow: inset 0 0 0 3px #fff, 0 8px 18px rgba(30, 58, 138, .18) !important;
}

/* ======================== 工具类 ======================== */
.q-rounded { border-radius: var(--q-r-lg) !important; }
.q-pill { border-radius: var(--q-r-pill) !important; }
.q-shadow { box-shadow: var(--q-sh) !important; }
.q-hidden { display: none !important; }

/* 打印时保持朴素 */
@media print {
  body { background: #fff !important; }
  .card, .panel, .sheet { box-shadow: none !important; border-color: #ddd !important; }
}