/* ============================================================================
   GP 统一设计系统（与 Flask 版一致；保留红涨蓝跌品牌色）
   ========================================================================== */
:root{
  --bg:#F5F6F8;
  --surface:#FFFFFF;
  --border:#E2E5EA;
  --border-soft:#EDEFF2;
  --text:#1F2733;
  --text-soft:#5B6472;
  --text-faint:#8A93A1;
  --navy:#1F2D3D;
  --navy-2:#2C3E50;
  --brand:#00A8FF;
  --brand-dark:#0097E6;
  --brand-soft:#E6F4FF;
  --up:#E84118;     /* 涨 / 主力流入 红 */
  --down:#00A8FF;   /* 跌 / 主力流出 蓝 */
  --green:#1F9D6B;
  --danger:#C4432F;
  --radius:10px;
  --radius-sm:6px;
  --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  --shadow-lg:0 6px 24px rgba(16,24,40,.14);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter','Microsoft YaHei','PingFang SC','Helvetica Neue',Arial,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
.topbar{
  background:linear-gradient(180deg,#22303f,#1F2D3D);
  color:#fff; height:60px; display:flex; align-items:center; gap:18px;
  padding:0 22px; position:sticky; top:0; z-index:100;
  box-shadow:0 1px 0 rgba(255,255,255,.04),0 2px 10px rgba(0,0,0,.12);
}
.topbar .brand{font-size:17px; font-weight:800; letter-spacing:.3px; display:flex; align-items:center; gap:10px;}
.topbar .brand .logo{width:30px;height:30px;border-radius:8px;background:var(--brand);
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:15px;}
.topbar .nav{display:flex; gap:6px; margin-left:8px;}
.topbar .nav a{color:#AEB9C6; text-decoration:none; padding:7px 14px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:500; transition:background .12s,color .12s;}
.topbar .nav a:hover{background:rgba(255,255,255,.08); color:#fff;}
.topbar .nav a.active{background:var(--brand); color:#fff; font-weight:700;}
.topbar .ctrl{display:flex; gap:10px; align-items:center; margin-left:auto; flex-wrap:wrap; justify-content:flex-end;}
.topbar .ctrl label{display:flex; align-items:center; gap:6px; font-size:13px; color:#C7D0DB; cursor:pointer;}
.topbar .who{color:#C7D0DB; font-size:13px;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);}
.card .label{font-size:12px; color:var(--text-faint);}
.card .val{font-size:20px; font-weight:800; margin-top:4px; font-variant-numeric:tabular-nums; line-height:1.25;}
.card .val.pos{color:var(--up);} .card .val.neg{color:var(--down);}
.summary{display:flex; gap:14px; padding:18px 22px; flex-wrap:wrap;}
.summary .card{padding:13px 18px; min-width:150px; flex:0 1 auto;}

.charts{display:flex; gap:16px; padding:0 22px 16px; flex-wrap:wrap;}
.chart-box{flex:1 1 460px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); min-width:0;}
.chart-box h3{font-size:14px; font-weight:700; margin:0 0 10px; color:var(--text-soft);}
.chart{width:100%; height:360px;}

.table-wrap{padding:6px 22px 30px;}
table.tbl{width:100%; border-collapse:separate; border-spacing:0; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);}
table.tbl thead th{text-align:right; font-size:11.5px; font-weight:700; color:var(--text-faint);
  text-transform:uppercase; letter-spacing:.3px; padding:12px 14px; background:#FAFBFC;
  border-bottom:1px solid var(--border); cursor:pointer; user-select:none; position:sticky; top:60px; z-index:5; white-space:nowrap;}
table.tbl thead th:first-child, table.tbl tbody td:first-child{text-align:left;}
table.tbl tbody td{padding:11px 14px; text-align:right; font-size:13px; border-bottom:1px solid var(--border-soft);
  font-variant-numeric:tabular-nums; white-space:nowrap;}
table.tbl tbody tr:last-child td{border-bottom:none;}
table.tbl tbody tr:hover{background:#FAFBFC;}

.pos{color:var(--up);} .neg{color:var(--down);}
.pill{display:inline-block; padding:1px 9px; border-radius:12px; font-size:12px; font-weight:600;}

.btn{font-family:inherit; font-size:14px; font-weight:600; padding:9px 16px; border-radius:var(--radius-sm);
  border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
  transition:filter .12s,background .12s,transform .04s;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--brand); color:#fff;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-primary:disabled{background:#C6CBD3; cursor:not-allowed; filter:none;}
.btn-ghost{background:rgba(255,255,255,.10); color:#fff; border:1px solid rgba(255,255,255,.22);}
.btn-ghost:hover{background:rgba(255,255,255,.18);}
.btn-outline{background:#fff; color:var(--brand); border:1px solid var(--border);}
.btn-outline:hover{background:#F7F8FA;}
.btn-sm{padding:6px 12px; font-size:13px;}

input,select,textarea{font-family:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:#fff; color:var(--text); outline:none;}
input:focus,select:focus,textarea:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(0,168,255,.15);}
.topbar select, .topbar input{background:rgba(255,255,255,.96); color:var(--text); padding:6px 10px; font-size:13px;}

.hint{font-size:12px; color:var(--text-faint);}
.section-title{font-size:15px; font-weight:700; color:var(--text);}

.badge{display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:20px;}
.badge .dot{width:6px;height:6px;border-radius:50%;}
.badge-up{background:#FDECEA; color:var(--up);} .badge-up .dot{background:var(--up);}
.badge-down{background:#E6F4FF; color:var(--down);} .badge-down .dot{background:var(--down);}

/* 右键菜单 */
.ctx-menu{position:fixed; z-index:10000; background:#fff; border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow-lg); padding:8px; min-width:210px; font-size:13px;}
.ctx-menu .ctx-title{font-weight:700; padding:4px 8px 8px; border-bottom:1px solid var(--border-soft); margin-bottom:6px;}
.ctx-menu .ctx-groups div{padding:6px 8px; cursor:pointer; border-radius:6px; display:flex; align-items:center; gap:6px;}
.ctx-menu .ctx-groups div:hover{background:#F1F2F6;}
.ctx-menu .ctx-new{margin-top:8px; border-top:1px solid var(--border-soft); padding-top:8px; display:flex; gap:6px;}
.ctx-menu .ctx-new input{flex:1; padding:5px 8px; font-size:12px;}
.ctx-menu .ctx-new button{padding:5px 10px; font-size:12px;}

/* 弹窗 */
.modal{position:fixed; inset:0; background:rgba(16,20,26,.5); z-index:10001; display:flex; align-items:center; justify-content:center; padding:20px;}
.modal-box{background:#fff; border-radius:var(--radius); width:min(720px,94vw); max-height:84vh; box-shadow:var(--shadow-lg); display:flex; flex-direction:column; overflow:hidden;}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--navy); color:#fff; font-size:15px; font-weight:700;}
.modal-head .x{background:var(--up); border:none; color:#fff; padding:3px 11px; border-radius:6px; cursor:pointer; font-size:13px;}
.modal-body{padding:16px 18px; overflow:auto;}
.grp-card{border:1px solid var(--border-soft); border-radius:8px; padding:10px 12px; margin-bottom:12px;}
.grp-card .grp-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.grp-card .grp-name{font-weight:700; font-size:14px;}
.grp-card .grp-del{background:#888; color:#fff; border:none; padding:3px 10px; font-size:12px; border-radius:6px; cursor:pointer;}
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{display:inline-flex; align-items:center; gap:4px; background:var(--brand-soft); border:1px solid #cfe3fb; color:var(--brand); border-radius:12px; padding:2px 8px; font-size:12px;}
.chip b{cursor:pointer; color:var(--up); font-weight:700;}
.empty-hint{text-align:center; color:#999; padding:40px 10px; font-size:14px; line-height:1.8;}
.empty-hint code{background:#F1F2F6; padding:2px 6px; border-radius:4px; color:var(--up);}

/* 状态条 */
.status{padding:10px 22px; font-size:13px;}
.status .live{color:var(--up); font-weight:700;}
.status .err{color:var(--danger); font-weight:700;}
.status .fallback{color:#E1B12C; font-weight:700;}

/* 登录 */
.login-wrap{background:linear-gradient(135deg,#1F2D3D,#2C3E50); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{background:#fff; width:380px; max-width:94vw; border-radius:14px; padding:32px 28px; box-shadow:var(--shadow-lg);}
.login-card h1{font-size:20px; text-align:center; color:var(--navy); margin:0 0 6px;}
.login-card .sub{text-align:center; color:var(--text-faint); font-size:13px; margin-bottom:22px;}
.login-card label{display:block; font-size:13px; color:var(--text-soft); margin-bottom:6px;}
.login-card input{width:100%; padding:10px 12px; margin-bottom:14px;}
.login-card .row{display:flex; gap:8px; align-items:center; margin-bottom:14px;}
.login-card .row input{flex:1; margin-bottom:0;}
.login-card .row button{white-space:nowrap; height:40px;}
.msg{min-height:18px; font-size:13px; text-align:center; margin-bottom:10px;}
.msg.err{color:var(--up);} .msg.ok{color:var(--green);}
.footer{text-align:center; color:var(--text-faint); font-size:12px; margin-top:14px;}

/* 情绪卡片 */
.emotion-cards{display:flex; gap:14px; flex-wrap:wrap; padding:0 4px 10px;}
.seg{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:12px 18px; box-shadow:var(--shadow); min-width:130px;}

/* 悬停弹窗 */
#rowPopup{position:fixed; z-index:9999; display:none; background:#fff; border:1px solid var(--border);
  border-radius:10px; box-shadow:var(--shadow-lg); padding:8px; width:560px; height:340px; pointer-events:none;}
#rowPopupTitle{font-size:13px; font-weight:700; margin-bottom:4px;}

/* 自选星标 */
.star-on{color:var(--up); cursor:pointer;} .star-off{color:#ccc; cursor:pointer;}

/* 表头排序指示 + 现代交互 */
table.tbl thead th{transition:background .12s,color .12s;}
table.tbl thead th:hover{background:#F0F3F7; color:var(--text);}
table.tbl thead th::after{content:''; display:inline-block; margin-left:5px; opacity:.35; font-size:10px; transition:opacity .12s,transform .12s;}
table.tbl thead th.sort-asc::after{content:'\25B2'; opacity:1; color:var(--brand);}
table.tbl thead th.sort-desc::after{content:'\25BC'; opacity:1; color:var(--brand);}
table.tbl thead th.th-narrow{width:42px; text-align:center;}
table.tbl tbody td.th-narrow{text-align:center;}
table.tbl tbody tr{transition:background .1s, box-shadow .1s, transform .06s; cursor:default;}
table.tbl tbody tr:hover{background:#F6FAFF; box-shadow:inset 3px 0 0 var(--brand);}

/* 表头区域 + 副标题 */
.table-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 8px;}
.h3-sub{font-weight:500; color:var(--text-faint); font-size:12px; margin-left:6px;}
.table-meta{font-size:12px; color:var(--text-faint);}
.table-tip{font-size:12px; color:var(--text-faint); margin-top:8px; line-height:1.6;}
.table-tip b{color:var(--brand);}

/* 加载骨架 */
.sk{display:inline-block; width:60%; height:11px; border-radius:4px;
  background:linear-gradient(90deg,#eef0f3 25%,#e3e6ea 37%,#eef0f3 63%);
  background-size:400% 100%; animation:sk 1.2s ease-in-out infinite;}
@keyframes sk{0%{background-position:100% 0;}100%{background-position:-100% 0;}}
table.tbl tbody tr:has(.sk){background:#fff;}

/* Toast 轻提示 */
.toast{position:fixed; left:50%; bottom:32px; transform:translate(-50%,16px);
  background:var(--navy); color:#fff; padding:10px 18px; border-radius:10px; font-size:13px; font-weight:600;
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:10002; max-width:90vw;}
.toast.show{opacity:1; transform:translate(-50%,0);}
.toast.ok{background:var(--green);}
.toast.err{background:var(--up);}

/* 自定义滚动条 */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:#cdd3db; border-radius:6px; border:2px solid var(--bg);}
::-webkit-scrollbar-thumb:hover{background:#b6bdc7;}
::-webkit-scrollbar-track{background:transparent;}

/* 顶栏控件微调 */
.topbar .ctrl .chk{user-select:none;}
.topbar select, .topbar input[type=date]{cursor:pointer;}

/* 图表卡片标题行 */
.chart-box h3 .h3-sub{font-weight:500; color:var(--text-faint); font-size:12px;}

/* 弹窗关闭按钮悬停 */
.modal-head .x{transition:filter .12s, transform .06s;}
.modal-head .x:hover{filter:brightness(1.1);}
.modal-head .x:active{transform:translateY(1px);}