:root{font-family:"Segoe UI",Arial,sans-serif;color:#eef2f7;background:#0b1020;color-scheme:dark;--panel:#172238;--border:#334155;--muted:#9fb0c7;--accent:#2563eb}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:linear-gradient(180deg,#111827,#080d18)}body{min-height:100vh}button,input{font:inherit}button{cursor:pointer}.shell{min-height:100vh;padding:16px}.topbar{display:flex;align-items:center;gap:10px;min-height:46px;margin-bottom:14px;position:sticky;top:0;z-index:10;background:rgba(11,16,32,.92);backdrop-filter:blur(12px)}.brand{font-size:20px;font-weight:800;flex:1}.card{background:rgba(23,34,56,.96);border:1px solid var(--border);border-radius:15px;padding:16px;box-shadow:0 12px 32px rgba(0,0,0,.2)}.muted{color:var(--muted)}.error,.notice{padding:10px 13px;border-radius:9px;margin:10px 0}.error{background:#7f1d1d}.notice{background:#164e63}.primary,.secondary,.guest,.window-btn,.google,.facebook{border:0;border-radius:9px;padding:10px 14px;color:#fff}.primary{background:#2563eb}.secondary,.window-btn{background:#334155}.guest{background:#075985;border:1px solid #38bdf8}.wide{width:100%;margin-top:9px}.field{display:grid;gap:6px;margin:11px 0}.field input,.search input{padding:11px 12px;border:1px solid #475569;border-radius:9px;background:#0f172a;color:#fff}.auth-shell{min-height:100vh;display:grid;place-items:center;position:relative;overflow:hidden;padding:20px}.login-media{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none}.auth-shade{position:absolute;inset:0;background:rgba(4,9,18,.42);backdrop-filter:blur(2px)}.auth-card{position:relative;z-index:2;width:min(490px,95vw);background:rgba(18,29,48,.89);backdrop-filter:blur(18px)}.app-identity{font-size:13px;font-weight:800;letter-spacing:.05em;opacity:.8}.auth-divider{display:flex;gap:10px;align-items:center;color:#94a3b8;font-size:12px;margin:12px 0}.auth-divider:before,.auth-divider:after{content:"";height:1px;background:#475569;flex:1}.google{background:#fff;color:#111827;border:1px solid #cbd5e1;font-weight:700}.facebook{background:#0866ff;font-weight:700}.google-g,.facebook-f{font-weight:900;margin-right:8px}.small{font-size:12px;line-height:1.5}.hero{display:flex;align-items:center;justify-content:space-between;gap:20px}.hero h1{margin:0}.search{display:flex;gap:8px;min-width:min(500px,50vw)}.search input{flex:1}.tabs{display:flex;gap:8px;margin:14px 0}.tab{background:#1e293b;color:#dbeafe;border:1px solid #334155;border-radius:999px;padding:8px 13px}.tab.active{background:#2563eb;border-color:#2563eb}.book-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.book-card{display:grid;grid-template-columns:110px 1fr;gap:13px;background:#172238;border:1px solid #334155;border-radius:14px;padding:12px}.cover{background:#0f172a;border-radius:10px;overflow:hidden;aspect-ratio:2/3;display:grid;place-items:center}.cover img{width:100%;height:100%;object-fit:cover}.cover-fallback{font-size:22px;font-weight:900;letter-spacing:.08em;color:#64748b}.book-info h3{margin:2px 0 8px}.book-info p{font-size:13px;color:#aebbd0;line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.chips span{background:#273449;border-radius:999px;padding:4px 8px;font-size:11px}.book-head{display:grid;grid-template-columns:180px 1fr;gap:22px}.cover.large{width:180px}.description{line-height:1.55;max-height:250px;overflow:auto}.chapter-list{margin-top:14px}.chapter-row,.track,.side-chapter{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;background:#0f172a;color:#fff;border:1px solid #334155;border-radius:9px;padding:11px;margin:6px 0}.chapter-row small{display:block;color:#94a3b8;margin-top:3px}.reader-layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:14px}.chapter-sidebar{position:sticky;top:76px;max-height:calc(100vh - 95px);overflow:auto}.side-chapter.active{border-color:#60a5fa;background:#1e3a5f}.reader{max-width:900px;width:100%;margin:0 auto}.reader-toolbar{display:flex;gap:8px;justify-content:flex-end}.reader-content{font-family:Georgia,serif;font-size:18px;line-height:1.75;color:#f3f4f6}.reader-content img{max-width:100%;height:auto}.reader-nav{display:flex;justify-content:space-between;gap:10px;margin-top:25px}.locked{padding:30px;background:#0f172a;border-radius:12px}.playlist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:14px}.listener{display:grid;grid-template-columns:minmax(220px,330px) 1fr;gap:28px;align-items:center;max-width:1000px;margin:5vh auto}.listener-cover{aspect-ratio:2/3;background:#0f172a;border-radius:16px;overflow:hidden;display:grid;place-items:center}.listener-cover img{width:100%;height:100%;object-fit:cover}.listener-info audio{width:100%;margin:18px 0}.wp-account{display:flex;align-items:center;gap:8px;max-width:300px;padding:5px 9px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(15,23,42,.72)}.wp-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover}.wp-avatar.fallback{display:grid;place-items:center;background:#334155;font-weight:800}.wp-account-text{min-width:0;display:flex;flex-direction:column;line-height:1.15}.wp-account-text strong,.wp-account-text span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wp-account-text strong{font-size:13px}.wp-account-text span{font-size:11px;color:#aebbd0;margin-top:2px}@media(max-width:800px){.hero,.book-head,.listener{grid-template-columns:1fr;display:grid}.search{min-width:0;width:100%}.reader-layout{grid-template-columns:1fr}.chapter-sidebar{position:static;max-height:220px}.cover.large{width:150px}.topbar{flex-wrap:wrap}.brand{width:100%;flex-basis:100%}}

.product-price{font-weight:800;font-size:1.05rem;margin:.45rem 0}.large-price{font-size:1.25rem}.book-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.65rem}


