* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, "Microsoft YaHei", Helvetica, sans-serif; background: #f5f5f5; color: #333; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.header { background: linear-gradient(135deg, #d43c33, #e54040); padding: 12px 0; text-align: center; }
.header h1 { color: #fff; font-size: 24px; letter-spacing: 2px; }
.header .subtitle { color: rgba(255,255,255,0.8); font-size: 13px; margin-top: 4px; }
.notice-bar { background: #fff8e6; padding: 8px 20px; text-align: center; font-size: 13px; color: #e54040; border-bottom: 1px solid #ffe0b2; }
.notice-bar .time { color: #ff5d16; font-weight: bold; margin-left: 10px; }
.container { max-width: 1360px; margin: 16px auto; display: flex; gap: 12px; padding: 0 10px; }
.lottery-card { flex: 1; background: #fff; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.card-header { padding: 10px 16px; text-align: center; color: #fff; font-size: 18px; font-weight: bold; letter-spacing: 3px; }
.card-header.fc3d { background: linear-gradient(135deg, #ce4337, #e54040); }
.card-header.pl5 { background: linear-gradient(135deg, #ff5d16, #ff7a2e); }
.card-header.fc3dpl3 { background: linear-gradient(135deg, #ffaa16, #ffc040); }
.latest-draw { padding: 12px 16px; border-bottom: 1px solid #f0f0f0; }
.draw-meta { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.draw-meta .issue { font-size: 14px; color: #333; display: flex; align-items: center; gap: 6px; }
.draw-meta .issue .icon { display: inline-block; width: 18px; height: 18px; background: #e54040; border-radius: 50%; position: relative; }
.draw-meta .issue .icon::after { content: ''; position: absolute; left: 5px; top: 4px; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.draw-meta .countdown { font-size: 16px; font-weight: bold; font-family: "Courier New", monospace; }
.fc3d-card .draw-meta .countdown { color: #e54040; }
.pl5-card .draw-meta .countdown { color: #ff5d16; }
.fc3dpl3-card .draw-meta .countdown { color: #ffaa16; }
.refresh-btn { padding: 4px 16px; border: 1px solid; border-radius: 3px; background: #fff; cursor: pointer; font-size: 13px; font-weight: bold; }
.fc3d-card .refresh-btn { color: #e54040; border-color: #e54040; }
.pl5-card .refresh-btn { color: #ff5d16; border-color: #ff5d16; }
.fc3dpl3-card .refresh-btn { color: #ffaa16; border-color: #ffaa16; }
.refresh-btn:hover { opacity: 0.8; }
.draw-result { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 0; }
.draw-result .issue-text { font-size: 14px; color: #666; margin-right: 8px; }
.ball { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 18px; font-weight: bold; }
.ball-sm { width: 26px; height: 26px; font-size: 14px; }
.fc3d-card .ball { background: #e54040; }
.pl5-card .ball { background: #ff5d16; }
.fc3dpl3-card .ball { background: #ffaa16; }
.form-tag { font-size: 13px; padding: 2px 8px; border-radius: 3px; margin-left: 6px; }
.form-tag.zuliu { color: #4caf50; }
.form-tag.zusan { color: #e54040; }
.param-text { font-size: 11px; color: #999; display: block; text-align: center; margin-top: -2px; }
.quick-links { display: flex; justify-content: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.quick-links a { font-size: 12px; color: #87c0fe; text-decoration: none; }
.quick-links a::before { content: '['; }
.quick-links a::after { content: ']'; }
.quick-links a:hover { color: #5a9de6; }
.history-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.history-table thead th { padding: 8px 4px; color: #fff; font-weight: bold; font-size: 12px; text-align: center; }
.fc3d-card .history-table thead th { background: #e54040; }
.pl5-card .history-table thead th { background: #ff5d16; }
.fc3dpl3-card .history-table thead th { background: #ffaa16; }
.history-table tbody td { padding: 8px 4px; text-align: center; border-bottom: 1px solid #f5f5f5; }
.history-table tbody tr:hover { background: #fafafa; }
.history-table .td-balls { display: flex; align-items: center; justify-content: center; gap: 4px; }
.history-table .ball-tbl { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: bold; border: 1.5px solid; background: #fff; }
.fc3d-card .ball-tbl { color: #e54040; border-color: #e54040; }
.pl5-card .ball-tbl { color: #ff5d16; border-color: #ff5d16; }
.fc3dpl3-card .ball-tbl { color: #ffaa16; border-color: #ffaa16; }
.footer { text-align: center; padding: 20px; background: #3a3a3a; color: rgba(255,255,255,0.6); font-size: 12px; margin-top: 20px; }
.loading { text-align: center; padding: 40px; color: #999; font-size: 14px; }
.loading::after { content: '...'; animation: dots 1.5s steps(3) infinite; }
@keyframes dots { 0% { content: '.'; } 33% { content: '..'; } 66% { content: '...'; } }
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; justify-content: center; align-items: center; }
.modal-overlay.active { display: flex; }
.modal { background: #fff; border-radius: 8px; width: 90%; max-width: 800px; max-height: 85vh; overflow: hidden; box-shadow: 0 8px 32px rgba(0,0,0,0.2); animation: modalIn 0.25s ease; }
@keyframes modalIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; color: #fff; font-size: 16px; font-weight: bold; }
.modal-header.fc3d { background: linear-gradient(135deg, #ce4337, #e54040); }
.modal-header.pl5 { background: linear-gradient(135deg, #ff5d16, #ff7a2e); }
.modal-header.fc3dpl3 { background: linear-gradient(135deg, #ffaa16, #ffc040); }
.modal-close { background: none; border: none; color: #fff; font-size: 22px; cursor: pointer; padding: 0 4px; line-height: 1; }
.modal-close:hover { opacity: 0.7; }
.modal-body { padding: 20px; overflow-y: auto; max-height: calc(85vh - 52px); font-size: 14px; line-height: 1.8; color: #444; }
.modal-body h3 { color: #333; margin: 16px 0 8px; font-size: 15px; border-left: 3px solid #e54040; padding-left: 10px; }
.modal-body p { margin: 6px 0; }
.modal-body .rule-item { background: #fafafa; border-radius: 4px; padding: 10px 14px; margin: 8px 0; }
.trend-chart { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding: 10px 0; }
.trend-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.trend-bar .bar { width: 100%; border-radius: 3px 3px 0 0; transition: height 0.3s; min-height: 4px; }
.trend-bar .label { font-size: 12px; color: #666; }
.trend-bar .count { font-size: 11px; color: #999; }
.trend-legend { display: flex; gap: 16px; justify-content: center; margin: 10px 0; font-size: 12px; color: #888; }
.predict-section { margin: 12px 0; }
.predict-section .title { font-size: 14px; font-weight: bold; margin-bottom: 8px; color: #333; }
.num-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.num-tag { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; font-weight: bold; }
.num-tag.hot { background: #e54040; color: #fff; }
.num-tag.warm { background: #ff9800; color: #fff; }
.num-tag.cold { background: #e0e0e0; color: #666; }
.num-tag.omit { background: #2196f3; color: #fff; }
.stat-table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.stat-table th { background: #f5f5f5; padding: 8px; text-align: center; font-weight: bold; color: #555; border: 1px solid #eee; }
.stat-table td { padding: 8px; text-align: center; border: 1px solid #eee; }
.hist-modal-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.hist-modal-table th { padding: 8px; background: #f5f5f5; font-weight: bold; color: #555; border-bottom: 2px solid #ddd; text-align: center; }
.hist-modal-table td { padding: 7px; text-align: center; border-bottom: 1px solid #f0f0f0; }
.hist-modal-table tr:hover { background: #fafafa; }
.hist-modal-table .ball-h { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 13px; font-weight: bold; border: 1.5px solid; background: #fff; margin: 0 2px; }
.hist-modal-table .ball-h.fc3d { color: #e54040; border-color: #e54040; }
.hist-modal-table .ball-h.pl5 { color: #ff5d16; border-color: #ff5d16; }
.hist-modal-table .ball-h.fc3dpl3 { color: #ffaa16; border-color: #ffaa16; }
.plan-btn { padding: 5px 14px; border: none; border-radius: 20px; background: linear-gradient(135deg, #ff4757, #ff6b81); color: #fff; cursor: pointer; font-size: 12px; font-weight: bold; letter-spacing: 1px; position: relative; overflow: hidden; transition: all 0.3s; box-shadow: 0 2px 8px rgba(255,71,87,0.35); animation: planGlow 2s ease-in-out infinite; }
.plan-btn::before { content: '\26A1'; margin-right: 4px; font-size: 13px; }
.plan-btn::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.25) 50%, transparent 60%); transition: 0.5s; }
.plan-btn:hover::after { left: 100%; }
.plan-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(255,71,87,0.5); }
@keyframes planGlow { 0%,100% { box-shadow: 0 2px 8px rgba(255,71,87,0.35); } 50% { box-shadow: 0 2px 16px rgba(255,71,87,0.55); } }
.pl5-card .plan-btn { background: linear-gradient(135deg, #ff9f43, #ee5a24); box-shadow: 0 2px 8px rgba(238,90,36,0.35); animation: planGlowPl5 2s ease-in-out infinite; }
@keyframes planGlowPl5 { 0%,100% { box-shadow: 0 2px 8px rgba(238,90,36,0.35); } 50% { box-shadow: 0 2px 16px rgba(238,90,36,0.55); } }
.fc3dpl3-card .plan-btn { background: linear-gradient(135deg, #feca57, #ff9f43); color: #7c5200; box-shadow: 0 2px 8px rgba(254,202,87,0.45); animation: planGlowFt 2s ease-in-out infinite; }
@keyframes planGlowFt { 0%,100% { box-shadow: 0 2px 8px rgba(254,202,87,0.45); } 50% { box-shadow: 0 2px 16px rgba(254,202,87,0.65); } }
.plan-container { }
.plan-section-title { display: flex; align-items: center; gap: 8px; margin: 20px 0 12px; padding-bottom: 8px; border-bottom: 2px solid #f0f0f0; }
.plan-section-title:first-child { margin-top: 0; }
.plan-section-title .badge { display: inline-flex; align-items: center; justify-content: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: bold; color: #fff; }
.plan-section-title .badge.fc3d { background: linear-gradient(135deg, #e54040, #ce4337); }
.plan-section-title .badge.pl5 { background: linear-gradient(135deg, #ff5d16, #ff7a2e); }
.plan-section-title .badge.fc3dpl3 { background: linear-gradient(135deg, #ffaa16, #ffc040); }
.plan-section-title span:last-child { font-size: 15px; font-weight: bold; color: #333; }
.plan-item { background: #fff; border: 1px solid #f0f0f0; border-radius: 8px; margin: 10px 0; padding: 0; overflow: hidden; transition: box-shadow 0.2s; }
.plan-item:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.plan-item-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: linear-gradient(135deg, #fafafa, #f5f5f5); border-bottom: 1px solid #f0f0f0; }
.plan-item-label { font-size: 13px; font-weight: bold; color: #555; display: flex; align-items: center; gap: 6px; }
.plan-item-label .icon { font-size: 15px; }
.copy-btn { padding: 4px 14px; border: none; border-radius: 4px; font-size: 12px; cursor: pointer; color: #fff; font-weight: bold; transition: all 0.2s; }
.copy-btn:hover { opacity: 0.85; transform: scale(1.03); }
.copy-btn.fc3d { background: linear-gradient(135deg, #e54040, #d43c33); }
.copy-btn.pl5 { background: linear-gradient(135deg, #ff5d16, #e85515); }
.copy-btn.fc3dpl3 { background: linear-gradient(135deg, #ffaa16, #e89b14); }
.copy-btn.copied { background: #4caf50 !important; }
.copy-all-wrap { text-align: center; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px dashed #e0e0e0; }
.copy-all-btn { padding: 10px 28px; border: none; border-radius: 8px; color: #fff; font-size: 15px; font-weight: bold; cursor: pointer; transition: all 0.3s; letter-spacing: 2px; position: relative; overflow: hidden; }
.copy-all-btn::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.2) 50%, transparent 60%); transition: 0.5s; }
.copy-all-btn:hover::after { left: 100%; }
.copy-all-btn:hover { transform: translateY(-1px); opacity: 0.95; }
.copy-all-btn.fc3d { background: linear-gradient(135deg, #e54040, #d43c33); box-shadow: 0 3px 12px rgba(229,64,64,0.35); }
.copy-all-btn.pl5 { background: linear-gradient(135deg, #ff5d16, #e85515); box-shadow: 0 3px 12px rgba(255,93,22,0.35); }
.copy-all-btn.fc3dpl3 { background: linear-gradient(135deg, #ffaa16, #e89b14); box-shadow: 0 3px 12px rgba(255,170,22,0.35); color: #7c5200; }
.copy-all-btn.copied { background: #4caf50 !important; box-shadow: 0 3px 12px rgba(76,175,80,0.35) !important; color: #fff !important; }
.plan-item-body { padding: 12px 14px; font-size: 14px; line-height: 1.8; color: #333; font-family: 'Courier New', Consolas, monospace; word-break: break-all; }
.plan-item-body .plan-code { background: linear-gradient(135deg, #fff8f0, #fff5f5); border-radius: 6px; padding: 8px 12px; font-size: 15px; font-weight: bold; letter-spacing: 1px; }
.plan-item-body .plan-notes { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.plan-item-body .plan-notes .zhu-count { font-size: 11px; color: #fff; background: #e54040; border-radius: 10px; padding: 1px 8px; }
.plan-notes-text { font-size: 11px; color: #999; font-family: Arial, sans-serif; }
.plan-item-body .select-list { max-height: 200px; overflow-y: auto; font-size: 13px; line-height: 2; }
.plan-ai-tag { display: inline-flex; align-items: center; gap: 4px; background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 10px; margin-left: 6px; }
.plan-ai-tag::before { content: '\2728'; }
.toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 10px 24px; border-radius: 6px; font-size: 14px; z-index: 9999; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.toast.show { opacity: 1; }
@media (max-width: 900px) {
  .container { flex-direction: column; }
  .lottery-card { max-width: 100%; }
  .modal { width: 95%; }
}