/* python_gd H5 精简版：影城查询 / 影城概要 / 座位偏差图（移动优先，无外部依赖） */
:root {
    --bg: #f2f5fa;
    --card: #fff;
    --ink: #1e2a38;
    --muted: #7c8b9b;
    --line: #e4eaf1;
    --accent: #4f63d2;
    --accent-2: #6a7ff0;
    --warn: #d98200;
    --red: #d64545;
    --green: #2f9e5f;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15px/1.55 -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    padding-bottom: env(safe-area-inset-bottom);
}

a { color: var(--accent); text-decoration: none; }
b { font-weight: 600; }
pre { white-space: pre-wrap; word-break: break-all; }

/* ---------------- 顶部 ---------------- */
.hd {
    position: sticky; top: 0; z-index: 20;
    background: linear-gradient(135deg, #4a5ecb, #6f83f2);
    color: #fff;
    padding: 10px 14px 0;
    box-shadow: 0 6px 16px rgba(74, 94, 203, .22);
}
.hd-ttl { display: flex; align-items: baseline; gap: 8px; }
.hd-ttl b { font-size: 1.06rem; letter-spacing: .5px; }
.hd-ttl span { font-size: .72rem; opacity: .82; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs { display: flex; gap: 6px; margin-top: 8px; }
.tabs a {
    flex: 1; text-align: center; padding: 8px 4px 9px;
    font-size: .86rem; color: rgba(255, 255, 255, .82);
    border-radius: 10px 10px 0 0;
}
.tabs a.on { background: var(--bg); color: var(--accent); font-weight: 600; }

/* ---------------- 布局 ---------------- */
.wrap { max-width: 720px; margin: 0 auto; padding: 12px 12px 8px; }

.hint { color: var(--muted); font-size: .72rem; line-height: 1.6; margin: 8px 2px 0; }

/* ---------------- 汇总 ---------------- */
.chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.chip {
    background: var(--card); border-radius: 12px; padding: 9px 6px;
    text-align: center; box-shadow: 0 2px 8px rgba(31, 45, 61, .06);
}
.chip b { display: block; font-size: 1.02rem; line-height: 1.25; }
.chip span { display: block; color: var(--muted); font-size: .68rem; margin-top: 2px; }
.chip.warn b { color: var(--warn); }

/* ---------------- 筛选表单 ---------------- */
.filters {
    background: var(--card); border-radius: 14px; padding: 12px;
    box-shadow: 0 2px 10px rgba(31, 45, 61, .06);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
}
.filters > .adv { grid-column: 1 / -1; margin-top: 0; }
.fd { display: flex; flex-direction: column; gap: 5px; font-size: .74rem; color: var(--muted); min-width: 0; }
.filters > .fd:nth-child(3) { grid-column: 1 / -1; }
.fd span { padding-left: 2px; }
.fd input, .fd select {
    height: 40px; border: 1px solid var(--line); border-radius: 10px;
    padding: 0 10px; font-size: .92rem; color: var(--ink); background: #fbfcfe;
    width: 100%; -webkit-appearance: none; appearance: none;
}
.fd select { background-image: none; }
.fd input:focus, .fd select:focus { outline: 2px solid rgba(79, 99, 210, .28); border-color: var(--accent); }
.fd.chk { flex-direction: row; align-items: center; gap: 8px; grid-column: 1 / -1; }
.fd.chk input { width: 18px; height: 18px; accent-color: var(--accent); }
.fd.chk span { padding: 0; }

.btn {
    grid-column: 1 / -1;
    display: block; height: 44px; line-height: 44px; text-align: center;
    background: linear-gradient(135deg, #4a5ecb, #6f83f2); color: #fff;
    border: 0; border-radius: 12px; font-size: .95rem; font-weight: 600;
    box-shadow: 0 6px 14px rgba(74, 94, 203, .26);
}
.btn:active { transform: translateY(1px); }
.btn.ghost {
    background: #fff; color: var(--accent); box-shadow: 0 2px 8px rgba(31, 45, 61, .08);
    border: 1px solid rgba(79, 99, 210, .25);
}

.adv { margin-top: 10px; background: var(--card); border-radius: 14px; box-shadow: 0 2px 8px rgba(31, 45, 61, .05); }
.adv summary { padding: 11px 14px; font-size: .82rem; color: var(--muted); }
.adv-in { padding: 0 12px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.adv-in .fd.chk { grid-column: 1 / -1; }

/* ---------------- 影城卡片 ---------------- */
.cards { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.card {
    display: block; background: var(--card); border-radius: 14px; padding: 12px 14px;
    color: var(--ink); box-shadow: 0 2px 10px rgba(31, 45, 61, .06);
    min-width: 0; overflow: hidden;
}
.card:active { background: #f7f9ff; }
.card-h { display: flex; align-items: center; gap: 8px; }
.card-h b { font-size: .98rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-m { color: var(--muted); font-size: .72rem; margin-top: 4px; }
.card-n { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .78rem; color: var(--muted); margin-top: 8px; }
.card-n b { color: var(--ink); }
.card-n .warn b { color: var(--warn); }
.card-kv {
    display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 2px 8px;
    font-size: .78rem; color: var(--muted); margin-top: 6px;
}
.card-kv b { color: var(--ink); }

.tag {
    display: inline-block; font-style: normal; font-size: .68rem; line-height: 1.6;
    padding: 1px 7px; border-radius: 999px; background: #eef1f6; color: #5a6c7d;
    white-space: nowrap;
}
.tag.red { background: #fdecec; color: var(--red); }
.tag.gry { background: #eef1f6; color: #64748b; }
.tag.blu { background: #eaf0ff; color: var(--accent); }
.tag.warn { background: #fff5e5; color: var(--warn); }

.more { text-align: center; font-size: .8rem; margin: 12px 0 0; }
.tools { display: flex; gap: 10px; margin-top: 14px; }
.tools .btn { flex: 1; height: 42px; line-height: 42px; font-size: .88rem; }

/* ---------------- 偏差卡片 ---------------- */
.dcards { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
.dcard {
    background: var(--card); border-radius: 14px; padding: 12px 12px 10px;
    box-shadow: 0 2px 10px rgba(31, 45, 61, .06);
    min-width: 0; overflow: hidden;
}
.dc-h { display: flex; align-items: center; gap: 8px; }
.dc-h b { flex: 1; min-width: 0; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-h .dif { color: var(--red); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.dc-m { color: var(--muted); font-size: .74rem; margin-top: 4px; line-height: 1.5; }
.dc-s { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .76rem; color: var(--muted); margin-top: 7px; }
.dc-s b { color: var(--ink); }
.dc-s .tm { color: var(--accent); font-weight: 600; }
.dc-t { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.dc-t:empty { display: none; }
.dc-c { margin-top: 8px; font-size: .76rem; color: var(--muted); }
.dc-c summary { padding: 6px 0; }
.dc-c pre { margin: 0; background: #f7f9fc; border-radius: 8px; padding: 8px; font-size: .72rem; color: #46586b; }
.dc-g { margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; max-width: 100%; }
.dc-f { color: var(--muted); font-size: .7rem; margin-top: 8px; text-align: right; }
.dc-f:empty { display: none; }
.nogrid { background: #f7f9fc; border-radius: 10px; padding: 12px; color: var(--muted); font-size: .76rem; }

/* ---------------- 座位网格（与 web 同一套类名） ---------------- */
.sg {
    display: inline-block; border: 1px solid #cdd6e0; border-radius: 10px;
    padding: 6px 8px 5px; background: #fff;
}
.sg-r { display: flex; gap: 2px; margin-bottom: 2px; }
.sg-r-aisle { align-items: center; margin: 4px 0; }
.sg-aisle { display: flex; justify-content: space-between; align-items: center; height: 8px; }
.sg-aisle b { font-weight: 400; font-size: 9px; line-height: 1; color: #b9c3ce; }
.sg-rl {
    width: 18px; min-width: 18px; height: var(--sg-cell); line-height: var(--sg-cell);
    font-size: 8px; text-align: right; padding-right: 3px; color: #95a5a6;
}
.sg-c { width: var(--sg-cell); height: var(--sg-cell); border-radius: 2px; display: block; }
.sg-diff .st-free { background: #edeff2; box-shadow: inset 0 0 0 1px #dde1e6; }
.sg-diff .st-plat { background: #f39c12; }
.sg-diff .st-both { background: #27ae60; }
.sg-diff .st-zz { background: #86dc9e; }
.sg-diff .st-gap { background: transparent; }

/* 图例 */
.hlegend {
    background: #fff; border-radius: 12px; padding: 8px 12px; margin-top: 10px;
    box-shadow: 0 2px 8px rgba(31, 45, 61, .06);
}
.sg-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .7rem; color: #5a6c7d; }
.sg-legend .lg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sg-legend .sg-c { width: 11px; height: 11px; border-radius: 2px; }
.lg-diff .st-free { background: #edeff2; box-shadow: inset 0 0 0 1px #dde1e6; }
.lg-diff .st-plat { background: #f39c12; }
.lg-diff .st-both { background: #27ae60; }
.lg-diff .st-zz { background: #86dc9e; }
.lg-diff .st-gap { background: transparent; box-shadow: inset 0 0 0 1px #dde1e6; }

/* ---------------- 空态 / 分页 / 页脚 ---------------- */
.empty {
    background: var(--card); border-radius: 14px; padding: 18px 16px;
    color: var(--muted); font-size: .82rem; line-height: 1.7;
    box-shadow: 0 2px 10px rgba(31, 45, 61, .06);
}
.empty b { display: block; color: var(--ink); font-size: .95rem; margin-bottom: 6px; }
.empty p { margin: 0 0 2px; }

.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 16px 0 4px; font-size: .82rem; }
.pager .tot { color: var(--muted); font-size: .74rem; }
.pager a { padding: 7px 14px; background: #fff; border-radius: 10px; box-shadow: 0 2px 8px rgba(31, 45, 61, .08); }
.pager .cur {
    min-width: 30px; height: 30px; line-height: 30px; text-align: center;
    background: var(--accent); color: #fff; border-radius: 9px; font-size: .8rem;
}

.ft {
    text-align: center; padding: 18px 12px calc(18px + env(safe-area-inset-bottom));
    color: var(--muted); font-size: .72rem;
}
.ft a { color: var(--muted); }

@media (min-width: 560px) {
    .chips { grid-template-columns: repeat(4, 1fr); }
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #10151d; --card: #18202b; --ink: #e6edf5; --muted: #8fa0b3;
        --line: #253140;
    }
    body { background: var(--bg); }
    .tabs a.on { background: var(--bg); }
    .fd input, .fd select { background: #121a24; color: var(--ink); }
    .card:active { background: #1b2531; }
    .dc-c pre, .nogrid { background: #121a24; color: #a9b8c8; }
    .btn.ghost { background: var(--card); }
    .pager a { background: var(--card); }
    .sg { background: #121a24; border-color: #2a3847; }
    .sg-diff .st-free { background: #223041; box-shadow: inset 0 0 0 1px #2c3c4e; }
    .tag { background: #223041; color: #a9b8c8; }
    .hlegend, .filters, .adv, .empty { box-shadow: none; }
}