/* 02 机票盲盒值不值 · 登机牌 / 未拆封票根
   云白紫底 + 电紫 + 珊瑚；深色整套覆盖。 */
.bbf-page, .bbf-modal, .bbf-toast {
    --bbf-bg: #f4f2ff;
    --bbf-paper: #ffffff;
    --bbf-soft: #f8f6ff;
    --bbf-ink: #241a4a;
    --bbf-sub: #6a648f;
    --bbf-line: #e0daf5;
    --bbf-brand: #5b3df5;
    --bbf-brand-2: #3f24c4;
    --bbf-accent: #ff6b6b;
    --bbf-accent-soft: #ffe9e9;
    --bbf-good: #16897a;
    --bbf-bad: #d9415c;
    --bbf-shadow: 0 14px 40px rgba(63, 36, 196, .12);
    --bbf-font: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    --bbf-num: "Bahnschrift", "DIN Alternate", Consolas, monospace;
}
:root[data-theme="dark"] .bbf-page,
:root[data-theme="dark"] .bbf-modal,
:root[data-theme="dark"] .bbf-toast {
    --bbf-bg: #12102a;
    --bbf-paper: #1d1a3c;
    --bbf-soft: #241f49;
    --bbf-ink: #eeeaff;
    --bbf-sub: #a9a2d0;
    --bbf-line: #373166;
    --bbf-brand: #a08bff;
    --bbf-brand-2: #c2b4ff;
    --bbf-accent: #ff9b8e;
    --bbf-accent-soft: #3d2436;
    --bbf-good: #6fd7c2;
    --bbf-bad: #ff8fa3;
    --bbf-shadow: 0 14px 40px rgba(0, 0, 0, .42);
}
.bbf-page { background: var(--bbf-bg); color: var(--bbf-ink); font-family: var(--bbf-font); font-size: 15px; line-height: 1.78; }
.bbf-page * { box-sizing: border-box; }
.bbf-wrap { max-width: 1180px; margin: 0 auto; padding: 22px 22px 60px; }
.bbf-page .detail-breadcrumb { font-size: 13px; color: var(--bbf-sub); margin-bottom: 20px; }
.bbf-page .detail-breadcrumb a { color: var(--bbf-brand); text-decoration: none; }
.bbf-page .detail-breadcrumb .sep { margin: 0 8px; opacity: .6; }
.bbf-page .detail-breadcrumb .current { color: var(--bbf-ink); }

