/* Public site: main page directory, /watch/<slug>, /terms. Builds on admin.css + console.css (the site look). */

.front { display: flex; flex-direction: column; min-height: calc(var(--vh, 1vh) * 100); }

/* ---------- header: logo, search ---------- */
.front .fr-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr); gap: 16px; flex-wrap: nowrap; }
.front .fr-logo { display: flex; align-items: center; height: 40px; min-width: 0; text-decoration: none; }
.front .fr-logo img { display: block; height: 40px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; }
.front .fr-search { display: flex; min-width: 0; margin: 0; }
.front.console .fr-search input:not([type=checkbox]):not([type=range]):not([type=color]):not([type=file]) { flex: 1; min-width: 0; height: 38px; padding: 0 14px; font-size: 15px; border-radius: 19px 0 0 19px; }
.front .fr-search input::-webkit-search-cancel-button { filter: invert(0.6); }
.front .fr-search button {
  width: 58px; height: 38px; display: grid; place-items: center; cursor: pointer; color: var(--text-2);
  border: 1px solid var(--border); border-left: 0; border-radius: 0 19px 19px 0; background: linear-gradient(180deg, #2d323d, var(--key));
}
.front .fr-search button:hover { color: var(--text); background: linear-gradient(180deg, #353b47, #2c313b); }

/* ---------- body and footer ---------- */
.front .fr-main { flex: 1; width: 100%; max-width: 1680px; margin: 0 auto; padding: 24px 24px 48px; box-sizing: border-box; }
.front .fr-h { margin: 0 0 18px; font-size: 16px; font-weight: 600; color: var(--text-2); }
.front .fr-empty { margin: 60px 0; text-align: center; color: var(--muted); font-size: 15px; }
.front .fr-foot { display: flex; justify-content: center; gap: 22px; padding: 18px 24px; border-top: 1px solid var(--seam); background: var(--chassis); font-size: 13px; }
.front .fr-foot:empty { padding: 0; border: 0; }
.front .fr-foot a { color: var(--muted); text-decoration: none; }
.front .fr-foot a:hover { color: var(--text); }

/* ---------- directory grid ---------- */
.front .fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 28px 18px; }
.front .fr-card { display: block; color: inherit; text-decoration: none; min-width: 0; }
.front .fr-thumb {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg, #232833, #171a20); border: 1px solid var(--border); transition: transform 0.15s, border-color 0.15s;
}
.front .fr-card:hover .fr-thumb { border-color: var(--key-hi); transform: translateY(-2px); }
.front .fr-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.front .fr-init { font-size: 52px; font-weight: 700; color: #3a404c; }
.front .fr-live, .front .fr-off {
  position: absolute; left: 8px; top: 8px; padding: 3px 7px; border-radius: 5px; font: 700 11.5px/1.2 var(--readout); letter-spacing: 0.06em;
}
.front .fr-live { background: var(--pgm); color: #fff; }
.front .fr-off { background: rgba(10, 12, 15, 0.8); color: var(--muted); }
.front .fr-count {
  position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px; border-radius: 5px;
  background: rgba(10, 12, 15, 0.82); color: #fff; font: 600 12px/1.2 var(--readout);
}
.front .fr-count .ic { width: 14px; height: 14px; }
.front .fr-info { padding: 10px 2px 0; }
.front .fr-info h3 { margin: 0 0 4px; font-size: 15.5px; font-weight: 650; color: var(--text); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.front .fr-meta { color: var(--muted); font-size: 13px; }
.front .fr-phone { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; color: var(--text-2); font-size: 13px; }
.front .fr-phone .ic { width: 14px; height: 14px; color: var(--muted); }
.front .fr-pin { color: var(--muted); }
.front .fr-pin b { color: var(--text-2); font-weight: 600; font-family: var(--readout); letter-spacing: 0.04em; }

/* ---------- /watch/<slug>: player left, chat right ---------- */
.front.fr-watching .fr-main { max-width: none; padding: 18px; }
.front .fr-watch { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.front .fr-player { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--border); }
.front .fr-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.front .fr-chat { height: calc((calc(var(--vw, 1vw) * 100) - 18px * 3 - 380px) * 9 / 16); min-height: 420px; max-height: calc(calc(var(--vh, 1vh) * 100) - 120px); border-radius: 12px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.front .fr-chat iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- /terms ---------- */
.front .fr-terms { max-width: 760px; margin: 0 auto; color: var(--text-2); line-height: 1.65; }
.front .fr-terms h1 { color: var(--text); font-size: 24px; margin: 0 0 18px; }
.front .fr-terms p { margin: 0 0 14px; }

@media (max-width: 900px) {
  .front .fr-watch { grid-template-columns: 1fr; }
  .front .fr-chat { height: 520px; max-height: none; }
}
@media (max-width: 640px) {
  .front .fr-top { padding: 10px 14px; gap: 10px; }
  .front .fr-main { padding: 16px 14px 36px; }
  .front.fr-watching .fr-main { padding: 0 0 16px; }
  .front.fr-watching .fr-player { border-radius: 0; border-width: 0 0 1px; }
  .front.fr-watching .fr-chat { border-radius: 0; border-width: 0; }
  .front .fr-grid { grid-template-columns: 1fr; }
}

/* ---------- "Start broadcasting" button and form ---------- */
.front .fr-end { display: flex; justify-content: flex-end; min-width: 0; }
.front .fr-start .ic { color: var(--pgm); }
.front .fr-dlg {
  width: min(420px, calc(calc(var(--vw, 1vw) * 100) - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); color: var(--text); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.front .fr-dlg::backdrop { background: rgba(5, 6, 8, 0.7); }
.front .fr-dlg form { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.front .fr-dlg h2 { margin: 0; font-size: 18px; font-weight: 650; text-transform: none; letter-spacing: 0; color: var(--text); }
.front .fr-dlg .field { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.front .fr-dlg input { height: 38px; padding: 0 12px; font-size: 15px; }
.front .fr-dlg-msg { margin: 0; color: var(--text-2); font-size: 14px; }
.front .fr-dlg-act { display: flex; justify-content: flex-end; gap: 8px; }
.front .fr-send { color: #fff; border-color: rgba(74, 163, 255, 0.6); background: linear-gradient(180deg, #2f6fb8, #255a97); }
.front .fr-send:hover { color: #fff; background: linear-gradient(180deg, #3a7cc6, #2b64a5); }
@media (max-width: 640px) {
  .front .fr-top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .front .fr-end { display: flex; }
  .front .fr-start { width: 38px; padding: 0; justify-content: center; }
  .front .fr-start span { display: none; }
}
@media (max-width: 640px) { .front .fr-logo img { max-width: 120px; } }
.front .fr-cap { display: flex; align-items: center; gap: 8px; }
.front .fr-cap img { display: block; width: 200px; height: 64px; border-radius: 8px; border: 1px solid var(--border); background: #111318; }
.front .fr-dlg input[name=captcha] { text-transform: uppercase; letter-spacing: 0.2em; font-family: var(--readout); }

/* ---------- error pages ---------- */
.front .fr-err { max-width: 560px; margin: calc(var(--vh, 1vh) * 12) auto 0; padding: 0 16px; text-align: center; }
.front .fr-err-code { font-family: var(--readout); font-size: clamp(64px, calc(var(--vw, 1vw) * 14), 120px); font-weight: 700; line-height: 1; color: var(--text-2); letter-spacing: 0.04em; }
.front .fr-err h1 { margin: 14px 0 8px; font-size: 24px; font-weight: 650; color: var(--text); text-transform: none; letter-spacing: 0; }
.front .fr-err p { margin: 0 0 22px; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.front .fr-err-act { display: flex; justify-content: center; gap: 8px; }
.front .fr-err-act a.ghost { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------- announcements and events ---------- */
.front .fr-ann { border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(57, 135, 229, 0.16), rgba(57, 135, 229, 0.08)); }
.front .fr-ann-i { max-width: 1680px; margin: 0 auto; padding: 10px 24px; box-sizing: border-box; font-size: 14.5px; line-height: 1.45; color: var(--text); }
.front .fr-ann-i + .fr-ann-i { border-top: 1px solid rgba(255, 255, 255, 0.06); }
.front .fr-ann-i a { color: #8cc4ff; font-weight: 600; white-space: nowrap; }
.front .fr-events { margin-bottom: 30px; }
.front .fr-ev-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px 18px; }
.front .fr-ev { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.front .fr-ev.now { border-color: rgba(229, 57, 53, 0.55); }
.front .fr-ev-when { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.front .fr-ev-when .fr-live { position: static; }
.front .fr-ev h3 { margin: 0; font-size: 16px; font-weight: 650; color: var(--text); }
.front .fr-ev p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.front .fr-ev-act { display: flex; gap: 8px; margin-top: 4px; }
.front .fr-ev-act a { text-decoration: none; }
@media (max-width: 640px) { .front .fr-ann-i { padding: 10px 14px; } }

/* ---------- header: subscriptions, account ---------- */
.front .fr-end { display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-width: 0; }
.front .fr-subs-link, .front .fr-signin, .front .fr-me { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; white-space: nowrap; }
.front .fr-acct { position: relative; }
.front .fr-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; z-index: 40; display: flex; flex-direction: column; padding: 6px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.front .fr-menu[hidden] { display: none; }
.front .fr-menu a, .front .fr-menu button { display: block; text-align: left; padding: 9px 10px; border-radius: 7px; color: var(--text); text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }
.front .fr-menu a:hover, .front .fr-menu button:hover { background: var(--surface-2); }
.front .fr-av { display: inline-block; border-radius: 50%; object-fit: cover; flex: none; background: #2b303b; }
.front .fr-av-i { display: inline-grid; place-items: center; color: #e9e8e4; font-weight: 700; background: linear-gradient(135deg, #3b4252, #2a2f3a); }
.front .fr-acct-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 9px; background: var(--surface-2); }
.front .fr-acct-tabs button { flex: 1; padding: 8px; border: 0; border-radius: 7px; background: none; color: var(--text-2); font: 600 14px system-ui; cursor: pointer; }
.front .fr-acct-tabs button.on { background: var(--key-hi); color: var(--text); }

/* ---------- sections, video cards, channels ---------- */
.front .fr-sec { margin-bottom: 34px; }
.front .fr-vcard .fr-thumb { background: #0b0d10; }
.front .fr-dur, .front .fr-ppv, .front .fr-plcount {
  position: absolute; bottom: 8px; padding: 2px 6px; border-radius: 5px; background: rgba(10, 12, 15, 0.85); color: #fff; font: 600 12px/1.3 var(--readout);
}
.front .fr-dur { right: 8px; }
.front .fr-ppv { left: 8px; background: #b8860b; }
.front .fr-plcount { right: 8px; display: inline-flex; align-items: center; gap: 4px; }
.front .fr-plcount .ic { width: 14px; height: 14px; }
.front .fr-ch { color: var(--text-2); }
.front .fr-chips { display: flex; flex-wrap: wrap; gap: 18px 22px; }
.front .fr-chip { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 104px; text-align: center; color: var(--text-2); text-decoration: none; font-size: 13.5px; }
.front .fr-chip:hover { color: var(--text); }
.front .fr-chip span { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.front .fr-pill { display: inline-block; padding: 6px 12px; border-radius: 8px; background: var(--surface-2); color: var(--text-2); text-decoration: none; font: 600 13px system-ui; border: 0; cursor: pointer; }
.front .fr-pill.on { background: var(--text); color: #111; }
.front .fr-sort, .front .fr-csort { display: flex; gap: 8px; margin-bottom: 16px; }

/* row cards (suggestions, playlist panel, featured) */
.front .fr-vcard.row { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 10px; }
.front .fr-vcard.row .fr-thumb { border-radius: 8px; }
.front .fr-vcard.row .fr-info { padding: 0; }
.front .fr-vcard.row h3 { font-size: 14px; }
.front .fr-featured .fr-vcard.row { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; }
.front .fr-featured .fr-vcard.row h3 { font-size: 18px; }

/* ---------- /channel/<slug> ---------- */
.front .fr-banner { aspect-ratio: 6.2 / 1; border-radius: 14px; overflow: hidden; margin-bottom: 18px; background: #111; }
.front .fr-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.front .fr-chead { display: flex; gap: 22px; align-items: center; margin-bottom: 14px; }
.front .fr-chead h1 { margin: 0 0 6px; font-size: 30px; font-weight: 750; color: var(--text); }
.front .fr-chead-about { margin-top: 6px; color: var(--text-2); font-size: 14px; }
.front .fr-chead-act { display: flex; gap: 10px; margin-top: 12px; }
.front .fr-subbtn { background: var(--text); color: #111; border-color: var(--text); font-weight: 650; border-radius: 18px; padding: 0 16px; }
.front .fr-subbtn.on { background: var(--surface-2); color: var(--text); border-color: var(--border); }
.front .fr-livebtn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; border-radius: 18px; }
.front .fr-livebtn .fr-live { position: static; }
.front .fr-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 22px; }
.front .fr-tab { padding: 12px 16px; color: var(--text-2); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.front .fr-tab.on { color: var(--text); border-bottom-color: var(--text); }
.front .fr-about { max-width: 780px; color: var(--text-2); line-height: 1.6; }
.front .fr-about h3 { color: var(--text); font-size: 15px; margin: 22px 0 8px; }
.front .fr-links { margin: 0; padding-left: 18px; }
.front .fr-links a { color: #7cb7ff; }
.front .fr-about-stats { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; color: var(--muted); font-size: 14px; }

/* ---------- /watch/<id>: a video ---------- */
.front.fr-vpage .fr-main { max-width: 1760px; padding: 18px 24px 40px; }
.front .fr-vwatch { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.front .fr-vtitle { margin: 14px 0 10px; font-size: 21px; font-weight: 700; color: var(--text); line-height: 1.3; }
.front .fr-vbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.front .fr-vbar .spacer { flex: 1; }
.front .fr-vch { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; margin-right: 6px; }
.front .fr-vch b { display: block; font-size: 15px; }
.front .fr-vch small { color: var(--muted); font-size: 12.5px; }
.front .fr-likes { display: inline-flex; }
.front .fr-likes button:first-child { border-radius: 18px 0 0 18px; }
.front .fr-likes button:last-child:not(:first-child) { border-radius: 0 18px 18px 0; border-left: 0; }
.front .fr-likes button.on, .front #dislikeBtn.on { background: var(--key-hi); color: var(--text); }
.front .fr-buy { background: #b8860b; border-color: #b8860b; color: #fff; font-weight: 650; display: inline-flex; gap: 6px; align-items: center; border-radius: 18px; }
.front .fr-buy[hidden] { display: none; }
.front .fr-vdesc { position: relative; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--surface); color: var(--text-2); font-size: 14px; line-height: 1.55; overflow: hidden; }
.front .fr-vdesc.short { max-height: 160px; }
.front .fr-vdesc.short::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; background: linear-gradient(transparent, var(--surface)); }
.front .fr-vdesc .fr-more { position: relative; z-index: 1; margin-top: 6px; }
.front .fr-vdesc.short .fr-more { position: absolute; bottom: 8px; left: 14px; }
.front .fr-vstats { color: var(--text); margin-bottom: 6px; }
.front .fr-vdesc a { color: #7cb7ff; }
.front .fr-ppv-in { color: #e0b54a; }
.front .fr-vside { display: flex; flex-direction: column; gap: 14px; }
.front .fr-suggest { display: flex; flex-direction: column; gap: 10px; }
.front .fr-plpanel { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.front .fr-plhead { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.front .fr-pllist { max-height: 420px; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.front .fr-pllist [aria-current] { background: var(--surface-2); border-radius: 8px; }
.front .fr-plthumb { background: #0b0d10; }

/* share dialog */
.front .fr-copy { display: flex; gap: 8px; align-items: flex-start; }
.front .fr-copy input, .front .fr-copy textarea { flex: 1; min-width: 0; }
.front .fr-share-dlg textarea { resize: none; padding: 8px 12px; font: 13px/1.4 var(--readout); }

/* comments */
.front .fr-comments { margin-top: 26px; }
.front .fr-cform { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 18px; flex-wrap: wrap; }
.front .fr-cform textarea { flex: 1; min-width: 200px; resize: none; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); font: 14.5px/1.45 system-ui; outline: none; }
.front .fr-cform textarea:focus { border-bottom-color: var(--text); }
.front .fr-cform-act { display: flex; gap: 8px; width: 100%; justify-content: flex-end; }
.front .fr-cnote { margin: -8px 0 16px; font-size: 13px; }
.front .fr-c { display: flex; gap: 12px; margin-bottom: 18px; }
.front .fr-c.held { opacity: .75; }
.front .fr-cb { flex: 1; min-width: 0; }
.front .fr-chd { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 13px; }
.front .fr-chd b { color: var(--text); }
.front .fr-ctag { font-size: 12px; color: var(--text-2); background: var(--surface-2); padding: 1px 7px; border-radius: 10px; }
.front .fr-ctag.warn { color: #f5c26b; }
.front .fr-ctext { margin: 4px 0 6px; color: var(--text); font-size: 14.5px; line-height: 1.5; word-wrap: break-word; }
.front .fr-cact { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; }
.front .fr-cact .link, .front .fr-more { background: none; border: 0; padding: 0; color: var(--text-2); font: 600 13px system-ui; cursor: pointer; }
.front .fr-cact .link:hover { color: var(--text); }
.front .fr-cmod { display: inline-flex; flex-wrap: wrap; gap: 12px; padding-left: 12px; border-left: 1px solid var(--border); }
.front .fr-cmod .link { color: #e0b54a; }
.front .fr-creplies { margin-top: 12px; }

@media (max-width: 1100px) {
  .front .fr-vwatch { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .front .fr-subs-link span, .front .fr-start span { display: none; }
  .front .fr-chead { flex-direction: column; align-items: flex-start; gap: 12px; }
  .front .fr-chead .fr-av { width: 72px !important; height: 72px !important; }
  .front .fr-featured .fr-vcard.row, .front .fr-vcard.row { grid-template-columns: 140px minmax(0, 1fr); }
  .front.fr-vpage .fr-main { padding: 0 0 30px; }
  .front.fr-vpage .fr-player { border-radius: 0; border-width: 0; }
  .front .fr-vmain > :not(.fr-player), .front .fr-vside { padding: 0 14px; }
}