:root {
    --h5-blue: #1677FF;
    --h5-blue-dark: #0958d9;
    --h5-success: #52C41A;
    --h5-warning: #FAAD14;
    --h5-danger: #FF4D4F;
    --h5-ink: #1f1f1f;
    --h5-muted: #8C8C8C;
    --h5-line: #f0f0f0;
    --h5-bg: #F5F5F5;
    --h5-white: #fff;
    --h5-max: 800px;
    --h5-safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
body.h5-body {
    margin: 0;
    color: var(--h5-ink);
    background: var(--h5-bg);
    font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    line-height: 1.5;
}
a { color: var(--h5-blue); text-decoration: none; }
button, input, select, textarea { font: inherit; }

.h5-topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between;
    min-height: 52px; padding: 0 16px;
    background: rgba(255,255,255,.96); border-bottom: 1px solid var(--h5-line);
    backdrop-filter: blur(8px);
}
.h5-brand { color: var(--h5-ink); font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.h5-top-actions { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.h5-inline-form { display: inline; }
.h5-inline-form button {
    border: 0; background: none; color: var(--h5-muted); cursor: pointer; padding: 0;
}

.h5-main {
    width: min(100%, var(--h5-max));
    margin: 0 auto;
    padding: 20px 16px calc(96px + var(--h5-safe-bottom));
}

.h5-alert {
    margin-bottom: 14px; padding: 12px 14px;
    background: #fff; border-left: 3px solid;
}
.h5-alert.success { border-color: var(--h5-success); color: #389e0d; }
.h5-alert.warning { border-color: var(--h5-warning); color: #ad6800; }
.h5-alert.error { border-color: var(--h5-danger); color: #cf1322; }

.h5-eyebrow { margin: 0 0 8px; color: var(--h5-blue); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.h5-page-title { margin-bottom: 18px; }
.h5-page-title h1 { margin: 0 0 6px; font-size: 24px; }
.h5-page-title p { margin: 0; color: var(--h5-muted); }

.h5-event-card {
    display: block; overflow: hidden; margin-bottom: 14px;
    background: var(--h5-white); border: 1px solid var(--h5-line);
}
.h5-event-card.featured { margin-bottom: 18px; }
.h5-banner {
    display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #dbe7f5;
}
.h5-banner.placeholder {
    background: linear-gradient(135deg, #d6e4ff 0%, #efdbff 100%);
}
.h5-event-body { padding: 16px; }
.h5-event-body h1, .h5-event-body h2 { margin: 8px 0; font-size: 22px; }
.h5-event-card.compact .h5-event-body h2 { font-size: 17px; }
.h5-meta { margin: 4px 0; color: var(--h5-muted); font-size: 14px; }

.h5-status {
    display: inline-block; padding: 2px 8px; border: 1px solid currentColor; font-size: 12px;
}
.h5-status.open { color: #389e0d; background: #f6ffed; }
.h5-status.reg_closed { color: #d48806; background: #fffbe6; }
.h5-status.finished { color: #8c8c8c; background: #fafafa; }

.h5-cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.h5-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0 18px; border: 1px solid transparent;
    font-size: 16px; cursor: pointer; background: var(--h5-blue); color: #fff;
}
.h5-btn:hover { background: var(--h5-blue-dark); color: #fff; }
.h5-btn.ghost { color: var(--h5-blue); background: #fff; border-color: #91caff; }
.h5-btn.ghost:hover { background: #e6f4ff; color: var(--h5-blue); }
.h5-btn.block { width: 100%; }
.h5-btn.disabled, .h5-btn:disabled {
    color: #bfbfbf; background: #f5f5f5; border-color: #f0f0f0; cursor: not-allowed;
}
.h5-secondary-link { text-align: center; margin-top: 8px; }

.h5-detail-head { margin: 16px 0 20px; }
.h5-richtext {
    padding: 18px 16px; background: #fff; border: 1px solid var(--h5-line);
    overflow-wrap: anywhere; line-height: 1.75;
}
/* 段落之间留出可见间距，与后台编辑器 initialStyle 口径一致，使 <p> 与 <br> 视觉可区分 */
.h5-richtext p { margin: 0 0 14px; }
.h5-richtext p:last-child { margin-bottom: 0; }
.h5-richtext img { max-width: 100%; height: auto; }

.h5-bottom-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px;
    padding: 10px 16px calc(10px + var(--h5-safe-bottom));
    background: rgba(255,255,255,.96); border-top: 1px solid var(--h5-line);
}
.h5-bottom-bar .h5-btn { width: 100%; }

.h5-form { display: grid; gap: 14px; max-width: 500px; }
.h5-form label { display: grid; gap: 6px; font-size: 14px; color: #434343; }
.h5-form input {
    width: 100%; min-height: 44px; padding: 0 12px;
    border: 1px solid #d9d9d9; background: #fff; font-size: 16px;
}
.h5-form select, .h5-form textarea {
    width: 100%; min-height: 44px; padding: 10px 12px;
    border: 1px solid #d9d9d9; background: #fff; font-size: 16px; font-family: inherit;
}
.h5-field-label { font-size: 14px; color: #434343; }
.h5-required { color: var(--h5-danger); margin-left: 2px; }

.h5-invoice-readonly { display: grid; gap: 6px; }
.h5-readonly-chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    color: #595959;
    background: #f5f5f5;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    font-size: 15px;
}
.h5-invoice-type { display: grid; gap: 8px; }
.h5-segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.h5-segment-item {
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    background: #fff;
    border: 1.5px solid #e8e8e8;
    border-radius: 8px;
    cursor: pointer;
}
.h5-segment-item input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.h5-segment-item span { font-size: 15px; color: #434343; }
.h5-segment-item.active {
    border-color: var(--h5-blue);
    background: #eef6ff;
}
.h5-segment-item.active span { color: var(--h5-blue); font-weight: 600; }
.h5-segment-item.disabled {
    opacity: .45;
    pointer-events: none;
}
.h5-wechat-title-row { display: grid; gap: 6px; }
.h5-wechat-title-row .h5-hint { margin: 0; }

/* 票种选择：卡片式单选，避免原生 radio 在部分微信内核里过大、错位 */
.h5-ticket-section { display: grid; gap: 8px; }
.h5-ticket-list { display: grid; gap: 10px; }
.h5-ticket-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 14px 16px;
    background: var(--h5-white);
    border: 1.5px solid #e8e8e8;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color: transparent;
}
.h5-ticket-card input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
}
.h5-ticket-card__indicator {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #d9d9d9;
    border-radius: 50%;
    background: var(--h5-white);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.h5-ticket-card__main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}
.h5-ticket-card__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--h5-ink);
    line-height: 1.4;
}
.h5-ticket-card__price {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--h5-blue);
    line-height: 1.2;
}
.h5-ticket-card:is(:has(input:checked), .is-selected) {
    border-color: var(--h5-blue);
    background: #f6faff;
    box-shadow: 0 0 0 1px rgba(22, 119, 255, .12);
}
.h5-ticket-card:is(:has(input:checked), .is-selected) .h5-ticket-card__indicator {
    border-color: var(--h5-blue);
    box-shadow: inset 0 0 0 4px var(--h5-white);
    background: var(--h5-blue);
}
.h5-phone-box {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px; background: #fff; border: 1px dashed #91caff;
}
.h5-code-row span { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.h5-hint { color: var(--h5-muted); font-size: 13px; }
.h5-hint.debug { color: #ad6800; }
.h5-empty {
    padding: 48px 20px; text-align: center; background: #fff; border: 1px solid var(--h5-line);
}
.h5-empty h1, .h5-empty h2 { margin: 0 0 8px; }
.h5-empty p { color: var(--h5-muted); }
.h5-auth-page, .h5-form-page, .h5-list-page, .h5-pay-page, .h5-success-page { max-width: 560px; }
.h5-pagination { margin-top: 16px; }

.h5-pay-summary {
    margin-bottom: 18px; padding: 16px;
    background: #fff; border: 1px solid var(--h5-line);
}
.h5-pay-summary p {
    display: flex; justify-content: space-between; gap: 12px;
    margin: 0 0 10px; color: var(--h5-muted);
}
.h5-pay-summary p:last-child { margin-bottom: 0; }
.h5-pay-summary strong { color: var(--h5-ink); font-weight: 600; }
.h5-pay-amount strong { color: var(--h5-blue); font-size: 22px; }
.h5-pay-status {
    margin: 0 0 14px;
    padding: 12px 14px;
    color: var(--h5-blue);
    background: #eef6ff;
    border: 1px solid #c8ddf5;
    border-radius: 10px;
    text-align: center;
    font-size: 15px;
}
.h5-pay-loading {
    margin: 18px 0;
    padding: 18px;
    text-align: center;
    color: var(--h5-muted);
    background: #f7fafc;
    border: 1px dashed #d5e0ea;
    border-radius: 10px;
}
.h5-pay-external-title {
    margin: 0 0 10px;
    font-size: 18px;
}
.h5-pay-steps {
    margin: 0 0 16px;
    padding-left: 20px;
    color: var(--h5-muted);
    line-height: 1.7;
}
.h5-pay-poll-hint { margin-top: 12px; }
.h5-qr-wrap {
    display: flex; justify-content: center;
    margin: 16px 0; padding: 16px; background: #fff; border: 1px solid var(--h5-line);
}
.h5-qr-save-card {
    padding: 4px 0 8px;
}
.h5-qr-save-card .h5-qr-wrap {
    margin: 0 0 10px;
    border-radius: 10px;
}
.h5-qr-code-text {
    text-align: center;
    margin: 0 0 12px;
    word-break: break-all;
}
.h5-save-tip {
    padding: 12px 14px;
    background: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 8px;
    font-size: 13px;
    color: #614700;
}
.h5-save-tip strong {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    color: #ad6800;
}
.h5-save-tip p {
    margin: 0;
    line-height: 1.5;
}
.h5-qr-wrap img { display: block; width: min(100%, 280px); height: auto; }

/* F7 凭证：三状态标签一行排开，二维码在首屏可见 */
.h5-tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.h5-credential .h5-qr-wrap { padding: 20px; }
.h5-credential .h5-hint { margin: 0 0 18px; text-align: center; word-break: break-all; }

@media (min-width: 860px) {
    .h5-main { padding-top: 28px; }
    .h5-bottom-bar {
        left: 50%; transform: translateX(-50%);
        width: min(100%, var(--h5-max));
    }
}