/* ===================================================================
 * couple-space-ticketing.css — Ins 极简书签风格
 * 配色靠近 love咪记账（#fff6f8 / #f7d3e0 / #ead9ff），
 * 加入粉蓝 (#dbe7ff)、奶油 (#fff3d9)、奶油粉紫 (#f3e6ff) 作为辅色。
 * =================================================================== */

:root {
    --tk-bg-base: #fff8f5;
    --tk-bg-paper: #fffdfa;
    --tk-bg-soft: #fff1f2;
    --tk-line-soft: rgba(232, 196, 208, 0.55);
    --tk-line-strong: rgba(216, 152, 176, 0.46);
    --tk-text-major: #6b4754;
    --tk-text-body: #815c69;
    --tk-text-muted: #a17a87;
    --tk-text-faint: #c4a3af;
    --tk-accent-pink: #f7b6ca;
    --tk-accent-rose: #ea628b;
    --tk-accent-blue: #b6c8f7;
    --tk-accent-mint: #b6e1d4;
    --tk-accent-lilac: #d9c4ff;
    --tk-accent-cream: #ffe9c8;
    --tk-accent-peach: #ffd6c0;
    --tk-shadow-card: 0 14px 30px rgba(140, 101, 117, 0.1);
    --tk-radius-card: 22px;
    --tk-radius-pill: 999px;
}

.couple-ticketing-overlay {
    position: absolute;
    inset: 0;
    /* 须高于 .couple-space-travel-overlay (100120)，否则旅行计划内点「去买票」时票面会被旅行蒙层盖住 */
    z-index: 100270; /* 在 couple-bookkeeping-overlay (100220)、旅行层(100210)之上 */
    display: flex;
    flex-direction: column;
    border-radius: inherit;
    background:
        radial-gradient(circle at top right, rgba(244, 224, 255, 0.72) 0%, rgba(244, 224, 255, 0) 36%),
        radial-gradient(circle at top left, rgba(217, 232, 255, 0.62) 0%, rgba(217, 232, 255, 0) 32%),
        linear-gradient(180deg, #fff8f5 0%, #fff5f8 38%, #fcf4ff 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.26s ease, visibility 0.26s ease, transform 0.26s ease;
    box-sizing: border-box;
    min-height: 0;
    overflow: hidden;
}

.couple-ticketing-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
    background-size: 100% 28px, 28px 100%;
    opacity: 0.34;
    mix-blend-mode: soft-light;
}

.couple-ticketing-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

html[data-appearance="dark"] .couple-ticketing-overlay {
    background:
        radial-gradient(circle at top right, rgba(115, 97, 164, 0.4) 0%, rgba(115, 97, 164, 0) 36%),
        radial-gradient(circle at top left, rgba(83, 100, 145, 0.32) 0%, rgba(83, 100, 145, 0) 32%),
        linear-gradient(180deg, #15131a 0%, #1d1b22 42%, #232029 100%);
}

.ticketing-shell {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 14px calc(14px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    color: var(--tk-text-major);
}

/* ----- 隐形滚动条 ----- */
.couple-ticketing-overlay,
.couple-ticketing-overlay * {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.couple-ticketing-overlay::-webkit-scrollbar,
.couple-ticketing-overlay *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* ----- 头部 ----- */
.ticketing-header {
    position: relative;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ticketing-header::after {
    content: '';
    position: absolute;
    left: 50px;
    right: 50px;
    bottom: -7px;
    height: 1px;
    background: linear-gradient(90deg, rgba(229, 191, 204, 0), rgba(229, 191, 204, 0.78), rgba(229, 191, 204, 0));
}

.ticketing-back,
.ticketing-icon-btn {
    width: 40px;
    height: 38px;
    border: 1px solid rgba(230, 200, 210, 0.6);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    color: var(--tk-text-major);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.82) inset;
}

.ticketing-back:active,
.ticketing-icon-btn:active {
    opacity: 0.86;
    transform: translateY(1px);
}

.ticketing-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.16em;
    color: #7e5565;
}

.ticketing-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ----- 主体滚动区 ----- */
.ticketing-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* 详情页底部含 sticky 支付栏时，留白避免压住「添加同行人」等最后一行可操作区 */
.ticketing-body:has(.ticketing-pay-bar) {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

/* ----- 主页 hero ----- */
.ticketing-hero {
    padding: 18px 18px 16px;
    border-radius: var(--tk-radius-card);
    background: linear-gradient(135deg, rgba(255, 240, 246, 0.96) 0%, rgba(247, 234, 255, 0.92) 50%, rgba(225, 233, 255, 0.94) 100%);
    border: 1px solid var(--tk-line-strong);
    box-shadow: var(--tk-shadow-card);
    position: relative;
    overflow: hidden;
}

.ticketing-hero::after {
    content: '';
    position: absolute;
    right: -22px;
    top: -18px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 210, 226, 0.7) 0%, rgba(255, 210, 226, 0) 72%);
}

.ticketing-hero-line {
    font-size: 10px;
    color: #af839a;
    letter-spacing: 0.36em;
    text-transform: uppercase;
}

.ticketing-hero-title {
    margin-top: 6px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #6f4a58;
    line-height: 1.55;
}

.ticketing-hero-sub {
    margin-top: 8px;
    font-size: 11px;
    color: var(--tk-text-muted);
    letter-spacing: 0.06em;
}

/* ----- 功能卡片 (2x2 grid) ----- */
.ticketing-feature-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ticketing-feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 8px;
    padding: 14px 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid var(--tk-line-soft);
    box-shadow: var(--tk-shadow-card);
    cursor: pointer;
    overflow: hidden;
    color: var(--tk-text-major);
    min-height: 116px;
}

.ticketing-feature-card:active {
    transform: translateY(1px);
}

.ticketing-feature-bookmark {
    width: 32px;
    height: 40px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(180deg, var(--tk-accent-pink) 0%, var(--tk-accent-rose) 100%);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(234, 98, 139, 0.22);
    position: relative;
}

.ticketing-feature-bookmark::after {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    border-left: 16px solid var(--tk-accent-rose);
    border-right: 16px solid var(--tk-accent-rose);
    border-bottom: 7px solid transparent;
}

.ticketing-accent-mint .ticketing-feature-bookmark {
    background: linear-gradient(180deg, #c8efe1 0%, #79c5ad 100%);
    box-shadow: 0 6px 14px rgba(121, 197, 173, 0.22);
}
.ticketing-accent-mint .ticketing-feature-bookmark::after {
    border-left-color: #79c5ad;
    border-right-color: #79c5ad;
}
.ticketing-accent-sky .ticketing-feature-bookmark {
    background: linear-gradient(180deg, #d4e2ff 0%, #7e9be8 100%);
    box-shadow: 0 6px 14px rgba(126, 155, 232, 0.22);
}
.ticketing-accent-sky .ticketing-feature-bookmark::after {
    border-left-color: #7e9be8;
    border-right-color: #7e9be8;
}
.ticketing-accent-peach .ticketing-feature-bookmark {
    background: linear-gradient(180deg, #ffe2cf 0%, #f49a7a 100%);
    box-shadow: 0 6px 14px rgba(244, 154, 122, 0.22);
}
.ticketing-accent-peach .ticketing-feature-bookmark::after {
    border-left-color: #f49a7a;
    border-right-color: #f49a7a;
}
.ticketing-accent-lilac .ticketing-feature-bookmark {
    background: linear-gradient(180deg, #ead7ff 0%, #aa84e6 100%);
    box-shadow: 0 6px 14px rgba(170, 132, 230, 0.22);
}
.ticketing-accent-lilac .ticketing-feature-bookmark::after {
    border-left-color: #aa84e6;
    border-right-color: #aa84e6;
}
.ticketing-accent-rose .ticketing-feature-bookmark {
    background: linear-gradient(180deg, #ffd4dc 0%, #ea7c95 100%);
    box-shadow: 0 6px 14px rgba(234, 124, 149, 0.22);
}
.ticketing-accent-rose .ticketing-feature-bookmark::after {
    border-left-color: #ea7c95;
    border-right-color: #ea7c95;
}

/* ============================================================
 * 酒店预订（hotel）
 * ============================================================ */
.ticketing-search-row.ticketing-search-row--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ticketing-search-field.is-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.ticketing-hotel-meta {
    margin: 8px 0 12px;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--tk-text-muted);
    text-align: center;
}
.ticketing-hotel-item {
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(232, 196, 208, 0.4);
    text-align: left;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.ticketing-hotel-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--tk-shadow-card);
}
.ticketing-hotel-cover {
    flex: 0 0 80px;
    height: 100px;
    border-radius: 14px;
    background: linear-gradient(135deg, #ffe9ed 0%, #f7c0d2 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ticketing-hotel-cover-mark {
    font-size: 32px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.04em;
}
.ticketing-hotel-cover-tag {
    position: absolute;
    bottom: 6px;
    left: 6px;
    right: 6px;
    text-align: center;
    font-size: 10px;
    color: #d77;
    letter-spacing: 0.1em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.ticketing-hotel-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    text-align: left;
}
.ticketing-hotel-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--tk-text-major);
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ticketing-hotel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    font-size: 11px;
    color: var(--tk-text-muted);
}
.ticketing-hotel-tags span {
    line-height: 1.5;
}
.ticketing-hotel-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}
.ticketing-hotel-amenities span {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(247, 211, 224, 0.45);
    color: var(--tk-text-body);
    letter-spacing: 0.04em;
}
.ticketing-hotel-foot {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 4px;
}
.ticketing-hotel-rating strong {
    font-size: 16px;
    color: var(--tk-accent-rose);
    margin-right: 4px;
}
.ticketing-hotel-rating small {
    font-size: 11px;
    color: var(--tk-text-faint);
}
.ticketing-hotel-price strong {
    font-size: 16px;
    color: #d97a92;
    margin-right: 2px;
}
.ticketing-hotel-price small {
    font-size: 11px;
    color: var(--tk-text-faint);
}
.ticketing-hotel-detail-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
}
.ticketing-hotel-room-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.ticketing-hotel-room-card {
    text-align: left;
}
.ticketing-hotel-room-sub {
    font-size: 11px;
    color: var(--tk-text-muted);
    margin: 4px 0;
    line-height: 1.5;
}
.ticketing-stub.ticketing-accent-rose .ticketing-stub-side {
    background: linear-gradient(180deg, #ffe9ed 0%, #f7c0d2 100%);
}

.ticketing-feature-meta {
    flex: 1;
    min-width: 0;
}

.ticketing-feature-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #6f4a58;
}