.bbf-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .75fr); gap: 26px; align-items: stretch; }
.bbf-hero-copy { background: var(--bbf-paper); border: 1px solid var(--bbf-line); border-radius: 18px; padding: 30px 32px 26px; box-shadow: var(--bbf-shadow); }
.bbf-kicker { display: inline-block; font-family: var(--bbf-num); font-size: 11px; letter-spacing: .2em; color: var(--bbf-brand); background: var(--bbf-soft); border: 1px solid var(--bbf-line); padding: 4px 12px; border-radius: 20px; font-weight: 700; }
.bbf-hero h1 { font-size: clamp(27px, 3.2vw, 38px); line-height: 1.26; margin: 16px 0 10px; font-weight: 800; letter-spacing: -.02em; }
.bbf-hero h1 em { display: block; font-style: normal; font-size: .53em; color: var(--bbf-brand); font-weight: 600; margin-top: 7px; letter-spacing: .02em; }
.bbf-sub { color: var(--bbf-sub); font-size: 14.5px; margin: 0 0 20px; max-width: 62ch; }
.bbf-sub b { color: var(--bbf-brand-2); }
:root[data-theme="dark"] .bbf-sub b { color: var(--bbf-brand); }
.bbf-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.bbf-fact { background: var(--bbf-soft); border: 1px solid var(--bbf-line); border-radius: 12px; padding: 12px 14px; }
.bbf-fact span { display: block; font-size: 12px; color: var(--bbf-sub); }
.bbf-fact b { font-family: var(--bbf-num); font-size: 27px; line-height: 1.3; }
.bbf-fact i { font-style: normal; font-size: 11px; color: var(--bbf-sub); margin-left: 4px; }
.bbf-fact.is-main { background: linear-gradient(120deg, var(--bbf-brand), var(--bbf-brand-2)); border-color: transparent; }
.bbf-fact.is-main span, .bbf-fact.is-main i { color: rgba(255,255,255,.78); }
.bbf-fact.is-main b { color: #fff; font-size: 30px; }
:root[data-theme="dark"] .bbf-fact.is-main span, :root[data-theme="dark"] .bbf-fact.is-main i { color: rgba(24,16,60,.7); }
:root[data-theme="dark"] .bbf-fact.is-main b { color: #1b1440; }
.bbf-types { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 16px; font-size: 12.5px; color: var(--bbf-sub); }
.bbf-types button { border: 1px solid var(--bbf-line); background: var(--bbf-soft); color: var(--bbf-sub); border-radius: 20px; padding: 5px 12px; cursor: pointer; font-size: 12.5px; font-family: var(--bbf-font); }
.bbf-types button.is-on { background: var(--bbf-brand); border-color: var(--bbf-brand); color: #fff; font-weight: 700; }
:root[data-theme="dark"] .bbf-types button.is-on { color: #1b1440; }
.bbf-hero-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 9px; align-items: end; border-top: 1px dashed var(--bbf-line); padding-top: 16px; }
.bbf-page label > span { display: block; font-size: 11.5px; color: var(--bbf-sub); margin-bottom: 4px; }
.bbf-page input, .bbf-page select, .bbf-page textarea { width: 100%; background: var(--bbf-soft); color: var(--bbf-ink); border: 1px solid var(--bbf-line); border-radius: 9px; padding: 8px 10px; font-size: 14px; font-family: var(--bbf-num); outline: none; }
.bbf-page select, .bbf-page textarea { font-family: var(--bbf-font); }
.bbf-page input:focus, .bbf-page select:focus, .bbf-page textarea:focus { border-color: var(--bbf-brand); box-shadow: 0 0 0 3px rgba(91,61,245,.15); }
.bbf-go { background: var(--bbf-accent); color: #fff; border: 0; border-radius: 9px; padding: 10px 15px; font-weight: 800; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.bbf-go:hover { filter: brightness(1.08); transform: translateY(-1px); }
.bbf-err { color: var(--bbf-bad); font-size: 13px; margin: 10px 0 0; font-weight: 600; }

/* 票根：缺口 + 虚线撕口 + 条码 */
.bbf-ticket { background: linear-gradient(160deg, #6a4bff 0%, #4a2ad6 55%, #311a9c 100%); color: #fff; border-radius: 16px; padding: 20px 20px 0; box-shadow: var(--bbf-shadow); position: relative; overflow: hidden; display: flex; flex-direction: column; }
:root[data-theme="dark"] .bbf-ticket { background: linear-gradient(160deg, #3b2a86 0%, #291a63 55%, #1c1247 100%); }
.bbf-ticket::before, .bbf-ticket::after { content: ""; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--bbf-bg); left: -11px; }
.bbf-ticket::before { top: 128px; } .bbf-ticket::after { top: 128px; left: auto; right: -11px; }
.bbf-ticket-head { display: flex; justify-content: space-between; font-family: var(--bbf-num); font-size: 11px; letter-spacing: .18em; opacity: .85; }
.bbf-ticket-route { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; padding: 22px 0 20px; }
.bbf-ticket-route small { display: block; font-size: 10px; letter-spacing: .16em; opacity: .68; font-family: var(--bbf-num); }
.bbf-ticket-route strong { font-size: 16px; font-weight: 700; }
.bbf-ticket-route div:last-child { text-align: right; }
.bbf-plane { font-size: 22px; opacity: .9; }
.bbf-ticket-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; padding-bottom: 18px; }
.bbf-ticket-grid small { display: block; font-size: 10px; opacity: .65; letter-spacing: .1em; }
.bbf-ticket-grid b { font-size: 13.5px; }
.bbf-perf { border-top: 2px dashed rgba(255,255,255,.45); position: relative; margin: 0 -20px; height: 1px; }
.bbf-perf i { position: absolute; inset: -8px auto auto 0; width: 100%; height: 16px; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.18) 8px 10px); }
.bbf-stub { padding: 18px 0 14px; }
.bbf-stub p { font-size: 12px; opacity: .82; margin: 0 0 12px; }
.bbf-stub button { width: 100%; background: var(--bbf-accent); color: #fff; border: 0; border-radius: 9px; padding: 10px; font-weight: 800; cursor: pointer; font-size: 14px; font-family: var(--bbf-font); }
.bbf-stub button:hover { filter: brightness(1.1); }
.bbf-barcode { height: 24px; margin: auto -20px 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 2px, transparent 2px 5px, rgba(255,255,255,.6) 5px 6px, transparent 6px 10px); opacity: .6; }

.bbf-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0 22px; background: var(--bbf-paper); border: 1px dashed var(--bbf-line); border-radius: 12px; padding: 12px 16px; }
.bbf-quick > span { font-size: 12.5px; color: var(--bbf-sub); }
.bbf-quick button, .bbf-mini { background: var(--bbf-soft); color: var(--bbf-ink); border: 1px solid var(--bbf-line); border-radius: 20px; padding: 6px 13px; font-size: 12.5px; cursor: pointer; font-family: var(--bbf-font); }
.bbf-quick button:hover, .bbf-mini:hover { border-color: var(--bbf-accent); }
.bbf-quick button.is-main { background: var(--bbf-brand); color: #fff; border-color: var(--bbf-brand); font-weight: 700; }
:root[data-theme="dark"] .bbf-quick button.is-main { color: #1b1440; }
.bbf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 20px; }
.bbf-grid > * { min-width: 0; }
.bbf-panel { background: var(--bbf-paper); border: 1px solid var(--bbf-line); border-radius: 16px; padding: 20px 22px; box-shadow: var(--bbf-shadow); margin-bottom: 20px; min-width: 0; }
.bbf-panel-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.bbf-panel-head h2 { font-size: 18px; margin: 0; }
.bbf-panel-head small { color: var(--bbf-sub); font-size: 12px; }
.bbf-tag { width: 24px; height: 24px; border-radius: 7px; background: var(--bbf-brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--bbf-num); font-size: 12px; font-weight: 800; }
:root[data-theme="dark"] .bbf-tag { color: #1b1440; }
.bbf-wheel-box { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: center; }
.bbf-wheel-box svg { width: 100%; max-width: 240px; height: auto; }
.bbf-wheel-legend { display: grid; gap: 6px; font-size: 12.5px; }
.bbf-wheel-legend div { display: flex; align-items: center; gap: 7px; }
.bbf-wheel-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bbf-wheel-legend b { margin-left: auto; font-family: var(--bbf-num); }
.bbf-risk-list { display: grid; gap: 9px; }
.bbf-risk { display: flex; gap: 10px; align-items: flex-start; background: var(--bbf-soft); border: 1px solid var(--bbf-line); border-left: 4px solid var(--bbf-good); border-radius: 9px; padding: 9px 12px; font-size: 13px; }
.bbf-risk.is-mid { border-left-color: #e0a423; }
.bbf-risk.is-high { border-left-color: var(--bbf-bad); }
.bbf-risk em { font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 10px; background: var(--bbf-soft); color: var(--bbf-sub); white-space: nowrap; }
.bbf-risk.is-high em { background: var(--bbf-accent-soft); color: var(--bbf-bad); }
.bbf-risk p { margin: 2px 0 0; color: var(--bbf-sub); font-size: 12px; }
.bbf-tip { color: var(--bbf-sub); font-size: 12px; margin: 12px 0 0; }
.bbf-scroll { overflow-x: auto; }
.bbf-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 660px; }
.bbf-table th { text-align: left; color: var(--bbf-sub); font-size: 12px; font-weight: 600; padding: 8px; border-bottom: 1px solid var(--bbf-line); white-space: nowrap; }
.bbf-table td { padding: 7px 8px; border-bottom: 1px dashed var(--bbf-line); }
.bbf-table td input { padding: 5px 7px; font-size: 13px; }
.bbf-table .num, .bbf-table td b { font-family: var(--bbf-num); }
.bbf-table tr.is-miss { opacity: .62; }
.bbf-table tr.is-best { background: rgba(91,61,245,.09); }
.bbf-pool-foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.bbf-pool-foot b { margin-left: auto; font-family: var(--bbf-num); font-size: 13px; }
.bbf-ai { border: 1px solid var(--bbf-brand); }
.bbf-ai-status, .bbf-ai-box p { font-size: 13px; color: var(--bbf-sub); }
.bbf-ai-box { margin-top: 12px; }
.bbf-ai-box p { background: var(--bbf-soft); border-left: 3px solid var(--bbf-brand); padding: 8px 12px; border-radius: 0 8px 8px 0; color: var(--bbf-ink); }
.bbf-ai-actions { margin-top: 12px; }
.bbf-btn { background: var(--bbf-brand); color: #fff; border: 1px solid var(--bbf-brand); border-radius: 9px; padding: 8px 15px; font-size: 13px; cursor: pointer; font-family: var(--bbf-font); }
.bbf-btn:hover { filter: brightness(1.12); }
:root[data-theme="dark"] .bbf-btn { color: #1b1440; }
.bbf-btn-ai { background: var(--bbf-accent); border-color: var(--bbf-accent); }
.bbf-note span { display: block; font-size: 12px; color: var(--bbf-sub); margin-bottom: 6px; }
.bbf-note-out { font-size: 13px; background: var(--bbf-soft); border-left: 3px solid var(--bbf-accent); padding: 8px 12px; margin-top: 10px; }
.bbf-note-out:empty { display: none; }
.bbf-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.bbf-del { background: none; border: 0; color: var(--bbf-bad); cursor: pointer; font-size: 17px; }

.bbf-modal[hidden] { display: none !important; }
.bbf-modal { position: fixed; inset: 0; z-index: 900; background: rgba(24, 16, 60, .6); display: flex; align-items: center; justify-content: center; padding: 20px; }
.bbf-sheet { background: var(--bbf-paper); color: var(--bbf-ink); border-radius: 16px; padding: 26px; max-width: 460px; width: 100%; box-shadow: var(--bbf-shadow); border-top: 6px solid var(--bbf-accent); }
.bbf-sheet h3 { margin: 0 0 10px; font-size: 19px; }
.bbf-sheet p { color: var(--bbf-sub); font-size: 13px; }
.bbf-sheet code { display: block; background: var(--bbf-soft); border: 1px dashed var(--bbf-line); padding: 10px; font-size: 11.5px; word-break: break-all; border-radius: 8px; }
.bbf-sheet-actions { text-align: right; margin-top: 16px; }
.bbf-draw-city { font-size: 26px; font-weight: 800; color: var(--bbf-brand); margin: 6px 0; }
.bbf-draw-row { display: flex; justify-content: space-between; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed var(--bbf-line); }
.bbf-toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 16px); background: var(--bbf-brand-2); color: #fff; padding: 10px 20px; border-radius: 24px; font-size: 13px; opacity: 0; pointer-events: none; transition: .25s; z-index: 950; }
.bbf-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 980px) {
    .bbf-hero, .bbf-grid { grid-template-columns: minmax(0, 1fr); }
    .bbf-hero-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bbf-go { grid-column: span 2; }
    .bbf-wheel-box { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .bbf-wrap { padding: 14px 12px 40px; }
    .bbf-hero-copy { padding: 22px 18px; }
    .bbf-facts { grid-template-columns: minmax(0, 1fr); }
    .bbf-hero-form { grid-template-columns: minmax(0, 1fr); }
    .bbf-go { grid-column: span 1; }
    .bbf-wheel-box { grid-template-columns: minmax(0, 1fr); }
    .bbf-wheel-box svg { max-width: 190px; margin: 0 auto; }
    .bbf-table { min-width: 0; font-size: 12px; }
    .bbf-table th:nth-child(2), .bbf-table td:nth-child(2) { display: none; }
    .bbf-page input, .bbf-page select, .bbf-page textarea { font-size: 16px; }
}
@media print { .bbf-quick, .bbf-actions, .bbf-ai, .bbf-stub button, .bbf-modal, .bbf-toast, .tskb { display: none !important; } }