/* ===== 星瀚财经 — 仿 QQ/163 门户风格（三栏版） ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 12px/1.7 "宋体", SimSun, "Microsoft YaHei", Arial, sans-serif; color: #333; background: #fff; }
a { color: #333; text-decoration: none; }
a:hover { color: #1565c0; text-decoration: underline; }
code { font-family: Consolas, Menlo, monospace; background: #f4f4f4; padding: 0 3px; border-radius: 3px; color: #1565c0; }

/* 通用：红涨绿跌 */
.up { color: #e22 !important; }
.down { color: #0a9a4a !important; }
.flat { color: #999 !important; }

/* ---------- 顶部细条 ---------- */
.topbar { background: #f5f5f5; border-bottom: 1px solid #eee; font-size: 12px; color: #666; }
.topbar-inner { width: 1180px; margin: 0 auto; padding: 4px 0; display: flex; justify-content: space-between; }
.topbar-right a { color: #666; }
.topbar-right .sep { color: #ccc; margin: 0 6px; }

/* ---------- logo + 搜索 ---------- */
.header { width: 1180px; margin: 0 auto; padding: 14px 0; }
.header-inner { display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: baseline; gap: 10px; flex: none; }
.logo-cn { font: 30px/1 "Microsoft YaHei", sans-serif; color: #1565c0; font-weight: 700; letter-spacing: 2px; }
.logo-en { font: 13px/1 Arial; color: #999; letter-spacing: 2px; }
.logo-sub { font-size: 12px; color: #999; }
.search { display: flex; flex: 1; max-width: 460px; }
.search input { width: 100%; height: 34px; border: 2px solid #1565c0; border-right: none; padding: 0 10px; outline: none; font-size: 13px; }
.search button { width: 72px; height: 34px; border: none; background: #1565c0; color: #fff; font-size: 14px; cursor: pointer; flex: none; }
.search button:hover { background: #0d4f9c; }


/* ---------- 蓝色频道导航 ---------- */
.nav { background: #1565c0; }
.nav-inner { width: 1180px; margin: 0 auto; display: flex; flex-wrap: wrap; }
.nav-inner a { color: #fff; padding: 0 15px; line-height: 38px; font-size: 15px; display: block; white-space: nowrap; }
.nav-inner a:hover { background: #0d4f9c; text-decoration: none; }
.nav-home { background: #0d4f9c; font-weight: 700; }


/* ---------- 三栏布局 ---------- */
.wrap { width: 1180px; margin: 12px auto; display: flex; gap: 10px; align-items: flex-start; }
.col-left { width: 200px; flex: none; }
.col-main { width: 670px; flex: none; }
.col-right { width: 290px; flex: none; }

/* ---------- 盒子通用 ---------- */
.box { border: 1px solid #d6e4f0; margin-bottom: 10px; background: #fff; }
.box-hd { display: flex; justify-content: space-between; align-items: center; background: #eaf2fb; border-bottom: 1px solid #d6e4f0; padding: 0 10px; }
.box-title { color: #0a5bb5; font: 14px/30px "Microsoft YaHei", sans-serif; font-weight: 700; }
.box-ops { color: #0a5bb5; font-size: 12px; }
.box-ops a { color: #0a5bb5; }
.box-bd { padding: 8px 10px; }
.box-ft { padding: 4px 10px; border-top: 1px solid #eee; color: #999; font-size: 11px; text-align: right; }
.loading { color: #999; padding: 20px; text-align: center; }

/* ---------- 左栏：频道导航 ---------- */
.left-nav { display: flex; flex-wrap: wrap; gap: 5px; }
.left-nav a { display: block; background: #f4f7fb; border: 1px solid #e3ebf4; color: #335; padding: 4px 9px; border-radius: 3px; font-size: 12px; }
.left-nav a:hover { background: #1565c0; color: #fff; border-color: #1565c0; text-decoration: none; }

/* 财经日历 */
.mini-list { list-style: none; }
.mini-list li { display: flex; justify-content: space-between; align-items: center; line-height: 26px; border-bottom: 1px dotted #eee; }
.mini-list li:last-child { border-bottom: none; }
.mini-list li > span:last-child { font-weight: 700; flex: none; }
.cal-d { color: #1565c0; font-weight: 700; flex: none; margin-right: 8px; }
.cal-t { color: #444; font-size: 12px; }

/* ---------- 中栏 ---------- */
/* 头条大图 */
.lead { border: 1px solid #eee; padding: 12px; margin-bottom: 10px; display: flex; gap: 14px; }
.lead-img { width: 300px; height: 180px; flex: none; overflow: hidden; display: block; }
.lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; background: #ddd; }
.lead-main { flex: 1; }
.lead-main h1 { font: 22px/1.3 "Microsoft YaHei", sans-serif; color: #1565c0; margin-bottom: 8px; }
.lead-sum { color: #555; font-size: 13px; line-height: 1.7; }
.lead-links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; border-top: 1px dashed #ddd; padding-top: 8px; }
.lead-links a { color: #1a5fb4; font-size: 13px; }

/* 区块标题 */
.sec-hd { border-bottom: 2px solid #1565c0; margin-bottom: 8px; padding-left: 8px; border-left: 4px solid #1565c0; }
.sec-hd .bt { color: #1565c0; font: 16px/30px "Microsoft YaHei", sans-serif; font-weight: 700; }

/* 要闻（密集） */
.yaowen { margin-bottom: 10px; }
.yaowen ul { list-style: none; columns: 2; column-gap: 24px; }
.yaowen li { line-height: 28px; border-bottom: 1px dotted #eee; break-inside: avoid; }
.yaowen li a:before { content: "·"; color: #1565c0; margin-right: 6px; font-weight: 700; }

/* 图文卡片 */
.cards { margin-bottom: 10px; }
.cards-row { display: flex; flex-wrap: wrap; gap: 8px; }
.card { width: calc((100% - 16px) / 3); flex: none; display: block; }
.card img { width: 100%; height: 122px; object-fit: cover; display: block; background: #ddd; border: 1px solid #eee; }
.card-cat { display: inline-block; background: rgba(21,101,192,.92); color: #fff; font-size: 11px; padding: 1px 6px; margin-top: -20px; position: relative; left: 4px; }
.card-t { display: block; font-size: 13px; line-height: 1.4; margin-top: 6px; color: #222; }
.card:hover .card-t { color: #1565c0; }

/* 图片新闻 */
.gallery { margin-bottom: 10px; }
.gal-row { display: flex; gap: 8px; }
.gal { width: 159px; flex: none; display: block; position: relative; }
.gal img { width: 100%; height: 94px; object-fit: cover; display: block; background: #ddd; border: 1px solid #eee; }
.gal-t { display: block; font-size: 12px; line-height: 1.4; margin-top: 4px; color: #333; }
.gal:hover .gal-t { color: #1565c0; }

/* 栏目列表两栏 */
.blocks-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.block { border: 1px solid #eee; }
.block-hd { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #1565c0; padding: 0 10px; background: #fafafa; }
.block-hd .bt { color: #1565c0; font: 15px/30px "Microsoft YaHei", sans-serif; font-weight: 700; border-left: 4px solid #1565c0; padding-left: 8px; margin-left: -10px; }
.block-hd .more { color: #999; font-size: 12px; }
.block-bd { padding: 6px 12px; }
.block-bd ul { list-style: none; }
.block-bd li { line-height: 26px; border-bottom: 1px dotted #eee; display: flex; justify-content: space-between; }
.block-bd li:last-child { border-bottom: none; }
.block-bd li .t { color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block-bd li .t:before { content: "·"; color: #1565c0; margin-right: 6px; font-weight: 700; }
.block-bd li .date { color: #bbb; font-size: 11px; flex: none; margin-left: 10px; }

/* ---------- 右栏 ---------- */
.stock-box { border-color: #1565c0; }
.stock-box .box-hd { background: #eef4fb; border-bottom: 1px solid #d6e4f0; }
.stock-box .box-title { color: #1565c0; }
.stock-box .box-ops a { color: #1565c0; }
.stock-table { width: 100%; border-collapse: collapse; }
.stock-table th { font-weight: normal; color: #999; font-size: 11px; text-align: right; padding: 3px 2px; border-bottom: 1px solid #f0f0f0; }
.stock-table th:first-child { text-align: left; }
.stock-table td { padding: 5px 2px; border-bottom: 1px dotted #eee; text-align: right; font-size: 13px; }
.stock-table td.name { text-align: left; color: #333; }
.stock-table td.name b { color: #222; }
.stock-table td.name small { color: #aaa; font-weight: normal; }
.stock-table tr.idx td.name { color: #0a5bb5; }

/* 自选股：迷你分时走势图 */
.stock-table th.th-spark { text-align: center; }
.stock-table td.spark { width: 62px; text-align: center; padding: 2px 0; }
.spark-svg { display: block; margin: 0 auto; }
.spark-na { color: #ccc; }

/* 头条榜 */
.rank { list-style: none; counter-reset: r; }
.rank li { display: flex; align-items: center; line-height: 27px; border-bottom: 1px dotted #eee; }
.rank li:last-child { border-bottom: none; }
.rank .rk { width: 18px; height: 18px; line-height: 18px; text-align: center; background: #cfcfcf; color: #fff; font-size: 11px; margin-right: 8px; flex: none; border-radius: 2px; }
.rank li.top .rk { background: #1565c0; }
.rank li a { flex: 1; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank li a:hover { color: #1565c0; }
.rank .hot { background: #ff7a00; color: #fff; font-size: 10px; padding: 0 4px; border-radius: 2px; margin-left: 4px; flex: none; }

/* ---------- 页脚 ---------- */
.footer { width: 1180px; margin: 20px auto; border-top: 1px solid #eee; padding-top: 12px; text-align: center; color: #999; font-size: 12px; }
.footer-links { margin-bottom: 8px; }
.footer-links a { color: #1a5fb4; margin: 0 4px; }
.footer-links span { color: #ccc; }
.footer a { color: #1a5fb4; }

/* ---------- 编辑弹窗 ---------- */
.modal-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 999; align-items: center; justify-content: center; }
.modal { width: 460px; max-width: 94vw; background: #fff; border: 1px solid #1565c0; border-radius: 8px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.modal-hd { background: #1565c0; color: #fff; padding: 10px 16px; font: 15px/1.4 "Microsoft YaHei", sans-serif; display: flex; align-items: baseline; gap: 10px; }
.modal-sub { font-size: 12px; font-weight: 400; color: #d6e4f7; }
.modal-bd { padding: 14px 16px; }
.add-row { display: flex; gap: 8px; }
.add-input-wrap { position: relative; flex: 1; }
.modal-bd input#add-input { width: 100%; height: 34px; border: 1px solid #1565c0; border-radius: 4px; padding: 0 10px; font-size: 13px; outline: none; box-sizing: border-box; }
.modal-bd input#add-input:focus { box-shadow: 0 0 0 2px rgba(21,101,192,.15); }
.suggest { position: absolute; left: 0; right: 0; top: 38px; background: #fff; border: 1px solid #d6e4f0; border-radius: 4px; box-shadow: 0 8px 20px rgba(0,0,0,.15); z-index: 10; max-height: 230px; overflow-y: auto; }
.suggest .sg { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; border-bottom: 1px solid #f2f6fb; }
.suggest .sg:last-child { border-bottom: none; }
.suggest .sg:hover, .suggest .sg.active { background: #eef4fb; }
.suggest .sg .nm { flex: 1; color: #222; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest .sg .cd { color: #888; font-size: 12px; font-family: Consolas, monospace; }
.suggest .sg .mk { background: #1565c0; color: #fff; font-size: 11px; padding: 0 5px; border-radius: 3px; flex: none; }
.modal-bd .tip { color: #888; margin: 10px 0 6px; font-size: 12px; line-height: 1.6; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 10px; margin-bottom: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: #eef4fb; border: 1px solid #cfe0f2; color: #1a4f8a; border-radius: 14px; padding: 3px 6px 3px 10px; font-size: 12px; }
.chip b { font-weight: 700; }
.chip small { color: #7a93ad; font-family: Consolas, monospace; }
.chip .x { cursor: pointer; width: 16px; height: 16px; line-height: 14px; text-align: center; border-radius: 50%; background: #cfe0f2; color: #1a4f8a; font-size: 12px; }
.chip .x:hover { background: #1565c0; color: #fff; }
.chips-empty { color: #bbb; font-size: 12px; padding: 4px 2px; }
.bulk { margin-top: 8px; border-top: 1px dashed #eee; padding-top: 8px; }
.bulk summary { cursor: pointer; color: #0a5bb5; font-size: 12px; }
.modal-bd textarea { width: 100%; border: 1px solid #ccc; padding: 8px; font-size: 13px; font-family: Consolas, monospace; outline: none; resize: vertical; margin-top: 8px; }
.modal-bd textarea:focus { border-color: #1565c0; }
.modal-ft { padding: 10px 16px; text-align: right; border-top: 1px solid #eee; }
.btn-primary { background: #1565c0; color: #fff; border: none; padding: 6px 18px; cursor: pointer; font-size: 13px; margin-left: 8px; border-radius: 4px; }
.btn-primary:hover { background: #0d4f9c; }
.btn-default { background: #f4f4f4; color: #333; border: 1px solid #ccc; padding: 6px 18px; cursor: pointer; font-size: 13px; border-radius: 4px; }
.btn-default:hover { background: #eee; }