.ticketing-feature-sub {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.55;
    color: var(--tk-text-muted);
    letter-spacing: 0.04em;
}

.ticketing-feature-arrow {
    position: absolute;
    right: 12px;
    bottom: 12px;
    font-size: 18px;
    line-height: 1;
    color: var(--tk-text-faint);
}

/* ----- 章节标题 / 引文 ----- */
.ticketing-section-label {
    margin: 4px 4px -2px;
    font-size: 11px;
    letter-spacing: 0.32em;
    color: var(--tk-text-muted);
    text-transform: uppercase;
}

.ticketing-paper-quote {
    margin-top: 4px;
    padding: 12px 14px;
    border-left: 3px solid rgba(216, 152, 176, 0.6);
    border-radius: 4px 12px 12px 4px;
    background: rgba(255, 255, 255, 0.62);
    color: var(--tk-text-body);
    font-size: 12px;
    line-height: 1.7;
    letter-spacing: 0.05em;
    font-style: italic;
}

.ticketing-footnote {
    margin-top: 4px;
    padding: 8px 10px;
    font-size: 10px;
    line-height: 1.7;
    color: var(--tk-text-faint);
    letter-spacing: 0.04em;
    text-align: center;
    border-top: 1px dashed rgba(216, 152, 176, 0.32);
}

/* ----- 最近票根 chip ----- */
.ticketing-upcoming-list {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 4px 6px;
}

.ticketing-upcoming-card {
    flex: 0 0 65%;
    padding: 12px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid var(--tk-line-soft);
    box-shadow: var(--tk-shadow-card);
    cursor: pointer;
}

.ticketing-upcoming-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--tk-radius-pill);
    background: linear-gradient(135deg, rgba(255, 226, 235, 0.96) 0%, rgba(246, 236, 255, 0.96) 100%);
    color: #7f5d69;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.ticketing-upcoming-title {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--tk-text-major);
}

.ticketing-upcoming-sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--tk-text-muted);
}

.ticketing-upcoming-date {
    margin-top: 6px;
    font-size: 10px;
    color: var(--tk-text-faint);
    letter-spacing: 0.06em;
}

/* ----- 搜索卡片 ----- */
.ticketing-search-card {
    padding: 16px;
    border-radius: var(--tk-radius-card);
    background: linear-gradient(135deg, rgba(255, 250, 251, 0.94) 0%, rgba(255, 244, 248, 0.92) 60%, rgba(247, 240, 255, 0.96) 100%);
    border: 1px solid var(--tk-line-strong);
    box-shadow: var(--tk-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ticketing-search-row {
    display: grid;
    grid-template-columns: 1fr 36px 1fr;
    align-items: center;
    gap: 6px;
}

.ticketing-search-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid var(--tk-line-soft);
}

.ticketing-search-label {
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--tk-text-muted);
}

.ticketing-search-input,
.ticketing-passenger-input {
    width: 100%;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    color: var(--tk-text-major);
    outline: none;
    padding: 0;
}

.ticketing-search-input::placeholder,
.ticketing-passenger-input::placeholder {
    color: var(--tk-text-faint);
    font-weight: 500;
}

