/* ============ 用户端样式（手机优先，木偶戏主题） ============ */
:root{
    --red:#C3272B; --red-dark:#9E1D20; --red-soft:#FBEDEC;
    --gold:#C9A227; --gold-soft:#FAF3E0;
    --ink:#2B2622; --muted:#8A8178; --line:#E8E0D5;
    --paper:#F6F1E8; --card:#FFFFFF; --green:#2E7D32; --green-soft:#EAF4EA;
    --grey-soft:#F2EFEA;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
    font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    background:#DCD7D2; color:var(--ink);
    display:flex; justify-content:center; min-height:100vh;
}
a{text-decoration:none;color:inherit}

/* 顶部导航 */
.nav{
    background:var(--red); color:#fff; padding:16px 16px 14px;
    text-align:center; position:relative; flex-shrink:0;
}
.nav h3{font-size:16px; font-weight:600; letter-spacing:2px}
.nav .back{position:absolute; left:14px; top:13px; font-size:22px; color:#fff; line-height:1}

.body{padding:14px 16px 30px; display:flex; flex-direction:column; gap:12px}

/* 横幅 */
.hero{
    background:var(--red); border-radius:13px; padding:16px 16px;
    color:#fff;
}
.hero-title{font-size:15px; font-weight:700; letter-spacing:.5px}
.hero-sub{font-size:11px; opacity:.85; margin-top:5px}

/* 标签与输入 */
.label{font-size:12px; color:var(--muted); margin-bottom:6px; display:block}
.input{
    width:100%; padding:12px 14px; border:1.5px solid var(--line);
    border-radius:11px; background:#fff; font-size:15px;
    font-family:inherit; color:var(--ink);
}
.input:focus{outline:none; border-color:var(--red)}
.field-error{display:block; color:var(--red); font-size:11px; margin-top:4px}
.form-error{
    background:var(--red-soft); border:1px solid #E8C4C2; color:var(--red);
    border-radius:10px; padding:10px 12px; font-size:12px; list-style:none;
}
.form-error ul{list-style:none; margin:0; padding:0}

/* 卡片 */
.card{background:var(--card); border-radius:14px; box-shadow:0 2px 8px rgba(43,38,34,.06)}
.chip{
    display:inline-block; font-size:11px; padding:2px 9px; border-radius:9px;
    font-weight:600; white-space:nowrap;
}
.chip.full{background:var(--grey-soft); color:var(--muted)}
.chip.ok{background:var(--red-soft); color:var(--red)}
.chip.gold{background:var(--gold-soft); color:#8a6d1a}

/* 日期条 */
.dates{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px}
.date{
    flex:0 0 auto; min-width:64px; text-align:center; padding:9px 6px 8px;
    border-radius:11px; background:var(--card); border:1.5px solid var(--line);
}
.date .d{font-size:13px; font-weight:700}
.date .w{font-size:10px; opacity:.7; margin-top:2px}
.date.on{background:var(--red); border-color:var(--red); color:#fff}

/* 场次卡片 */
.session{display:flex; align-items:center; gap:12px; padding:13px 14px}
.session .time{font-size:16px; font-weight:800; color:var(--red); line-height:1.15; min-width:52px}
.session .time small{display:block; font-size:9px; color:var(--muted); font-weight:400; margin-top:2px}
.session .info{flex:1; min-width:0}
.session .info .name{font-size:14px; font-weight:600}
.session .info .meta{font-size:10.5px; color:var(--muted); margin-top:3px}
.session .remain{font-size:11px; color:var(--green); font-weight:600; white-space:nowrap}
.session.dim{opacity:.5}

/* 订票 */
.summary{padding:14px; display:flex; justify-content:space-between; align-items:center; gap:10px}
.summary .name{font-size:15px; font-weight:700}
.summary .meta{font-size:11px; color:var(--muted); margin-top:4px}
.stepper{
    display:flex; align-items:center; justify-content:space-between;
    background:#fff; border:1.5px solid var(--line); border-radius:11px; padding:8px 12px;
}
.stepper button{
    width:34px; height:34px; border-radius:9px; border:1px solid var(--line);
    background:#fff; font-size:18px; cursor:pointer; color:var(--ink); line-height:1;
}
.stepper button:active{background:var(--grey-soft)}
.stepper button:disabled{opacity:.35; cursor:default; background:var(--grey-soft)}
.stepper .n{font-size:18px; font-weight:700; min-width:40px; text-align:center}
.tip{
    font-size:11px; color:var(--muted); line-height:1.8;
    background:#fff; border:1px dashed var(--line); border-radius:10px; padding:10px 12px;
}
.tip.gold{background:var(--gold-soft); border-color:var(--gold); color:#6b5416}

/* 按钮 */
.btn{
    display:block; width:100%; text-align:center; padding:14px 0; border-radius:12px;
    font-size:16px; font-weight:600; border:none; cursor:pointer;
}
.btn.red{background:var(--red); color:#fff}
.btn.red:active{background:var(--red-dark)}
.btn.ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line)}
.btn-search{width:auto; padding:0 20px; border-radius:11px; font-size:14px}

/* 成功页 */
.center{align-items:center; text-align:center}
.ok-circle{
    width:48px; height:48px; border-radius:50%; background:var(--green-soft);
    color:var(--green); font-size:26px; display:flex; align-items:center; justify-content:center;
    margin-top:6px;
}
.ok-title{font-size:19px; font-weight:800; margin-top:8px}
.ok-sub{font-size:12px; color:var(--muted); margin-top:4px}
.qr-wrap{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; margin-top:12px}
.qr{width:190px; height:190px; display:block; image-rendering:pixelated}
.qr-tip{font-size:11px; color:var(--muted); margin-top:8px}
.ticket-code{
    font-family:Consolas,monospace; font-size:18px; font-weight:800;
    letter-spacing:3px; margin-top:6px;
}
.info-card{padding:12px 14px; font-size:12.5px; line-height:2; width:100%; text-align:left}
.muted{color:var(--muted)}

/* 我的订票 */
.search-row{display:flex; gap:8px}
.search-row .input{flex:1}
.tiny{font-size:10.5px; margin-top:2px}
.ticket{display:flex; gap:12px; padding:13px 14px; align-items:center}
.ticket .t-info{flex:1; min-width:0}
.ticket .name{font-size:14px; font-weight:600}
.ticket .meta{font-size:10.5px; color:var(--muted); margin-top:4px; line-height:1.7}
.ticket .st{font-size:11px; font-weight:600; margin-top:5px}
.st-valid{color:var(--green)}
.st-checked{color:var(--muted)}
.st-cancelled{color:var(--red)}
.t-actions{display:flex; flex-direction:column; gap:8px; align-items:flex-end}
.btn-cancel{
    border:1.5px solid #E8C4C2; background:#fff; color:var(--red);
    border-radius:9px; padding:7px 13px; font-size:11px; cursor:pointer; font-family:inherit;
}
.btn-cancel:active{background:var(--red-soft)}

/* 空状态 */
.empty{
    text-align:center; color:var(--muted); font-size:13px;
    background:#fff; border:1.5px dashed var(--line); border-radius:12px; padding:30px 14px;
}
.foot-note{text-align:center; font-size:10.5px; color:var(--muted); margin-top:4px}

/* 自定义弹窗（取消预约确认） */
.modal-mask{
    position:fixed; inset:0; background:rgba(43,38,34,.5); z-index:100;
    display:flex; align-items:center; justify-content:center; padding:0 20px;
}
.modal-box{
    background:#fff; border-radius:16px; padding:22px 20px 18px;
    width:100%; max-width:330px; text-align:center;
    box-shadow:0 12px 32px rgba(0,0,0,.25);
}
.modal-box .mb-title{font-size:17px; font-weight:800; margin-bottom:14px}
.modal-box .mb-body{font-size:13px; line-height:1.9; color:var(--ink)}
.modal-box .mb-actions{display:flex; gap:12px; margin-top:18px}
.modal-box .mb-actions .btn{padding:11px 0; font-size:15px}

/* 页面内提示条 */
.toast{
    position:fixed; left:50%; bottom:60px; transform:translateX(-50%) translateY(20px);
    background:rgba(43,38,34,.92); color:#fff; font-size:13px;
    padding:10px 22px; border-radius:22px; z-index:200;
    opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
    max-width:80%; text-align:center;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.ok{background:var(--red)}

/* 订票页：从首页近期演出跳转的场次定位高亮 */
.focus-flash { box-shadow: 0 0 0 3px #C3272B !important; animation: focusPulse 0.9s ease-in-out 2; }
@keyframes focusPulse {
    0%, 100% { box-shadow: 0 0 0 3px #C3272B; }
    50% { box-shadow: 0 0 0 7px rgba(195, 39, 43, 0.35); }
}

/* ============ 手机壳 + 品牌条 + 底部导航（预约流程，与官网客户端一致） ============ */
.phone{width:100%;max-width:420px;background:var(--paper);min-height:100vh;box-shadow:0 0 40px rgba(0,0,0,.25);position:relative;padding-bottom:66px}
@media(min-width:480px){.phone{margin:24px 0;border-radius:28px;overflow:hidden;min-height:calc(100vh - 48px)}}
.brandbar{position:sticky;top:0;z-index:20;background:var(--red);color:#fff;padding:12px 16px;display:flex;align-items:center;gap:10px}
.brandbar .logo{height:34px;display:flex;align-items:center;background:#fff;padding:3px 6px;border-radius:8px}
.brandbar .logo img{height:100%;width:auto;display:block}
.brandbar .t{font-size:16px;font-weight:700;letter-spacing:.5px}
.brandbar .s{font-size:11px;opacity:.85;margin-left:auto}
.tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:420px;background:#fff;display:flex;border-top:1px solid var(--line);z-index:30;padding-bottom:env(safe-area-inset-bottom)}
.tab{flex:1;padding:8px 0 6px;text-align:center;color:var(--muted);font-size:10.5px}
.tab .i{display:block;font-size:16px;line-height:1.2}
.tab.on{color:var(--red);font-weight:700}

/* 订票表单：元素间距加大（手机号/张数/提示/按钮之间留白） */
.body form{display:flex;flex-direction:column;gap:16px}