.bbs-vp-app {
  --bbs-vp-blue: #004080;
  --bbs-vp-blue-dark: #003263;
  --bbs-vp-blue-soft: #edf4fa;
  --bbs-vp-ink: #1f2d3d;
  --bbs-vp-text: #4a4a4a;
  --bbs-vp-muted: #6f7d89;
  --bbs-vp-paper: #f6f8fa;
  --bbs-vp-line: #dfe6eb;
  --bbs-vp-red: #c93743;
  --bbs-vp-amber: #bd6b08;
  width: 100%;
  max-width: 1080px;
  margin: 32px auto 56px;
  color: var(--bbs-vp-text);
  font-family: Lato, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.bbs-vp-app *, .bbs-vp-app *::before, .bbs-vp-app *::after { box-sizing: border-box; }
.bbs-vp-app h1, .bbs-vp-app h2, .bbs-vp-app h3, .bbs-vp-app p { font-family: inherit; }
.bbs-vp-panel { overflow: hidden; border: 1px solid #dce5ec; border-radius: 14px; background: #fff; box-shadow: 0 8px 30px rgba(22, 47, 72, .07); }
.bbs-vp-heading { position: relative; padding: 32px 34px 28px; border-bottom: 1px solid var(--bbs-vp-line); background: linear-gradient(120deg, #fff 0%, #fff 62%, #edf5fb 100%); }
.bbs-vp-heading::after { content: ""; position: absolute; top: 0; right: 0; width: 7px; height: 100%; background: var(--bbs-vp-blue); }
.bbs-vp-eyebrow { display: block; margin-bottom: 7px; color: var(--bbs-vp-blue); font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.bbs-vp-app .bbs-vp-heading h1 { margin: 0 0 7px; color: var(--bbs-vp-ink); font-size: clamp(28px, 4vw, 36px); font-weight: 900; line-height: 1.2; letter-spacing: -.02em; }
.bbs-vp-app .bbs-vp-heading p { margin: 0; color: var(--bbs-vp-muted); font-size: 15px; }

.bbs-vp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px 20px; background: var(--bbs-vp-paper); }
.bbs-vp-tab { display: flex; align-items: center; justify-content: space-between; min-height: 64px; margin: 0; padding: 12px 18px; border: 1px solid #d5dfe6; border-radius: 10px; background: #fff; color: var(--bbs-vp-ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.bbs-vp-tab:hover { border-color: #9ab4c9; }
.bbs-vp-tab:focus-visible { outline: 3px solid rgba(0, 64, 128, .2); outline-offset: 2px; }
.bbs-vp-tab span { font-size: 18px; font-weight: 800; }
.bbs-vp-tab small { color: var(--bbs-vp-muted); font-size: 12px; font-weight: 600; }
.bbs-vp-tab.is-active { border-color: var(--bbs-vp-blue); background: var(--bbs-vp-blue); color: #fff; box-shadow: 0 5px 16px rgba(0, 64, 128, .18); }
.bbs-vp-tab.is-active small { color: rgba(255, 255, 255, .78); }

.bbs-vp-filter-row { display: grid; grid-template-columns: minmax(240px, 420px) 1fr; align-items: end; gap: 24px; padding: 22px 24px 24px; border-top: 1px solid var(--bbs-vp-line); }
.bbs-vp-filter label { display: block; margin-bottom: 7px; color: var(--bbs-vp-ink); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bbs-vp-select-wrap { position: relative; }
.bbs-vp-select-wrap select { appearance: none; width: 100%; height: 50px; margin: 0; padding: 0 46px 0 15px; border: 1px solid #bdcbd6; border-radius: 8px; background: #fff; color: var(--bbs-vp-ink); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 50px; outline: none; cursor: pointer; }
.bbs-vp-select-wrap select:focus { border-color: var(--bbs-vp-blue); box-shadow: 0 0 0 3px rgba(0, 64, 128, .12); }
.bbs-vp-select-wrap > span { position: absolute; top: 7px; right: 15px; color: var(--bbs-vp-blue); font-size: 24px; line-height: 1; pointer-events: none; }
.bbs-vp-filter-note { align-self: center; margin: 20px 0 0; color: var(--bbs-vp-muted); font-size: 13px; }

.bbs-vp-content { padding-top: 38px; }
.bbs-vp-date-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.bbs-vp-date-kicker { color: var(--bbs-vp-blue); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.bbs-vp-app .bbs-vp-date-row h2 { margin: 4px 0 0; color: var(--bbs-vp-ink); font-size: clamp(23px, 3vw, 29px); font-weight: 900; letter-spacing: -.015em; line-height: 1.3; }
.bbs-vp-status-wrap { display: flex; align-items: center; gap: 12px; padding-bottom: 4px; }
.bbs-vp-updated { color: var(--bbs-vp-muted); font-size: 12px; }
.bbs-vp-live-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; background: #edf0f2; color: #64737f; font-size: 11px; font-weight: 700; }
.bbs-vp-live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #8b98a2; }
.bbs-vp-live-badge.is-live { background: #e8f5ee; color: #2b7551; }
.bbs-vp-live-badge.is-live i { background: #38a169; }
.bbs-vp-live-badge.is-stale { background: #fff4df; color: #7d541c; }
.bbs-vp-live-badge.is-stale i { background: var(--bbs-vp-amber); }

.bbs-vp-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 14px; overflow: hidden; border: 1px solid var(--bbs-vp-line); border-radius: 10px; background: #fff; }
.bbs-vp-summary > div { display: flex; align-items: baseline; gap: 8px; padding: 14px 18px; border-right: 1px solid var(--bbs-vp-line); }
.bbs-vp-summary > div:last-child { border-right: 0; }
.bbs-vp-summary strong { color: var(--bbs-vp-blue); font-size: 21px; line-height: 1; }
.bbs-vp-summary span { color: var(--bbs-vp-muted); font-size: 12px; }
.bbs-vp-summary .bbs-vp-summary__alert strong { color: var(--bbs-vp-red); }

.bbs-vp-results { display: grid; gap: 9px; }
.bbs-vp-card { position: relative; display: grid; grid-template-columns: 112px 96px 1fr 1fr 1.65fr; align-items: center; min-height: 88px; overflow: hidden; border: 1px solid var(--bbs-vp-line); border-radius: 10px; background: #fff; box-shadow: 0 3px 12px rgba(31, 45, 61, .035); }
.bbs-vp-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--bbs-vp-blue); }
.bbs-vp-card--cancelled::before { background: var(--bbs-vp-red); }
.bbs-vp-card--substitution::before { background: var(--bbs-vp-amber); }
.bbs-vp-card__class, .bbs-vp-card__time, .bbs-vp-card__detail, .bbs-vp-card__change { min-width: 0; padding: 16px 18px; }
.bbs-vp-card__class { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-left: 22px; background: var(--bbs-vp-blue-soft); }
.bbs-vp-field-label { display: block; margin-bottom: 4px; color: #718390; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.bbs-vp-card strong { display: block; overflow-wrap: anywhere; color: var(--bbs-vp-ink); font-size: 14px; line-height: 1.35; }
.bbs-vp-card__class strong { color: var(--bbs-vp-blue-dark); font-size: 17px; }
.bbs-vp-card__time strong { font-size: 15px; }
.bbs-vp-card__change { display: flex; align-items: center; gap: 11px; }
.bbs-vp-card__change p { margin: 4px 0 0; color: var(--bbs-vp-muted); font-size: 12px; line-height: 1.4; }
.bbs-vp-change-type { color: var(--bbs-vp-blue); font-size: 13px; font-weight: 800; }
.bbs-vp-change-type--cancelled { color: var(--bbs-vp-red); }
.bbs-vp-change-type--substitution { color: var(--bbs-vp-amber); }
.bbs-vp-status-icon { flex: 0 0 auto; position: relative; width: 28px; height: 28px; border-radius: 50%; background: var(--bbs-vp-blue-soft); }
.bbs-vp-status-icon::before { content: "i"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--bbs-vp-blue); font-size: 14px; font-weight: 900; }
.bbs-vp-status-icon--cancelled { background: #fff0f1; }
.bbs-vp-status-icon--cancelled::before { content: "×"; color: var(--bbs-vp-red); font-size: 19px; }
.bbs-vp-status-icon--room { background: var(--bbs-vp-blue-soft); }
.bbs-vp-status-icon--room::before { content: "↗"; color: var(--bbs-vp-blue); }
.bbs-vp-status-icon--substitution { background: #fff4e8; }
.bbs-vp-status-icon--substitution::before { content: "↻"; color: var(--bbs-vp-amber); }

.bbs-vp-loading-card { height: 88px; border: 1px solid var(--bbs-vp-line); border-radius: 10px; background: linear-gradient(100deg, #fff 15%, #eef2f5 38%, #fff 62%); background-size: 300% 100%; animation: bbs-vp-loading 1.4s ease infinite; }
@keyframes bbs-vp-loading { to { background-position: -150% 0; } }
.bbs-vp-empty { padding: 48px 24px; border: 1px solid var(--bbs-vp-line); border-radius: 10px; background: #fff; text-align: center; }
.bbs-vp-empty__check { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 13px; border-radius: 50%; background: #e8f5ee; color: #2d8658; font-size: 21px; }
.bbs-vp-app .bbs-vp-empty h3 { margin: 0 0 5px; color: var(--bbs-vp-ink); font-size: 20px; }
.bbs-vp-app .bbs-vp-empty p { margin: 0; color: var(--bbs-vp-muted); font-size: 14px; }
.bbs-vp-message { margin-top: 14px; padding: 11px 14px; border: 1px solid #f1d8ad; border-radius: 8px; background: #fff8eb; color: #76511e; font-size: 13px; }
.bbs-vp-source { margin: 18px 0 0; text-align: right; }
.bbs-vp-source a { color: var(--bbs-vp-blue); font-size: 12px; font-weight: 700; text-decoration: none; }
.bbs-vp-source a:hover { text-decoration: underline; }

@media (max-width: 800px) {
  .bbs-vp-app { margin-top: 24px; }
  .bbs-vp-filter-row { grid-template-columns: 1fr; gap: 8px; }
  .bbs-vp-filter-note { margin-top: 0; }
  .bbs-vp-card { grid-template-columns: 100px 90px 1fr; }
  .bbs-vp-card__change { grid-column: 1 / -1; padding: 11px 18px 14px 22px; border-top: 1px solid #edf1f4; }
  .bbs-vp-card__detail:nth-of-type(4) { display: none; }
}

@media (max-width: 560px) {
  .bbs-vp-app { margin: 18px auto 38px; }
  .bbs-vp-heading { padding: 25px 21px 22px; }
  .bbs-vp-app .bbs-vp-heading h1 { font-size: 28px; }
  .bbs-vp-tabs { gap: 7px; padding: 13px; }
  .bbs-vp-tab { display: block; min-height: 66px; padding: 10px 13px; }
  .bbs-vp-tab span, .bbs-vp-tab small { display: block; }
  .bbs-vp-tab span { font-size: 17px; }
  .bbs-vp-filter-row { padding: 18px; }
  .bbs-vp-content { padding-top: 30px; }
  .bbs-vp-date-row { display: block; }
  .bbs-vp-status-wrap { flex-wrap: wrap; margin-top: 8px; }
  .bbs-vp-summary > div { display: grid; gap: 3px; padding: 12px 10px; }
  .bbs-vp-summary strong { font-size: 19px; }
  .bbs-vp-summary span { font-size: 10px; line-height: 1.25; }
  .bbs-vp-card { grid-template-columns: 1fr 1fr; }
  .bbs-vp-card__class { min-height: 72px; }
  .bbs-vp-card__time { align-self: stretch; display: flex; flex-direction: column; justify-content: center; background: var(--bbs-vp-blue-soft); }
  .bbs-vp-card__detail { padding-top: 14px; padding-bottom: 14px; }
  .bbs-vp-card__detail:nth-of-type(4) { display: block; }
  .bbs-vp-card__change { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .bbs-vp-app * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}