.ticketing-search-swap {
    width: 36px;
    height: 36px;
    border: 1px solid var(--tk-line-soft);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.84);
    color: var(--tk-text-major);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.ticketing-search-swap:active {
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.ticketing-search-dates {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.ticketing-date-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 4px;
    gap: 2px;
    border-radius: 12px;
    border: 1px solid var(--tk-line-soft);
    background: rgba(255, 255, 255, 0.7);
    color: var(--tk-text-body);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.ticketing-date-chip small {
    font-size: 9px;
    color: var(--tk-text-faint);
    letter-spacing: 0.04em;
    font-weight: 600;
}

.ticketing-date-chip.is-active {
    background: linear-gradient(135deg, #ffe6f0 0%, #f1ddff 100%);
    border-color: var(--tk-line-strong);
    color: #7a5464;
}

/* ----- 主按钮 ----- */
.ticketing-primary-btn {
    flex-shrink: 0;
    min-height: 46px;
    padding: 0 18px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(180deg, #ff8aac 0%, #ea628b 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    cursor: pointer;
    box-shadow: 0 12px 24px rgba(234, 98, 139, 0.24);
}

.ticketing-primary-btn[disabled] {
    opacity: 0.6;
    cursor: default;
    box-shadow: none;
}

.ticketing-primary-btn:active {
    transform: translateY(1px);
}

.ticketing-secondary-btn {
    min-height: 46px;
    padding: 0 18px;
    border-radius: 16px;
    border: 1px solid var(--tk-line-strong);
    background: rgba(255, 255, 255, 0.72);
    color: var(--tk-text-major);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    cursor: pointer;
}

/* ----- 城市 / 软 chip ----- */
.ticketing-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ticketing-soft-chip {
    padding: 7px 12px;
    border-radius: var(--tk-radius-pill);
    border: 1px solid var(--tk-line-soft);
    background: rgba(255, 255, 255, 0.74);
    color: var(--tk-text-body);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.ticketing-soft-chip.is-active {
    background: linear-gradient(135deg, #fff0f6 0%, #f0e2ff 100%);
    color: #7a5464;
    border-color: var(--tk-line-strong);
}

/* ----- 路线总览 ----- */
.ticketing-route-summary {
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--tk-line-soft);
    box-shadow: var(--tk-shadow-card);
}

.ticketing-route-points {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 18px;
    color: var(--tk-text-major);
    font-weight: 800;
    letter-spacing: 0.04em;
}

.ticketing-route-arrow {
    color: var(--tk-text-faint);
    font-size: 18px;
}

.ticketing-route-meta {
    margin-top: 6px;
    font-size: 11px;
    color: var(--tk-text-muted);
    letter-spacing: 0.06em;
}

/* ----- 标签栏（车种 / 排序） ----- */
.ticketing-tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ticketing-tab {
    padding: 7px 14px;
    border-radius: var(--tk-radius-pill);
    border: 1px solid var(--tk-line-soft);
    background: rgba(255, 255, 255, 0.72);
    color: var(--tk-text-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.ticketing-tab.is-active {
    background: linear-gradient(135deg, #fff0f6 0%, #f0e2ff 100%);
    color: #7a5464;
    border-color: var(--tk-line-strong);
}

/* ----- 列表通用 ----- */
.ticketing-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ticketing-empty {
    padding: 20px;
    text-align: center;
    color: var(--tk-text-muted);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.6);
    border: 1px dashed var(--tk-line-soft);
    font-size: 13px;
    line-height: 1.7;
}

/* ----- 火车票项 ----- */
.ticketing-train-item {
    display: grid;
    grid-template-columns: minmax(64px, auto) 1fr minmax(64px, auto) minmax(64px, auto);
    align-items: center;
    gap: 8px;
    padding: 14px 14px 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--tk-line-soft);
    box-shadow: var(--tk-shadow-card);
    text-align: left;
    cursor: pointer;
}

.ticketing-train-time-major {
    font-size: 18px;
    font-weight: 800;
    color: var(--tk-text-major);
    letter-spacing: 0.02em;
}

.ticketing-train-station {
    margin-top: 4px;
    font-size: 10px;
    color: var(--tk-text-muted);
    letter-spacing: 0.06em;
}

.ticketing-train-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--tk-text-muted);
}

.ticketing-train-no {
    font-weight: 700;
    color: #c98ea7;
    font-size: 11px;
    letter-spacing: 0.1em;
}

.ticketing-train-bridge-line {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, rgba(216, 152, 176, 0), rgba(216, 152, 176, 0.6), rgba(216, 152, 176, 0));
    position: relative;
}

.ticketing-train-bridge-line::after {
    content: '';
    position: absolute;
    right: -2px;
    top: -3px;
    border: 4px solid transparent;
    border-left-color: rgba(216, 152, 176, 0.6);
}

.ticketing-train-duration {
    letter-spacing: 0.04em;
}

.ticketing-train-price {
    text-align: right;
    color: var(--tk-accent-rose);
}

.ticketing-train-price-num {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.ticketing-train-price-tag {
    margin-top: 2px;
    font-size: 10px;
    color: var(--tk-text-faint);
    letter-spacing: 0.16em;
}

/* ----- 飞机票项 ----- */
.ticketing-flight-item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--tk-line-soft);
    box-shadow: var(--tk-shadow-card);
    text-align: left;
    cursor: pointer;
}

.ticketing-flight-airline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.ticketing-flight-airline-name {
    font-size: 12px;
    font-weight: 800;
    color: var(--tk-text-major);
    letter-spacing: 0.04em;
}

.ticketing-flight-airline-no {
    font-size: 10px;
    color: var(--tk-text-faint);
    letter-spacing: 0.06em;
}

.ticketing-flight-route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

.ticketing-flight-time {
    text-align: center;
}

.ticketing-flight-time strong {
    font-size: 18px;
    font-weight: 800;
    color: var(--tk-text-major);
    letter-spacing: 0.04em;
}

.ticketing-flight-time small {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: var(--tk-text-muted);
}

.ticketing-flight-bridge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    color: var(--tk-text-muted);
}

.ticketing-flight-bridge-line {
    width: 68px;
    height: 1px;
    background: linear-gradient(90deg, rgba(126, 155, 232, 0), rgba(126, 155, 232, 0.55), rgba(126, 155, 232, 0));
    position: relative;
}

.ticketing-flight-bridge-line::after {
    content: '✈';
    position: absolute;
    top: -8px;
    right: -2px;
    font-size: 10px;
    color: rgba(126, 155, 232, 0.85);
}

.ticketing-onTime {
    font-size: 9px;
    color: var(--tk-text-faint);
    letter-spacing: 0.06em;
}

.ticketing-flight-price {
    align-self: flex-end;
    color: var(--tk-accent-rose);
}

.ticketing-flight-price-num {
    font-size: 16px;
    font-weight: 800;
}

.ticketing-flight-price-tag {
    margin-top: 2px;
    font-size: 10px;
    color: var(--tk-text-faint);
    letter-spacing: 0.16em;
    text-align: right;
}

/* ----- 详情通用 ----- */
.ticketing-detail-card {
    padding: 16px;
    border-radius: var(--tk-radius-card);
    background: linear-gradient(135deg, rgba(255, 252, 254, 0.96) 0%, rgba(254, 242, 248, 0.94) 100%);
    border: 1px solid var(--tk-line-strong);
    box-shadow: var(--tk-shadow-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ticketing-detail-mainline {
    font-size: 16px;
    font-weight: 800;
    color: var(--tk-text-major);
    letter-spacing: 0.04em;
}

.ticketing-detail-subline {
    margin-top: 6px;
    font-size: 11px;
    color: var(--tk-text-muted);
    letter-spacing: 0.06em;
}

.ticketing-detail-time {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.ticketing-detail-time strong {
    display: block;
    font-size: 22px;
    font-weight: 800;
    color: var(--tk-text-major);
    letter-spacing: 0.04em;
}

.ticketing-detail-time small {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    color: var(--tk-text-muted);
}

.ticketing-detail-time-line {
    position: relative;
    text-align: center;
}

.ticketing-detail-time-line::before {
    content: '';
    position: absolute;
    left: -8px;
    right: -8px;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, rgba(216, 152, 176, 0), rgba(216, 152, 176, 0.6), rgba(216, 152, 176, 0));
}

.ticketing-detail-time-line span {
    position: relative;
    background: rgba(255, 255, 255, 0.96);
    padding: 0 8px;
    font-size: 10px;
    color: var(--tk-text-muted);
    letter-spacing: 0.06em;
}

.ticketing-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ticketing-tag-chip {
    padding: 4px 10px;
    border-radius: var(--tk-radius-pill);
    background: rgba(229, 232, 255, 0.6);
    color: #5d6f9e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

/* ----- 座位 / 舱位卡 ----- */
.ticketing-seat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ticketing-seat-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid var(--tk-line-soft);
    text-align: left;
    cursor: pointer;
    color: var(--tk-text-major);
}

.ticketing-seat-card.is-active {
    background: linear-gradient(135deg, #fff0f6 0%, #f0e2ff 100%);
    border-color: var(--tk-line-strong);
}

.ticketing-seat-card.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ticketing-seat-label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.ticketing-seat-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--tk-accent-rose);
}

.ticketing-seat-remain {
    font-size: 10px;
    color: var(--tk-text-muted);
    letter-spacing: 0.06em;
}

/* ----- 乘车人 ----- */
.ticketing-passenger-card {
    padding: 6px 14px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid var(--tk-line-soft);
    box-shadow: var(--tk-shadow-card);
    display: flex;
    flex-direction: column;
}

.ticketing-passenger-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(216, 152, 176, 0.32);
}

.ticketing-passenger-row:last-child {
    border-bottom: none;
}

.ticketing-passenger-row span {
    font-size: 11px;
    color: var(--tk-text-muted);
    letter-spacing: 0.16em;
}

/* ----- 支付栏 ----- */
.ticketing-pay-bar {
    position: sticky;
    bottom: 0;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--tk-line-strong);
    box-shadow: 0 -10px 26px rgba(140, 101, 117, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
}

.ticketing-pay-amount {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.ticketing-pay-amount span {
    font-size: 10px;
    color: var(--tk-text-muted);
    letter-spacing: 0.16em;
}

.ticketing-pay-amount strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--tk-accent-rose);
}

/* ----- 电影 ----- */
.ticketing-movie-city-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 4px;
}

.ticketing-movie-date-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
}

.ticketing-movie-date-trigger.is-open .ticketing-movie-date-chev {
    display: inline-block;
    transform: rotate(180deg);
}

.ticketing-movie-date-chev {
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.75;
    transition: transform 0.15s ease;
}

.ticketing-movie-date-panel {
    margin: 8px 0 4px;
}

.ticketing-movie-date-panel--embed {
    margin-top: 4px;
    margin-bottom: 10px;
}

.ticketing-eyebrow {
    font-size: 9px;
    color: var(--tk-text-faint);
    letter-spacing: 0.32em;
    text-transform: uppercase;
}

.ticketing-eyebrow-right {
    align-self: flex-end;
    text-align: right;
}

.ticketing-city-pill {
    margin-top: 4px;
    padding: 6px 14px;
    border-radius: var(--tk-radius-pill);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--tk-line-strong);
    color: var(--tk-text-major);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.ticketing-movie-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.ticketing-movie-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 0 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--tk-line-soft);
    box-shadow: var(--tk-shadow-card);
    overflow: hidden;
    cursor: pointer;
    text-align: left;
}

