:root { --ink:#f4f4f1; --muted:#969690; --paper:#090909; --line:#292929; --accent:#e7613c; --teal:#2b8d88; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans', sans-serif; }
button, input { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
.topbar { height:76px; display:flex; align-items:center; gap:24px; padding:0 34px; border-bottom:1px solid var(--line); background:rgba(9,9,9,.94); position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:9px; color:var(--ink); font:700 21px 'Space Grotesk',sans-serif; text-decoration:none; letter-spacing:-.6px; }
.brand-mark { display:grid; place-items:center; width:27px; height:27px; color:white; background:var(--accent); border-radius:50%; font-size:12px; padding-left:2px; }
.icon-button { border:0; background:none; color:var(--ink); font-size:24px; cursor:pointer; width:34px; height:34px; display:grid; place-items:center; }
.menu-button { display:none; }
.search { margin-left:auto; display:flex; width:min(430px, 38vw); height:40px; border:1px solid #333; background:#151515; border-radius:5px; overflow:hidden; }
.search input { flex:1; border:0; outline:0; padding:0 14px; color:var(--ink); background:transparent; }
.search button { width:48px; border:0; border-left:1px solid var(--line); background:#222; color:var(--ink); cursor:pointer; font-size:24px; line-height:1; }
.top-actions { display:flex; align-items:center; gap:12px; }.avatar { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:#233e57; color:white; font-size:11px; font-weight:700; }
.app-shell { display:flex; max-width:1600px; margin:0 auto; }.sidebar { width:224px; flex-shrink:0; padding:27px 20px; min-height:calc(100vh - 76px); border-right:1px solid var(--line); }.sidebar nav { display:grid; gap:5px; }.nav-item,.channel { color:var(--muted); text-decoration:none; padding:11px 13px; border-radius:5px; font-size:14px; display:flex; gap:13px; align-items:center; }.nav-item span { width:18px; text-align:center; font-size:18px; }.nav-item.active { background:#eceae4; color:var(--ink); font-weight:700; }.nav-item:hover,.channel:hover { color:var(--ink); background:#efeee9; }.sidebar-rule { height:1px; background:var(--line); margin:23px 8px; }.side-label,.eyebrow { font-size:10px; letter-spacing:1.3px; color:var(--muted); font-weight:700; margin:0 13px 12px; }.channel { font-size:13px; padding:8px 13px; }.channel-dot { width:25px; height:25px; border-radius:50%; display:grid; place-items:center; color:white; font-size:11px; font-weight:700; }.amber { background:#d69731; }.coral { background:#d65e53; }.teal { background:var(--teal); }.side-footer { color:#aaa79e; font-size:10px; line-height:1.8; margin:80px 13px 0; }.side-footer span { color:#c2bfb7; }
.content { flex:1; min-width:0; padding:0 42px 70px; }.category-row { display:flex; gap:9px; overflow:auto; padding:22px 0; scrollbar-width:none; }.category { border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:30px; padding:8px 16px; white-space:nowrap; cursor:pointer; font-size:12px; }.category.active,.category:hover { background:var(--ink); border-color:var(--ink); color:#090909; }
.hero { min-height:348px; display:grid; grid-template-columns:43% 57%; background:#f0dfbe; overflow:hidden; border-radius:5px; }.hero-copy { padding:51px 25px 42px 49px; z-index:1; }.hero-copy .eyebrow { margin:0 0 20px; color:#a36f36; }.hero h1 { font:600 clamp(34px,4vw,60px)/.98 'Space Grotesk',sans-serif; letter-spacing:-2.7px; margin:0; }.hero h1 em { color:var(--accent); font-style:normal; }.hero-text { max-width:280px; color:#806e58; font-size:13px; line-height:1.55; margin:23px 0 28px; }.primary-button { border:0; background:var(--accent); color:white; border-radius:3px; padding:12px 17px; cursor:pointer; font-size:12px; font-weight:700; }.primary-button span { margin-left:22px; font-size:17px; vertical-align:-1px; }.hero-art { position:relative; overflow:hidden; background:linear-gradient(155deg,#e7a36f,#c36e52); }.sun { position:absolute; width:155px; height:155px; background:#f6d66d; border-radius:50%; top:30px; right:24%; }.mountain { position:absolute; bottom:-1px; width:110%; height:55%; clip-path:polygon(0 100%,35% 25%,48% 52%,67% 0,100% 100%); }.mountain.back { background:#ae6855; right:-8%; opacity:.75; }.mountain.front { background:#7b625b; left:-8%; height:44%; }.hero-caption { position:absolute; right:31px; bottom:25px; color:#fff6e5; font:600 13px 'Space Grotesk',sans-serif; letter-spacing:1px; text-align:right; }.hero-caption small { font:10px 'DM Sans'; letter-spacing:0; opacity:.8; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin:43px 0 20px; }.section-heading .eyebrow { margin:0 0 7px; }.section-heading h2 { margin:0; font:600 28px 'Space Grotesk',sans-serif; letter-spacing:-1px; }.text-button { border:0; background:none; color:var(--muted); font-size:12px; cursor:pointer; }.text-button:hover { color:var(--accent); }.video-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:27px 18px; }.video-card { min-width:0; cursor:pointer; }.thumbnail { aspect-ratio:16/10; border-radius:4px; overflow:hidden; position:relative; display:flex; align-items:end; padding:12px; background-size:cover; background-position:center; }.thumbnail::after { content:''; position:absolute; inset:0; background:linear-gradient(transparent 35%,rgba(0,0,0,.42)); }.play { position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%) scale(.85); opacity:0; width:42px; height:42px; border-radius:50%; background:white; color:var(--accent); display:grid; place-items:center; font-size:16px; transition:.2s ease; }.video-card:hover .play { opacity:1; transform:translate(-50%,-50%) scale(1); }.duration { position:relative; z-index:1; margin-left:auto; background:rgba(0,0,0,.7); color:#fff; padding:3px 5px; border-radius:2px; font-size:10px; }.video-title { font:600 14px/1.25 'Space Grotesk',sans-serif; margin:12px 0 7px; }.video-meta { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }.video-meta strong { color:#4e4c47; font-weight:500; }
.modal-backdrop { position:fixed; inset:0; background:rgba(32,32,29,.7); z-index:10; display:grid; place-items:center; padding:20px; }.modal-backdrop[hidden] { display:none; }.modal { background:var(--paper); width:min(620px,100%); padding:18px 25px 28px; position:relative; border-radius:5px; box-shadow:0 20px 80px #0005; }.modal-close { position:absolute; right:14px; top:9px; background:none; border:0; font-size:28px; cursor:pointer; z-index:1; }.modal-screen { height:300px; background:linear-gradient(145deg,#273b45,#c26c50); display:grid; place-items:center; color:white; font-size:50px; margin-bottom:25px; }.modal .eyebrow { margin:0 0 9px; }.modal h2 { font:600 25px 'Space Grotesk'; margin:0 0 8px; }.modal p:last-child { color:var(--muted); font-size:13px; }
.modal-screen video { width:100%; height:100%; object-fit:contain; }.upload-modal { max-height:calc(100vh - 40px); overflow:auto; }.upload-modal h2 { margin:0 0 8px; font:600 27px 'Space Grotesk'; }.form-intro { color:var(--muted); font-size:13px; margin:0 0 24px; }.upload-modal form { display:grid; gap:15px; }.upload-modal label { display:grid; gap:7px; color:var(--muted); font-size:11px; letter-spacing:.4px; }.upload-modal [hidden] { display:none; }.upload-modal input,.upload-modal textarea,.upload-modal select { width:100%; border:1px solid #333; border-radius:4px; background:#151515; color:var(--ink); padding:11px 12px; outline:none; }.upload-modal input:focus,.upload-modal textarea:focus,.upload-modal select:focus { border-color:var(--accent); }.upload-modal textarea { resize:vertical; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.file-picker { border:1px dashed #444; padding:13px; border-radius:4px; }.file-picker input { padding:0; border:0; background:none; }.file-picker span { font-size:12px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.form-error { min-height:18px; color:#ff9479; font-size:12px; margin:0; }.form-submit { width:max-content; }
.video-actions { display:flex; align-items:center; gap:8px; margin-top:12px; }.reaction-button,.delete-button { border:1px solid var(--line); background:#141414; color:var(--muted); border-radius:4px; padding:5px 8px; cursor:pointer; font-size:11px; }.reaction-button:hover,.reaction-button.selected { color:var(--ink); border-color:var(--accent); }.reaction-button.selected { background:#2a1712; }.delete-button { margin-left:auto; color:#d67d6a; }.delete-button:hover { border-color:#d67d6a; background:#2a1712; }.delete-actions { display:flex; align-items:center; justify-content:flex-end; gap:14px; }.danger-button { border:0; background:#a9422d; color:#fff; border-radius:4px; padding:11px 15px; cursor:pointer; font-size:12px; }
#modal { align-items:flex-start; padding:0; background:#090909; overflow:auto; }
#modal .modal { width:100%; max-width:none; min-height:100vh; border-radius:0; padding:32px clamp(18px, 6vw, 100px) 64px; background:#090909; box-shadow:none; }
#modal .modal-screen { width:min(1100px, 100%); aspect-ratio:16 / 9; height:auto; margin:0 auto 30px; background:#151515; }
#modal .modal h2, #modal .modal p { width:min(1100px, 100%); margin-left:auto; margin-right:auto; }
#modal .modal h2 { font-size:clamp(24px, 3vw, 38px); margin-bottom:10px; }
#modal .modal p:last-child { font-size:14px; line-height:1.6; }
#modal .modal-close { position:fixed; top:18px; right:24px; color:#fff; background:#222; border-radius:50%; width:38px; height:38px; }
#modal .modal-screen.portrait { width:min(440px, 100%); }
#modal .modal-screen.square { width:min(780px, 100%); }
@media (max-width:1050px) { .video-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.hero { grid-template-columns:48% 52%; } }
@media (max-width:760px) { .topbar { height:64px; padding:0 16px; gap:10px; }.menu-button { display:grid; }.brand { font-size:18px; }.top-actions .icon-button:first-child { display:none; }.search { order:3; width:100%; margin:0; position:absolute; top:64px; left:0; border-radius:0; border-left:0; border-right:0; display:none; }.search.open { display:flex; }.top-actions { margin-left:auto; }.app-shell { display:block; }.sidebar { position:fixed; top:64px; left:-240px; z-index:4; background:var(--paper); transition:.2s; height:calc(100vh - 64px); box-shadow:10px 0 30px #0001; }.sidebar.open { left:0; }.content { padding:0 16px 50px; }.hero { min-height:440px; display:block; position:relative; }.hero-copy { padding:35px 25px; position:relative; }.hero-art { position:absolute; inset:150px 0 0; }.hero-caption { bottom:16px; right:18px; }.section-heading { margin-top:32px; }.video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 12px; }.video-title { font-size:13px; }.modal-screen { height:210px; } }
@media (max-width:430px) { .video-grid { grid-template-columns:1fr; }.thumbnail { aspect-ratio:16/9; }.section-heading { align-items:start; gap:10px; flex-direction:column; } }
.nav-item.active { background:#202020; }
.nav-item:hover { background:#171717; }
.topbar { box-shadow:0 8px 32px rgba(0,0,0,.22); backdrop-filter:blur(18px); }
.brand-mark { box-shadow:0 0 24px rgba(231,97,60,.28); }
#createButton { width:40px; height:40px; border:1px solid #3b3b3b; border-radius:50%; background:#161616; color:#fff; transition:.2s ease; }
#createButton:hover { border-color:var(--accent); background:#241512; transform:rotate(90deg); }
.avatar { border:0; cursor:pointer; transition:.2s ease; }
.avatar:hover { transform:scale(1.08); box-shadow:0 0 0 4px rgba(231,97,60,.14); }
.content { background:radial-gradient(circle at 85% 0%, rgba(231,97,60,.07), transparent 28%), radial-gradient(circle at 20% 55%, rgba(43,141,136,.05), transparent 26%); min-height:calc(100vh - 76px); }
.category-row { border-bottom:1px solid rgba(255,255,255,.06); }
.category { background:rgba(255,255,255,.025); }
.visitor-stat { display:flex; align-items:center; gap:14px; width:max-content; margin:18px 0 0; padding:13px 16px; border:1px solid #2d2d2d; border-radius:9px; background:linear-gradient(135deg,rgba(231,97,60,.11),rgba(255,255,255,.025)); }
.visitor-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:#2a1712; color:#f28b6c; }
.visitor-stat .eyebrow { margin:0 0 3px; color:#e58b72; }.visitor-stat strong { font:600 24px 'Space Grotesk'; }.visitor-stat span { color:var(--muted); font-size:12px; margin-left:5px; }
.section-heading { padding-top:3px; }
.section-heading h2 { letter-spacing:-1.4px; }
.video-grid { align-items:start; }
.video-card { padding:10px 10px 13px; border:1px solid transparent; border-radius:10px; background:rgba(255,255,255,.025); transition:transform .2s ease, border-color .2s ease, background .2s ease; }
.video-card:hover { transform:translateY(-4px); border-color:#373737; background:rgba(255,255,255,.05); }
.thumbnail { border-radius:7px; background-color:#161616; }
.thumbnail-video { width:100%; height:100%; object-fit:cover; }
.video-title { margin:14px 2px 7px; }
.video-meta { margin:0 2px; }
.video-actions { margin:13px 2px 0; }
.empty-state { grid-column:1 / -1; min-height:380px; display:grid; place-items:center; align-content:center; gap:9px; padding:42px 24px; border:1px dashed #393939; border-radius:14px; background:linear-gradient(135deg, rgba(231,97,60,.09), rgba(255,255,255,.025) 52%, rgba(43,141,136,.06)); text-align:center; }
.empty-icon { width:54px; height:54px; display:grid; place-items:center; margin-bottom:8px; border:1px solid #5b342b; border-radius:16px; background:#241512; color:#f28b6c; font-size:25px; box-shadow:0 12px 36px rgba(231,97,60,.12); }
.empty-state .eyebrow { margin:0; color:#e58b72; }
.empty-state h3 { margin:0; font:600 clamp(26px,4vw,38px) 'Space Grotesk',sans-serif; letter-spacing:-1.5px; }
.empty-state p:not(.eyebrow) { max-width:330px; margin:0 0 12px; color:var(--muted); font-size:13px; line-height:1.6; }
.empty-state .primary-button { margin-top:4px; }
.upload-modal, .delete-modal { border:1px solid #303030; }
.account-modal { width:min(430px,100%); border:1px solid #303030; }
.auth-switch { display:grid; grid-template-columns:1fr 1fr; padding:4px; margin:4px 0 20px; border:1px solid #2e2e2e; border-radius:6px; background:#121212; }.auth-tab { border:0; border-radius:4px; padding:9px; background:transparent; color:var(--muted); cursor:pointer; font-size:12px; }.auth-tab.active { background:#292929; color:var(--ink); }.account-badge { width:60px; height:60px; display:grid; place-items:center; margin:4px auto 18px; border-radius:50%; background:var(--accent); color:white; font:700 20px 'Space Grotesk'; }.member-copy { color:var(--muted); text-align:center; margin:0 0 20px; font-size:13px; }.member-copy strong { color:var(--ink); }.account-member .danger-button { display:block; margin:0 auto; }
.account-modal { width:min(460px,100%); padding:36px; overflow:hidden; background:linear-gradient(150deg,#151515 0%,#0d0d0d 58%,#1d1210 100%); box-shadow:0 28px 90px rgba(0,0,0,.55); }
.account-modal::before { content:'POFU'; display:block; width:max-content; margin-bottom:30px; color:#f28b6c; font:700 12px 'Space Grotesk'; letter-spacing:3px; }
.account-modal .eyebrow { margin:0 0 10px; color:#e58b72; }
.account-modal h2 { margin:0 0 9px; font:600 clamp(27px,5vw,34px) 'Space Grotesk'; letter-spacing:-1.5px; }
.account-modal .form-intro { max-width:310px; margin-bottom:25px; line-height:1.55; }
.account-modal form { display:grid; gap:16px; }
.account-modal label { display:grid; gap:8px; color:#b5b5ae; font-size:11px; letter-spacing:.5px; }
.account-modal input { width:100%; border:1px solid #353535; border-radius:6px; background:#0a0a0a; color:var(--ink); padding:13px 14px; outline:none; transition:border-color .2s, box-shadow .2s; }
.account-modal input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(231,97,60,.12); }
.account-modal .form-submit { width:100%; display:flex; align-items:center; justify-content:space-between; margin-top:3px; padding:13px 16px; }
.account-modal .auth-switch { margin-top:4px; }
.account-modal .modal-close { color:#bcbcb6; }
.account-modal .modal-close:hover { color:#fff; }
.account-modal .account-badge { background:linear-gradient(145deg,#e7613c,#9d3826); box-shadow:0 12px 32px rgba(231,97,60,.25); }
.admin-tag { display:inline-block; padding:3px 6px; border:1px solid #a84d36; border-radius:999px; background:#2a1712; color:#f28b6c; font:700 9px 'DM Sans'; letter-spacing:1px; vertical-align:2px; }
#manageAdminsButton { display:block; margin:0 auto 14px; }
.admin-modal { max-height:calc(100vh - 40px); overflow:auto; }
.admin-account-list { display:grid; gap:10px; margin-bottom:6px; }
.admin-account-row { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #2e2e2e; border-radius:4px; padding:10px 12px; font-size:13px; }
.admin-account-row span:first-child { color:var(--ink); }
.video-card[data-access="Paid"] .thumbnail { background:linear-gradient(135deg,#171717,#2a1712); }
.video-card[data-access="Paid"] .play { width:auto; min-width:68px; padding:0 10px; border-radius:5px; font-size:10px; letter-spacing:1px; }
#modal .modal-screen:has(#playGlyph:not([hidden])) { color:#f28b6c; }
.side-footer { margin-top:30px; }
.video-grid { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.video-grid { grid-template-columns:repeat(auto-fill,minmax(220px,260px)); justify-content:start; }
@media (max-width:760px) { .video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:430px) { .video-grid { grid-template-columns:1fr; } }