#footer-bar { border-top: 1px solid #e1e9f3; background: rgba(255, 255, 255, .97); box-shadow: 0 -8px 25px rgba(20, 54, 101, .08); }
#footer-bar a { min-height: 60px; padding-top: 8px; color: #62758d; text-decoration: none; }
#footer-bar a i { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-size: 0 !important; line-height: 1 !important; color: currentColor !important; }
#footer-bar a i::before { content: '' !important; display: block; width: 23px; height: 23px; background: currentColor; -webkit-mask-image: var(--voicer-nav-icon); mask-image: var(--voicer-nav-icon); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
#footer-bar a:nth-of-type(1) i { --voicer-nav-icon: url('/icons/outline-home.svg'); }
#footer-bar a:nth-of-type(2) i { --voicer-nav-icon: url('/icons/outline-star.svg'); }
#footer-bar a:nth-of-type(3) i { --voicer-nav-icon: url('/icons/outline-video.svg'); }
#footer-bar a:nth-of-type(4) i { --voicer-nav-icon: url('/icons/outline-plus.svg'); }
#footer-bar a:nth-of-type(5) i { --voicer-nav-icon: url('/icons/outline-menu.svg'); }
#footer-bar a span { margin-top: 2px; font-size: 11px; font-weight: 650; opacity: 1; color: inherit; }
#footer-bar a:hover, #footer-bar a.active-nav, #footer-bar a:focus-visible { color: #195fe6 !important; }
#footer-bar a:focus-visible { outline: 2px solid #75adfa; outline-offset: -3px; }