.ticketing-movie-poster {
    height: 110px;
    border-radius: 14px 14px 0 0;
    position: relative;
    background: #ffe4ef;
}

.ticketing-movie-rating {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 2px 6px;
    border-radius: var(--tk-radius-pill);
    font-size: 10px;
    font-weight: 800;
    color: #fff;
    background: rgba(94, 60, 73, 0.78);
    letter-spacing: 0.04em;
}

.ticketing-movie-meta {
    padding: 0 10px;
}

.ticketing-movie-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--tk-text-major);
    letter-spacing: 0.04em;
    line-height: 1.4;
}

.ticketing-movie-genre {
    margin-top: 4px;
    font-size: 9px;
    color: var(--tk-text-muted);
    letter-spacing: 0.04em;
}

.ticketing-movie-detail-card {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 14px;
    padding: 14px;
    border-radius: var(--tk-radius-card);
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid var(--tk-line-strong);
    box-shadow: var(--tk-shadow-card);
}

.ticketing-movie-detail-poster {
    width: 90px;
    height: 130px;
    border-radius: 14px;
}

.ticketing-movie-detail-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--tk-text-major);
    letter-spacing: 0.04em;
}

.ticketing-movie-detail-sub {
    margin-top: 6px;
    font-size: 11px;
    color: var(--tk-text-muted);
}

.ticketing-movie-detail-synopsis {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--tk-text-body);
}

.ticketing-cinema-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ticketing-cinema-card {
    text-align: left;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid var(--tk-line-soft);
    cursor: pointer;
}

.ticketing-cinema-card.is-active {
    background: linear-gradient(135deg, #fff0f6 0%, #f0e2ff 100%);
    border-color: var(--tk-line-strong);
}

.ticketing-cinema-name {
    font-size: 13px;
    font-weight: 800;
    color: var(--tk-text-major);
}

.ticketing-cinema-sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--tk-text-muted);
}

.ticketing-cinema-tags {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ticketing-cinema-tags span {
    padding: 2px 8px;
    border-radius: var(--tk-radius-pill);
    background: rgba(229, 232, 255, 0.55);
    color: #5d6f9e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.ticketing-show-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ticketing-show-item {
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--tk-line-soft);
    text-align: left;
    cursor: pointer;
}

.ticketing-show-time strong {
    font-size: 17px;
    font-weight: 800;
    color: var(--tk-text-major);
}

.ticketing-show-time small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    color: var(--tk-text-faint);
}

.ticketing-show-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 11px;
    color: var(--tk-text-muted);
}

.ticketing-show-price {
    color: var(--tk-accent-rose);
    font-weight: 800;
    font-size: 14px;
}

.ticketing-show-summary {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 240, 246, 0.72);
    border: 1px solid var(--tk-line-soft);
    text-align: center;
}

.ticketing-show-summary-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--tk-text-major);
}

.ticketing-show-summary-sub {
    margin-top: 4px;
    font-size: 11px;
    color: var(--tk-text-muted);
}

.ticketing-screen-stage {
    margin-top: 4px;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0.4em;
    color: var(--tk-text-faint);
    background: linear-gradient(180deg, rgba(216, 196, 232, 0.55) 0%, rgba(216, 196, 232, 0) 90%);
    padding: 14px 0 6px;
    border-radius: 50% 50% 0 0 / 80% 80% 0 0;
}

.ticketing-seat-board {
    padding: 8px 4px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    border: 1px solid var(--tk-line-soft);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ticketing-seat-row {
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: center;
}

.ticketing-seat-row-label {
    width: 16px;
    text-align: center;
    font-size: 9px;
    color: var(--tk-text-faint);
    letter-spacing: 0.06em;
}

.ticketing-seat-cell {
    width: 18px;
    height: 18px;
    border-radius: 4px 4px 6px 6px;
    border: 1px solid rgba(216, 152, 176, 0.45);
    background: rgba(255, 255, 255, 0.8);
    color: var(--tk-text-major);
    font-size: 9px;
    cursor: pointer;
    line-height: 1;
}

.ticketing-seat-cell.is-picked {
    background: linear-gradient(135deg, #ff8aac 0%, #ea628b 100%);
    border-color: rgba(234, 98, 139, 0.55);
    color: #fff;
}

.ticketing-seat-cell.is-sold {
    background: rgba(216, 199, 207, 0.55);
    color: rgba(255, 255, 255, 0.6);
    border-color: rgba(216, 199, 207, 0.35);
    cursor: not-allowed;
}

.ticketing-seat-aisle {
    display: inline-block;
    width: 10px;
}

.ticketing-seat-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 10px;
    color: var(--tk-text-muted);
}

.seat-legend-cell {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px 3px 4px 4px;
    margin-right: 4px;
    margin-left: 8px;
    vertical-align: middle;
    border: 1px solid rgba(216, 152, 176, 0.45);
    background: rgba(255, 255, 255, 0.8);
}

.seat-legend-cell.picked {
    background: linear-gradient(135deg, #ff8aac 0%, #ea628b 100%);
    border-color: rgba(234, 98, 139, 0.55);
}

.seat-legend-cell.sold {
    background: rgba(216, 199, 207, 0.55);
    border-color: rgba(216, 199, 207, 0.35);
}

.ticketing-seat-summary {
    text-align: center;
    font-size: 11px;
    color: var(--tk-text-body);
    letter-spacing: 0.06em;
    line-height: 1.6;
}

/* ----- 演唱会 ----- */
.ticketing-concert-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ticketing-concert-card {
    display: grid;
    grid-template-columns: 78px 1fr;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid var(--tk-line-soft);
    box-shadow: var(--tk-shadow-card);
    text-align: left;
    cursor: pointer;
}

.ticketing-concert-poster {
    width: 78px;
    height: 100px;
    border-radius: 12px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 8px;
    background: #ead7ff;
}

.ticketing-concert-poster-mark {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    color: #6f4a58;
    font-weight: 800;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ticketing-concert-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ticketing-concert-artist {
    font-size: 14px;
    font-weight: 800;
    color: var(--tk-text-major);
    letter-spacing: 0.04em;
}

.ticketing-concert-tour {
    font-size: 12px;
    color: var(--tk-text-body);
    letter-spacing: 0.04em;
}

.ticketing-concert-meta {
    margin-top: 2px;
    font-size: 10px;
    color: var(--tk-text-muted);
}

.ticketing-concert-genre {
    margin-top: 6px;
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--tk-radius-pill);
    font-size: 9px;
    font-weight: 700;
    color: #7a5464;
    background: linear-gradient(135deg, #fff0f6 0%, #f0e2ff 100%);
    width: fit-content;
}

.ticketing-concert-hero {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 14px;
    padding: 16px;
    border-radius: var(--tk-radius-card);
    background: linear-gradient(135deg, rgba(255, 240, 246, 0.92) 0%, rgba(234, 215, 255, 0.85) 100%);
    border: 1px solid var(--tk-line-strong);
    box-shadow: var(--tk-shadow-card);
    align-items: center;
}

.ticketing-concert-hero-poster {
    width: 88px;
    height: 110px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.06em;
    background: linear-gradient(135deg, #f0d4ff 0%, #c79df0 100%);
    box-shadow: 0 8px 18px rgba(154, 122, 197, 0.18);
}

.ticketing-concert-hero-tour {
    font-size: 13px;
    color: var(--tk-text-body);
    letter-spacing: 0.06em;
}

.ticketing-concert-hero-artist {
    margin-top: 4px;
    font-size: 19px;
    font-weight: 800;
    color: var(--tk-text-major);
    letter-spacing: 0.04em;
}

.ticketing-concert-hero-meta {
    margin-top: 6px;
    font-size: 11px;
    color: var(--tk-text-muted);
}

.ticketing-tier-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ticketing-tier-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--tk-line-soft);
    cursor: pointer;
}

.ticketing-tier-row.is-active {
    background: linear-gradient(135deg, #fff0f6 0%, #f0e2ff 100%);
    border-color: var(--tk-line-strong);
}

.ticketing-tier-row.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ticketing-tier-label {
    font-size: 14px;
    font-weight: 800;
    color: var(--tk-text-major);
    letter-spacing: 0.04em;
}

.ticketing-tier-remain {
    margin-top: 2px;
    font-size: 10px;
    color: var(--tk-text-muted);
}

.ticketing-tier-price {
    font-size: 16px;
    font-weight: 800;
    color: var(--tk-accent-rose);
}

.ticketing-qty-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--tk-line-soft);
}

.ticketing-qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--tk-line-strong);
    background: rgba(255, 255, 255, 0.7);
    color: var(--tk-text-major);
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
}