.clips-shell{height:100vh;background:#000;color:#fff;overflow:hidden;position:relative}.clips-top{height:54px;position:absolute;z-index:20;left:0;right:0;top:0;display:flex;align-items:center;gap:9px;padding:7px 12px;background:linear-gradient(#000d,transparent)}.clips-top .brand{font-size:14px}.feed-tabs{display:flex;gap:4px;margin-left:auto}.feed-tabs button{border:0;background:transparent;color:#aaa;font-weight:800;padding:8px}.feed-tabs button.active{color:#fff;border-bottom:2px solid #fff}.clip-feed{height:100%;overflow-y:auto;scroll-snap-type:y mandatory}.clip{height:100%;position:relative;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;background:#050505}.clip-media{width:100%;height:100%;object-fit:contain;border:0}.clip-fallback{color:#aaa}.clip-overlay{position:absolute;left:16px;right:76px;bottom:25px;text-shadow:0 2px 5px #000}.creator-link{border:0;background:none;color:#fff;font-weight:900;padding:0;margin-bottom:7px}.clip-actions{position:absolute;right:13px;bottom:24px;display:flex;flex-direction:column;gap:10px}.clip-actions button{width:43px;height:43px;border:0;border-radius:50%;background:#111b;color:#fff}.clip-actions small{display:block;font-size:8px}.channel-state{position:absolute;z-index:22;top:60px;left:50%;transform:translateX(-50%);display:flex;gap:7px;align-items:center;background:#111d;border:1px solid #ffffff33;border-radius:999px;padding:5px 7px 5px 11px}.channel-state button{border:0;border-radius:50%;background:#ffffff18;color:#fff}.drawer{position:absolute;z-index:40;top:0;right:0;bottom:0;width:min(88%,430px);background:#111;transform:translateX(100%);transition:.2s;display:flex;flex-direction:column}.drawer.open{transform:translateX(0)}.drawer-head{height:55px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #ffffff18}.drawer-head button{border:0;background:none;color:#fff;font-size:28px}.drawer-body{padding:10px;overflow:auto}.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.clip-card{padding:0 0 8px;border:1px solid #ffffff18;border-radius:12px;overflow:hidden;background:#1a1a1a;color:#fff;text-align:left}.clip-card img,.clip-card .thumb{width:100%;aspect-ratio:9/12;object-fit:cover;background:#222}.clip-card .thumb{display:grid;place-items:center}.clip-card strong,.clip-card span{display:block;padding:0 8px}.clip-card strong{margin-top:8px}.clip-card span{font-size:10px;opacity:.6;margin-top:4px}.empty{padding-top:100px;text-align:center;color:#aaa}@media(max-width:800px){.clips-top .wp-account{display:none}.clips-top{gap:5px}.clips-top .secondary{padding:7px}.cards{grid-template-columns:repeat(2,1fr)}}

.channel-link{display:block;border:0;background:none;color:#dbeafe;padding:2px 0 7px;font-size:12px;font-weight:800;text-shadow:0 2px 5px #000}.creator-link{display:block}

/* v0.4.1 — solid black application background */
html,body,#app,.clips-shell,.clip-feed,.clip,.auth-shell{background:#000!important;}

/* v0.4.2 — desktop viewer keeps the phone/short-video aspect ratio.
   The black app background remains visible around the player. */
.clips-shell{
  background:#000!important;
}
.clip-feed{
  width:min(100%,520px)!important;
  height:calc(100vh - 54px)!important;
  margin:54px auto 0!important;
  background:#000!important;
}
.clip{
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  max-height:calc(100vh - 54px)!important;
  background:#000!important;
  overflow:hidden!important;
}
.clip-media{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:contain!important;
  background:#000!important;
}
iframe.clip-media{
  width:100%!important;
  height:100%!important;
}
@media(min-width:700px){
  .clip-feed{
    width:min(430px,calc((100vh - 70px) * .5625))!important;
    height:calc(100vh - 70px)!important;
    margin-top:62px!important;
    border-radius:14px;
    overflow-y:auto;
  }
  .clip{
    height:calc(100vh - 70px)!important;
    min-height:calc(100vh - 70px)!important;
    max-height:calc(100vh - 70px)!important;
    border-radius:14px;
  }
}
@media(max-width:699px){
  .clip-feed{
    width:100%!important;
    height:calc(100vh - 54px)!important;
    margin-top:54px!important;
  }
}

/* v0.4.3 — narrow app window, slightly wider than viewer */
@media(min-width:700px){
  .clip-feed{
    width:min(420px,calc((100vh - 70px) * .5625))!important;
  }
}

/* v0.4.4 — app wider than centered portrait player */
.clips-shell{
  background:#000!important;
}
@media(min-width:700px){
  .clip-feed{
    width:420px!important;
    max-width:420px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
  .clip{
    width:420px!important;
    max-width:420px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* v0.4.5 — true centered portrait stage.
   Previous desktop rule did not activate in the 620px app window because
   it was inside @media(min-width:700px). */
html,body,#app,.clips-shell{
  width:100%!important;
  height:100%!important;
  background:#000!important;
}

.clip-feed{
  position:absolute!important;
  top:54px!important;
  bottom:0!important;
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:420px!important;
  max-width:calc(100vw - 80px)!important;
  height:auto!important;
  margin:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  background:#000!important;
  scroll-snap-type:y mandatory;
}

.clip{
  width:100%!important;
  max-width:100%!important;
  height:calc(100vh - 54px)!important;
  min-height:calc(100vh - 54px)!important;
  max-height:calc(100vh - 54px)!important;
  margin:0!important;
  background:#050505!important;
  overflow:hidden!important;
}

.clip-media{
  width:100%!important;
  max-width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  background:#050505!important;
}

/* Only collapse to full-width when the app itself becomes genuinely narrow. */
@media(max-width:500px){
  .clip-feed{
    width:100%!important;
    max-width:100%!important;
    left:0!important;
    transform:none!important;
  }
}

/* v0.4.6 — Clip Manager action restored in viewer */
.manager-menu{display:grid;gap:10px}
.manager-action{
  width:100%;padding:14px;border:1px solid rgba(255,255,255,.12);
  border-radius:12px;background:#191919;color:#fff;text-align:left;cursor:pointer;
}
.manager-action strong,.manager-action span{display:block}
.manager-action span{font-size:11px;opacity:.65;margin-top:4px}

/* v0.4.8 — distinguish Explore, Create and Follow actions */
.manager-intro{padding:4px 2px 12px}
.manager-intro strong,.manager-intro span{display:block}
.manager-intro strong{font-size:16px}
.manager-intro span{font-size:11px;opacity:.65;margin-top:3px}

/* v0.4.9 — four distinct viewer actions */
.clip-actions button[data-goto-channel]{font-size:18px}
.clip-actions button[data-explore]{font-size:16px}

/* v0.5.0 — native Clip Manager drawer */
.clip-manager{min-height:100%}
.manager-tabs{display:flex;gap:5px;position:sticky;top:0;background:#111;padding:4px 0 10px;z-index:2}
.manager-tabs button{flex:1;border:1px solid #ffffff18;background:#1b1b1b;color:#bbb;border-radius:9px;padding:9px 6px;font-size:11px;font-weight:800}
.manager-tabs button.active{background:#fff;color:#111}
.manager-loading{opacity:.6;text-align:center;padding:30px 0}
.manager-section{padding:10px 2px}.manager-section h3{margin:4px 0 8px}.manager-note{background:#191919;border:1px solid #ffffff18;border-radius:10px;padding:12px;font-size:11px;opacity:.8}
.manager-clip-list{display:grid;gap:8px}.manager-clip-card{display:grid;grid-template-columns:78px 1fr;gap:10px;background:#191919;border:1px solid #ffffff16;border-radius:11px;padding:8px}
.manager-clip-card img,.manager-thumb{width:78px;height:104px;object-fit:cover;border-radius:8px;background:#242424}.manager-thumb{display:grid;place-items:center}
.manager-clip-info{min-width:0}.manager-clip-info strong,.manager-clip-info span,.manager-clip-info small{display:block}.manager-clip-info strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.manager-clip-info span{font-size:11px;opacity:.7;margin-top:4px}.manager-clip-info small{font-size:10px;opacity:.55;margin-top:7px}
.manager-status{display:inline-block!important;width:max-content;padding:3px 6px;border-radius:999px;background:#333;text-transform:capitalize}.status-publish{background:#14532d!important}.status-pending{background:#78350f!important}.status-rejected{background:#7f1d1d!important}
.manager-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.manager-stats div{background:#191919;border:1px solid #ffffff16;border-radius:10px;padding:11px}.manager-stats span,.manager-stats strong{display:block}.manager-stats span{font-size:10px;opacity:.6}.manager-stats strong{font-size:20px;margin-top:4px}

/* v0.5.1 — full Clip Manager view */
.clip-manager-full{min-height:100%;color:#fff}
.manager-heading{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 10px}
.manager-heading strong,.manager-heading span{display:block}
.manager-heading strong{font-size:17px}
.manager-heading span{font-size:11px;opacity:.58;margin-top:3px}
.manager-summary{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.manager-summary>div{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border:1px solid #ffffff16;border-radius:8px;background:#181818}
.manager-summary span{font-size:9px;opacity:.62;white-space:nowrap}
.manager-summary strong{font-size:13px}
.manager-panel{padding-top:8px}
.manager-panel h3{margin:3px 0 10px}
.manager-panel-title{display:flex;align-items:center;justify-content:space-between}
.manager-panel-title span{font-size:10px;opacity:.58}
.manager-muted,.manager-empty{font-size:12px;opacity:.65}
.add-clip-panel label{display:block;font-size:10px;font-weight:800;margin:12px 0 5px}
.add-clip-panel input,.add-clip-panel select{width:100%;padding:10px;border-radius:9px;border:1px solid #ffffff22;background:#090909;color:#fff}
.manager-dropzone{margin-top:5px;min-height:120px;border:1px dashed #ffffff38;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;background:#151515}
.manager-dropzone strong,.manager-dropzone span{display:block}
.manager-dropzone span{font-size:10px;opacity:.55;margin-top:5px;max-width:250px}

/* v0.5.2 — ensure viewer actions stay above embedded players */
.clip-actions{
  z-index:60!important;
  pointer-events:auto!important;
}
.clip-actions button{
  position:relative;
  z-index:61!important;
  pointer-events:auto!important;
}
.clip-media{
  position:relative;
  z-index:1!important;
}
.drawer{
  z-index:100!important;
}
.manager-login-required{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:18px;
  background:#191919;
  border:1px solid #ffffff18;
  border-radius:12px;
}
.manager-login-required span{font-size:11px;opacity:.65}

.manager-heading{display:flex;flex-direction:column;gap:3px;padding:4px 2px 10px}
.manager-heading span{font-size:11px;opacity:.6}
.manager-summary{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 12px}
.manager-summary>div{display:inline-flex;gap:5px;align-items:center;padding:6px 8px;border:1px solid #ffffff16;border-radius:8px;background:#181818}
.manager-summary span{font-size:9px;opacity:.6}.manager-summary strong{font-size:13px}
.manager-tabs{display:flex;flex-wrap:wrap;gap:5px}
.manager-tabs button{flex:1;min-width:70px}
.manager-add-channel{display:flex;gap:7px;margin:10px 0}
.manager-add-channel input{flex:1;min-width:0;padding:10px;border-radius:9px;border:1px solid #ffffff22;background:#090909;color:#fff}
.manager-channel-list{display:grid;gap:7px;margin-top:10px}
.manager-channel-row{display:flex;justify-content:space-between;align-items:center;padding:11px;border:1px solid #ffffff16;border-radius:10px;background:#191919}
.manager-channel-row span{font-size:10px;opacity:.55}
.manager-channel-picker{display:flex;gap:7px}.manager-channel-picker select{flex:1}

/* v0.5.4 — functional video chooser / drop zone */
.manager-dropzone{
  cursor:pointer;
  user-select:none;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.manager-dropzone:hover,
.manager-dropzone:focus-visible{
  border-color:#ffffff70;
  background:#1d1d1d;
  outline:none;
}
.manager-dropzone.is-dragging{
  border-color:#fff;
  background:#222;
  transform:scale(.995);
}
.manager-dropzone.has-file{
  border-style:solid;
}
.manager-selected-file{
  margin-top:8px;
  padding:10px;
  border-radius:10px;
  border:1px solid #ffffff18;
  background:#181818;
}
.manager-selected-file strong,
.manager-selected-file span{
  display:block;
}
.manager-selected-file strong{
  font-size:12px;
  word-break:break-word;
}
.manager-selected-file span{
  margin-top:4px;
  font-size:10px;
  opacity:.62;
}
.manager-selected-file.selected{
  border-color:#166534;
  background:#0d1f13;
}
.manager-selected-file.error{
  border-color:#7f1d1d;
  background:#2b1010;
}

/* v0.5.5 — creator upload + progress */
.add-clip-panel textarea{
  width:100%;padding:10px;border-radius:9px;border:1px solid #ffffff22;background:#090909;color:#fff;resize:vertical;
}
#managerUploadBtn:disabled{opacity:.42;cursor:not-allowed}
.manager-upload-progress{margin-top:10px}
.manager-upload-track{height:5px;background:#ffffff16;border-radius:999px;overflow:hidden}
.manager-upload-track span{display:block;width:0;height:100%;background:#fff;border-radius:inherit;transition:width .15s linear}
.manager-upload-progress small{display:block;margin-top:6px;font-size:10px;opacity:.65}
.manager-upload-progress.has-error .manager-upload-track span{background:#ef4444}

/* v0.5.6 — upload-only state, matching web Clip Manager */
.manager-upload-progress.upload-only{
  margin-top:0;
  padding:18px 4px;
}
.manager-upload-progress.upload-only .manager-upload-track{
  height:7px;
}
.manager-upload-progress.upload-only small{
  margin-top:9px;
  font-size:11px;
  text-align:center;
}
.manager-upload-retry{
  margin-top:14px;
}

/* v0.5.9 — My Clips Go action */
.manager-go{
  margin-top:9px;
  padding:7px 10px;
  border:1px solid #ffffff22;
  border-radius:8px;
  background:#fff;
  color:#111;
  font-size:11px;
  font-weight:800;
  cursor:pointer;
}
.manager-go:hover{filter:brightness(.92)}

/* v0.6.1 — Like / Share feedback */
.clip-actions button.is-liked{background:#fff;color:#111}
.clip-actions button.did-share{background:#fff;color:#111}
.clip-actions button:disabled{opacity:.55;cursor:wait}
.share-url{font-size:11px;word-break:break-all;opacity:.7}

/* v0.6.3 — comments composer */
.comments-view{display:flex;flex-direction:column;gap:12px;min-height:100%}
.comments-list{display:grid;gap:8px}
.comment-card{padding:10px;border:1px solid #ffffff14;border-radius:10px;background:#181818}
.comment-card strong{font-size:11px}
.comment-card p{margin:5px 0 0;font-size:12px;line-height:1.4}
.comments-empty{opacity:.58}
.comment-composer{position:sticky;bottom:0;padding-top:8px;background:linear-gradient(transparent,#111 18%)}
.comment-composer textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #ffffff22;background:#090909;color:#fff;resize:vertical}
.comment-composer-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px}
.comment-composer-footer span{font-size:10px;opacity:.65}
.comment-composer-footer button{padding:8px 14px}
.comment-composer-footer button:disabled{opacity:.5}
.comment-login-note{padding:10px;border:1px solid #ffffff14;border-radius:10px;background:#181818;font-size:11px;opacity:.7}

/* v0.7.0 — Web Viewer parity: compact actions, right navigation, diagnostics */
.clip-actions{gap:3px!important;justify-content:center!important}.clip-actions button{margin:0!important;padding:3px 2px!important}.clip-actions small{margin-top:1px!important}.channel-count{margin-top:7px!important;display:block!important}
.viewer-nav{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:80;display:flex;flex-direction:column;gap:7px}.viewer-nav button{width:42px;height:42px;border-radius:50%;border:1px solid #ffffff33;background:#151515dd;color:#fff;font-size:22px;cursor:pointer}
.diag-toggle{position:fixed;left:12px;bottom:12px;z-index:110;border:1px solid #ffffff33;background:#111;color:#fff;border-radius:8px;width:28px;height:28px;padding:0;display:grid;place-items:center}.feed-diagnostics{position:fixed;left:12px;bottom:52px;z-index:109;width:min(430px,calc(100vw - 24px));max-height:42vh;overflow:auto;background:#090909ee;color:#ddd;border:1px solid #ffffff28;border-radius:9px;padding:10px;font:11px/1.45 Consolas,monospace;white-space:pre-wrap}.feed-diagnostics[hidden]{display:none!important}

/* v0.7.11 — keep existing top-bar layout; ensure logged-in user panel stays visible */
.clips-top .wp-account{
  flex-shrink:1 !important;
  min-width:0 !important;
  max-width:180px !important;
  overflow:hidden !important;
}

.clips-top .wp-account-text{
  min-width:0 !important;
  overflow:hidden !important;
}

.clips-top .wp-account-text strong,
.clips-top .wp-account-text span{
  display:block !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  max-width:125px !important;
}

@media (max-width:850px){
  .clips-top .wp-account{
    max-width:135px !important;
  }
  .clips-top .wp-account-text strong,
  .clips-top .wp-account-text span{
    max-width:85px !important;
  }
}

@media (max-width:700px){
  .clips-top .wp-account{
    max-width:105px !important;
  }
  .clips-top .wp-account-text span{
    display:none !important;
  }
  .clips-top .wp-account-text strong{
    max-width:62px !important;
  }
}

/* v0.7.13 — correct narrow-window header behavior.
   Older CSS hid the user panel below 800px. Keep it visible and give this control area room. */
@media (max-width:800px){
  .clips-top .wp-account{
    display:flex !important;
  }
}

/* Keep For You / Following / user panel in their existing positions,
   but allow the user panel to use more horizontal space. */
.clips-top .wp-account{
  width:auto !important;
  max-width:240px !important;
  flex:0 1 240px !important;
}

.clips-top .wp-account-text strong,
.clips-top .wp-account-text span{
  max-width:180px !important;
}

@media (max-width:850px){
  .clips-top .wp-account{
    max-width:190px !important;
    flex-basis:190px !important;
  }
  .clips-top .wp-account-text strong,
  .clips-top .wp-account-text span{
    max-width:130px !important;
  }
}

@media (max-width:700px){
  .clips-top .wp-account{
    display:flex !important;
    max-width:150px !important;
    flex-basis:150px !important;
  }
  .clips-top .wp-account-text span{
    display:none !important;
  }
  .clips-top .wp-account-text strong{
    max-width:95px !important;
  }
}

/* v0.7.14 — slightly wider user/control panel */
.clips-top .wp-account{
  max-width:275px !important;
  flex-basis:275px !important;
}
.clips-top .wp-account-text strong,
.clips-top .wp-account-text span{
  max-width:210px !important;
}
@media (max-width:850px){
  .clips-top .wp-account{
    max-width:220px !important;
    flex-basis:220px !important;
  }
  .clips-top .wp-account-text strong,
  .clips-top .wp-account-text span{
    max-width:155px !important;
  }
}
@media (max-width:700px){
  .clips-top .wp-account{
    max-width:175px !important;
    flex-basis:175px !important;
  }
  .clips-top .wp-account-text strong{
    max-width:115px !important;
  }
}

/* v0.7.15 — user panel opens RVRH My Account */
.clips-top .wp-account{cursor:pointer}

/* v0.7.25 — Microsoft Store-visible privacy statement links */
.top-privacy{
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  padding:6px 8px;
  white-space:nowrap;
  text-decoration:underline;
  text-underline-offset:2px;
}
.privacy-link{
  border:0;
  background:transparent;
  color:inherit;
  cursor:pointer;
  padding:4px 0;
  text-decoration:underline;
  text-underline-offset:2px;
}


/* v0.7.28 — main viewer only:
   diagnostics stays at original bottom-left position;
   one Privacy link sits directly below it.
   Login-screen Privacy Statement remains unchanged. */
.diag-privacy-stack{
  position:fixed;
  left:12px;
  bottom:8px;
  z-index:110;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}

.diag-privacy-stack .diag-toggle{
  position:static !important;
  left:auto !important;
  bottom:auto !important;
  margin:0 !important;
}

.frame-privacy{
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  padding:0 2px;
  font-size:10px;
  line-height:1.1;
  text-decoration:underline;
  text-underline-offset:2px;
}


/* MyZoneFirst v1.0.5 — direct camera recording in Add Clip */
.manager-camera-open{margin-top:8px}
.manager-camera-panel{
  margin-top:10px;
  padding:10px;
  border:1px solid #ffffff22;
  border-radius:12px;
  background:#080808;
}
.manager-camera-panel video{
  display:block;
  width:100%;
  max-height:54vh;
  aspect-ratio:9/16;
  object-fit:contain;
  background:#000;
  border-radius:10px;
}
.manager-camera-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.manager-camera-actions button{flex:1 1 120px}
.manager-camera-panel small{
  display:block;
  margin-top:8px;
  font-size:10px;
  opacity:.68;
  text-align:center;
}

/* v1.0.7 — MyZoneFirst current location and channel-free manager */
.brand-wrap{display:flex;flex-direction:column;min-width:0}
.mzf-current-location{border:0!important;background:transparent!important;color:#d1d5db!important;padding:1px 0!important;text-align:left;font-size:10px;line-height:1.2;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.manager-location-readout{display:flex;flex-direction:column;gap:3px;padding:10px 12px;margin:4px 0 12px;border:1px solid #ffffff18;border-radius:10px;background:#ffffff08}
.manager-location-readout span{font-size:11px;opacity:.7}
.manager-location-readout strong{font-size:13px}


/* v1.0.12 — geographic breadcrumb navigation and map */
.geo-breadcrumb{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin:2px 0 7px;font-size:12px;font-weight:800;text-shadow:0 2px 5px #000}
.geo-breadcrumb-part{border:0;background:rgba(0,0,0,.38);color:#fff;padding:3px 6px;border-radius:999px;font:inherit;cursor:pointer}
.geo-breadcrumb-part:hover,.geo-breadcrumb-part:focus{background:rgba(255,255,255,.18);outline:1px solid rgba(255,255,255,.4)}
.geo-separator{opacity:.7}.geo-breadcrumb-static{color:#dbeafe}
.mzf-map-button{border:0;border-radius:999px;background:rgba(15,23,42,.82);color:#fff;padding:7px 10px;font-weight:800;white-space:nowrap}
.mzf-google-map{width:100%;height:min(68vh,620px);min-height:360px;border-radius:12px;overflow:hidden;background:#191919}


/* My Zone First v1.0.19 — user-selectable themes.
   Default intentionally has no overrides so the existing app appearance is preserved. */
.mzf-theme-button{
  border:0;border-radius:999px;background:rgba(15,23,42,.82);color:#fff;
  padding:7px 10px;font-weight:800;white-space:nowrap;
}
.mzf-theme-picker{display:grid;gap:10px;padding:4px}
.mzf-theme-choice{
  width:100%;display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center;
  text-align:left;padding:12px;border-radius:13px;border:1px solid #ffffff22;
  background:#181818;color:#fff;
}
.mzf-theme-choice.active{border-color:#60a5fa;box-shadow:0 0 0 1px #60a5fa55}
.mzf-theme-choice strong,.mzf-theme-choice small{display:block}
.mzf-theme-choice small{margin-top:4px;opacity:.65;line-height:1.35}
.mzf-theme-choice b{font-size:20px}
.mzf-theme-preview{width:54px;height:40px;border-radius:9px;border:1px solid #ffffff2b}
.mzf-theme-preview-default{background:linear-gradient(135deg,#000 0 58%,#172238 58%)}
.mzf-theme-preview-neon-zone{background:linear-gradient(135deg,#000 0 45%,#087fff 46% 65%,#00d7e8 66% 80%,#16f06e 81%)}
.mzf-theme-preview-midnight-blue{background:linear-gradient(135deg,#030713 0 48%,#0b1d38 49% 72%,#2b6fff 73%)}
.mzf-theme-preview-fire{background:linear-gradient(135deg,#050000 0 38%,#9d1600 39% 58%,#ff5a00 59% 78%,#ffd84a 79%)}
.mzf-theme-preview-water{background:linear-gradient(135deg,#001018 0 40%,#003b63 41% 60%,#00a6d6 61% 80%,#39f3e6 81%)}

/* Neon Zone — visual language from the My Zone First install page. */
html[data-mzf-theme="neon-zone"],
html[data-mzf-theme="neon-zone"] body,
html[data-mzf-theme="neon-zone"] #app,
html[data-mzf-theme="neon-zone"] .clips-shell,
html[data-mzf-theme="neon-zone"] .auth-shell{
  background:
    radial-gradient(circle at 16% 8%,rgba(0,140,255,.16),transparent 27rem),
    radial-gradient(circle at 90% 80%,rgba(0,255,119,.09),transparent 29rem),
    #000!important;
}
html[data-mzf-theme="neon-zone"] .clips-top{
  background:linear-gradient(90deg,rgba(0,0,0,.97),rgba(5,18,28,.97))!important;
  border-bottom:1px solid rgba(0,215,232,.38)!important;
  box-shadow:0 8px 26px rgba(0,174,255,.10)!important;
}
html[data-mzf-theme="neon-zone"] .brand{
  background:linear-gradient(90deg,#0d9fff,#00d7e8,#35f26f);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
html[data-mzf-theme="neon-zone"] .mzf-current-location{color:#62e8f5!important}
html[data-mzf-theme="neon-zone"] .mzf-map-button,
html[data-mzf-theme="neon-zone"] .mzf-theme-button{
  background:linear-gradient(120deg,rgba(5,71,128,.95),rgba(0,114,127,.88))!important;
  border:1px solid rgba(0,222,231,.5)!important;
  box-shadow:0 0 14px rgba(0,207,255,.12);
}
html[data-mzf-theme="neon-zone"] .feed-tabs button.active{
  color:#fff!important;border-bottom-color:#25ef69!important;text-shadow:0 0 9px rgba(37,239,105,.35)
}
html[data-mzf-theme="neon-zone"] .drawer{
  background:linear-gradient(180deg,#071019,#02080d)!important;
  border-left:1px solid rgba(0,207,255,.30)!important;
}
html[data-mzf-theme="neon-zone"] .drawer-head{border-bottom-color:rgba(0,207,255,.26)!important}
html[data-mzf-theme="neon-zone"] .clip-actions button{
  background:rgba(4,20,28,.84)!important;border:1px solid rgba(0,215,232,.38)!important;
  box-shadow:0 0 13px rgba(0,215,232,.08)
}
html[data-mzf-theme="neon-zone"] .geo-breadcrumb-part{
  background:rgba(0,91,118,.62)!important;border:1px solid rgba(0,225,230,.28)!important
}
html[data-mzf-theme="neon-zone"] .channel-state{
  background:rgba(3,20,29,.94)!important;border-color:rgba(0,215,232,.40)!important
}
html[data-mzf-theme="neon-zone"] .manager-tabs{background:#071019!important}
html[data-mzf-theme="neon-zone"] .manager-tabs button,
html[data-mzf-theme="neon-zone"] .manager-note,
html[data-mzf-theme="neon-zone"] .manager-clip-card,
html[data-mzf-theme="neon-zone"] .manager-summary>div,
html[data-mzf-theme="neon-zone"] .manager-stats div,
html[data-mzf-theme="neon-zone"] .manager-action,
html[data-mzf-theme="neon-zone"] .clip-card,
html[data-mzf-theme="neon-zone"] .comment-card{
  background:#09151f!important;border-color:rgba(0,196,230,.24)!important;
}
html[data-mzf-theme="neon-zone"] .manager-tabs button.active,
html[data-mzf-theme="neon-zone"] .primary{
  background:linear-gradient(110deg,#087fff,#00bee8 52%,#18ec63)!important;color:#fff!important;border-color:transparent!important
}
html[data-mzf-theme="neon-zone"] .auth-card{
  background:rgba(5,17,27,.92)!important;border-color:rgba(0,215,232,.30)!important;
  box-shadow:0 18px 60px rgba(0,151,255,.18)!important;
}

/* Midnight Blue — deep navy alternative with restrained cool-blue accents. */
html[data-mzf-theme="midnight-blue"],
html[data-mzf-theme="midnight-blue"] body,
html[data-mzf-theme="midnight-blue"] #app,
html[data-mzf-theme="midnight-blue"] .clips-shell,
html[data-mzf-theme="midnight-blue"] .auth-shell{
  background:radial-gradient(circle at 50% 0,rgba(35,92,180,.17),transparent 34rem),#030713!important;
}
html[data-mzf-theme="midnight-blue"] .clips-top{
  background:rgba(5,12,29,.96)!important;border-bottom:1px solid #19375e!important
}
html[data-mzf-theme="midnight-blue"] .brand{color:#91b9ff!important}
html[data-mzf-theme="midnight-blue"] .mzf-current-location{color:#a7c8ff!important}
html[data-mzf-theme="midnight-blue"] .mzf-map-button,
html[data-mzf-theme="midnight-blue"] .mzf-theme-button{
  background:#0b1d38!important;color:#dbeafe!important;border:1px solid #244d7e!important
}
html[data-mzf-theme="midnight-blue"] .feed-tabs button.active{color:#9ec5ff!important;border-bottom-color:#4d8dff!important}
html[data-mzf-theme="midnight-blue"] .drawer{background:#07101f!important;border-left:1px solid #18345b!important}
html[data-mzf-theme="midnight-blue"] .clip-actions button{background:#0a1831dd!important;border:1px solid #244d7e!important}
html[data-mzf-theme="midnight-blue"] .geo-breadcrumb-part{background:#0d2345cc!important;border:1px solid #315f9a!important}
html[data-mzf-theme="midnight-blue"] .channel-state{background:#09172ddd!important;border-color:#315f9a!important}
html[data-mzf-theme="midnight-blue"] .manager-tabs{background:#07101f!important}
html[data-mzf-theme="midnight-blue"] .manager-tabs button,
html[data-mzf-theme="midnight-blue"] .manager-note,
html[data-mzf-theme="midnight-blue"] .manager-clip-card,
html[data-mzf-theme="midnight-blue"] .manager-summary>div,
html[data-mzf-theme="midnight-blue"] .manager-stats div,
html[data-mzf-theme="midnight-blue"] .manager-action,
html[data-mzf-theme="midnight-blue"] .clip-card,
html[data-mzf-theme="midnight-blue"] .comment-card{
  background:#0a172b!important;border-color:#1d3f69!important;
}
html[data-mzf-theme="midnight-blue"] .manager-tabs button.active,
html[data-mzf-theme="midnight-blue"] .primary{
  background:#2b6fff!important;color:#fff!important
}
html[data-mzf-theme="midnight-blue"] .auth-card{
  background:rgba(7,16,31,.93)!important;border-color:#1d3f69!important;
}


/* Fire — glowing ember/red/orange/gold theme. */
html[data-mzf-theme="fire"],
html[data-mzf-theme="fire"] body,
html[data-mzf-theme="fire"] #app,
html[data-mzf-theme="fire"] .clips-shell,
html[data-mzf-theme="fire"] .auth-shell{
  background:
    radial-gradient(circle at 18% 8%,rgba(255,72,0,.18),transparent 26rem),
    radial-gradient(circle at 84% 86%,rgba(255,174,0,.10),transparent 30rem),
    #050000!important;
}
html[data-mzf-theme="fire"] .clips-top{
  background:linear-gradient(90deg,rgba(10,0,0,.97),rgba(32,7,0,.97))!important;
  border-bottom:1px solid rgba(255,102,0,.45)!important;
  box-shadow:0 8px 28px rgba(255,72,0,.10)!important;
}
html[data-mzf-theme="fire"] .brand{
  background:linear-gradient(90deg,#ff3b00,#ff7a00,#ffd84a);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
html[data-mzf-theme="fire"] .mzf-current-location{color:#ffc08a!important}
html[data-mzf-theme="fire"] .mzf-map-button,
html[data-mzf-theme="fire"] .mzf-theme-button{
  background:linear-gradient(120deg,rgba(104,19,0,.95),rgba(182,55,0,.90))!important;
  border:1px solid rgba(255,127,0,.55)!important;
  box-shadow:0 0 14px rgba(255,91,0,.14);
}
html[data-mzf-theme="fire"] .feed-tabs button.active{
  color:#fff!important;border-bottom-color:#ffb000!important;text-shadow:0 0 9px rgba(255,176,0,.35)
}
html[data-mzf-theme="fire"] .drawer{
  background:linear-gradient(180deg,#170500,#080100)!important;
  border-left:1px solid rgba(255,92,0,.34)!important;
}
html[data-mzf-theme="fire"] .drawer-head{border-bottom-color:rgba(255,111,0,.28)!important}
html[data-mzf-theme="fire"] .clip-actions button{
  background:rgba(39,7,0,.86)!important;border:1px solid rgba(255,103,0,.42)!important;
  box-shadow:0 0 13px rgba(255,71,0,.10)
}
html[data-mzf-theme="fire"] .geo-breadcrumb-part{
  background:rgba(100,24,0,.66)!important;border:1px solid rgba(255,127,0,.32)!important
}
html[data-mzf-theme="fire"] .channel-state{
  background:rgba(39,7,0,.94)!important;border-color:rgba(255,111,0,.44)!important
}
html[data-mzf-theme="fire"] .manager-tabs{background:#170500!important}
html[data-mzf-theme="fire"] .manager-tabs button,
html[data-mzf-theme="fire"] .manager-note,
html[data-mzf-theme="fire"] .manager-clip-card,
html[data-mzf-theme="fire"] .manager-summary>div,
html[data-mzf-theme="fire"] .manager-stats div,
html[data-mzf-theme="fire"] .manager-action,
html[data-mzf-theme="fire"] .clip-card,
html[data-mzf-theme="fire"] .comment-card{
  background:#210900!important;border-color:rgba(255,104,0,.25)!important;
}
html[data-mzf-theme="fire"] .manager-tabs button.active,
html[data-mzf-theme="fire"] .primary{
  background:linear-gradient(110deg,#c41d00,#ff5a00 55%,#ffbf24)!important;color:#fff!important;border-color:transparent!important
}
html[data-mzf-theme="fire"] .auth-card{
  background:rgba(28,6,0,.92)!important;border-color:rgba(255,103,0,.30)!important;
  box-shadow:0 18px 60px rgba(255,72,0,.17)!important;
}

/* Water — deep ocean/cyan/aqua theme. */
html[data-mzf-theme="water"],
html[data-mzf-theme="water"] body,
html[data-mzf-theme="water"] #app,
html[data-mzf-theme="water"] .clips-shell,
html[data-mzf-theme="water"] .auth-shell{
  background:
    radial-gradient(circle at 16% 10%,rgba(0,171,214,.17),transparent 28rem),
    radial-gradient(circle at 88% 80%,rgba(50,255,231,.09),transparent 30rem),
    #001018!important;
}
html[data-mzf-theme="water"] .clips-top{
  background:linear-gradient(90deg,rgba(0,16,24,.97),rgba(0,36,58,.97))!important;
  border-bottom:1px solid rgba(0,202,238,.40)!important;
  box-shadow:0 8px 28px rgba(0,160,210,.10)!important;
}
html[data-mzf-theme="water"] .brand{
  background:linear-gradient(90deg,#00a6d6,#28d8e8,#50f5d8);
  -webkit-background-clip:text;background-clip:text;color:transparent!important;
}
html[data-mzf-theme="water"] .mzf-current-location{color:#93f1ec!important}
html[data-mzf-theme="water"] .mzf-map-button,
html[data-mzf-theme="water"] .mzf-theme-button{
  background:linear-gradient(120deg,rgba(0,64,93,.95),rgba(0,125,143,.88))!important;
  border:1px solid rgba(0,220,232,.50)!important;
  box-shadow:0 0 14px rgba(0,204,230,.12);
}
html[data-mzf-theme="water"] .feed-tabs button.active{
  color:#fff!important;border-bottom-color:#46f2dd!important;text-shadow:0 0 9px rgba(70,242,221,.33)
}
html[data-mzf-theme="water"] .drawer{
  background:linear-gradient(180deg,#001925,#000b12)!important;
  border-left:1px solid rgba(0,204,231,.30)!important;
}
html[data-mzf-theme="water"] .drawer-head{border-bottom-color:rgba(0,204,231,.26)!important}
html[data-mzf-theme="water"] .clip-actions button{
  background:rgba(0,34,47,.86)!important;border:1px solid rgba(0,210,227,.38)!important;
  box-shadow:0 0 13px rgba(0,210,227,.08)
}
html[data-mzf-theme="water"] .geo-breadcrumb-part{
  background:rgba(0,77,101,.62)!important;border:1px solid rgba(33,232,229,.28)!important
}
html[data-mzf-theme="water"] .channel-state{
  background:rgba(0,29,43,.94)!important;border-color:rgba(0,204,231,.40)!important
}
html[data-mzf-theme="water"] .manager-tabs{background:#001925!important}
html[data-mzf-theme="water"] .manager-tabs button,
html[data-mzf-theme="water"] .manager-note,
html[data-mzf-theme="water"] .manager-clip-card,
html[data-mzf-theme="water"] .manager-summary>div,
html[data-mzf-theme="water"] .manager-stats div,
html[data-mzf-theme="water"] .manager-action,
html[data-mzf-theme="water"] .clip-card,
html[data-mzf-theme="water"] .comment-card{
  background:#002332!important;border-color:rgba(0,199,226,.24)!important;
}
html[data-mzf-theme="water"] .manager-tabs button.active,
html[data-mzf-theme="water"] .primary{
  background:linear-gradient(110deg,#0078bd,#00add2 55%,#31e6cd)!important;color:#fff!important;border-color:transparent!important
}
html[data-mzf-theme="water"] .auth-card{
  background:rgba(0,27,41,.92)!important;border-color:rgba(0,204,231,.30)!important;
  box-shadow:0 18px 60px rgba(0,172,214,.16)!important;
}

/* v1.1.7 — compact vertical Clip actions: Follow + Like + More */
.clip-actions{position:absolute!important}
.clip-actions .clip-more-menu{
  position:absolute;
  right:calc(100% + 8px);
  bottom:0;
  z-index:95;
  min-width:112px;
  display:grid;
  gap:4px;
  padding:7px;
  border:1px solid #ffffff2b;
  border-radius:12px;
  background:#111111ee;
  box-shadow:0 10px 28px rgba(0,0,0,.38);
}
.clip-actions .clip-more-menu[hidden]{display:none!important}
.clip-actions .clip-more-menu button{
  width:100%!important;
  min-width:96px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  padding:7px 9px!important;
  border-radius:8px!important;
}
.clip-actions .clip-more-menu button small{
  margin:0!important;
  font-size:10px!important;
}

/* v1.1.8 — move Follow / Like / More vertical action group up by 2 cm */
.clip-actions{
  transform:translateY(-2cm)!important;
}

/* v1.1.15 — center My Zone / Following in their own row below the header */
.clips-shell > .feed-tabs{
  position:relative!important;
  z-index:70!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin:0!important;
  padding:6px 8px!important;
  box-sizing:border-box!important;
}
.clips-shell > .feed-tabs button{
  flex:0 0 auto!important;
}

/* v1.1.16 — place My Zone / Following on a true row below the 54px absolute header */
.clips-shell > .feed-tabs{
  position:absolute!important;
  top:54px!important;
  left:0!important;
  right:0!important;
  z-index:70!important;
  height:42px!important;
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  margin:0!important;
  padding:4px 8px!important;
  box-sizing:border-box!important;
  background:#000!important;
}
.clips-shell > .clip-feed{
  top:96px!important;
}

/* v1.1.18 — show the Clip channel on the player and make it open Explore */
.channel-link{
  display:block;
  border:0;
  background:none;
  color:#fff;
  font-weight:800;
  padding:0;
  margin:0 0 5px;
  text-align:left;
  cursor:pointer;
  text-shadow:0 2px 5px #000;
}
.channel-link:hover,.channel-link:focus{
  text-decoration:underline;
  outline:none;
}

/* v1.1.19 — keep creator/channel overlay visibly above player media */
.clip-overlay{
  z-index:50!important;
  pointer-events:auto!important;
}
.clip-overlay .creator-link,
.clip-overlay .channel-link,
.clip-overlay .geo-breadcrumb{
  position:relative;
  z-index:51!important;
  pointer-events:auto!important;
}

/* v1.1.21 — channel at top of player */
.clip-overlay .channel-link{
  position:absolute!important;
  left:0!important;
  bottom:calc(100vh - 155px)!important;
  z-index:52!important;
  margin:0!important;
  white-space:nowrap;
  max-width:calc(100vw - 110px);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* v1.1.22 — preserve the creator's previous vertical position */
.clip-overlay .creator-link{
  margin-bottom:26px!important;
}

/* v1.1.24 — creator directly above channel without moving the channel */
.clip-overlay .creator-link{
  position:absolute!important;
  left:0!important;
  bottom:calc(100vh - 131px)!important;
  z-index:53!important;
  margin:0!important;
  white-space:nowrap;
  max-width:calc(100vw - 110px);
  overflow:hidden;
  text-overflow:ellipsis;
}

/* v1.1.25 — fit player to the viewport below header + My Zone/Following row */
.clips-shell > .clip-feed{
  top:96px!important;
  bottom:0!important;
}
.clips-shell > .clip-feed .clip{
  height:calc(100vh - 96px)!important;
  min-height:calc(100vh - 96px)!important;
  max-height:calc(100vh - 96px)!important;
}

/* v1.1.26 — center the header */
.clips-top{
  justify-content:center!important;
}

/* v1.1.27 — compact My Zone / Following row to text height */
.clips-shell > .feed-tabs{
  height:auto!important;
  min-height:0!important;
  padding:2px 0!important;
  line-height:1!important;
}
.clips-shell > .feed-tabs button{
  padding-top:0!important;
  padding-bottom:0!important;
  line-height:1!important;
}
.clips-shell > .clip-feed{
  top:74px!important;
}
.clips-shell > .clip-feed .clip{
  height:calc(100vh - 74px)!important;
  min-height:calc(100vh - 74px)!important;
  max-height:calc(100vh - 74px)!important;
}

/* v1.1.29 — keep the video box fixed before and during playback */
video.clip-media{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  background:#050505!important;
}

/* v1.1.30 — anchor creator/channel to the player itself, not the viewport */
.clip-overlay{
  top:8px!important;
  bottom:auto!important;
}
.clip-overlay .creator-link,
.clip-overlay .channel-link{
  position:relative!important;
  left:auto!important;
  bottom:auto!important;
  top:auto!important;
  margin:0!important;
  max-width:100%!important;
}
.clip-overlay .creator-link{
  display:block!important;
  margin-bottom:2px!important;
}
.clip-overlay .channel-link{
  display:block!important;
}

/* v1.1.32 — small screens: keep the player full available height.
   Do not shrink or vertically center it. Keep creator/channel above media. */
@media(max-width:500px){
  .clips-shell > .clip-feed{
    top:74px!important;
    bottom:0!important;
    height:auto!important;
    display:block!important;
    margin:0!important;
  }

  .clips-shell > .clip-feed .clip{
    width:100%!important;
    height:calc(100vh - 74px)!important;
    min-height:calc(100vh - 74px)!important;
    max-height:calc(100vh - 74px)!important;
    margin:0!important;
  }
}

.clip-media{
  z-index:1!important;
}
.clip-overlay{
  z-index:50!important;
}
.clip-overlay .creator-link,
.clip-overlay .channel-link{
  z-index:51!important;
}

/* v1.1.33 — creator and channel dark blue */
.clip-overlay .creator-link,
.clip-overlay .channel-link{
  color:darkblue!important;
}


/* v1.1.54 — replace the My Zone First header with the FeelLikeFun footer layout, positioned at the top. */
.clips-shell > .mzf-top-nav{
  position:absolute!important;
  top:0!important;
  bottom:auto!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  height:78px!important;
  min-height:78px!important;
  padding:8px 12px 9px!important;
  display:grid!important;
  grid-template-columns:repeat(5,1fr)!important;
  align-items:end!important;
  background:rgba(8,8,8,.98)!important;
  color:#fff!important;
  border:0!important;
  border-bottom:1px solid #242424!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28)!important;
  backdrop-filter:blur(10px)!important;
  z-index:80!important;
}
.clips-shell > .mzf-top-nav button{
  border:0!important;
  background:transparent!important;
  color:#bdbdbd!important;
  display:grid!important;
  place-items:center!important;
  gap:2px!important;
  cursor:pointer!important;
  border-radius:10px!important;
  font-size:12px!important;
  font-weight:600!important;
  padding:0!important;
}
.clips-shell > .mzf-top-nav button:hover,
.clips-shell > .mzf-top-nav button:focus-visible{
  color:#fff!important;
  background:#181818!important;
}
.clips-shell > .mzf-top-nav button.active{
  color:#fff!important;
  background:#1b1b1b!important;
}
.clips-shell > .mzf-top-nav button > span{font-size:21px!important;line-height:1!important;}
.clips-shell > .mzf-top-nav small{font-size:9px!important;font-weight:700!important;}
.clips-shell > .mzf-top-nav .rvrh-jm-center-action{align-self:end!important;transform:translateY(20px)!important;}
.clips-shell > .mzf-top-nav .rvrh-jm-center-action > span{
  width:54px!important;
  height:54px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:19px!important;
  background:#17211d!important;
  color:#fff!important;
  font-size:32px!important;
  box-shadow:0 9px 22px rgba(23,33,29,.25)!important;
}
.clips-shell > .mzf-top-nav .rvrh-jm-theme-control{display:grid!important;place-items:center!important;}
.clips-shell > .mzf-top-nav .rvrh-jm-client-version{
  position:absolute!important;
  right:4px!important;
  bottom:1px!important;
  font-size:8px!important;
  line-height:1!important;
  color:#777!important;
}
.clips-shell > .feed-tabs{top:78px!important;}
.clips-shell > .clip-feed{top:98px!important;}
.clips-shell > .clip-feed .clip{
  height:calc(100vh - 98px)!important;
  min-height:calc(100vh - 98px)!important;
  max-height:calc(100vh - 98px)!important;
}


/* v1.1.55 — compact app-style treatment for the FeelLikeFun navigation used as the My Zone First top bar. */
.clips-shell > .mzf-top-nav{
  height:54px!important;
  min-height:54px!important;
  padding:4px 8px!important;
  align-items:center!important;
  background:rgba(8,8,8,.94)!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 2px 12px rgba(0,0,0,.24)!important;
  backdrop-filter:blur(14px)!important;
}
.clips-shell > .mzf-top-nav button{
  min-width:0!important;
  min-height:44px!important;
  gap:0!important;
  border-radius:12px!important;
  padding:3px 6px!important;
  color:#d0d0d0!important;
}
.clips-shell > .mzf-top-nav button > span{
  font-size:22px!important;
  line-height:1!important;
}
.clips-shell > .mzf-top-nav small{
  display:none!important;
}
.clips-shell > .mzf-top-nav button.active{
  color:#fff!important;
  background:rgba(255,255,255,.10)!important;
}
.clips-shell > .mzf-top-nav .rvrh-jm-center-action{
  align-self:center!important;
  transform:none!important;
  padding:0!important;
}
.clips-shell > .mzf-top-nav .rvrh-jm-center-action > span{
  width:40px!important;
  height:40px!important;
  border-radius:14px!important;
  font-size:28px!important;
  box-shadow:0 4px 12px rgba(0,0,0,.28)!important;
}
.clips-shell > .mzf-top-nav .rvrh-jm-theme-control{
  min-width:0!important;
}
.clips-shell > .mzf-top-nav .rvrh-jm-client-version{
  right:3px!important;
  bottom:2px!important;
  font-size:7px!important;
  opacity:.6!important;
}
.clips-shell > .feed-tabs{top:54px!important;}
.clips-shell > .clip-feed{top:74px!important;}
.clips-shell > .clip-feed .clip{
  height:calc(100vh - 74px)!important;
  min-height:calc(100vh - 74px)!important;
  max-height:calc(100vh - 74px)!important;
}


/* v1.1.56 — force the top app navigation into one true horizontal row. */
.clips-shell > .mzf-top-nav{
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:space-between!important;
}
.clips-shell > .mzf-top-nav > button,
.clips-shell > .mzf-top-nav > .rvrh-jm-theme-control{
  flex:1 1 20%!important;
  width:20%!important;
  min-width:0!important;
  height:44px!important;
  margin:0!important;
}
.clips-shell > .mzf-top-nav > .rvrh-jm-theme-control{
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:center!important;
}
.clips-shell > .mzf-top-nav > .rvrh-jm-theme-control > button{
  width:100%!important;
  height:44px!important;
  margin:0!important;
}


/* v1.1.57 — make the top app navigation inherit the active My Zone First theme. */
html[data-mzf-theme="default"] .clips-shell > .mzf-top-nav{
  background:rgba(8,8,8,.94)!important;
  border-bottom-color:rgba(255,255,255,.10)!important;
}
html[data-mzf-theme="default"] .clips-shell > .mzf-top-nav button{color:#d0d0d0!important;}
html[data-mzf-theme="default"] .clips-shell > .mzf-top-nav button:hover,
html[data-mzf-theme="default"] .clips-shell > .mzf-top-nav button:focus-visible,
html[data-mzf-theme="default"] .clips-shell > .mzf-top-nav button.active{
  color:#fff!important;background:rgba(255,255,255,.10)!important;
}
html[data-mzf-theme="default"] .clips-shell > .mzf-top-nav .rvrh-jm-center-action > span{
  background:#17211d!important;color:#fff!important;
}

html[data-mzf-theme="neon-zone"] .clips-shell > .mzf-top-nav{
  background:linear-gradient(90deg,rgba(0,0,0,.97),rgba(5,18,28,.97))!important;
  border-bottom-color:rgba(0,215,232,.38)!important;
  box-shadow:0 2px 12px rgba(0,174,255,.10)!important;
}
html[data-mzf-theme="neon-zone"] .clips-shell > .mzf-top-nav button{color:#62e8f5!important;}
html[data-mzf-theme="neon-zone"] .clips-shell > .mzf-top-nav button:hover,
html[data-mzf-theme="neon-zone"] .clips-shell > .mzf-top-nav button:focus-visible,
html[data-mzf-theme="neon-zone"] .clips-shell > .mzf-top-nav button.active{
  color:#fff!important;background:rgba(0,215,232,.13)!important;
}
html[data-mzf-theme="neon-zone"] .clips-shell > .mzf-top-nav .rvrh-jm-center-action > span{
  background:linear-gradient(110deg,#087fff,#00bee8 52%,#18ec63)!important;color:#fff!important;
}

html[data-mzf-theme="midnight-blue"] .clips-shell > .mzf-top-nav{
  background:rgba(5,12,29,.96)!important;
  border-bottom-color:#19375e!important;
  box-shadow:0 2px 12px rgba(35,92,180,.12)!important;
}
html[data-mzf-theme="midnight-blue"] .clips-shell > .mzf-top-nav button{color:#a7c8ff!important;}
html[data-mzf-theme="midnight-blue"] .clips-shell > .mzf-top-nav button:hover,
html[data-mzf-theme="midnight-blue"] .clips-shell > .mzf-top-nav button:focus-visible,
html[data-mzf-theme="midnight-blue"] .clips-shell > .mzf-top-nav button.active{
  color:#fff!important;background:#0b1d38!important;
}
html[data-mzf-theme="midnight-blue"] .clips-shell > .mzf-top-nav .rvrh-jm-center-action > span{
  background:#2b6fff!important;color:#fff!important;
}

html[data-mzf-theme="fire"] .clips-shell > .mzf-top-nav{
  background:linear-gradient(90deg,rgba(10,0,0,.97),rgba(32,7,0,.97))!important;
  border-bottom-color:rgba(255,102,0,.45)!important;
  box-shadow:0 2px 12px rgba(255,72,0,.11)!important;
}
html[data-mzf-theme="fire"] .clips-shell > .mzf-top-nav button{color:#ffc08a!important;}
html[data-mzf-theme="fire"] .clips-shell > .mzf-top-nav button:hover,
html[data-mzf-theme="fire"] .clips-shell > .mzf-top-nav button:focus-visible,
html[data-mzf-theme="fire"] .clips-shell > .mzf-top-nav button.active{
  color:#fff!important;background:rgba(255,102,0,.15)!important;
}
html[data-mzf-theme="fire"] .clips-shell > .mzf-top-nav .rvrh-jm-center-action > span{
  background:linear-gradient(110deg,#c41d00,#ff5a00 55%,#ffbf24)!important;color:#fff!important;
}

html[data-mzf-theme="water"] .clips-shell > .mzf-top-nav{
  background:linear-gradient(90deg,rgba(0,16,24,.97),rgba(0,36,58,.97))!important;
  border-bottom-color:rgba(0,202,238,.40)!important;
  box-shadow:0 2px 12px rgba(0,160,210,.11)!important;
}
html[data-mzf-theme="water"] .clips-shell > .mzf-top-nav button{color:#93f1ec!important;}
html[data-mzf-theme="water"] .clips-shell > .mzf-top-nav button:hover,
html[data-mzf-theme="water"] .clips-shell > .mzf-top-nav button:focus-visible,
html[data-mzf-theme="water"] .clips-shell > .mzf-top-nav button.active{
  color:#fff!important;background:rgba(0,204,231,.14)!important;
}
html[data-mzf-theme="water"] .clips-shell > .mzf-top-nav .rvrh-jm-center-action > span{
  background:linear-gradient(110deg,#0078bd,#00add2 55%,#31e6cd)!important;color:#fff!important;
}

/* v1.1.58 — top navigation buttons blend into the bar; only selected is purple. */
.clips-shell > .mzf-top-nav button,
.clips-shell > .mzf-top-nav button:hover,
.clips-shell > .mzf-top-nav button:focus-visible{
  background:transparent!important;
}
.clips-shell > .mzf-top-nav .rvrh-jm-center-action > span{
  background:transparent!important;
  box-shadow:none!important;
}
.clips-shell > .mzf-top-nav button.active,
.clips-shell > .mzf-top-nav button.active:hover,
.clips-shell > .mzf-top-nav button.active:focus-visible{
  background:#7c3aed!important;
  color:#fff!important;
}
.clips-shell > .mzf-top-nav .rvrh-jm-center-action.active > span{
  background:#7c3aed!important;
  color:#fff!important;
}


/* v1.1.59 — keep My Zone First visually contained like an app on large screens. */
@media (min-width: 760px){
  body{
    overflow:hidden!important;
  }
  #app{
    width:100%!important;
    height:100vh!important;
    display:flex!important;
    justify-content:center!important;
    align-items:stretch!important;
  }
  #app > .clips-shell,
  .clips-shell{
    width:520px!important;
    max-width:520px!important;
    height:100vh!important;
    min-height:100vh!important;
    margin:0 auto!important;
    border-left:1px solid rgba(255,255,255,.10)!important;
    border-right:1px solid rgba(255,255,255,.10)!important;
    box-shadow:0 0 34px rgba(0,0,0,.42)!important;
    overflow:hidden!important;
  }
  .clips-shell > .mzf-top-nav,
  .clips-shell > .feed-tabs{
    left:0!important;
    right:0!important;
    width:100%!important;
    max-width:none!important;
  }
}


/* v1.1.60 — keep desktop scroll controls inside the contained app frame. */
@media (min-width: 760px){
  .clips-shell > .viewer-nav{
    position:absolute!important;
    right:18px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
  }
}


/* v1.1.65 — restore the v1.1.51 map canvas presentation for the header Map trigger. */
.mzf-google-map{width:100%;height:min(68vh,620px);min-height:360px;border-radius:12px;overflow:hidden;background:#191919}


/* v1.1.68 — My Zone First Notification Platform Core popup viewer. */
.clips-shell > .mzf-top-nav .mzf-notification-nav{position:relative!important}
.clips-shell > .mzf-top-nav .mzf-notification-nav>span{position:relative!important;display:inline-grid!important;place-items:center!important}
.mzf-notification-badge{position:absolute;right:-11px;top:-8px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#d93025;color:#fff;font-size:10px;line-height:17px;text-align:center;font-weight:800;box-shadow:0 1px 5px #0008}
.mzf-notification-badge[hidden]{display:none!important}
.mzf-notifications-popup{position:absolute;inset:0;z-index:220;background:rgba(0,0,0,.48);display:flex;align-items:flex-start;justify-content:center;padding:88px 12px 12px}
.mzf-notifications-popup[hidden]{display:none!important}
.mzf-notifications-card{width:min(350px,calc(100% - 12px));max-height:min(570px,calc(100% - 96px));overflow:hidden;background:#fff;color:#171717;border-radius:14px;box-shadow:0 18px 55px rgba(0,0,0,.45);display:flex;flex-direction:column}
.mzf-notifications-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px 8px;border-bottom:1px solid rgba(0,0,0,.1)}
.mzf-notifications-head>strong{font-size:15px}.mzf-notifications-head>div{display:flex;align-items:center;gap:6px}
.mzf-notifications-text-button{border:0;background:transparent;color:#222;text-decoration:underline;cursor:pointer;font-size:11px;padding:3px 2px}
.mzf-notifications-close{width:28px;height:28px;border:0;border-radius:50%;background:transparent;color:#222;font-size:22px;line-height:1;cursor:pointer;padding:0}
.mzf-notification-filters{display:flex;gap:4px;padding:6px 8px;border-bottom:1px solid rgba(0,0,0,.08)}
.mzf-notification-filters button{border:1px solid rgba(0,0,0,.15);background:transparent;color:#222;border-radius:999px;padding:4px 9px;font-size:11px;cursor:pointer}
.mzf-notification-filters button.is-active{background:rgba(0,0,0,.08)}
.mzf-notifications-list{overflow:auto;padding:4px}
.mzf-notification-item{width:100%;border:0;border-radius:10px;background:transparent;text-align:left;padding:8px;display:flex;align-items:flex-start;justify-content:space-between;gap:8px;cursor:pointer;color:#171717}
.mzf-notification-item:hover{background:rgba(0,0,0,.05)}.mzf-notification-item.is-unread{background:rgba(26,115,232,.08)}
.mzf-notification-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.mzf-notification-copy strong{font-size:13px;line-height:1.2}.mzf-notification-copy span{font-size:12px;line-height:1.28}
.mzf-notification-meta{display:flex;align-items:flex-start;gap:4px}.mzf-notification-meta small{white-space:nowrap;font-size:10px;opacity:.65;padding-top:1px}.mzf-notification-meta button{border:0;background:transparent;color:#222;cursor:pointer;font-size:15px;line-height:1;padding:0 1px;opacity:.55}.mzf-notification-meta button:hover{opacity:1}
.mzf-notifications-empty{padding:20px 10px;text-align:center;opacity:.7;font-size:13px}


/* v1.1.72 — Notification preferences inside the existing notification popup. */
.mzf-notification-filters[hidden],.mzf-notifications-text-button[hidden]{display:none!important}
.mzf-notification-settings{overflow:auto;padding:8px 10px 12px}
.mzf-notification-settings-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;opacity:.55;padding:10px 2px 5px}
.mzf-notification-setting-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 3px;border-bottom:1px solid rgba(0,0,0,.07);font-size:12px;color:#171717}
.mzf-notification-setting-row>span{display:flex;flex-direction:column;gap:2px}.mzf-notification-setting-row small{font-size:10px;opacity:.65;line-height:1.25}
.mzf-notification-setting-row input{flex:0 0 auto}.mzf-notification-pause{padding-top:4px}.mzf-notification-preference-status{min-height:18px;padding:8px 2px 0;font-size:10px;opacity:.65}


/* v1.1.74 — notification surfaces follow the active My Zone First theme. */
html[data-mzf-theme="default"] .mzf-notifications-popup{background:rgba(0,0,0,.58)!important}
html[data-mzf-theme="default"] .mzf-notifications-card{background:#111820!important;color:#f5f7fa!important;border:1px solid #303946!important}
html[data-mzf-theme="default"] .mzf-notifications-head,
html[data-mzf-theme="default"] .mzf-notification-filters{border-color:rgba(255,255,255,.10)!important}
html[data-mzf-theme="default"] .mzf-notifications-text-button,
html[data-mzf-theme="default"] .mzf-notifications-close,
html[data-mzf-theme="default"] .mzf-notification-filters button,
html[data-mzf-theme="default"] .mzf-notification-item,
html[data-mzf-theme="default"] .mzf-notification-meta button,
html[data-mzf-theme="default"] .mzf-notification-setting-row{color:#f5f7fa!important}
html[data-mzf-theme="default"] .mzf-notification-filters button{border-color:#3a4552!important}
html[data-mzf-theme="default"] .mzf-notification-filters button.is-active,
html[data-mzf-theme="default"] .mzf-notification-item:hover{background:rgba(255,255,255,.08)!important}
html[data-mzf-theme="default"] .mzf-notification-item.is-unread{background:rgba(37,99,235,.20)!important}
html[data-mzf-theme="default"] .mzf-notification-setting-row{border-bottom-color:rgba(255,255,255,.08)!important}

html[data-mzf-theme="neon-zone"] .mzf-notifications-popup{background:rgba(0,7,13,.68)!important}
html[data-mzf-theme="neon-zone"] .mzf-notifications-card{background:linear-gradient(155deg,#02080d,#061722)!important;color:#eaffff!important;border:1px solid rgba(0,215,232,.38)!important;box-shadow:0 18px 55px rgba(0,174,255,.24)!important}
html[data-mzf-theme="neon-zone"] .mzf-notifications-head,
html[data-mzf-theme="neon-zone"] .mzf-notification-filters{border-color:rgba(0,215,232,.24)!important}
html[data-mzf-theme="neon-zone"] .mzf-notifications-text-button,
html[data-mzf-theme="neon-zone"] .mzf-notifications-close,
html[data-mzf-theme="neon-zone"] .mzf-notification-filters button,
html[data-mzf-theme="neon-zone"] .mzf-notification-item,
html[data-mzf-theme="neon-zone"] .mzf-notification-meta button,
html[data-mzf-theme="neon-zone"] .mzf-notification-setting-row{color:#dffcff!important}
html[data-mzf-theme="neon-zone"] .mzf-notification-filters button{border-color:rgba(0,215,232,.42)!important}
html[data-mzf-theme="neon-zone"] .mzf-notification-filters button.is-active,
html[data-mzf-theme="neon-zone"] .mzf-notification-item:hover{background:rgba(0,215,232,.12)!important}
html[data-mzf-theme="neon-zone"] .mzf-notification-item.is-unread{background:rgba(0,190,232,.19)!important}
html[data-mzf-theme="neon-zone"] .mzf-notification-setting-row{border-bottom-color:rgba(0,215,232,.16)!important}

html[data-mzf-theme="midnight-blue"] .mzf-notifications-popup{background:rgba(1,5,15,.67)!important}
html[data-mzf-theme="midnight-blue"] .mzf-notifications-card{background:#07101f!important;color:#edf4ff!important;border:1px solid #244d7e!important;box-shadow:0 18px 55px rgba(35,92,180,.25)!important}
html[data-mzf-theme="midnight-blue"] .mzf-notifications-head,
html[data-mzf-theme="midnight-blue"] .mzf-notification-filters{border-color:#18345b!important}
html[data-mzf-theme="midnight-blue"] .mzf-notifications-text-button,
html[data-mzf-theme="midnight-blue"] .mzf-notifications-close,
html[data-mzf-theme="midnight-blue"] .mzf-notification-filters button,
html[data-mzf-theme="midnight-blue"] .mzf-notification-item,
html[data-mzf-theme="midnight-blue"] .mzf-notification-meta button,
html[data-mzf-theme="midnight-blue"] .mzf-notification-setting-row{color:#dce9ff!important}
html[data-mzf-theme="midnight-blue"] .mzf-notification-filters button{border-color:#315f9a!important}
html[data-mzf-theme="midnight-blue"] .mzf-notification-filters button.is-active,
html[data-mzf-theme="midnight-blue"] .mzf-notification-item:hover{background:#0b1d38!important}
html[data-mzf-theme="midnight-blue"] .mzf-notification-item.is-unread{background:#102952!important}
html[data-mzf-theme="midnight-blue"] .mzf-notification-setting-row{border-bottom-color:#18345b!important}

html[data-mzf-theme="fire"] .mzf-notifications-popup{background:rgba(12,0,0,.69)!important}
html[data-mzf-theme="fire"] .mzf-notifications-card{background:linear-gradient(155deg,#120200,#2a0900)!important;color:#fff4e8!important;border:1px solid rgba(255,102,0,.48)!important;box-shadow:0 18px 55px rgba(255,72,0,.22)!important}
html[data-mzf-theme="fire"] .mzf-notifications-head,
html[data-mzf-theme="fire"] .mzf-notification-filters{border-color:rgba(255,102,0,.28)!important}
html[data-mzf-theme="fire"] .mzf-notifications-text-button,
html[data-mzf-theme="fire"] .mzf-notifications-close,
html[data-mzf-theme="fire"] .mzf-notification-filters button,
html[data-mzf-theme="fire"] .mzf-notification-item,
html[data-mzf-theme="fire"] .mzf-notification-meta button,
html[data-mzf-theme="fire"] .mzf-notification-setting-row{color:#ffe2c6!important}
html[data-mzf-theme="fire"] .mzf-notification-filters button{border-color:rgba(255,111,0,.48)!important}
html[data-mzf-theme="fire"] .mzf-notification-filters button.is-active,
html[data-mzf-theme="fire"] .mzf-notification-item:hover{background:rgba(255,102,0,.13)!important}
html[data-mzf-theme="fire"] .mzf-notification-item.is-unread{background:rgba(255,90,0,.20)!important}
html[data-mzf-theme="fire"] .mzf-notification-setting-row{border-bottom-color:rgba(255,102,0,.18)!important}

html[data-mzf-theme="water"] .mzf-notifications-popup{background:rgba(0,10,16,.68)!important}
html[data-mzf-theme="water"] .mzf-notifications-card{background:linear-gradient(155deg,#00131d,#002b42)!important;color:#e9fffe!important;border:1px solid rgba(0,202,238,.42)!important;box-shadow:0 18px 55px rgba(0,160,210,.23)!important}
html[data-mzf-theme="water"] .mzf-notifications-head,
html[data-mzf-theme="water"] .mzf-notification-filters{border-color:rgba(0,202,238,.24)!important}
html[data-mzf-theme="water"] .mzf-notifications-text-button,
html[data-mzf-theme="water"] .mzf-notifications-close,
html[data-mzf-theme="water"] .mzf-notification-filters button,
html[data-mzf-theme="water"] .mzf-notification-item,
html[data-mzf-theme="water"] .mzf-notification-meta button,
html[data-mzf-theme="water"] .mzf-notification-setting-row{color:#d9fffc!important}
html[data-mzf-theme="water"] .mzf-notification-filters button{border-color:rgba(0,202,238,.46)!important}
html[data-mzf-theme="water"] .mzf-notification-filters button.is-active,
html[data-mzf-theme="water"] .mzf-notification-item:hover{background:rgba(0,204,231,.12)!important}
html[data-mzf-theme="water"] .mzf-notification-item.is-unread{background:rgba(0,173,210,.20)!important}
html[data-mzf-theme="water"] .mzf-notification-setting-row{border-bottom-color:rgba(0,202,238,.18)!important}

/* v1.1.77 — application navigation owns its styles on every host site. */
body.rvrh-myzonefirst-standalone #app .clips-shell > .mzf-top-nav > button{
  appearance:none!important;
  -webkit-appearance:none!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background-image:none!important;
  text-decoration:none!important;
  text-transform:none!important;
  letter-spacing:normal!important;
  font-family:"Segoe UI",Arial,sans-serif!important;
  font-size:12px!important;
  font-weight:600!important;
  line-height:1!important;
  margin:0!important;
  padding:3px 6px!important;
  border-radius:12px!important;
  min-width:0!important;
  min-height:44px!important;
  height:44px!important;
  display:grid!important;
  place-items:center!important;
  gap:0!important;
  cursor:pointer!important;
}
body.rvrh-myzonefirst-standalone #app .clips-shell > .mzf-top-nav > button:focus-visible{
  outline:2px solid #fff!important;
  outline-offset:-3px!important;
}
html[data-mzf-theme="default"] body.rvrh-myzonefirst-standalone #app .clips-shell > .mzf-top-nav > button{
  background:transparent!important;
  color:#d0d0d0!important;
}
html[data-mzf-theme="default"] body.rvrh-myzonefirst-standalone #app .clips-shell > .mzf-top-nav > button.active{
  background:#222!important;
  color:#fff!important;
}
html[data-mzf-theme="default"] body.rvrh-myzonefirst-standalone #app .clips-shell > .mzf-top-nav .rvrh-jm-center-action > span{
  background:#17211d!important;
  box-shadow:none!important;
  color:#fff!important;
}

/* v1.1.78 — same-domain authentication popup. */
#mzfAuthPopup{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.75);overflow:auto;font-family:"Segoe UI",Arial,sans-serif;color:#eef2f7}
#mzfAuthPopup .mzf-auth-card{width:100%;max-width:440px;max-height:calc(100dvh - 40px);overflow:auto;padding:22px;border:1px solid #334155;border-radius:16px;background:#111827;box-shadow:0 16px 55px #0008}
#mzfAuthPopup .mzf-auth-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
#mzfAuthPopup button{font:inherit;cursor:pointer;text-transform:none;border:0;box-shadow:none}
#mzfAuthPopup #mzfAuthClose{padding:3px 9px;background:transparent;color:#fff;font-size:26px}
#mzfAuthPopup h2{color:#fff;margin:18px 0;font-size:24px}
#mzfAuthPopup label{color:#eef2f7}
#mzfAuthPopup input{width:100%;background:#0f172a;color:#fff;border:1px solid #475569;border-radius:9px;padding:11px;font:inherit}
#mzfAuthPopup .primary{background:#2563eb;color:#fff;border-radius:9px;padding:11px;width:100%;margin-top:12px}
#mzfAuthPopup button:disabled{opacity:.6;cursor:wait}
#mzfAuthPopup .mzf-auth-links{display:grid;gap:10px;margin-top:18px;text-align:center}
#mzfAuthPopup .mzf-auth-links button{background:transparent;color:#93c5fd;padding:4px}
#mzfAuthPopup [hidden]{display:none!important}
#mzfAuthPopup button:focus-visible,#mzfAuthPopup input:focus-visible{outline:2px solid #60a5fa;outline-offset:2px}