/* Hosted workspace only. Shared viewer and local tools keep their own theme. */
body.hosted { --bg:#f7f7fa; --panel:#fff; --panel-2:#f1f1f5; --text:#1c1c24; --muted:#6b6b7a; --border:#e4e4ec; --accent:#5b4ff5; --accent-hover:#4b3fe6; --accent-soft:#eeecff; color:var(--text); background:var(--bg); color-scheme:light; }
.hosted h1 { font-size:24px; letter-spacing:-.4px; }
.hosted h2 { font-size:16px; margin-bottom:14px; }
.hosted p { line-height:1.55; }
.hosted .btn { gap:8px; }
.hosted .btn:hover { text-decoration:none; }
.hosted input:not([type=checkbox]),.hosted select,.hosted textarea { height:38px; padding:0 12px; width:100%; border:1px solid var(--border); border-radius:9px; background:#fff; color:var(--text); font:inherit; }
.hosted textarea { padding:10px 12px; height:auto; }
.hosted input:focus,.hosted select:focus,.hosted textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.hosted [hidden] { display:none!important; }
.wf-brand { display:flex; align-items:center; gap:10px; color:inherit; font-weight:700; font-size:15px; }
.wf-brand img { width:28px; height:28px; }
.wf-brand:hover { text-decoration:none; }
.wf-layout { min-height:100vh; display:grid; grid-template-columns:240px minmax(0,1fr); }
.wf-sidebar { background:var(--panel); border-right:1px solid var(--border); padding:20px 16px; display:flex; flex-direction:column; gap:20px; position:sticky; top:0; height:100vh; }
.wf-sidebar>.btn { height:42px; }
.wf-sidebar nav { display:grid; gap:2px; }
.wf-nav { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; color:var(--text); font-weight:520; }
.wf-nav.active { color:var(--accent); background:var(--accent-soft); }
.wf-nav:hover { background:var(--panel-2); text-decoration:none; }
.wf-sidebar-foot { margin-top:auto; display:grid; gap:8px; color:var(--muted); font-size:12px; }
.wf-sidebar-foot small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wf-sidebar-foot .btn { height:32px; font-size:13px; }
.wf-main { min-width:0; max-width:1200px; padding:28px 32px 48px; }
.wf-page-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.wf-page-head p { margin:6px 0 0; color:var(--muted); font-size:13px; }
.wf-badge { display:inline-flex; align-items:center; border-radius:99px; padding:2px 8px; font-size:11px; font-weight:600; color:var(--muted); background:var(--panel-2); white-space:nowrap; }
.wf-badge.shared { color:#12754f; background:#e6f6ee; }
.wf-panel { background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:20px; }
.wf-narrow { max-width:640px; }
.wf-note { color:var(--muted); font-size:12px; margin:0; }
.wf-status { color:var(--muted); margin:0 0 16px; }
.wf-panel ol { padding-left:20px; margin:20px 0; line-height:1.9; }
.wf-library-tools { display:flex; gap:10px; align-items:center; margin-bottom:20px; flex-wrap:wrap; }
.wf-tabs { display:flex; gap:4px; margin-right:auto; }
.wf-tabs button { border:0; padding:7px 12px; border-radius:8px; background:none; color:var(--muted); font:inherit; font-weight:550; cursor:pointer; }
.wf-tabs button.selected { color:var(--accent); background:var(--accent-soft); }
.wf-library-tools input { width:220px!important; }
.wf-library-tools select { width:140px!important; }
.wf-video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.wf-video-card { background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden; color:inherit; transition:box-shadow .15s; }
.wf-video-card:hover { text-decoration:none; box-shadow:0 6px 20px rgba(28,28,36,.08); }
.wf-thumbnail { aspect-ratio:16/9; background:#20202a; position:relative; overflow:hidden; }
.wf-thumbnail video { width:100%; height:100%; position:absolute; object-fit:cover; }
.wf-duration { position:absolute; bottom:8px; right:8px; border-radius:5px; padding:2px 6px; background:rgba(0,0,0,.72); color:#fff; font-size:11px; font-weight:600; }
.wf-card-info { padding:12px 14px; }
.wf-card-info h3 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; margin-bottom:6px; }
.wf-card-info>div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.wf-card-info>div>span:first-child { color:var(--muted); font-size:12px; }
.wf-empty { grid-column:1/-1; text-align:center; padding:56px 20px; border:2px dashed var(--border); border-radius:12px; color:var(--muted); }
.wf-empty h2 { color:var(--text); margin-bottom:6px; }
.wf-empty p { margin-bottom:16px; }
.wf-watch-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start; }
.wf-player { overflow:hidden; background:#000; border-radius:12px; display:flex; }
.wf-player video { width:100%; max-height:65vh; }
.wf-field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; font-size:13px; font-weight:600; }
.wf-share-link { border-top:1px solid var(--border); margin-top:16px; padding-top:16px; }
.wf-viewer-options { display:grid; gap:10px; margin:0 0 16px; font-size:13px; font-weight:500; }
.wf-comment { border-top:1px solid var(--border); padding-top:12px; margin-top:12px; font-size:13px; }
.wf-comment span { float:right; color:var(--muted); font-size:12px; }
.wf-comment p { margin:6px 0 0; }
.wf-record { max-width:460px; }
.wf-modes { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px; }
.wf-modes button { border:1px solid var(--border); background:var(--panel); border-radius:10px; padding:12px 6px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; font:inherit; font-weight:600; font-size:12px; color:var(--text); }
.wf-modes button.on { border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.wf-record>.btn { width:100%; height:44px; margin:4px 0 12px; }
.wf-countdown { position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; background:rgba(10,10,20,.5); pointer-events:none; }
.wf-countdown span { width:150px; height:150px; border-radius:50%; background:rgba(0,0,0,.65); color:#fff; font-size:80px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.wf-capture-controls:empty { display:none; }
.wf-capture-controls { display:flex; align-items:center; gap:8px; position:fixed; bottom:24px; left:264px; background:#1c1c24; color:#fff; border-radius:14px; padding:8px 12px; box-shadow:0 10px 40px rgba(0,0,0,.35); z-index:5; }
.wf-capture-controls .btn { background:rgba(255,255,255,.08); border-color:transparent; color:#fff; height:34px; padding:0 12px; }
.wf-capture-controls .btn:hover { background:rgba(255,255,255,.18); }
.wf-capture-controls .btn-primary { background:var(--red,#f0445a); }
.wf-timer { font-variant-numeric:tabular-nums; min-width:44px; }
.wf-live-dot { width:9px; height:9px; border-radius:50%; background:#f0445a; animation:wf-blink 1.2s infinite; }
@keyframes wf-blink { 50% { opacity:.25; } }
.wf-recording .wf-sidebar,.wf-recording .wf-page-head { opacity:.45; pointer-events:none; }
.wf-pip { margin:0; }
.wf-pip .wf-capture-controls { position:static; border-radius:0; box-shadow:none; height:100vh; justify-content:center; }
.wf-auth { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 16px; }
.wf-auth-inner { width:100%; max-width:420px; display:grid; gap:20px; justify-items:center; text-align:center; }
.wf-auth-widget { width:100%; min-height:290px; }
.wf-auth-inner [role=alert] { color:#c32a3e; margin:0; }
.wf-loading { min-height:100vh; display:flex; justify-content:center; align-items:center; gap:12px; flex-direction:column; }
.wf-loading p { color:var(--muted); }
@media(max-width:1000px) { .wf-main { padding:24px 20px; } .wf-watch-grid { grid-template-columns:1fr; } }
@media(max-width:760px) { .wf-layout { grid-template-columns:1fr; } .wf-sidebar { position:static; height:auto; padding:14px 16px; gap:12px; border-right:0; border-bottom:1px solid var(--border); } .wf-sidebar nav { display:flex; flex-wrap:wrap; } .wf-sidebar>.btn,.wf-sidebar-foot { display:none; } .wf-page-head { align-items:flex-start; flex-wrap:wrap; } .wf-library-tools input { flex:1; } .wf-capture-controls { bottom:12px; left:10px; right:10px; justify-content:center; flex-wrap:wrap; } }