.ticketing-qty-btn[disabled] {
    opacity: 0.4;
}

.ticketing-qty-display {
    min-width: 32px;
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    color: var(--tk-text-major);
}

.ticketing-qty-hint {
    margin-left: auto;
    font-size: 10px;
    color: var(--tk-text-faint);
}

/* ----- 票根（书签风） ----- */
.ticketing-mytickets-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ticketing-mytickets-hub-hint {
    font-size: 11px;
    line-height: 1.65;
    color: var(--tk-text-muted);
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--tk-line-soft);
}

.ticketing-mytickets-zone-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ticketing-mytickets-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 14px 12px 16px;
    border-radius: 16px;
    border: 1px solid var(--tk-line-strong);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--tk-shadow-card);
    cursor: pointer;
    text-align: left;
    appearance: none;
    font: inherit;
    color: var(--tk-text-major);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ticketing-mytickets-zone:active {
    transform: translateY(1px);
}

.ticketing-mytickets-zone-title {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.ticketing-mytickets-zone-count {
    font-size: 18px;
    font-weight: 800;
    color: var(--tk-accent-rose);
    letter-spacing: 0.02em;
}

.ticketing-mytickets-zone-sub {
    font-size: 10px;
    line-height: 1.45;
    color: var(--tk-text-muted);
}

.ticketing-mytickets-zone-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--tk-text-faint);
}

.ticketing-mytickets-backrow {
    margin-bottom: 12px;
}

.ticketing-mytickets-zone-back {
    appearance: none;
    border: none;
    background: rgba(255, 255, 255, 0.55);
    color: var(--tk-text-major);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--tk-line-soft);
}

.ticketing-empty-tickets {
    padding: 28px 20px;
    border-radius: 18px;
    text-align: center;
    border: 1px dashed var(--tk-line-soft);
    background: rgba(255, 255, 255, 0.6);
}

.ticketing-empty-tickets-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--tk-text-major);
    letter-spacing: 0.06em;
}

.ticketing-empty-tickets-hint {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--tk-text-muted);
}

.ticketing-stub {
    position: relative;
    display: grid;
    grid-template-columns: 80px 4px 1fr;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--tk-line-strong);
    box-shadow: var(--tk-shadow-card);
}

