/* Minimal extracted + adapted styles from rophim-site (template.css, live.css)
   Scoped by route-level layout import only (app/watch2gether/layout.jsx). */

:root{
  --w2g-bg: #0F111A;
  --w2g-card: #1E2545;
  --w2g-card-2: #212a56;
  --w2g-text: rgba(255,255,255,.7);
  --w2g-text-2: rgba(255,255,255,.5);
  --w2g-border: #ffffff10;
  --w2g-primary: #FFD875;
  --w2g-primary-text: #191B24;
}

/* Base */
.w2g-scope{ color: var(--w2g-text); }
.w2g-scope a{ color: #fff; text-decoration: none; cursor: pointer; }
.w2g-scope a:hover{ color: var(--w2g-primary); }

/* Layout */
.w2g-scope #wrapper.live-category{
  position: relative;
  background-color: var(--w2g-bg);
  border-bottom: 1px solid #fff1;
  padding: 2.5rem 0 6rem;
  min-height: calc(100vh - 400px);
}
.w2g-scope .fluid-gap{ max-width: 1200px; margin: 0 auto; padding: 0 16px; display: flex; flex-direction: column; gap: 2rem; }
.w2g-scope .cards-row.wide{ width: 100%; }

/* Header row */
.w2g-scope .row-header{
  display:flex;
  align-items:center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.w2g-scope .category-name{ color:#fff; font-size: 1.35rem; font-weight: 700; margin:0; }
.w2g-scope .me-2{ margin-right: .5rem; }
.w2g-scope .me-3{ margin-right: 1rem; }
.w2g-scope .mb-4{ margin-bottom: 1.5rem; }
.w2g-scope .text-center{ text-align:center; }
.w2g-scope .mt-5{ margin-top: 3rem; }
.w2g-scope .pt-4{ padding-top: 1.5rem; }
.w2g-scope .flex-grow-1{ flex: 1 1 auto; }

/* Buttons (subset) */
.w2g-scope .btn{
  font-size: 14px;
  font-weight: 600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.55rem 1rem;
  border-radius:.45rem;
  min-height:40px;
  border:1px solid transparent;
  user-select:none;
}
.w2g-scope .btn:hover{ opacity:.92; }
.w2g-scope .btn-circle{ width:30px; height:30px; padding:0; border-radius:999px; min-height:auto; }
.w2g-scope .btn-sm{ font-size: 12px; padding:.35rem .75rem; min-height: 32px; border-radius: .35rem; }
.w2g-scope .btn-xl{ font-size: 16px; padding:.8rem 1.5rem; min-height: 52px; border-radius: .6rem; }
.w2g-scope .btn-outline{ background: transparent; border-color: rgba(255,255,255,.45); color:#fff; }
.w2g-scope .btn-light{ background: #fff; color:#000; border-color:#fff; }
.w2g-scope .btn-light{ display: inline-flex !important; }
.w2g-scope .btn-rounded{ border-radius: 999px; }

/* Tabs */
.w2g-scope .model-tabs{ display:flex; gap:.5rem; margin-left: .25rem; }
.w2g-scope .w2g-actions{
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.w2g-scope .w2g-actions .btn{ white-space: nowrap; }
.w2g-scope .w2g-actions .w2g-create{
  background: #fff !important;
  border-color: #fff !important;
  color: #000 !important;
}
.w2g-scope .w2g-actions .w2g-create span,
.w2g-scope .w2g-actions .w2g-create i{
  color: #000 !important;
  opacity: 1 !important;
  display: inline-block !important;
  visibility: visible !important;
}

.w2g-scope .model-tabs .item{
  font-size: 13px;
  color: var(--w2g-text-2);
  padding: .35rem .65rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.w2g-scope .model-tabs .item.active{
  color:#fff;
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
}

/* Dropdown (no react-bootstrap) */
.w2g-scope .is-option{ position: relative; }
.w2g-scope .v-dropdown-menu{
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  background: #1b1f33;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 8px;
  z-index: 20;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.w2g-scope .dropdown-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  color: rgba(255,255,255,.85) !important;
}
.w2g-scope .dropdown-item:hover{ background: rgba(255,255,255,.06); }
.w2g-scope .dropdown-item.active{ background: rgba(255,255,255,.08); color:#fff !important; }

/* Grid (from rophim live.css, trimmed) */
.w2g-scope .w2g-live .live-grid{ display: grid; grid-template-columns: repeat(5,1fr); gap: 1.25rem; row-gap: 2rem;}
.w2g-scope .w2g-live .live-grid.live-grid-big{ grid-template-columns: repeat(4,1fr);}
.w2g-scope .w2g-live .live-grid.live-grid-small{ grid-template-columns: repeat(3,1fr); }
@media (max-width: 1280px){ .w2g-scope .w2g-live .live-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width: 999px){ .w2g-scope .w2g-live .live-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width: 640px){ .w2g-scope .w2g-live .live-grid{ grid-template-columns: repeat(1,1fr);} }

/* Thumbnail/card (from rophim live.css + minimal deps) */
.w2g-scope .v-thumbnail{ width: 100%; padding-bottom: 56%; height: 0; position: relative; border-radius: .75rem; overflow: hidden; display: block; background-color: #1e2545;}
.w2g-scope .v-thumbnail img{ position: absolute; width: 100%; height: 100%; inset: 0; object-fit: cover;}
.w2g-scope .w2g-live .card-live{ display: flex; flex-direction: column; gap: .75rem;}
.w2g-scope .w2g-live .v-thumbnail .live-mask{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 4;}
.w2g-scope .w2g-live .card-live .thumb-small{ position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 39%; height: 100%; z-index: 2; background-size: cover; background-position: top center; box-shadow: 0 10px 10px 0 #0002; mask-image: linear-gradient(to top, transparent 0%, black 30%);}
.w2g-scope .live-tag{ display: inline-flex; background-color: #fff; border-radius: .2rem; font-size: 12px; color: #000; font-weight: 600; line-height: 20px; padding: 0 5px;}
.w2g-scope .w2g-live .card-live .v-thumbnail .live-tag{ position: absolute; top: .5rem; left: .5rem; z-index: 3; border-radius: .3rem; height: 24px; padding: 0 .4rem; box-shadow: 0 0 5px 5px #0001;}
.w2g-scope .w2g-live .current-status{ position: absolute; z-index: 3; bottom: .5rem; left: .5rem; display: flex; align-items: center; gap: .5rem; background-color: #0009; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: .3rem .7rem; font-size: 12px; font-weight: 600; color: #fff; border-radius: .4rem; border: 1px solid #fff; box-shadow: 0 0 5px 5px #0001;}
.w2g-scope .w2g-live .current-status.status-end{ color: #fe476a; border-color: #fe476a; font-weight: 400;}
.w2g-scope .card-live-detail{ display: flex; align-items: flex-start; gap: 1rem; flex-direction: row;}
.w2g-scope .card-live-detail .user-avatar{ width: 40px; height: 40px; border-radius: 50%; overflow: hidden; position: relative; flex-shrink: 0; background-color: #282b3a;}
.w2g-scope .card-live-detail .user-avatar img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.user-avatar.o-live{ border: 2px solid red; animation: live-avatar 1s infinite;}
@keyframes live-avatar{ 0%{ transform: scale(1);} 50%{ transform: scale(1.05);} 100%{ transform: scale(1);} }
.w2g-scope .card-live-detail .is-info{ display: flex; flex-grow: 1; flex-direction: column; gap: .1rem; font-size: .9em;}
.w2g-scope .card-live-detail .live-name{ font-size: 14px; line-height: 1.5; font-weight: 600; margin: 0 0 .2rem; color: #fff;}
.w2g-scope .card-live-detail .source-name{ font-size: 12px; font-weight: 400; margin: 0 0 .15rem; color: rgba(255,255,255,.6);}
.w2g-scope .info-line{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.w2g-scope .tag-small{ font-size: 12px; color: rgba(255,255,255,.55); white-space: nowrap; }
.w2g-scope .lim-1, .w2g-scope .lim-2{ display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; white-space: normal !important;}
.w2g-scope .lim-1{ -webkit-line-clamp: 1;}
.w2g-scope .lim-2{ -webkit-line-clamp: 2;}
.w2g-scope .btn-primary{ background: var(--w2g-primary); color: var(--w2g-primary-text); border-color: var(--w2g-primary); }

/* Empty notice */
.w2g-scope .v-notice{
  margin: 3rem 0;
  padding: 2rem 1.5rem;
  border: 1px dashed rgba(255,255,255,.2);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  gap: .75rem;
  flex-direction: column;
}
.w2g-scope .v-notice p{ margin:0; color: var(--w2g-text); }
.w2g-scope .v-notice .icon-notice{ width: 44px; height: 44px; border-radius: 999px; background: rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; }
.w2g-scope .v-notice .icon-notice i{ color: var(--w2g-primary); font-size: 18px; }
.w2g-scope .inc-icon{ display:inline-flex; align-items:center; justify-content:center; }
.w2g-scope .inc-icon img{ width: 44px; height: 44px; display:block; }

/* Modal (ported from rophim live.css + reuse rophim-modal backdrop styles) */
.w2g-scope .modal-backdrop{
  position: fixed;
  inset: 0;
  background-color: #131727;
  opacity: .95;
  z-index: 9998;
}
.w2g-scope .v-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.w2g-scope .v-modal .modal-dialog{ max-width: 520px; width: 96%; margin: auto; }
.w2g-scope .v-modal .modal-content{
  position: relative;
  border-radius: .75rem;
  padding: 1.75rem;
  border: 1px solid #fff2;
  background-color: #282b3a;
  color: rgba(255,255,255,.7);
}
.w2g-scope .v-modal .modal-close{
  position:absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #fff;
}
.w2g-scope .v-modal .modal-close i{ font-size: 16px; }
.w2g-scope .heading-sm{ font-size: 1.4em; font-weight: 600; line-height: 1.5; margin-bottom: .5rem; color: #fff; }
.w2g-scope .mb-0{ margin-bottom:0!important; }
.w2g-scope .mb-2{ margin-bottom:.5rem!important; }
.w2g-scope .mb-4{ margin-bottom:1.5rem!important; }
.w2g-scope .px-5{ padding-left: 3rem !important; padding-right: 3rem !important; }
.w2g-scope .btn-dark{ background-color: #0f111a !important; border: 1px solid #fff !important; color:#fff !important; }

.w2g-scope .modal-createlive .modal-dialog{ max-width: 420px; }
.w2g-scope .modal-createlive .modal-content .is-footer .btn{ width: 100%; }
.w2g-scope .create-live-steps{ display:flex; flex-direction:column; width:100%; gap:0; border-top:1px solid #fff1; margin: 1.5rem 0 .5rem; }
.w2g-scope .create-live-steps .step{ display:flex; align-items:center; gap: 1rem; border-bottom: 1px solid #fff1; }
.w2g-scope .create-live-steps .step .number{ flex-shrink:0; width:30px; font-size:36px; font-weight:100; line-height:1; color: var(--w2g-primary); }
.w2g-scope .create-live-steps .step .text{ flex-grow:1; color:#fff; padding: 1.25rem 0; line-height: 1.7; }
.w2g-scope .create-live-steps .step .btn-dark{ padding: .2rem .4rem; margin: 1px 3px; border-radius: .4rem; }

@media (max-width: 479px){
  .w2g-scope .create-live-steps .step .number{ font-size: 30px; width: 20px; }
  .w2g-scope .create-live-steps .step .text{ padding: 1rem 0; }
}