:root {
  color-scheme: dark;
  --bg: #071323;
  --surface: rgba(16, 33, 55, .88);
  --surface-strong: #13243a;
  --line: #284665;
  --text: #f0f7ff;
  --muted: #9fb5cc;
  --cyan: #4cc9f0;
  --blue: #268fe6;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(130,190,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(130,190,255,.035) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, #000, transparent 72%); }
.ambient { position: fixed; border-radius: 999px; filter: blur(90px); opacity: .22; pointer-events: none; }
.ambient-a { width: 36rem; height: 36rem; background: #146db9; top: 12rem; right: 8%; }
.ambient-b { width: 28rem; height: 28rem; background: #613abb; top: -8rem; left: 5%; }
.topbar, main { width: min(1180px, calc(100% - 40px)); margin-inline: auto; position: relative; z-index: 1; }
.topbar { min-height: 74px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(121, 169, 212, .18); }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--text); font-size: 1.05rem; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: #071323; background: linear-gradient(135deg, var(--cyan), #65a8ff); font-weight: 900; }
nav { display: flex; gap: 1.3rem; } nav a { color: var(--muted); text-decoration: none; font-size: .9rem; } nav a:hover, nav a.active { color: var(--text); }
main { padding: 3.8rem 0 5rem; }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr); gap: 3rem; align-items: end; margin-bottom: 2.6rem; }
.eyebrow { color: var(--cyan); font-size: .75rem; letter-spacing: .11em; font-weight: 800; margin: 0 0 .75rem; }
h1,h2,h3,p { margin-top: 0; } h1 { font-size: clamp(2.25rem, 5vw, 4.2rem); line-height: 1.03; letter-spacing: -.055em; margin-bottom: 1.1rem; } h1 span { color: var(--cyan); } h2 { font-size: 1.45rem; letter-spacing: -.025em; margin-bottom: 0; } h3 { font-size: 1rem; margin-bottom: .5rem; } .lede { max-width: 630px; color: var(--muted); line-height: 1.6; font-size: 1.04rem; }
.install-note, .toolbar, .how, .panel, .login-card { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 22px 70px rgba(0,0,0,.2); }
.install-note { display: flex; gap: .85rem; padding: 1rem; border-radius: 16px; }.install-note small { display: block; color: var(--muted); margin-top: .25rem; font-size: .8rem; }.note-icon { color: #061b2a; background: var(--cyan); border-radius: 50%; width: 25px; height: 25px; display: grid; place-items: center; font-weight: 900; flex: none; }
.toolbar { padding: .72rem; border-radius: 16px; display: flex; gap: .7rem; margin-bottom: 3.8rem; }.search { flex: 1; display: flex; gap: .7rem; align-items: center; padding: 0 .65rem; color: var(--muted); }.search input { width: 100%; background: transparent; border: 0; color: var(--text); outline: 0; font: inherit; padding: .55rem 0; }.ghost-button, .primary-button, .install-button, .mini-row button { border: 0; cursor: pointer; border-radius: 10px; font: inherit; font-weight: 700; }.ghost-button { background: #203a58; color: var(--text); padding: .65rem .9rem; }.primary-button, .install-button { background: linear-gradient(135deg, #1e96e5, #5177eb); color: white; padding: .78rem 1rem; }.primary-button:disabled { opacity: .55; cursor: wait; }
.section-heading, .library-heading { display: flex; justify-content: space-between; align-items: end; gap: 1.5rem; margin-bottom: 1.25rem; }.section-heading > p { color: var(--muted); margin: 0; max-width: 310px; font-size: .85rem; line-height: 1.5; }.categories { display: grid; grid-template-columns: repeat(6, 1fr); gap: .7rem; margin-bottom: 4rem; }.category-card { --category-color: #4cc9f0; min-height: 132px; background: rgba(18,35,58,.72); border: 1px solid #264565; border-radius: 15px; color: var(--text); text-align: left; padding: .9rem; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }.category-card:hover,.category-card.selected { transform: translateY(-3px); border-color: var(--category-color); background: rgba(29,53,83,.95); }.category-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--category-color) 18%, transparent); color: var(--category-color); font-size: 1.15rem; margin-bottom: .8rem; }.category-card strong,.category-card small { display: block; }.category-card small { color: var(--muted); font-size: .74rem; line-height: 1.35; margin-top: .28rem; }
.library-section { margin-top: 1rem; }.result-count { padding: .35rem .6rem; border: 1px solid #315374; border-radius: 999px; color: var(--muted); font-size: .75rem; }.effects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }.effect-card { --accent: var(--cyan); overflow: hidden; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transition: transform .2s ease, border-color .2s ease; }.effect-card:hover { transform: translateY(-4px); border-color: var(--accent); }.effect-visual { height: 138px; position: relative; display: grid; place-items: center; background: radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--accent) 50%, transparent), transparent 30%), linear-gradient(135deg, #102844, #101b32); border-bottom: 1px solid var(--line); }.effect-symbol { font-size: 3.1rem; color: var(--accent); text-shadow: 0 0 24px color-mix(in srgb, var(--accent) 55%, transparent); }.type-pill { position: absolute; left: .75rem; top: .75rem; padding: .3rem .5rem; border-radius: 999px; background: rgba(4,13,26,.58); border: 1px solid rgba(255,255,255,.18); color: #dbeeff; font-size: .68rem; font-weight: 800; }.effect-info { padding: 1rem; }.effect-title-row { display: flex; justify-content: space-between; align-items: start; gap: .7rem; }.duration { color: var(--cyan); font-size: .72rem; white-space: nowrap; }.description { color: var(--muted); font-size: .85rem; line-height: 1.5; min-height: 2.6rem; }.tags { min-height: 25px; display: flex; flex-wrap: wrap; gap: .35rem; }.tags span { color: #c8ddf1; font-size: .68rem; border-radius: 999px; background: #203752; padding: .28rem .48rem; }.install-button { width: 100%; margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; }.empty { text-align: center; padding: 4rem 1rem; color: var(--muted); }.empty span { display: block; font-size: 2rem; color: var(--cyan); }.hidden { display: none !important; }.how { border-radius: 20px; margin-top: 5rem; padding: 2rem; }.how ol { padding: 0; margin: 2rem 0 0; list-style: none; display: grid; grid-template-columns: repeat(3,1fr); gap: 1.4rem; }.how li { display: flex; gap: .85rem; }.how b { color: var(--cyan); font-size: 1.1rem; }.how span { display: block; color: var(--muted); font-size: .82rem; line-height: 1.5; margin-top: .25rem; }.toast { position: fixed; z-index: 3; right: 24px; bottom: 24px; max-width: 360px; border-radius: 12px; background: #174066; color: white; border: 1px solid #3f82b6; padding: .9rem 1rem; box-shadow: 0 18px 45px rgba(0,0,0,.35); font-size: .86rem; }
.admin-shell { padding-top: 2rem; }.login-card { width: min(430px,100%); margin: 7vh auto; border-radius: 20px; padding: 2rem; }.login-card p:not(.eyebrow) { color: var(--muted); line-height: 1.5; }.login-card form,.effect-form { display: grid; gap: 1rem; margin-top: 1.5rem; }label { font-size: .82rem; color: #c9daea; font-weight: 700; } input,textarea,select { width: 100%; display: block; margin-top: .42rem; background: #0c1b2f; border: 1px solid #2b4a69; color: var(--text); border-radius: 9px; padding: .72rem; font: inherit; outline: none; } input:focus,textarea:focus,select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(76,201,240,.13); }textarea { min-height: 86px; resize: vertical; }.form-error,.form-status { color: #ff9fa9; font-size: .82rem; margin: 0; }.form-status { color: #78e5bc; }.form-status.error { color: #ff9fa9; }.admin-heading { display: flex; justify-content: space-between; gap: 1.5rem; align-items: start; margin-bottom: 1.5rem; }.admin-heading h1 { font-size: 2.6rem; margin-bottom: .45rem; }.admin-heading p { color: var(--muted); }.admin-grid { display: grid; grid-template-columns: minmax(320px,.85fr) minmax(400px,1.15fr); gap: 1rem; }.admin-column { display: grid; gap: 1rem; align-content: start; }.panel { border-radius: 16px; padding: 1.2rem; }.panel-title h2 { font-size: 1.15rem; }.panel-title p { color: var(--muted); font-size: .8rem; line-height: 1.45; margin-bottom: 1.1rem; }.compact-form { display: grid; grid-template-columns: 1fr 70px 48px auto; gap: .5rem; }.compact-form input { margin: 0; }.compact-form .primary-button { padding: .7rem; white-space: nowrap; }.admin-category-list,.admin-effect-list { display: grid; gap: .5rem; margin-top: 1rem; }.mini-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; padding: .65rem; border-radius: 10px; background: #102239; border: 1px solid #203d5c; }.mini-row strong,.mini-row small { display: block; }.mini-row small { color: var(--muted); font-size: .7rem; margin-top: .16rem; }.mini-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }.mini-state { color: #75d9ac; font-size: .68rem; }.mini-row button { background: #294968; color: #d9ebfa; padding: .43rem .55rem; font-size: .72rem; }.type-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); }.two-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }.file-label small { display: block; color: var(--muted); font-weight: 400; font-size: .7rem; line-height: 1.4; margin-top: .4rem; }.options,.publish-option { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--muted); font-weight: 500; }.options input,.publish-option input { display: inline; width: auto; margin: 0 .35rem 0 0; }
@media (max-width: 880px) { .categories { grid-template-columns: repeat(3,1fr); }.effects { grid-template-columns: repeat(2,1fr); }.admin-grid { grid-template-columns: 1fr; }.intro { grid-template-columns: 1fr; gap: 1.2rem; }.compact-form { grid-template-columns: 1fr 62px 44px; }.compact-form .primary-button { grid-column: 1/-1; } }
@media (max-width: 580px) { .topbar,main { width: min(100% - 28px, 1180px); }.topbar { min-height: 64px; }.topbar nav a:not(:last-child) { display: none; } main { padding-top: 2.5rem; }.categories,.effects,.how ol,.two-fields { grid-template-columns: 1fr; }.section-heading,.library-heading,.admin-heading { align-items: start; flex-direction: column; gap: .7rem; }.toolbar { margin-bottom: 2.4rem; }.category-card { min-height: auto; }.how { padding: 1.25rem; }.admin-heading h1 { font-size: 2.1rem; }.admin-shell { padding-top: 1.4rem; } }

/* Catalog inside OBS Action: deliberately compact, without marketing blocks. */
.library-shell { width: 100%; max-width: none; min-height: 100vh; padding: 14px 16px 28px; }
.library-tabs-row { padding: 2px 1px 12px; }
.category-tabs { display: flex; flex-wrap: nowrap; gap: .42rem; min-width: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.library-tabs-row .category-tabs { width: 100%; }
.category-tab { gap: .34rem; min-height: 34px; padding: 0 .62rem; border-radius: 9px; font-size: .72rem; white-space: nowrap; }
.category-tab svg { width: 15px; height: 15px; }
.special-link { flex: 0 0 auto; border-color: #8f6b2b; background: #2d2415; color: #f5d890; text-decoration: none; }
.special-tab-icon { color: #f0bd4c; font-size: .9rem; line-height: 1; }
.special-link:hover { border-color: #f0bd4c; background: #3a2d17; color: #fff1c7; }
.category-tab { --category-color: var(--cyan); flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; min-height: 38px; border: 1px solid #294a6a; border-radius: 10px; padding: 0 .85rem; background: #10213a; color: #bdd0e2; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; transition: background .16s ease, color .16s ease, border-color .16s ease; }
.category-tab svg { width: 17px; height: 17px; flex: none; color: var(--category-color); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }.category-tab:hover,.category-tab.selected { color: #fff; border-color: var(--category-color); background: color-mix(in srgb, var(--category-color) 18%, #10213a); }
.library-search { margin-bottom: 1rem; border: 1px solid #254460; border-radius: 11px; background: #0d1d32; }.library-search .search { min-height: 42px; padding: 0 .9rem; }.library-search .search input { padding: .55rem 0; }
.library-results { min-width: 0; }.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 .85rem; }.results-bar h1 { margin: 0; font-size: 1.05rem; letter-spacing: -.015em; }.library-results .effects { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .8rem; }
.library-results .effect-card { border-radius: 12px; }.library-results .effect-card:hover { transform: translateY(-2px); border-color: var(--accent); }.library-results .effect-visual { height: 106px; }.library-results .effect-symbol { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 16px; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, #0b1a2e); border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 24%, transparent); }.library-results .effect-symbol svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.library-results .effect-info { padding: .8rem; }.library-results .effect-title-row h2 { margin: 0; font-size: .95rem; line-height: 1.3; }.library-results .description { min-height: 0; margin: .5rem 0; font-size: .78rem; line-height: 1.42; }.library-results .tags { display: none; }.library-results .install-button { margin-top: .7rem; padding: .62rem .75rem; font-size: .8rem; border-radius: 8px; }

/* Admin is organised around the common task: add many videos to one type. */
.studio-shell { width: min(1040px, calc(100% - 40px)); padding-top: 2.2rem; }.studio-heading { display: flex; justify-content: space-between; align-items: start; gap: 1.5rem; margin-bottom: 1.3rem; }.studio-heading h1 { font-size: clamp(2rem, 4vw, 3.1rem); margin: 0 0 .45rem; }.studio-heading p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.5; }
.quick-import { padding: 1.35rem; border-color: #2f648c; background: linear-gradient(120deg, rgba(19,52,82,.96), rgba(14,31,52,.96)); }.quick-import .panel-title h2 { font-size: 1.38rem; margin-bottom: .3rem; }.quick-import .panel-title p:not(.eyebrow) { color: var(--muted); font-size: .86rem; margin-bottom: 1rem; }.bulk-form { display: grid; grid-template-columns: minmax(220px,.72fr) minmax(0,1.4fr); gap: 1rem; align-items: end; }.bulk-form .file-label { grid-column: 1 / -1; }.bulk-form .publish-option { align-self: center; }.bulk-form .form-status,.bulk-form .folder-note { grid-column: 1 / -1; }
.bulk-actions { display: flex; justify-content: flex-end; gap: .65rem; flex-wrap: wrap; }.secondary-button { border: 1px solid #3c6689; border-radius: 10px; padding: .72rem .9rem; background: #172e48; color: #dfedf8; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; }.secondary-button:hover { border-color: var(--cyan); background: #1d3d5c; }.secondary-button:disabled { opacity: .55; cursor: wait; }.folder-note { margin: -.15rem 0 0; color: #92adc6; font-size: .75rem; line-height: 1.4; }.library-status { margin-top: 1rem; }.empty-list { margin: 0; color: var(--muted); font-size: .86rem; }
.admin-details { margin-top: 1rem; overflow: hidden; border: 1px solid #284867; border-radius: 14px; background: rgba(16,33,55,.75); }.admin-details summary { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.1rem; cursor: pointer; list-style: none; }.admin-details summary::-webkit-details-marker { display: none; }.admin-details summary strong,.admin-details summary small { display: block; }.admin-details summary small { margin-top: .2rem; color: var(--muted); font-size: .75rem; font-weight: 400; }.details-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; color: var(--cyan); background: #173653; }.details-arrow { margin-left: auto; color: var(--muted); transition: transform .18s ease; }.admin-details[open] .details-arrow { transform: rotate(180deg); }.detail-panel { border: 0; border-top: 1px solid #284867; border-radius: 0; box-shadow: none; background: rgba(9,21,37,.38); }
@media (max-width: 680px) { .studio-shell { width: min(100% - 28px, 1040px); }.studio-heading { align-items: stretch; flex-direction: column; }.bulk-form { grid-template-columns: 1fr; }.bulk-actions { justify-content: stretch; }.bulk-actions button { flex: 1; }.studio-heading .ghost-button { align-self: start; } }

/* Portrait effect cards: the creator background stays below the hover preview. */
.library-results .effects { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-items: start; }.library-results .effect-card { overflow: hidden; background: #0d1c30; }.effect-stage { position: relative; aspect-ratio: 9 / 16; overflow: hidden; isolation: isolate; background: #15223a; }.effect-background,.preview-video,.chroma-preview,.preview-shade { position: absolute; inset: 0; width: 100%; height: 100%; }.effect-background { z-index: 0; object-fit: cover; object-position: center; transform: scale(1.01); }.preview-video { z-index: 1; object-fit: cover; opacity: 0; transition: opacity .18s ease; }.chroma-preview { z-index: 2; object-fit: cover; opacity: 0; transition: opacity .18s ease; }.preview-shade { z-index: 3; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: .7rem; pointer-events: none; background: linear-gradient(180deg, rgba(3,11,24,.18), transparent 48%, rgba(3,11,24,.7)); transition: opacity .2s ease; }.effect-stage.is-previewing .preview-video { opacity: 1; }.effect-stage.is-chroma-preview .preview-video { opacity: 0; }.effect-stage.is-chroma-preview .chroma-preview { opacity: 1; }.effect-stage.is-previewing .preview-shade { opacity: .25; }.preview-hint { align-self: stretch; padding: .35rem .45rem; border-radius: 7px; color: #eaf7ff; background: rgba(5,15,29,.62); border: 1px solid rgba(255,255,255,.18); text-align: center; font-size: .65rem; font-weight: 700; backdrop-filter: blur(5px); }.effect-stage .effect-symbol { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, #071323); border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent); box-shadow: 0 6px 22px rgba(0,0,0,.3); }.effect-stage .effect-symbol svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }.effect-stage .type-pill { z-index: 4; top: .6rem; left: .6rem; }.library-results .install-button:disabled { cursor: not-allowed; opacity: .48; filter: saturate(.35); }.library-results .install-button:disabled:hover { transform: none; }

/* Toast của trang thư viện luôn ở trên nội dung WebView, không dính thanh đáy. */
.toast { top: 18px; right: 18px; bottom: auto; z-index: 1000; }
.library-results .install-button.is-locked { cursor: help; color: #c1d0df; background: #203247; border: 1px solid #3a536d; box-shadow: none; }

/* Trang Đặc Biệt chỉ để xem video mẫu; không chạy luồng cài OBS tự động. */
.special-shell { max-width: 1180px; margin: 0 auto; padding-top: 28px; }
.special-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 0 0 1.15rem; padding: 1.1rem 1.2rem; border: 1px solid #5d4824; border-radius: 15px; background: linear-gradient(115deg, #241c10, #101f34 72%); }
.special-header .eyebrow { color: #f0bd4c; margin-bottom: .35rem; }.special-header h1 { margin: 0 0 .35rem; font-size: 1.45rem; letter-spacing: -.025em; }.special-header p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: .84rem; }
.back-to-library { flex: none; color: #cfe9ff; text-decoration: none; font-size: .8rem; font-weight: 700; }.back-to-library:hover { color: var(--cyan); }
.contact-button { background: linear-gradient(135deg, #a67521, #d69c38); }.contact-button:hover { filter: brightness(1.08); }
@media (max-width: 620px) { .library-tabs-row { display: block; }.special-link { margin: 0 0 12px; }.special-header { align-items: start; flex-direction: column; } }