/* The account menu uses the same blue surfaces and outline icons as the feed. */
.header .voicer-account-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin: 0 12px 0 0;
    padding: 5px;
    border: 1px solid #d6e6f8;
    border-radius: 50%;
    background: #f4f9ff;
    cursor: pointer;
}
.header .voicer-account-trigger:hover,
.header .voicer-account-trigger[aria-expanded="true"] { border-color: #90bdf1; background: #eaf3ff; }
.header .voicer-account-trigger:focus-visible { outline: 3px solid #4b93f5; outline-offset: 2px; }
.voicer-account-trigger #navProfilePhoto { display: block; width: 35px; height: 35px; margin: 0; object-fit: cover; }
.header .voicer-account-menu {
    width: min(340px, calc(100vw - 24px));
    padding: 12px;
    overflow: hidden;
    border: 1px solid #dce8f7;
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(22, 57, 104, .18);
    color: #18304e;
    font-family: "Voicer Inter", system-ui, sans-serif;
}
.voicer-account-menu__profile { display: flex; align-items: center; gap: 11px; min-height: 76px; padding: 11px; border-radius: 12px; background: #f1f7ff; text-decoration: none; }
.voicer-account-menu__profile:hover { background: #e5f1ff; text-decoration: none; }
.voicer-account-menu__profile img { flex: 0 0 46px; width: 46px; height: 46px; object-fit: cover; }
.voicer-account-menu__identity { display: grid; flex: 1; min-width: 0; gap: 2px; }
.voicer-account-menu__identity strong { overflow: hidden; color: #173655; font-size: 15px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.voicer-account-menu__identity small { color: #68809b; font-size: 12px; }
.voicer-account-menu__chevron { width: 17px; height: 17px; background: #6a819d; -webkit-mask: url('/icons/outline-chevron-right.svg') center / contain no-repeat; mask: url('/icons/outline-chevron-right.svg') center / contain no-repeat; }
.voicer-account-menu__section-label { margin: 15px 9px 7px; color: #7387a2; font-size: 11px; font-weight: 780; letter-spacing: .08em; }
.voicer-account-menu__item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: #28445f; font: inherit; font-size: 14px; font-weight: 650; text-align: left; text-decoration: none; cursor: pointer; }
.voicer-account-menu__item:hover,
.voicer-account-menu__item:focus-visible { background: #edf5ff; color: #155bc4; text-decoration: none; }
.voicer-account-menu__item:focus-visible { outline: 2px solid #4b93f5; outline-offset: -2px; }
.voicer-account-menu__icon { flex: 0 0 20px; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--account-icon) center / contain no-repeat; mask: var(--account-icon) center / contain no-repeat; }
.voicer-account-menu__divider { height: 1px; margin: 8px 7px; background: #e3ecf7; }
.voicer-account-menu form { margin: 0; }
.voicer-account-menu__logout { color: #b64150; }
.voicer-account-menu__logout:hover { background: #fff1f3; color: #a62f41; }
body.theme-dark .header .voicer-account-trigger { border-color: #3c5574; background: #243852; }
body.theme-dark .header .voicer-account-trigger:hover,
body.theme-dark .header .voicer-account-trigger[aria-expanded="true"] { background: #31537d; }
body.theme-dark .header .voicer-account-menu { border-color: #344d6a; background: #1d2b40; color: #eaf3ff; }
body.theme-dark .voicer-account-menu__profile { background: #263b57; }
body.theme-dark .voicer-account-menu__profile:hover,
body.theme-dark .voicer-account-menu__item:hover,
body.theme-dark .voicer-account-menu__item:focus-visible { background: #31537d; }
body.theme-dark .voicer-account-menu__identity strong { color: #f0f6ff; }
body.theme-dark .voicer-account-menu__identity small,
body.theme-dark .voicer-account-menu__section-label { color: #a8bdd7; }
body.theme-dark .voicer-account-menu__item { color: #d6e7fa; }
body.theme-dark .voicer-account-menu__divider { background: #344d6a; }
body.theme-dark .voicer-account-menu__logout { color: #ffacb5; }

/* The home Short viewer keeps the full player height with a focused desktop width. */
.voicer-shorts-viewer .modal-dialog { width: min(760px, 100vw); max-width: none; height: 100dvh; margin: 0 auto; }
.voicer-shorts-viewer .modal-content { width: 100%; height: 100dvh; margin: 0; }
.voicer-shorts-viewer .modal-content { display: flex; flex-direction: column; border: 0; border-radius: 0; background: #fff; }
.voicer-shorts-viewer .modal-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 58px; min-height: 58px; padding: 8px 16px; border-bottom: 1px solid #dce8f7; background: #fff; }
.voicer-shorts-viewer__heading { display: flex; align-items: center; gap: 15px; min-width: 0; }
.voicer-shorts-viewer__heading > span { color: #18304e; font-family: "Voicer Inter", system-ui, sans-serif; font-size: 18px; font-weight: 800; }
.voicer-shorts-viewer__creator { display: flex; align-items: center; gap: 7px; min-width: 0; color: #516b8b; font-size: 13px; font-weight: 650; text-decoration: none; }
.voicer-shorts-viewer__creator:hover { color: #155bc4; text-decoration: none; }
.voicer-shorts-viewer__creator img { width: 31px; height: 31px; border-radius: 50%; object-fit: cover; }
.voicer-shorts-viewer__creator span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voicer-shorts-viewer__close { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #eaf3ff; color: #264b75; cursor: pointer; }
.voicer-shorts-viewer__close:hover { background: #dcecff; }
.voicer-shorts-viewer__close:focus-visible { outline: 3px solid #4b93f5; outline-offset: 2px; }
.voicer-shorts-viewer__close span { width: 18px; height: 18px; background: currentColor; -webkit-mask: url('/icons/outline-close.svg') center / contain no-repeat; mask: url('/icons/outline-close.svg') center / contain no-repeat; }
.voicer-shorts-viewer .modal-body { flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; }
.voicer-shorts-viewer .modal-body iframe { display: block; width: 100%; height: 100%; border: 0; }
body.theme-dark .voicer-shorts-viewer .modal-content { background: #111927; }
body.theme-dark .voicer-shorts-viewer .modal-header { border-color: #334a68; background: #1b2b40; }
body.theme-dark .voicer-shorts-viewer__heading > span { color: #f1f7ff; }
body.theme-dark .voicer-shorts-viewer__creator { color: #c7d9ef; }
body.theme-dark .voicer-shorts-viewer__close { background: #2b4565; color: #e8f2ff; }
@media (max-width: 600px) {
    .voicer-shorts-viewer .modal-header { padding-inline: 12px; }
    .voicer-shorts-viewer__heading { gap: 9px; }
    .voicer-shorts-viewer__heading > span { font-size: 16px; }
}