.ticketing-stub-side {
    padding: 14px 8px;
    background: linear-gradient(180deg, var(--tk-accent-pink) 0%, var(--tk-accent-rose) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    text-align: left;
}

.ticketing-accent-mint .ticketing-stub-side {
    background: linear-gradient(180deg, #c8efe1 0%, #79c5ad 100%);
}

.ticketing-accent-sky .ticketing-stub-side {
    background: linear-gradient(180deg, #d4e2ff 0%, #7e9be8 100%);
}

.ticketing-accent-peach .ticketing-stub-side {
    background: linear-gradient(180deg, #ffe2cf 0%, #f49a7a 100%);
}

.ticketing-accent-lilac .ticketing-stub-side {
    background: linear-gradient(180deg, #ead7ff 0%, #aa84e6 100%);
}

.ticketing-stub-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.ticketing-stub-id {
    font-size: 9px;
    letter-spacing: 0.18em;
    opacity: 0.8;
}

.ticketing-stub-perforation {
    position: relative;
    background: transparent;
}

.ticketing-stub-perforation::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(216, 152, 176, 0.5) 0,
        rgba(216, 152, 176, 0.5) 4px,
        transparent 4px,
        transparent 8px
    );
}

.ticketing-stub-main {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ticketing-stub-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--tk-text-major);
    letter-spacing: 0.04em;
}

.ticketing-stub-sub {
    font-size: 11px;
    color: var(--tk-text-muted);
    letter-spacing: 0.04em;
}

.ticketing-stub-meta {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: var(--tk-text-body);
    line-height: 1.65;
}

.ticketing-stub-footer {
    margin-top: 6px;
    padding-top: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px dashed rgba(216, 152, 176, 0.32);
    font-size: 10px;
    color: var(--tk-text-muted);
    letter-spacing: 0.04em;
}

.ticketing-stub-delete {
    border: none;
    background: rgba(216, 199, 207, 0.36);
    color: #82576a;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--tk-radius-pill);
    cursor: pointer;
    letter-spacing: 0.06em;
}

/* ----- 已使用票根：love咪 logo 印章 + 验票区撕痕 ----- */
.ticketing-stub.is-used {
    opacity: 0.92;
    filter: grayscale(0.18);
}

.ticketing-stub.is-used .ticketing-stub-title,
.ticketing-stub.is-used .ticketing-stub-sub,
.ticketing-stub.is-used .ticketing-stub-meta {
    color: var(--tk-text-muted);
}

.ticketing-stub-stamp {
    position: absolute;
    top: 8px;
    right: 10px;
    pointer-events: none;
    transform: rotate(-14deg);
    z-index: 3;
    animation: ticketingStampPop 0.6s ease-out;
}

.ticketing-stub-stamp-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2.5px solid rgba(234, 98, 139, 0.82);
    background: rgba(255, 245, 249, 0.18);
    color: rgba(234, 98, 139, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-shadow: 0 0 0 1px rgba(234, 98, 139, 0.38) inset;
    mix-blend-mode: multiply;
    font-family: 'Times New Roman', serif;
}

.ticketing-stub-stamp-title {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: 1;
}

.ticketing-stub-stamp-sub {
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.3em;
    opacity: 0.85;
}

.ticketing-stub-stamp-date {
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0.05em;
    opacity: 0.8;
}

@keyframes ticketingStampPop {
    0% { transform: rotate(-14deg) scale(1.6); opacity: 0; }
    60% { transform: rotate(-14deg) scale(0.94); opacity: 1; }
    100% { transform: rotate(-14deg) scale(1); opacity: 1; }
}

.ticketing-stub-torn {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 78px;
    width: 6px;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 60%),
        radial-gradient(circle at 3px 3px, transparent 2.5px, rgba(255,255,255,0.9) 2.5px) 0 0 / 6px 6px;
    mask: linear-gradient(180deg, transparent 0, #000 4px, #000 calc(100% - 4px), transparent 100%);
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 4px, #000 calc(100% - 4px), transparent 100%);
}

/* ----- 电影票主页：搜索条 / Tabs / 年份徽标 ----- */
.ticketing-movie-searchbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid var(--tk-line-soft);
    box-shadow: var(--tk-shadow-card);
}

.ticketing-movie-search-input {
    font-size: 14px;
    font-weight: 600;
}

.ticketing-movie-search-btn {
    padding: 8px 16px;
    border-radius: var(--tk-radius-pill);
    background: linear-gradient(135deg, #ff8aac 0%, #ea628b 100%);
    color: #fff;
    border: none;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(234, 98, 139, 0.26);
}

.ticketing-movie-search-btn:active {
    transform: translateY(1px);
}

.ticketing-movie-search-hint {
    padding: 0 6px;
    font-size: 11px;
    color: var(--tk-text-muted);
    line-height: 1.7;
    letter-spacing: 0.03em;
}

.ticketing-movie-tabs {
    margin-top: 2px;
}

.ticketing-movie-year {
    position: absolute;
    left: 6px;
    top: 6px;
    padding: 2px 6px;
    border-radius: var(--tk-radius-pill);
    font-size: 9px;
    font-weight: 800;
    color: #fff;
    background: rgba(107, 71, 84, 0.68);
    letter-spacing: 0.04em;
}

.ticketing-movie-grid--single {
    grid-template-columns: 1fr;
}

.ticketing-movie-card.is-wide {
    flex-direction: row;
    align-items: center;
    padding: 0;
}

.ticketing-movie-card.is-wide .ticketing-movie-poster {
    width: 110px;
    height: 100%;
    min-height: 100px;
    flex-shrink: 0;
    border-radius: 14px 0 0 14px;
}

.ticketing-movie-card.is-wide .ticketing-movie-meta {
    flex: 1;
    padding: 10px 12px;
}

.ticketing-movie-detail-year {
    font-size: 12px;
    color: var(--tk-text-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.ticketing-cinema-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: var(--tk-radius-pill);
    background: linear-gradient(135deg, #b6c8f7 0%, #9ab0e8 100%);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    vertical-align: 2px;
}

html[data-appearance="dark"] .ticketing-stub-stamp-circle {
    border-color: rgba(255, 170, 190, 0.72);
    color: rgba(255, 170, 190, 0.92);
    background: rgba(0, 0, 0, 0.2);
}

html[data-appearance="dark"] .ticketing-movie-searchbar {
    background: rgba(44, 40, 54, 0.72);
}

/* ----- 成功页 ----- */
.ticketing-success-card {
    padding: 24px 18px;
    border-radius: var(--tk-radius-card);
    background: linear-gradient(135deg, #fff7f9 0%, #f4ecff 100%);
    border: 1px solid var(--tk-line-strong);
    box-shadow: var(--tk-shadow-card);
    text-align: center;
}

.ticketing-success-mark {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    background: linear-gradient(180deg, #ff8aac 0%, #ea628b 100%);
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 26px rgba(234, 98, 139, 0.26);
}

.ticketing-success-title {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 800;
    color: var(--tk-text-major);
    letter-spacing: 0.06em;
}

.ticketing-success-sub {
    margin-top: 6px;
    font-size: 12px;
    color: var(--tk-text-muted);
    letter-spacing: 0.04em;
}

.ticketing-success-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* ----- Busy 占位 ----- */
.ticketing-busy {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 5;
    pointer-events: none;
}

.ticketing-busy-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tk-accent-rose);
    animation: ticketingBusyBounce 1s infinite ease-in-out;
}

.ticketing-busy-dot:nth-child(2) {
    animation-delay: 0.16s;
}

.ticketing-busy-dot:nth-child(3) {
    animation-delay: 0.32s;
}

@keyframes ticketingBusyBounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

/* ----- love咪记账头部「票务」入口按钮 ----- */
/* 原 couple-space.css 中头部为 52px 1fr 52px；扩入「票务」按钮后第三列要自适应，否则按钮会被裁切 */
.couple-bookkeeping-header {
    grid-template-columns: 52px 1fr auto;
}

.couple-bookkeeping-ticket-entry {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 36px;
    padding: 0 12px;
    border-radius: var(--tk-radius-pill);
    border: 1px solid var(--tk-line-strong);
    background: linear-gradient(135deg, #fff0f6 0%, #ebd5ff 100%);
    color: #7a5464;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(234, 98, 139, 0.12);
    justify-self: end;
    margin: 0;
}

.couple-bookkeeping-ticket-entry:active {
    transform: translateY(1px);
    opacity: 0.92;
}

.couple-bookkeeping-ticket-entry svg {
    flex-shrink: 0;
}

/* ----- 暗色 ----- */
html[data-appearance="dark"] .couple-bookkeeping-ticket-entry {
    background: linear-gradient(135deg, rgba(118, 70, 90, 0.7) 0%, rgba(96, 78, 138, 0.7) 100%);
    color: #ffeaf1;
    border-color: rgba(255, 214, 228, 0.18);
}

html[data-appearance="dark"] .couple-ticketing-overlay {
    color: rgba(245, 232, 239, 0.92);
}

html[data-appearance="dark"] .ticketing-shell {
    color: rgba(245, 232, 239, 0.92);
}

html[data-appearance="dark"] .ticketing-back,
html[data-appearance="dark"] .ticketing-icon-btn,
html[data-appearance="dark"] .ticketing-search-field,
html[data-appearance="dark"] .ticketing-search-card,
html[data-appearance="dark"] .ticketing-route-summary,
html[data-appearance="dark"] .ticketing-train-item,
html[data-appearance="dark"] .ticketing-flight-item,
html[data-appearance="dark"] .ticketing-detail-card,
html[data-appearance="dark"] .ticketing-passenger-card,
html[data-appearance="dark"] .ticketing-pay-bar,
html[data-appearance="dark"] .ticketing-feature-card,
html[data-appearance="dark"] .ticketing-upcoming-card,
html[data-appearance="dark"] .ticketing-cinema-card,
html[data-appearance="dark"] .ticketing-show-item,
html[data-appearance="dark"] .ticketing-show-summary,
html[data-appearance="dark"] .ticketing-tier-row,
html[data-appearance="dark"] .ticketing-qty-row,
html[data-appearance="dark"] .ticketing-stub,
html[data-appearance="dark"] .ticketing-success-card,
html[data-appearance="dark"] .ticketing-empty-tickets,
html[data-appearance="dark"] .ticketing-empty,
html[data-appearance="dark"] .ticketing-paper-quote,
html[data-appearance="dark"] .ticketing-soft-chip,
html[data-appearance="dark"] .ticketing-tab,
html[data-appearance="dark"] .ticketing-date-chip,
html[data-appearance="dark"] .ticketing-seat-card,
html[data-appearance="dark"] .ticketing-seat-board,
html[data-appearance="dark"] .ticketing-search-swap,
html[data-appearance="dark"] .ticketing-city-pill,
html[data-appearance="dark"] .ticketing-movie-card,
html[data-appearance="dark"] .ticketing-movie-detail-card,
html[data-appearance="dark"] .ticketing-concert-card,
html[data-appearance="dark"] .ticketing-secondary-btn {
    background: rgba(46, 38, 50, 0.84);
    border-color: rgba(255, 214, 228, 0.14);
    color: rgba(245, 232, 239, 0.92);
}

html[data-appearance="dark"] .ticketing-title,
html[data-appearance="dark"] .ticketing-feature-title,
html[data-appearance="dark"] .ticketing-hero-title,
html[data-appearance="dark"] .ticketing-train-time-major,
html[data-appearance="dark"] .ticketing-flight-time strong,
html[data-appearance="dark"] .ticketing-detail-time strong,
html[data-appearance="dark"] .ticketing-detail-mainline,
html[data-appearance="dark"] .ticketing-route-points,
html[data-appearance="dark"] .ticketing-cinema-name,
html[data-appearance="dark"] .ticketing-show-time strong,
html[data-appearance="dark"] .ticketing-show-summary-title,
html[data-appearance="dark"] .ticketing-concert-artist,
html[data-appearance="dark"] .ticketing-concert-hero-artist,
html[data-appearance="dark"] .ticketing-stub-title,
html[data-appearance="dark"] .ticketing-success-title,
html[data-appearance="dark"] .ticketing-empty-tickets-title,
html[data-appearance="dark"] .ticketing-tier-label,
html[data-appearance="dark"] .ticketing-movie-title,
html[data-appearance="dark"] .ticketing-movie-detail-title {
    color: #ffe6f0;
}

html[data-appearance="dark"] .ticketing-section-label,
html[data-appearance="dark"] .ticketing-hero-line,
html[data-appearance="dark"] .ticketing-hero-sub,
html[data-appearance="dark"] .ticketing-feature-sub,
html[data-appearance="dark"] .ticketing-route-meta,
html[data-appearance="dark"] .ticketing-detail-subline,
html[data-appearance="dark"] .ticketing-train-station,
html[data-appearance="dark"] .ticketing-train-bridge,
html[data-appearance="dark"] .ticketing-flight-time small,
html[data-appearance="dark"] .ticketing-detail-time small,
html[data-appearance="dark"] .ticketing-passenger-row span,
html[data-appearance="dark"] .ticketing-cinema-sub,
html[data-appearance="dark"] .ticketing-show-meta,
html[data-appearance="dark"] .ticketing-show-summary-sub,
html[data-appearance="dark"] .ticketing-concert-meta,
html[data-appearance="dark"] .ticketing-concert-tour,
html[data-appearance="dark"] .ticketing-concert-hero-meta,
html[data-appearance="dark"] .ticketing-concert-hero-tour,
html[data-appearance="dark"] .ticketing-stub-sub,
html[data-appearance="dark"] .ticketing-stub-meta,
html[data-appearance="dark"] .ticketing-stub-footer,
html[data-appearance="dark"] .ticketing-success-sub,
html[data-appearance="dark"] .ticketing-empty-tickets-hint,
html[data-appearance="dark"] .ticketing-paper-quote,
html[data-appearance="dark"] .ticketing-search-label,
html[data-appearance="dark"] .ticketing-tier-remain,
html[data-appearance="dark"] .ticketing-pay-amount span,
html[data-appearance="dark"] .ticketing-train-price-tag,
html[data-appearance="dark"] .ticketing-flight-price-tag,
html[data-appearance="dark"] .ticketing-flight-airline-no,
html[data-appearance="dark"] .ticketing-onTime,
html[data-appearance="dark"] .ticketing-show-time small,
html[data-appearance="dark"] .ticketing-empty,
html[data-appearance="dark"] .ticketing-footnote {
    color: rgba(245, 232, 239, 0.68);
}

html[data-appearance="dark"] .ticketing-search-input,
html[data-appearance="dark"] .ticketing-passenger-input {
    color: #ffeaf1;
}

html[data-appearance="dark"] .ticketing-soft-chip.is-active,
html[data-appearance="dark"] .ticketing-tab.is-active,
html[data-appearance="dark"] .ticketing-date-chip.is-active,
html[data-appearance="dark"] .ticketing-seat-card.is-active,
html[data-appearance="dark"] .ticketing-cinema-card.is-active,
html[data-appearance="dark"] .ticketing-tier-row.is-active {
    background: linear-gradient(135deg, rgba(118, 70, 90, 0.7) 0%, rgba(96, 78, 138, 0.7) 100%);
    color: #fff5f9;
}

html[data-appearance="dark"] .ticketing-train-price-num,
html[data-appearance="dark"] .ticketing-flight-price-num,
html[data-appearance="dark"] .ticketing-seat-price,
html[data-appearance="dark"] .ticketing-show-price,
html[data-appearance="dark"] .ticketing-tier-price,
html[data-appearance="dark"] .ticketing-pay-amount strong {
    color: #ffb4c8;
}

html[data-appearance="dark"] .ticketing-busy {
    background: rgba(20, 17, 24, 0.5);
}

html[data-appearance="dark"] .ticketing-seat-cell {
    background: rgba(60, 53, 66, 0.84);
    border-color: rgba(255, 214, 228, 0.18);
    color: rgba(245, 232, 239, 0.85);
}

html[data-appearance="dark"] .ticketing-seat-cell.is-sold {
    background: rgba(80, 70, 86, 0.62);
    color: rgba(255, 255, 255, 0.32);
}

/* ===================================================================
 * 多乘客区块（火车 / 飞机详情页）
 * =================================================================== */
.ticketing-passenger-card.ticketing-passenger-card--multi {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 12px;
}

.ticketing-passenger-row-card {
    border: 1px dashed var(--tk-line-strong);
    border-radius: 14px;
    padding: 10px 12px 6px;
    background: rgba(255, 255, 255, 0.62);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ticketing-passenger-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.ticketing-passenger-role-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--tk-radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #6b4754;
}

.ticketing-passenger-role-tag--user {
    background: linear-gradient(135deg, #ffe8f1 0%, #ffd6e3 100%);
}

.ticketing-passenger-role-tag--char {
    background: linear-gradient(135deg, #e9d8ff 0%, #d8e7ff 100%);
}

.ticketing-passenger-remove {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--tk-text-muted);
    font-size: 12px;
    letter-spacing: 0.1em;
    cursor: pointer;
    padding: 0;
}

.ticketing-passenger-remove:hover {
    color: var(--tk-accent-rose);
}

.ticketing-passenger-add {
    appearance: none;
    border: 1px dashed var(--tk-accent-rose);
    background: transparent;
    color: var(--tk-accent-rose);
    border-radius: var(--tk-radius-pill);
    height: 36px;
    font-size: 12px;
    letter-spacing: 0.1em;
    cursor: pointer;
    margin-top: 4px;
}

.ticketing-passenger-add:hover {
    background: rgba(234, 98, 139, 0.08);
}

.ticketing-passenger-hint {
    font-size: 11.5px;
    color: var(--tk-text-muted);
    text-align: center;
    line-height: 1.5;
    padding: 4px 4px 2px;
}

.ticketing-passenger-input[readonly] {
    color: var(--tk-text-major);
    background: rgba(244, 226, 234, 0.36);
}

/* ===================================================================
 * 同行 Char 切换块（电影 / 演唱会）
 * =================================================================== */
.ticketing-companion-toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px 12px;
    margin: 10px 14px 0;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px dashed var(--tk-line-strong);
    background: linear-gradient(135deg, #fff7fb 0%, #f1e6ff 100%);
    cursor: pointer;
    user-select: none;
}

.ticketing-companion-toggle input[type="checkbox"] {
    grid-row: 1 / span 2;
    grid-column: 1 / 2;
    width: 18px;
    height: 18px;
    accent-color: var(--tk-accent-rose);
}

.ticketing-companion-toggle-tag {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    font-size: 13px;
    font-weight: 600;
    color: var(--tk-text-major);
    letter-spacing: 0.1em;
}

.ticketing-companion-toggle-hint {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    font-size: 11.5px;
    color: var(--tk-text-muted);
    line-height: 1.45;
}

html[data-appearance="dark"] .ticketing-passenger-row-card {
    background: rgba(60, 53, 66, 0.46);
    border-color: rgba(255, 214, 228, 0.22);
}

html[data-appearance="dark"] .ticketing-companion-toggle {
    background: linear-gradient(135deg, rgba(80, 60, 88, 0.6) 0%, rgba(78, 70, 110, 0.6) 100%);
    border-color: rgba(255, 214, 228, 0.22);
}

/* ===================================================================
 * 微信聊天列表 - 服务通知虚拟入口
 * =================================================================== */
.wechat-chat-item--ticket-service .wechat-chat-avatar--service-notice {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(135deg, #ea628b 0%, #d39afa 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wechat-chat-tag.wechat-chat-tag--ticket-service {
    background: linear-gradient(135deg, #fff0f6 0%, #ebd5ff 100%);
    color: #7a5464;
}

html[data-appearance="dark"] .wechat-chat-tag.wechat-chat-tag--ticket-service {
    background: rgba(220, 184, 218, 0.22);
    color: #ffd9ec;
}

/* ===================================================================
 * 服务通知 overlay
 * =================================================================== */
.couple-ticketing-notice-overlay {
    position: absolute;
    inset: 0;
    z-index: 100126; /* 高于票务 overlay (100120) 与情侣空间 overlay */
    display: flex;
    flex-direction: column;
    border-radius: inherit;
    background:
        radial-gradient(circle at top right, rgba(248, 224, 233, 0.72) 0%, rgba(248, 224, 233, 0) 38%),
        radial-gradient(circle at top left, rgba(217, 232, 255, 0.62) 0%, rgba(217, 232, 255, 0) 30%),
        linear-gradient(180deg, #fff7f9 0%, #fdf6ff 100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity 0.24s ease, visibility 0.24s ease, transform 0.24s ease;
    box-sizing: border-box;
    overflow: hidden;
}

.couple-ticketing-notice-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.couple-ticketing-notice-shell {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.couple-ticketing-notice-header {
    display: grid;
    grid-template-columns: 44px 1fr 56px;
    align-items: center;
    padding: 22px 14px 12px;
    backdrop-filter: blur(8px);
}

.couple-ticketing-notice-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--tk-line-strong);
    background: rgba(255, 255, 255, 0.7);
    color: var(--tk-text-major);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.couple-ticketing-notice-title {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--tk-text-major);
}

.couple-ticketing-notice-clear {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--tk-text-muted);
    font-size: 12px;
    letter-spacing: 0.16em;
    cursor: pointer;
    justify-self: end;
}

.couple-ticketing-notice-clear:hover {
    color: var(--tk-accent-rose);
}

.couple-ticketing-notice-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 14px 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.couple-ticketing-notice-empty {
    margin-top: 64px;
    text-align: center;
    color: var(--tk-text-muted);
}

.couple-ticketing-notice-empty-mark {
    font-size: 32px;
}

.couple-ticketing-notice-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--tk-text-major);
    margin-top: 6px;
}

.couple-ticketing-notice-empty-sub {
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.6;
}

.couple-ticketing-notice-card {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid var(--tk-line-soft);
    box-shadow: var(--tk-shadow-card);
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
}

.couple-ticketing-notice-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, #f7b6ca 0%, #d9c4ff 100%);
}

.couple-ticketing-notice-card--reminder::before { background: linear-gradient(180deg, #ea628b 0%, #d39afa 100%); }
.couple-ticketing-notice-card--refund::before { background: linear-gradient(180deg, #b6e1d4 0%, #b6c8f7 100%); }
.couple-ticketing-notice-card--payment::before { background: linear-gradient(180deg, #f7d3e0 0%, #ffd6c0 100%); }

.couple-ticketing-notice-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.couple-ticketing-notice-tag {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 10px;
    border-radius: var(--tk-radius-pill);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    background: linear-gradient(135deg, #fff0f6 0%, #ebd5ff 100%);
    color: #7a5464;
}

.couple-ticketing-notice-tag--reminder { background: linear-gradient(135deg, #ffe5ee 0%, #f1d9ff 100%); }
.couple-ticketing-notice-tag--refund { background: linear-gradient(135deg, #d8f1e6 0%, #d6dffb 100%); }
.couple-ticketing-notice-tag--payment { background: linear-gradient(135deg, #ffe9f2 0%, #ffe2cf 100%); }

.couple-ticketing-notice-time {
    font-size: 11px;
    color: var(--tk-text-faint);
    letter-spacing: 0.08em;
}

.couple-ticketing-notice-card-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--tk-text-major);
}

.couple-ticketing-notice-card-summary {
    font-size: 13px;
    color: var(--tk-text-body);
}

.couple-ticketing-notice-card-lines {
    font-size: 12.5px;
    color: var(--tk-text-body);
    line-height: 1.6;
    margin-top: 2px;
}

.couple-ticketing-notice-card-lines > div {
    word-break: break-word;
}

.couple-ticketing-notice-card-actions {
    margin-top: 6px;
    display: flex;
    justify-content: flex-end;
}

.couple-ticketing-notice-action {
    appearance: none;
    border: none;
    background: linear-gradient(135deg, #ea628b 0%, #d39afa 100%);
    color: #fff;
    border-radius: var(--tk-radius-pill);
    height: 30px;
    padding: 0 16px;
    font-size: 12px;
    letter-spacing: 0.14em;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(234, 98, 139, 0.22);
}

.couple-ticketing-notice-action:hover {
    transform: translateY(-1px);
}

html[data-appearance="dark"] .couple-ticketing-notice-overlay {
    background:
        radial-gradient(circle at top right, rgba(115, 97, 164, 0.4) 0%, rgba(115, 97, 164, 0) 36%),
        radial-gradient(circle at top left, rgba(83, 100, 145, 0.32) 0%, rgba(83, 100, 145, 0) 32%),
        linear-gradient(180deg, #15131a 0%, #1d1b22 50%, #232029 100%);
}

html[data-appearance="dark"] .couple-ticketing-notice-card {
    background: rgba(40, 35, 46, 0.78);
    border-color: rgba(255, 214, 228, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

html[data-appearance="dark"] .couple-ticketing-notice-back {
    background: rgba(60, 53, 66, 0.58);
    border-color: rgba(255, 214, 228, 0.22);
    color: #ffd9ec;
}

/* ============================================================
 * love咪 放映厅 · 票根回看（电影约会聊天 + 总结长记忆）
 * ============================================================ */
.ticketing-stub.has-cinema-archive {
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.ticketing-stub.has-cinema-archive:active {
    transform: translateY(1px);
}

.ticketing-stub-archive-hint {
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 138, 172, 0.16) 0%, rgba(231, 203, 146, 0.16) 100%);
    border: 1px dashed rgba(231, 203, 146, 0.45);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: #b14d6e;
    text-align: center;
}

.cinema-archive-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 0 4px 18px;
}

.cinema-archive-summary-card {
    border-radius: 18px;
    padding: 14px 16px;
    background: linear-gradient(160deg, rgba(247, 224, 232, 0.78) 0%, rgba(229, 222, 255, 0.62) 100%);
    border: 1px solid rgba(231, 203, 146, 0.32);
    box-shadow: 0 6px 18px rgba(120, 70, 110, 0.12);
}

.cinema-archive-summary-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.cinema-archive-summary-tag {
    font-size: 11px;
    letter-spacing: 0.18em;
    color: #a05279;
    font-weight: 800;
}

.cinema-archive-summary-toggle {
    appearance: none;
    border: 1px solid rgba(160, 82, 121, 0.3);
    background: rgba(255, 255, 255, 0.6);
    color: #783156;
    border-radius: 999px;
    height: 26px;
    padding: 0 12px;
    font-size: 11px;
    cursor: pointer;
}

.cinema-archive-summary-card.is-expanded .cinema-archive-summary-toggle {
    background: linear-gradient(135deg, #ff8aac 0%, #ea628b 100%);
    color: #fff;
    border-color: transparent;
}

.cinema-archive-summary-body {
    margin-top: 10px;
}

.cinema-archive-summary-text {
    margin: 0;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 14px;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.75;
    color: #4b2b3b;
    white-space: pre-wrap;
    word-break: break-word;
}

.cinema-archive-meta-card {
    border-radius: 16px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(231, 203, 146, 0.25);
    text-align: center;
}

.cinema-archive-meta-title {
    font-size: 16px;
    font-weight: 800;
    color: #4b2b3b;
    letter-spacing: 0.04em;
}

.cinema-archive-meta-sub {
    margin-top: 4px;
    font-size: 11px;
    color: #8b6677;
    letter-spacing: 0.04em;
}

.cinema-archive-meta-foot {
    margin-top: 6px;
    font-size: 10px;
    color: #b58aa0;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.cinema-archive-chat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 4px;
}

.cinema-archive-bubble {
    max-width: 86%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 13px;
    line-height: 1.75;
    word-break: break-word;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 8px 18px rgba(120, 70, 110, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.65);
}

.cinema-archive-bubble--user {
    align-self: flex-end;
    background: linear-gradient(135deg, rgba(255, 138, 172, 0.85) 0%, rgba(234, 98, 139, 0.78) 100%);
    color: #fff;
    border-bottom-right-radius: 6px;
}

.cinema-archive-bubble--char {
    align-self: flex-start;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(247, 232, 244, 0.66) 100%);
    color: #3a2533;
    border-bottom-left-radius: 6px;
}

.cinema-archive-bubble-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
    gap: 8px;
}

.cinema-archive-bubble-name {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    opacity: 0.92;
}

.cinema-archive-bubble--user .cinema-archive-bubble-name {
    color: rgba(255, 255, 255, 0.95);
}

.cinema-archive-bubble--char .cinema-archive-bubble-name {
    color: #783156;
}

.cinema-archive-bubble-time {
    font-size: 10px;
    opacity: 0.72;
    font-family: 'Menlo', 'Consolas', monospace;
}

.cinema-archive-bubble-body .cinema-archive-line + .cinema-archive-line {
    margin-top: 6px;
}

.cinema-archive-empty-line {
    color: #b58aa0;
    font-size: 11px;
}

html[data-appearance="dark"] .cinema-archive-summary-card {
    background: linear-gradient(160deg, rgba(60, 38, 56, 0.78) 0%, rgba(40, 28, 60, 0.7) 100%);
    border-color: rgba(231, 203, 146, 0.28);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}

html[data-appearance="dark"] .cinema-archive-summary-tag {
    color: #ffc4dc;
}

html[data-appearance="dark"] .cinema-archive-summary-toggle {
    background: rgba(60, 50, 72, 0.65);
    color: #ffd9ec;
    border-color: rgba(255, 214, 228, 0.28);
}

html[data-appearance="dark"] .cinema-archive-summary-text {
    background: rgba(34, 26, 42, 0.78);
    color: #f3dde7;
}

html[data-appearance="dark"] .cinema-archive-meta-card {
    background: rgba(40, 32, 50, 0.74);
    border-color: rgba(231, 203, 146, 0.22);
    color: #f3dde7;
}

html[data-appearance="dark"] .cinema-archive-meta-title {
    color: #fff4f8;
}

html[data-appearance="dark"] .cinema-archive-meta-sub {
    color: #c8a7bb;
}

html[data-appearance="dark"] .cinema-archive-bubble--char {
    background: linear-gradient(135deg, rgba(60, 44, 70, 0.78) 0%, rgba(80, 50, 80, 0.68) 100%);
    color: #f3dde7;
    border-color: rgba(255, 214, 228, 0.18);
}

html[data-appearance="dark"] .cinema-archive-bubble--char .cinema-archive-bubble-name {
    color: #ffc4dc;
}

html[data-appearance="dark"] .ticketing-stub-archive-hint {
    background: linear-gradient(135deg, rgba(255, 138, 172, 0.18) 0%, rgba(231, 203, 146, 0.18) 100%);
    border-color: rgba(231, 203, 146, 0.38);
    color: #ffd9ec;
}