/* jc_calc_page.css — 足球计算器独立页样式（官方风） */
*{box-sizing:border-box}
body{margin:0;background:#f2f4f7;font-family:-apple-system,"Microsoft YaHei",sans-serif;color:#222;font-size:14px;padding-bottom:96px}
.jcp{max-width:1200px;margin:0 auto}
.jcp-top{background:#e8443c;color:#fff;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.jcp-title{font-size:20px;font-weight:700}
.jcp-nav a{color:#fff;text-decoration:none;margin:0 6px}
.jcp-nav .jcp-date{font-weight:600;margin:0 4px}
.jcp-nav input,.jcp-nav button{padding:3px 8px;border:0;border-radius:5px}
.jcp-nav button{background:#fff;color:#e8443c;cursor:pointer}

.jcp-tabs{display:flex;gap:2px;background:#fff;padding:8px;flex-wrap:wrap;position:sticky;top:0;z-index:5;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.jcp-tab{flex:1;min-width:110px;padding:10px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;color:#555;font-size:15px;cursor:pointer}
.jcp-tab.on{border-color:#e8443c;color:#e8443c;font-weight:700;background:#fff5f4}

.jcp-list{padding:10px}
.jcp-daterow{font-size:13px;color:#6b7280;margin:12px 4px 6px;font-weight:600}
.jcp-empty{padding:40px;text-align:center;color:#9ca3af}

.jcp-m{background:#fff;border:1px solid #eef0f3;border-radius:8px;margin-bottom:10px;overflow:hidden}
.jcp-m-h{display:flex;align-items:center;gap:8px;padding:8px 12px;background:#fafbfc;border-bottom:1px solid #f0f0f0;flex-wrap:wrap;font-size:13px;color:#6b7280}
.jcp-m-h .no{color:#374151;font-weight:600}
.jcp-m-h .vs{color:#111;font-weight:700;font-size:15px;margin:0 6px}
.jcp-m-h .gl{color:#e8443c;font-weight:600}
.jcp-m-h .started{color:#f59e0b}
.jcp-m-h .exp{margin-left:auto;color:#2563eb;cursor:pointer;font-size:13px}

.jcp-row{display:flex;align-items:stretch;gap:6px;padding:6px 12px}
.jcp-row .rn{width:64px;flex:none;display:flex;align-items:center;color:#9ca3af;font-size:12px}
.jcp-os{display:flex;gap:6px;flex:1;flex-wrap:wrap}
.jcp-o{flex:1;min-width:88px;border:1px solid #e5e7eb;border-radius:6px;background:#fff;cursor:pointer;padding:6px 4px;text-align:center;line-height:1.35}
.jcp-o .l{display:block;color:#e8443c;font-weight:600}
.jcp-o .v{display:block;color:#333;font-size:13px}
.jcp-o.on{background:#e8443c;border-color:#e8443c}
.jcp-o.on .l,.jcp-o.on .v{color:#fff}

.jcp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:8px 12px}
.jcp-grid.g4{grid-template-columns:repeat(4,1fr)}
.jcp-grid.g3{grid-template-columns:repeat(3,1fr)}
.jcp-sub{padding:2px 12px 6px;font-size:12px;color:#9ca3af}
.jcp-more{padding:6px 12px;text-align:right}
.jcp-more button{border:0;background:none;color:#2563eb;cursor:pointer;font-size:13px}

/* 底部条 */
.jcp-bar{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid #e5e7eb;box-shadow:0 -2px 10px rgba(0,0,0,.08);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 16px;z-index:8}
.jcp-bar-l,.jcp-bar-r{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.jcp-bar b{color:#e8443c}
.jcp-mult input{width:64px;padding:3px 6px;border:1px solid #ddd;border-radius:5px}
.jcp-pass-btn{padding:6px 12px;border:1px solid #e8443c;border-radius:6px;background:#fff;color:#e8443c;cursor:pointer}
.jcp-clear{padding:6px 14px;border:1px solid #d1d5db;border-radius:6px;background:#fff;color:#555;cursor:pointer}
.jcp-ckfa{padding:8px 22px;border:0;border-radius:6px;background:#e8443c;color:#fff;font-size:15px;font-weight:700;cursor:pointer}

/* 过关方式浮层 */
.jcp-pop{position:fixed;bottom:64px;left:16px;background:#fff;border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.15);padding:12px;z-index:9;min-width:260px}
.jcp-pop-h{font-weight:600;margin-bottom:8px}
.jcp-pass-opts{display:flex;flex-wrap:wrap;gap:8px}
.jcp-pass-opts label{border:1px solid #e5e7eb;border-radius:6px;padding:5px 10px;cursor:pointer;font-size:13px}
.jcp-pass-opts label.on{border-color:#e8443c;color:#e8443c;background:#fff5f4}
.jcp-pop-f{text-align:right;margin-top:10px}
.jcp-pop-f button{padding:5px 16px;border:0;border-radius:6px;background:#e8443c;color:#fff;cursor:pointer}

/* 查看方案弹窗 */
.jcp-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.jcp-modal[hidden],.jcp-pop[hidden]{display:none!important}   /* 修复：class 的 display 会盖掉 [hidden]，需显式覆盖 */
.jcp-modal-box{background:#fff;border-radius:12px;max-width:560px;width:100%;max-height:88vh;display:flex;flex-direction:column;overflow:hidden}
.jcp-modal-h{padding:14px 18px;font-size:17px;font-weight:700;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
.jcp-x{border:0;background:none;font-size:22px;color:#999;cursor:pointer;line-height:1}
.jcp-modal-body{padding:14px 18px;overflow:auto;font-size:14px;line-height:1.7}
.jcp-modal-body .pl-h{color:#6b7280;font-size:13px;margin-bottom:8px}
.jcp-modal-body .pl-m{padding:8px 0;border-bottom:1px dashed #eee}
.jcp-modal-body .pl-m .no{color:#374151;font-weight:600;margin-right:6px}
.jcp-modal-body .pl-m .op{color:#e8443c;font-weight:600;margin-left:6px}
.jcp-modal-body .pl-sum{margin-top:12px;padding-top:10px;border-top:2px solid #eee}
.jcp-modal-body .pl-sum div{display:flex;justify-content:space-between;padding:2px 0}
.jcp-modal-body .pl-sum b{color:#e8443c}
.jcp-modal-f{padding:12px 18px;border-top:1px solid #eee;text-align:right;display:flex;gap:10px;justify-content:flex-end}
.jcp-modal-f button{padding:7px 18px;border:1px solid #e8443c;border-radius:6px;background:#fff;color:#e8443c;cursor:pointer}
.jcp-modal-f #jcpCopy{background:#e8443c;color:#fff}

/* ===== 站点头部（复用首页 header-wrap 风格，静态定位避免与 sticky tabs 冲突） ===== */
.header-wrap{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1)}
.nav-container{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:5px 20px;flex-wrap:wrap;gap:8px}
.nav-left,.nav-center,.nav-right{display:flex;align-items:center}
.nav-left{flex:0 0 auto}
.nav-center{flex:1;justify-content:center;gap:24px;flex-wrap:wrap}
.nav-right{flex:0 0 auto;gap:14px;flex-wrap:wrap}
.nav-left .logo img{height:40px;display:block}
.nav-center a{color:#333;font-size:16px;font-weight:500;text-decoration:none;padding:8px 0;transition:color .3s}
.nav-center a:hover{color:#3498db}
.nav-center a.on{color:#e8443c}
.nav-right a{color:#374151;text-decoration:none;font-size:14px}
.nav-right a:hover{color:#3498db}
.nav-right form{display:inline-flex;gap:6px;align-items:center;margin:0}
.nav-right input,.nav-right button{padding:4px 8px;border:1px solid #ddd;border-radius:5px;font-size:13px}
.nav-right button{background:#3498db;color:#fff;border-color:#3498db;cursor:pointer}

/* ===== 比分分行（主胜/平局/客胜） ===== */
.jcp-crsrow{display:flex;align-items:stretch;gap:8px;padding:4px 12px}
.jcp-crsrow .crsdir{width:46px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;border-radius:6px}
.jcp-crsrow .crsdir.H{color:#e8443c;background:#fff1f0}
.jcp-crsrow .crsdir.D{color:#059669;background:#ecfdf5}
.jcp-crsrow .crsdir.A{color:#2563eb;background:#eff6ff}
.jcp-crscells{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;flex:1}

/* ===== 可折叠头部 ===== */
.jcp-m-h.clk{cursor:pointer}
.jcp-m-h.clk:hover{background:#f3f5f8}
.jcp-m-h .exp{margin-left:auto;color:#9ca3af;font-size:14px;padding-left:8px}
.jcp-m-h .selbadge{color:#e8443c;background:#fff1f0;border-radius:10px;padding:1px 8px;font-size:12px;margin-left:6px}

/* 赔率升降箭头（图片，与首页 icon_sjt/icon_xjt 一致） */
.jcp-o .oa{width:11px;height:11px;vertical-align:-1px;margin-left:3px}