/* 動画配信サンプル（Studio Flow オンライン）共通スタイル */
:root { --brand: #4b3fa8; --brand-dark: #3a3086; --brand-soft: #efedfb; --accent: #e8a33d; }
body { background-color: #f5f6f8; }
main { padding-bottom: 3rem; }
.navbar-brand { font-weight: 700; letter-spacing: .04em; }
.bg-brand { background-color: var(--brand) !important; }
.text-brand { color: var(--brand) !important; }
.text-accent { color: var(--accent) !important; }
.bg-brand-soft { background-color: var(--brand-soft) !important; }
.btn-brand { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.btn-brand:hover, .btn-brand:focus { background-color: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-outline-brand { color: var(--brand); border-color: var(--brand); }
.btn-outline-brand:hover { background-color: var(--brand); color: #fff; }
.btn-accent { background-color: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-accent:hover { background-color: #d38f28; border-color: #d38f28; color: #fff; }

/* ---------- 会員側 ---------- */
.vs-search { max-width: 420px; }
.vs-side .nav-link { color: #495057; border-radius: .5rem; margin-bottom: .15rem; }
.vs-side .nav-link:hover { background-color: #f1f3f5; }
.vs-side .nav-link.active { background-color: var(--brand); color: #fff; }
.vs-side__title { font-size: .75rem; font-weight: 700; color: #6c757d; letter-spacing: .06em; margin: 1rem 0 .4rem .5rem; }
.vs-chip { display: inline-block; border: 1px solid #ced4da; background: #fff; color: #495057; border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; margin: 0 .25rem .4rem 0; cursor: pointer; user-select: none; }
.vs-chip:hover { border-color: var(--brand); color: var(--brand); }
.vs-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.vs-plan-cta { background: linear-gradient(135deg, #4b3fa8, #6f5fd8); color: #fff; border-radius: .75rem; padding: 1rem; }

.vs-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: .6rem; overflow: hidden; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.92); }
.vs-thumb__icon { font-size: 2.6rem; }
.vs-thumb__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vs-thumb__img.is-flip { transform: scaleX(-1); }
/* 写真の上でもタイトルが読めるよう、下側だけ暗くする */
.vs-thumb.has-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.vs-thumb__badge, .vs-thumb__title, .vs-thumb__dur, .vs-thumb__progress { z-index: 1; }
.vs-thumb__title { position: absolute; left: .7rem; bottom: .55rem; right: 3.5rem; font-size: .78rem; font-weight: 700; line-height: 1.3; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.vs-thumb__dur { position: absolute; right: .5rem; bottom: .5rem; background: rgba(0,0,0,.6); color: #fff; font-size: .72rem; padding: .05rem .4rem; border-radius: .3rem; }
.vs-thumb__badge { position: absolute; left: .5rem; top: .5rem; font-size: .7rem; font-weight: 700; padding: .15rem .5rem; border-radius: .3rem; }
.vs-thumb__badge--free { background: #fff; color: #198754; }
.vs-thumb__badge--paid { background: var(--accent); color: #fff; }
.vs-thumb__progress { position: absolute; left: 0; bottom: 0; height: 4px; background: #e63946; }

.vs-card { border: 0; border-radius: .75rem; transition: transform .15s ease, box-shadow .15s ease; }
.vs-card:hover { transform: translateY(-3px); box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.1) !important; }
.vs-card a { color: inherit; text-decoration: none; }
.vs-card__title { font-size: .92rem; font-weight: 700; line-height: 1.4; margin: .55rem 0 .2rem; }
.vs-card__meta { font-size: .78rem; color: #6c757d; }

/* 再生画面 */
.vs-player { position: relative; aspect-ratio: 16 / 9; border-radius: .75rem; overflow: hidden; background: #111; }
.vs-player .vs-thumb { border-radius: 0; height: 100%; }
.vs-player__play { position: absolute; inset: 0; margin: auto; width: 84px; height: 84px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: var(--brand); font-size: 2.4rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.vs-player__bar { position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem .8rem; background: linear-gradient(transparent, rgba(0,0,0,.65)); color: #fff; font-size: .8rem; display: flex; align-items: center; gap: .6rem; }
.vs-player__track { flex: 1; height: 5px; background: rgba(255,255,255,.35); border-radius: 3px; overflow: hidden; }
.vs-player__fill { height: 100%; width: 0; background: #e63946; }
.vs-player.is-playing .vs-player__play,
.vs-player.is-locked .vs-player__play { display: none; }
.vs-player__eq { position: absolute; top: .8rem; right: .8rem; background: rgba(0,0,0,.45); color: #fff; font-size: .75rem; padding: .2rem .6rem; border-radius: 999px; display: none; }
.vs-player.is-playing .vs-player__eq { display: block; }
.vs-lock { position: absolute; inset: 0; background: rgba(20, 16, 50, .82); color: #fff; display: none; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; }
.vs-lock.is-show { display: flex; }
.vs-tag { display: inline-block; background: var(--brand-soft); color: var(--brand); border-radius: .4rem; font-size: .75rem; padding: .15rem .55rem; margin: 0 .3rem .3rem 0; }

.nav-tabs .nav-link { color: #495057; }
.nav-tabs .nav-link.active { color: var(--brand); font-weight: 700; }

/* 料金プラン */
.vs-hero { background: linear-gradient(135deg, #4b3fa8 0%, #2f2770 100%); color: #fff; }
.vs-price-card { border: 2px solid #e9ecef; border-radius: 1rem; background: #fff; height: 100%; }
.vs-price-card.is-recommend { border-color: var(--accent); }
.vs-price-card__ribbon { display: inline-block; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .15rem .7rem; }
.vs-price-card__amount { font-size: 2.2rem; font-weight: 800; color: var(--brand); }

/* ---------- 管理側 ---------- */
@media (min-width: 768px) { .sidebar { min-height: calc(100vh - 56px); } }
.sidebar .nav-link { color: #495057; border-radius: .5rem; margin-bottom: .15rem; }
.sidebar .nav-link:hover { background-color: #f1f3f5; }
.sidebar .nav-link.active { background-color: var(--brand); color: #fff; }
.table thead th { font-size: .85rem; color: #495057; font-weight: 600; }
.vs-kpi__icon { width: 46px; height: 46px; border-radius: .75rem; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.vs-mini-thumb { width: 96px; flex: 0 0 96px; }
.vs-mini-thumb .vs-thumb__icon { font-size: 1.2rem; }
.vs-bars { display: flex; align-items: flex-end; gap: .5rem; height: 300px; padding-top: .5rem; }
.vs-bars__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.vs-bars__bar { width: 100%; max-width: 38px; background: linear-gradient(#7c6fd6, #4b3fa8); border-radius: .35rem .35rem 0 0; }
.vs-bars__label { font-size: .72rem; color: #6c757d; margin-top: .3rem; }
.vs-bars__val { font-size: .7rem; color: #495057; margin-bottom: .2rem; }

/* スマホでは表のセルを折り返さず、枠内を横スクロールして読む */
@media (max-width: 767.98px) {
  .table-responsive table th,
  .table-responsive table td { white-space: nowrap; }
  .vs-thumb__icon { font-size: 2rem; }
}