:root {
    --bg: #f6f8f3;
    --surface: #ffffff;
    --surface-2: #fbfcf9;
    --surface-3: #f0f4ea;
    --border: #e4e9df;
    --border-strong: #d8e0ce;
    --text: #172017;
    --muted: #687266;
    --muted-2: #8a9484;
    --accent: #78b51e;
    --accent-2: #f3c400;
    --accent-dark: #507d0f;
    --accent-soft: rgba(120,181,30,.11);
    --gold-soft: rgba(243,196,0,.13);
    --shadow-sm: 0 5px 18px rgba(28,42,22,.06);
    --shadow-md: 0 16px 42px rgba(28,42,22,.10);
    --shadow-lg: 0 28px 80px rgba(28,42,22,.16);
    --radius: 18px;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:radial-gradient(circle at 100% 0%, rgba(243,196,0,.09), transparent 24%), radial-gradient(circle at 0% 18%, rgba(120,181,30,.08), transparent 28%), var(--bg); color:var(--text); font-family:'DM Sans',ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
button, input { font:inherit; }
button { color:inherit; }
body { overflow-x:hidden; }

.app-shell { min-height:100vh; display:flex; }
.sidebar { width:276px; flex:0 0 276px; border-right:1px solid var(--border); background:rgba(255,255,255,.90); backdrop-filter:blur(20px); padding:20px 14px 14px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; z-index:20; box-shadow:3px 0 28px rgba(28,42,22,.04); }
.brand { display:flex; gap:10px; align-items:center; padding:6px 7px 21px; }
.brand-logo-wrap { width:114px; height:47px; flex:0 0 114px; display:flex; align-items:center; justify-content:center; border-radius:13px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-sm); overflow:hidden; }
.brand-logo { width:103px; height:auto; display:block; object-fit:contain; }
.brand-copy { min-width:0; }
.brand-title { font-family:'Space Grotesk',sans-serif; font-size:14px; font-weight:700; letter-spacing:.01em; color:var(--text); white-space:nowrap; }
.brand-subtitle { font-size:9px; color:var(--muted-2); margin-top:3px; line-height:1.35; }
.side-section-label, .section-kicker, .player-small-label, .eyebrow { font-size:9px; line-height:1; letter-spacing:.16em; font-weight:800; }
.side-section-label { color:#87927f; padding:8px 11px 9px; }
.folder-nav { display:flex; flex-direction:column; gap:3px; overflow:auto; padding-right:2px; }
.folder-nav::-webkit-scrollbar { width:5px; }
.folder-nav::-webkit-scrollbar-thumb { background:#dde5d5; border-radius:20px; }
.folder-item { width:100%; border:0; background:transparent; border-radius:12px; display:flex; align-items:center; gap:9px; min-height:41px; padding:7px 9px; padding-left:calc(9px + (var(--depth,0) * 15px)); cursor:pointer; text-align:left; transition:.18s ease; }
.folder-item:hover { background:#f3f7ee; }
.folder-item.active { background:linear-gradient(90deg, rgba(120,181,30,.12), rgba(243,196,0,.08)); box-shadow:inset 3px 0 0 var(--accent); }
.folder-icon { width:23px; height:23px; display:grid; place-items:center; color:#8b9487; flex:0 0 23px; }
.folder-item.active .folder-icon { color:var(--accent-dark); }
.folder-icon svg { width:15px; height:15px; }
.folder-name { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; color:#364136; }
.folder-item.active .folder-name { color:#263620; font-weight:600; }
.folder-count { font-size:9px; color:#98a291; min-width:22px; text-align:right; }
.sidebar-footer { margin-top:auto; padding:13px 11px 2px; border-top:1px solid var(--border); }
.mini-status { font-size:10px; display:flex; align-items:center; gap:7px; color:#596456; }
.status-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(120,181,30,.12); }
.sidebar-note { font-size:9px; color:#98a291; line-height:1.55; margin-top:6px; }
.mobile-close { display:none; }

.main { min-width:0; flex:1; padding:0 34px 44px; }
.topbar { height:70px; display:flex; align-items:center; border-bottom:1px solid rgba(228,233,223,.76); gap:12px; }
.menu-button { display:none; }
.crumbs { display:flex; align-items:center; gap:8px; font-size:11px; color:#687266; }
.crumb-muted { color:#9aa396; }
.crumb-sep { color:#bdc5b7; }
.crumbs strong { color:#3a4437; font-weight:650; }
.top-actions { margin-left:auto; display:flex; gap:7px; }
.icon-button { width:39px; height:39px; border-radius:11px; border:1px solid var(--border); background:#fff; color:#657061; display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-sm); transition:.18s ease; }
.icon-button:hover { border-color:#c9d8bb; color:var(--accent-dark); transform:translateY(-1px); }
.icon-button svg { width:16px; height:16px; }
.icon-button.dark { background:#fff; color:#4b5548; }

.hero { padding:46px 0 25px; display:flex; align-items:flex-end; justify-content:space-between; gap:30px; }
.eyebrow { color:#7f8a78; margin-bottom:11px; }
.hero h1 { font-family:'Space Grotesk',sans-serif; margin:0; max-width:780px; font-size:clamp(37px,4.5vw,61px); line-height:.98; letter-spacing:-.055em; color:#182018; }
.hero h1 span { color:var(--accent); }
.hero p { margin:15px 0 0; max-width:640px; color:#73806f; font-size:13px; line-height:1.7; }
.stats-card { min-width:300px; padding:14px 17px; background:rgba(255,255,255,.82); border:1px solid var(--border); border-radius:16px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow-sm); }
.stat { text-align:center; min-width:70px; }
.stat strong { display:block; font-family:'Space Grotesk',sans-serif; font-size:22px; letter-spacing:-.03em; color:#232d21; }
.stat span { color:#8a9484; font-size:9px; text-transform:uppercase; letter-spacing:.08em; }
.stat-divider { height:33px; width:1px; background:var(--border); }

.toolbar { display:flex; align-items:center; gap:10px; padding:10px 0 28px; }
.search-wrap { flex:1; position:relative; }
.search-wrap > svg { position:absolute; left:15px; top:50%; width:17px; transform:translateY(-50%); color:#9aa396; }
.search-wrap input { width:100%; height:49px; border-radius:14px; border:1px solid var(--border); outline:0; background:rgba(255,255,255,.90); color:var(--text); padding:0 72px 0 45px; box-shadow:var(--shadow-sm); transition:.18s ease; }
.search-wrap input::placeholder { color:#a2aa9f; }
.search-wrap input:focus { border-color:rgba(120,181,30,.42); box-shadow:0 0 0 4px rgba(120,181,30,.08),var(--shadow-sm); }
kbd { position:absolute; right:12px; top:50%; transform:translateY(-50%); border:1px solid var(--border); background:#f7f9f5; color:#899386; border-radius:7px; font-size:8px; padding:4px 6px; }
.view-toggle { border:1px solid var(--border); border-radius:13px; padding:4px; display:flex; gap:3px; background:#fff; box-shadow:var(--shadow-sm); }
.view-button { width:39px; height:39px; border:0; background:transparent; border-radius:9px; display:grid; place-items:center; cursor:pointer; color:#9aa396; }
.view-button.active { background:#edf5e6; color:var(--accent-dark); }
.view-button svg { width:16px; height:16px; }

.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:15px; }
.section-kicker { color:#869180; margin-bottom:7px; }
.section-heading h2 { font-family:'Space Grotesk',sans-serif; margin:0; font-size:23px; letter-spacing:-.03em; color:#222b21; }
.result-meta { color:#95a08f; font-size:10px; }
.video-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }

.video-card { position:relative; overflow:hidden; border:1px solid var(--border); border-radius:16px; background:#fff; cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; box-shadow:var(--shadow-sm); }
.video-card:hover { transform:translateY(-3px); border-color:#cdddca; box-shadow:var(--shadow-md); }
.video-card:focus-visible { outline:3px solid rgba(120,181,30,.22); outline-offset:2px; }
.video-card.is-unplayable { opacity:.88; }
.card-art { height:162px; position:relative; overflow:hidden; background:linear-gradient(145deg,#eef4e9,#f9faf6); }
.card-art.thumb-ready { background:#edf1e9; }
.card-thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; opacity:0; transform:scale(1.02); transition:opacity .24s ease,transform .4s ease; }
.card-thumb.loaded { opacity:1; transform:scale(1); }
.card-art::before { content:""; position:absolute; width:190px; height:190px; border:1px solid rgba(120,181,30,.10); border-radius:50%; left:-60px; bottom:-90px; }
.card-art::after { content:""; position:absolute; width:250px; height:250px; border:1px solid rgba(243,196,0,.10); border-radius:50%; right:-120px; top:-175px; }
.card-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,18,8,.04),rgba(10,18,8,.20)); z-index:1; pointer-events:none; }
.card-play { position:absolute; inset:0; display:grid; place-items:center; z-index:2; pointer-events:none; }
.play-orb { width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:rgba(24,32,23,.56); border:1px solid rgba(255,255,255,.60); box-shadow:0 12px 26px rgba(20,29,17,.18); backdrop-filter:blur(8px); }
.play-orb svg { width:19px; height:19px; fill:#fff; margin-left:2px; }
.card-top { position:absolute; top:11px; left:11px; right:11px; display:flex; justify-content:space-between; align-items:center; z-index:3; }
.badge { display:inline-flex; align-items:center; gap:5px; padding:6px 8px; border-radius:8px; background:rgba(255,255,255,.88); border:1px solid rgba(255,255,255,.68); color:#445040; box-shadow:0 6px 16px rgba(24,34,21,.08); font-size:8px; text-transform:uppercase; letter-spacing:.10em; font-weight:800; backdrop-filter:blur(8px); }
.badge.bad { color:#8a5a22; }
.badge svg { width:11px; height:11px; }
.card-info { padding:13px 14px 14px; }
.card-title { margin:0; font-family:'Space Grotesk',sans-serif; font-size:13px; line-height:1.35; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:#253023; }
.card-folder { margin-top:7px; font-size:10px; color:#7e897b; display:flex; align-items:center; gap:5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.card-folder svg { width:12px; height:12px; flex:0 0 auto; }
.card-meta { margin-top:10px; display:flex; gap:8px; color:#9aa396; font-size:9px; }
.card-meta span + span { position:relative; padding-left:9px; }
.card-meta span + span::before { content:""; position:absolute; left:0; top:50%; width:3px; height:3px; border-radius:50%; background:#ccd3c8; transform:translateY(-50%); }

.video-grid.list { grid-template-columns:1fr; gap:10px; }
.video-grid.list .video-card { display:grid; grid-template-columns:230px minmax(0,1fr); }
.video-grid.list .card-art { height:128px; }
.video-grid.list .card-info { display:flex; flex-direction:column; justify-content:center; }
.video-grid.list .card-meta { margin-top:auto; }
.video-grid.list .card-play .play-orb { width:50px; height:50px; }

.empty-state { min-height:300px; border:1px dashed #d8e0d2; border-radius:18px; display:grid; place-items:center; align-content:center; padding:40px; text-align:center; background:rgba(255,255,255,.48); }
.empty-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:16px; background:#eef4e9; color:#869180; }
.empty-state h3 { margin:15px 0 5px; font-family:'Space Grotesk',sans-serif; font-size:17px; }
.empty-state p { margin:0; color:#899386; font-size:11px; }

.player-modal { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:28px; }
.player-modal.open { display:flex; }
.player-backdrop { position:absolute; inset:0; background:rgba(21,29,19,.56); backdrop-filter:blur(12px); }
.player-dialog { position:relative; width:min(1180px,100%); max-height:calc(100vh - 56px); background:#fff; border:1px solid rgba(255,255,255,.70); border-radius:22px; box-shadow:var(--shadow-lg); overflow:hidden; display:flex; flex-direction:column; }
.player-topbar { padding:15px 16px; display:flex; justify-content:space-between; align-items:center; gap:16px; border-bottom:1px solid var(--border); }
.player-context { min-width:0; }
.player-small-label { color:#889281; margin-bottom:5px; }
.player-topbar h2 { margin:0; font-family:'Space Grotesk',sans-serif; font-size:15px; color:#263023; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:70vw; }
.player-actions { display:flex; align-items:center; gap:8px; }
.player-link { height:38px; padding:0 12px; border-radius:11px; border:1px solid var(--border); color:#596456; text-decoration:none; display:inline-flex; align-items:center; gap:8px; font-size:10px; background:#fff; }
.player-link:hover { background:#f5f7f3; }
.player-link svg { width:15px; height:15px; }
.player-wrap { position:relative; background:#10150e; display:flex; align-items:center; justify-content:center; min-height:280px; }
.player-wrap video { width:100%; max-height:68vh; aspect-ratio:16/9; background:#090d07; object-fit:contain; display:block; }
.unsupported-overlay { position:absolute; inset:0; background:linear-gradient(180deg,rgba(19,26,16,.94),rgba(12,17,10,.97)); color:#fff; display:grid; place-items:center; align-content:center; text-align:center; padding:30px; }
.unsupported-overlay[hidden] { display:none; }
.unsupported-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:16px; background:rgba(255,191,102,.09); color:#ffd38e; }
.unsupported-overlay h3 { margin:16px 0 7px; font-family:'Space Grotesk',sans-serif; font-size:17px; }
.unsupported-overlay p { max-width:540px; margin:0 auto 18px; color:#b8c0b3; font-size:11px; line-height:1.7; }
.primary-button,.secondary-button { border:1px solid var(--border); border-radius:11px; background:#f6f8f3; color:#445040; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:38px; padding:0 13px; font-size:10px; cursor:pointer; }
.primary-button { background:linear-gradient(100deg,#eff7e7,#fff8d8); border-color:#d6e2c8; }
.primary-button svg,.secondary-button svg { width:15px; height:15px; }
.player-bottom { padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:15px; border-top:1px solid var(--border); }
.player-position { color:#899386; font-size:10px; }
.player-nav { display:flex; gap:7px; }
.secondary-button:hover { background:#eef3eb; }

@media (max-width:1180px) { .video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .stats-card { min-width:285px; } }
@media (max-width:900px) { .sidebar { position:fixed; left:-286px; transition:left .22s ease; box-shadow:20px 0 60px rgba(23,32,23,.15); } .sidebar.open { left:0; } .mobile-close { display:grid; place-items:center; position:absolute; right:12px; top:12px; width:34px; height:34px; border-radius:10px; background:#fff; border:1px solid var(--border); } .menu-button { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; border:1px solid var(--border); color:#4f5a4c; margin-right:10px; background:#fff; } .main { padding:0 24px 40px; } .topbar { justify-content:flex-start; } .top-actions { margin-left:auto; } .hero { align-items:flex-start; flex-direction:column; } .stats-card { width:100%; max-width:430px; } }
@media (max-width:620px) { .main { padding:0 16px 30px; } .hero { padding:34px 0 20px; } .hero h1 { font-size:36px; } .toolbar { align-items:stretch; flex-direction:column; } .video-grid { grid-template-columns:1fr; } .view-toggle { align-self:flex-end; } .video-grid.list .video-card { grid-template-columns:1fr; } .video-grid.list .card-art { height:156px; } .player-modal { padding:10px; } .player-dialog { max-height:calc(100vh - 20px); border-radius:16px; } .player-link span { display:none; } .player-link { width:38px; padding:0; justify-content:center; } .player-bottom { flex-direction:column; align-items:stretch; } .player-nav { width:100%; } .player-nav button { flex:1; } kbd { display:none; } }