/* 尾号限行查询 · 交通告示牌（ptr-）· 路牌绿 / 警示黄 / 深灰 */
.ptr-page, .ptr-modal, .ptr-toast {
    --ptr-bg: #f2f4f1; --ptr-panel: #ffffff; --ptr-panel2: #f5f8f5;
    --ptr-ink: #1e2a26; --ptr-sub: #61746c; --ptr-line: #dde7e0; --ptr-line2: #c1d2c8;
    --ptr-green: #166b52; --ptr-green-soft: #e0f1e9; --ptr-yellow: #b98414; --ptr-yellow-soft: #fbf1d8;
    --ptr-red: #b3432f; --ptr-red-soft: #f9e8e3;
    --ptr-shadow: 0 12px 32px rgba(25, 60, 45, .13); --ptr-shadow-sm: 0 3px 10px rgba(25, 60, 45, .08);
    --ptr-radius: 12px;
    --ptr-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --ptr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.ptr-page { background: var(--ptr-bg); color: var(--ptr-ink); padding: 0 0 60px; min-height: 60vh; font-family: var(--ptr-font); font-size: 14px; line-height: 1.78; }
.ptr-wrap { max-width: 1180px; margin: 0 auto; padding: 18px 18px 0; }
.ptr-page .detail-breadcrumb { font-size: 12.5px; color: var(--ptr-sub); margin: 8px 0 20px; }
.ptr-page .detail-breadcrumb a { color: var(--ptr-sub); text-decoration: none; }
.ptr-page .detail-breadcrumb a:hover { color: var(--ptr-green); }
.ptr-page .detail-breadcrumb .current { color: var(--ptr-green); font-weight: 700; }

.ptr-hero { display: grid; grid-template-columns: 1.16fr .84fr; gap: 24px; align-items: stretch; margin-bottom: 20px; }
.ptr-kicker { font: 700 11px var(--ptr-mono); letter-spacing: 2px; color: var(--ptr-green); margin-bottom: 14px; }
.ptr-kicker i { display: inline-block; width: 42px; height: 1px; background: var(--ptr-yellow); vertical-align: middle; margin: 0 10px; }
.ptr-page h1 { font-size: 39px; line-height: 1.18; font-weight: 800; margin: 0 0 14px; letter-spacing: -.4px; }
.ptr-sub { font-size: 15.5px; line-height: 1.9; color: var(--ptr-sub); margin: 0 0 20px; max-width: 620px; }
.ptr-sub b { color: var(--ptr-ink); font-weight: 700; background: var(--ptr-green-soft); padding: 0 3px; border-radius: 3px; }
.ptr-facts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.ptr-fact { background: var(--ptr-panel); border: 1px solid var(--ptr-line); border-left: 4px solid var(--ptr-green); border-radius: 8px; padding: 9px 16px; min-width: 118px; box-shadow: var(--ptr-shadow-sm); }
.ptr-fact b { display: block; font: 800 18px/1.3 var(--ptr-mono); }
.ptr-fact span { font-size: 11.5px; color: var(--ptr-sub); }
.ptr-fact.hot { border-left-color: var(--ptr-yellow); }
.ptr-fact.hot b { color: var(--ptr-yellow); font-size: 15px; }
.ptr-query-row { display: flex; gap: 7px; flex-wrap: wrap; }
.ptr-query-row input { border: 1px solid var(--ptr-line2); background: var(--ptr-panel); color: var(--ptr-ink); border-radius: 8px; padding: 10px; font: 13px var(--ptr-mono); }
.ptr-query-row input[type=date] { width: 148px; }
.ptr-query-row input[type=time] { width: 108px; }
.ptr-query-row input[type=text] { width: 150px; }
.ptr-warn { font-size: 12px; color: var(--ptr-yellow); margin: 12px 0 0; line-height: 1.8; }
.ptr-warn b { color: var(--ptr-red); }
.ptr-sign { background: linear-gradient(160deg, #1c7359, #0f5744); border: 4px solid #f4f7f2; border-radius: var(--ptr-radius); box-shadow: var(--ptr-shadow), 0 0 0 2px var(--ptr-line2); color: #fff; display: flex; flex-direction: column; padding: 16px; }
.ptr-sign-head { font: 700 11px var(--ptr-mono); letter-spacing: 1.6px; color: #bfe5d5; border-bottom: 1px dashed rgba(255,255,255,.35); padding-bottom: 9px; }
.ptr-sign-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px 0; }
.ptr-sign-label { font-size: 14px; color: #d7f0e5; letter-spacing: 3px; }
.ptr-sign-nums { font: 800 62px/1.25 var(--ptr-mono); color: #ffe08a; }
.ptr-sign-nums i { font-size: 22px; font-style: normal; color: #fff; vertical-align: middle; margin: 0 8px; }
.ptr-sign-time { font: 12px var(--ptr-mono); color: #d7f0e5; }
.ptr-sign-foot { font: 11px var(--ptr-mono); color: #bfe5d5; border-top: 1px dashed rgba(255,255,255,.35); padding-top: 9px; text-align: center; }

.ptr-panel { background: var(--ptr-panel); border: 1px solid var(--ptr-line2); border-radius: var(--ptr-radius); padding: 18px; box-shadow: var(--ptr-shadow-sm); }
.ptr-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.ptr-panel-head h2 { font-size: 17px; font-weight: 800; margin: 0; }
.ptr-step { font: 800 11px var(--ptr-mono); color: #fff; background: var(--ptr-green); padding: 5px 7px; border-radius: 5px; }
.ptr-hint { font-size: 12px; color: var(--ptr-sub); margin-left: auto; }
.ptr-btn { border: 1px solid var(--ptr-line2); background: var(--ptr-panel2); color: var(--ptr-ink); border-radius: 8px; padding: 9px 13px; font-size: 12.5px; cursor: pointer; font-family: inherit; }
.ptr-btn:hover { border-color: var(--ptr-green); color: var(--ptr-green); }
.ptr-btn-main { background: var(--ptr-green); border-color: var(--ptr-green); color: #fff; font-weight: 700; }
.ptr-btn-main:hover { color: #fff; }
.ptr-code-btns { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.ptr-work { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; margin-bottom: 18px; }
.ptr-rules, .ptr-result { min-width: 0; }
.ptr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ptr-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-bottom: 10px; }
.ptr-field > span { font-size: 12px; color: var(--ptr-sub); }
.ptr-field input, .ptr-field select { width: 100%; box-sizing: border-box; border: 1px solid var(--ptr-line2); background: var(--ptr-panel2); color: var(--ptr-ink); border-radius: 7px; padding: 8px 9px; font: 13px var(--ptr-mono); }
.ptr-groups-title { font-size: 12.5px; font-weight: 700; margin: 6px 0 8px; }
.ptr-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ptr-group { display: flex; align-items: center; gap: 8px; background: var(--ptr-panel2); border: 1px solid var(--ptr-line); border-radius: 7px; padding: 6px 9px; }
.ptr-group span { font: 700 11px var(--ptr-mono); color: var(--ptr-sub); flex: none; }
.ptr-group input { flex: 1; min-width: 0; border: 1px solid var(--ptr-line2); background: var(--ptr-panel); color: var(--ptr-ink); border-radius: 5px; padding: 5px 7px; font: 12.5px var(--ptr-mono); }
.ptr-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; margin: 4px 0 12px; cursor: pointer; }
.ptr-check input { accent-color: var(--ptr-green); }
.ptr-err { margin: 8px 0; background: var(--ptr-red-soft); color: var(--ptr-red); border-radius: 7px; padding: 8px 10px; font-size: 12.5px; }
.ptr-err[hidden] { display: none; }
.ptr-rule-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ptr-json { width: 100%; box-sizing: border-box; margin-top: 10px; border: 1px solid var(--ptr-line2); background: var(--ptr-panel2); color: var(--ptr-ink); border-radius: 7px; padding: 10px; font: 12px/1.7 var(--ptr-mono); }
.ptr-json[hidden] { display: none; }

.ptr-digits { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 14px; }
.ptr-digit { aspect-ratio: 1.25; border: 2px solid var(--ptr-line2); background: var(--ptr-panel2); color: var(--ptr-ink); border-radius: 9px; display: flex; align-items: center; justify-content: center; font: 800 22px var(--ptr-mono); }
.ptr-digit.is-ban { background: var(--ptr-red); border-color: var(--ptr-red); color: #fff; }
.ptr-verify { border-radius: 9px; padding: 14px; font-size: 13.5px; line-height: 1.9; background: var(--ptr-green-soft); }
.ptr-verify.is-ban { background: var(--ptr-red-soft); }
.ptr-verify b { color: var(--ptr-green); font-size: 16px; }
.ptr-verify.is-ban b { color: var(--ptr-red); }
.ptr-calc { margin-top: 12px; background: var(--ptr-yellow-soft); border-radius: 9px; padding: 12px; font: 11.5px/1.9 var(--ptr-mono); }
.ptr-calc b { color: var(--ptr-yellow); }
.ptr-cities { margin-top: 14px; }
.ptr-city { display: flex; align-items: center; gap: 8px; border-top: 1px dashed var(--ptr-line2); padding: 8px 0; font-size: 12.5px; flex-wrap: wrap; }
.ptr-city b { min-width: 74px; }
.ptr-city span { color: var(--ptr-sub); }
.ptr-city em { margin-left: auto; font-style: normal; font: 700 12px var(--ptr-mono); color: var(--ptr-green); }
.ptr-city button { border: 0; background: none; color: var(--ptr-red); cursor: pointer; font-size: 15px; }

.ptr-table-scroll { overflow-x: auto; }
.ptr-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 520px; }
.ptr-table th, .ptr-table td { border-bottom: 1px solid var(--ptr-line); padding: 9px 10px; text-align: left; }
.ptr-table th { background: var(--ptr-panel2); color: var(--ptr-sub); }
.ptr-table td input { width: 100%; min-width: 90px; box-sizing: border-box; border: 1px solid var(--ptr-line2); background: var(--ptr-panel2); color: var(--ptr-ink); border-radius: 6px; padding: 4px 6px; font: 12px var(--ptr-mono); }
.ptr-table .ptr-del { border: 0; background: none; color: var(--ptr-red); cursor: pointer; font-size: 16px; }
.ptr-empty { color: var(--ptr-sub); text-align: center; padding: 16px !important; }

.ptr-modal[hidden] { display: none !important; }
.ptr-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(16,45,35,.6); display: flex; align-items: center; justify-content: center; padding: 20px; }
.ptr-modal-card { position: relative; background: var(--ptr-panel); color: var(--ptr-ink); border-radius: var(--ptr-radius); padding: 26px; width: min(520px, 100%); box-shadow: var(--ptr-shadow); }
.ptr-modal-card h2 { font-size: 19px; margin: 0 0 8px; }
.ptr-modal-card p { font-size: 13px; color: var(--ptr-sub); margin: 0 0 14px; }
.ptr-modal-card input { width: 100%; box-sizing: border-box; border: 1px solid var(--ptr-line2); border-radius: 7px; padding: 9px 10px; font: 12px var(--ptr-mono); background: var(--ptr-panel2); color: var(--ptr-ink); margin-bottom: 12px; }
.ptr-modal-x { position: absolute; right: 12px; top: 8px; border: 0; background: none; font-size: 24px; color: var(--ptr-sub); cursor: pointer; line-height: 1; }
.ptr-toast { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(20px); background: var(--ptr-green); color: #fff; padding: 10px 20px; border-radius: 999px; font-size: 13px; opacity: 0; pointer-events: none; transition: .22s; z-index: 10000; }
.ptr-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

:root[data-theme="dark"] .ptr-page, :root[data-theme="dark"] .ptr-modal, :root[data-theme="dark"] .ptr-toast {
    --ptr-bg: #121a17; --ptr-panel: #1b261f; --ptr-panel2: #223027;
    --ptr-ink: #e6f0e9; --ptr-sub: #9bb3a6; --ptr-line: #2e4036; --ptr-line2: #40584a;
    --ptr-green: #6fd0a6; --ptr-green-soft: #1a3a2c; --ptr-yellow: #f0c674; --ptr-yellow-soft: #3a3018;
    --ptr-red: #ff9b86; --ptr-red-soft: #3c231f;
    --ptr-shadow: 0 12px 32px rgba(0,0,0,.5); --ptr-shadow-sm: 0 3px 10px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .ptr-step, :root[data-theme="dark"] .ptr-btn-main { color: #121a17; }
:root[data-theme="dark"] .ptr-digit.is-ban { color: #121a17; }
:root[data-theme="dark"] .ptr-sign { background: linear-gradient(160deg, #1a4e3d, #123628); }
:root[data-theme="dark"] .ptr-toast { background: var(--ptr-green); color: #121a17; }

@media (max-width: 920px) { .ptr-hero, .ptr-work { grid-template-columns: 1fr; } .ptr-page h1 { font-size: 30px; } }
@media (max-width: 560px) {
    .ptr-wrap { padding: 12px 12px 0; } .ptr-page h1 { font-size: 26px; }
    .ptr-sub { font-size: 14px; line-height: 1.8; } .ptr-panel { padding: 14px; }
    .ptr-grid2, .ptr-groups { grid-template-columns: 1fr; } .ptr-code-btns { margin-left: 0; }
    .ptr-sign-nums { font-size: 46px; } .ptr-digits { grid-template-columns: repeat(5, 1fr); gap: 4px; }
}