:root {
    --vt-accent: #fb3d28;
    --vt-accent-soft: #ff7851;
    --vt-surface: #ffffff;
    --vt-canvas: #f5f4f2;
    --vt-text: #252525;
    --vt-muted: #6f6f6f;
    --vt-sidebar-expanded: 240px;
    --vt-sidebar-collapsed: 56px;
    --vt-header-height: 60px;
    --vt-sidebar-width: var(--vt-sidebar-expanded);
    --vt-motion: 180ms ease;
    --vt-brand-motion: 360ms cubic-bezier(.22, .8, .22, 1);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { background: var(--vt-canvas); color: var(--vt-text); padding: 0; }
body.sidebar-collapsed { --vt-sidebar-width: var(--vt-sidebar-collapsed); }
.app-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.top-ribbon {
    align-items: center;
    background: var(--vt-accent);
    display: flex;
    height: var(--vt-header-height);
    justify-content: space-between;
    left: var(--vt-sidebar-width);
    padding: 0 12px 0 16px;
    position: fixed;
    right: 0;
    top: 0;
    transition: left var(--vt-motion), padding-left var(--vt-motion);
    z-index: 1030;
}
body:not(.has-app-shell) .top-ribbon { left: 0; }
.brand-link { align-items: center; display: inline-flex; height: 46px; }
.brand-link .logo { height: 43px; max-width: 250px; object-fit: contain; width: auto; }
.brand-link--wordmark {
    height: 48px;
    left: 48px;
    position: fixed;
    top: 6px;
    transition: left var(--vt-brand-motion);
    z-index: 1045;
}
.brand-wordmark { align-items: center; display: flex; height: 48px; overflow: visible; position: relative; width: 184px; }
.brand-wordmark .logo {
    clip-path: inset(-3px -3px -3px 18.5%);
    display: block;
    filter: brightness(0) saturate(100%) invert(62%) sepia(97%) saturate(2475%) hue-rotate(326deg) brightness(103%) contrast(101%) drop-shadow(0 1px 0 #ff7851);
    height: 44px;
    max-width: none;
    transform: translateX(-18.5%);
    transition: filter 220ms ease;
}
body.sidebar-collapsed .brand-link--wordmark { left: var(--vt-sidebar-collapsed); }
body.sidebar-collapsed .brand-wordmark .logo { filter: drop-shadow(0 1px 0 #fff); }

.brand-nav-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--vt-accent-soft);
    cursor: pointer;
    display: inline-flex;
    height: 40px;
    justify-content: center;
    left: 8px;
    padding: 0;
    position: fixed;
    top: 10px;
    transition: left var(--vt-brand-motion), color 220ms ease, background-color 160ms ease, box-shadow 160ms ease;
    width: 40px;
    z-index: 1050;
}
.brand-nav-toggle:hover { background: #fff0eb; color: var(--vt-accent-soft); }
.brand-nav-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(251, 61, 40, .24); outline: none; }
.brand-nav-toggle .thumb-toggle-icon { display: block; height: 24px; object-fit: contain; transform-origin: 48% 56%; width: 24px; }
.brand-nav-toggle::before {
    border: 2px solid currentColor;
    border-radius: 50%;
    content: "";
    height: 28px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 28px;
}
.thumb-sparks { height: 1px; left: 50%; pointer-events: none; position: absolute; top: 50%; width: 1px; }
.thumb-sparks i { background: currentColor; border-radius: 99px; height: 4px; left: -2px; opacity: 0; position: absolute; top: -2px; transform: rotate(var(--spark-angle)) translateY(-10px) scale(.3); width: 4px; }
body.sidebar-collapsed .brand-nav-toggle { color: #fff; left: 8px; }
body.sidebar-collapsed .brand-nav-toggle .thumb-toggle-icon { filter: brightness(0) invert(1); }
body.sidebar-collapsed .brand-nav-toggle:hover { background: rgba(255, 255, 255, .14); color: #fff; }
body.sidebar-collapsed .brand-nav-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(255, 255, 255, .42); }
.brand-nav-toggle.is-animating .thumb-toggle-icon { animation: thumb-like-pop 460ms cubic-bezier(.2, .85, .3, 1); }
.brand-nav-toggle.is-animating::before { animation: thumb-like-ring 460ms ease-out; }
.brand-nav-toggle.is-animating .thumb-sparks i { animation: thumb-like-spark 420ms ease-out; }
.brand-nav-toggle.is-animating .thumb-sparks i:nth-child(2) { animation-delay: 18ms; }
.brand-nav-toggle.is-animating .thumb-sparks i:nth-child(3) { animation-delay: 34ms; }
.brand-nav-toggle.is-animating .thumb-sparks i:nth-child(4) { animation-delay: 50ms; }
.brand-nav-toggle.is-animating .thumb-sparks i:nth-child(5) { animation-delay: 66ms; }
.brand-nav-toggle.is-collapsing { animation: thumb-arc-to-brand 420ms cubic-bezier(.22, .8, .22, 1); }
.brand-nav-toggle.is-expanding { animation: thumb-arc-to-rail 420ms cubic-bezier(.22, .8, .22, 1); }

@keyframes thumb-like-pop {
    0% { transform: rotate(0) scale(1); }
    20% { transform: rotate(-9deg) scale(.78); }
    52% { transform: rotate(4deg) scale(1.24); }
    74% { transform: rotate(-2deg) scale(.94); }
    100% { transform: rotate(0) scale(1); }
}
@keyframes thumb-like-ring {
    0% { opacity: .7; transform: scale(.55); }
    100% { opacity: 0; transform: scale(1.65); }
}
@keyframes thumb-like-spark {
    0% { opacity: 0; transform: rotate(var(--spark-angle)) translateY(-9px) scale(.2); }
    35% { opacity: .9; }
    100% { opacity: 0; transform: rotate(var(--spark-angle)) translateY(-21px) scale(1); }
}
@keyframes thumb-arc-to-brand {
    0% { transform: translateY(0) rotate(0); }
    42% { transform: translateY(-7px) rotate(7deg); }
    72% { transform: translateY(2px) rotate(-2deg); }
    100% { transform: translateY(0) rotate(0); }
}
@keyframes thumb-arc-to-rail {
    0% { transform: translateY(0) rotate(0); }
    42% { transform: translateY(7px) rotate(-7deg); }
    72% { transform: translateY(-2px) rotate(2deg); }
    100% { transform: translateY(0) rotate(0); }
}
.profile-link {
    align-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 600;
    gap: 7px;
    line-height: 1;
    margin-left: auto;
    padding: 5px 8px 5px 12px;
    text-decoration: none;
}
.profile-link:hover { background: #fff; color: var(--vt-accent); text-decoration: none; }
.profile-link .app-icon { height: 20px; width: 20px; }
.email-alert { left: 50%; max-height: calc(100vh - 24px); overflow: auto; position: fixed; top: 68px; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); z-index: 1100; }
.email-button { background: var(--vt-accent); border-color: var(--vt-accent); color: #fff; }
.email-button:hover, .email-button:focus { background: #c72c20; border-color: #c72c20; color: #fff; }

.sidebar {
    background: var(--vt-surface);
    bottom: 0;
    box-shadow: 1px 0 0 rgba(251, 61, 40, .18);
    left: 0;
    position: fixed;
    top: 0;
    transition: width var(--vt-motion);
    width: var(--vt-sidebar-width);
    z-index: 1040;
}
body.sidebar-collapsed .sidebar {
    background: linear-gradient(180deg, var(--vt-accent) 0%, #f84931 58%, #e93321 100%);
    box-shadow: 2px 0 12px rgba(105, 26, 15, .14);
}
.sidebar-scrim { display: none; }
.sidebar-controls { height: var(--vt-header-height); }
.sidebar-nav {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--vt-header-height));
    overflow: hidden;
    padding: 8px 8px 12px;
}
.sidebar-nav-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--vt-accent-soft) transparent;
    scrollbar-width: thin;
}
.sidebar-nav-main::-webkit-scrollbar { width: 5px; }
.sidebar-nav-main::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.sidebar-nav-main::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav-main::-webkit-scrollbar-thumb { background: var(--vt-accent-soft); border-radius: 999px; }
body.sidebar-collapsed .sidebar-nav-main { scrollbar-color: rgba(255, 255, 255, .55) transparent; }
body.sidebar-collapsed .sidebar-nav-main::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .55); }
.sidebar-nav-footer {
    border-top: 1px solid rgba(251, 61, 40, .12);
    flex: 0 0 auto;
    margin-top: 6px;
    padding-top: 6px;
}
body.sidebar-collapsed .sidebar-nav-footer { border-top-color: rgba(255, 255, 255, .22); }
.app-nav-item { position: relative; }
.app-nav-link {
    align-items: center;
    border-radius: 7px;
    color: var(--vt-accent-soft);
    display: flex;
    font-size: .9rem;
    font-weight: 600;
    gap: 13px;
    min-height: 44px;
    padding: 7px 11px;
    position: relative;
    text-decoration: none;
    transition: background-color var(--vt-motion), color var(--vt-motion);
}
.app-nav-link:hover, .app-nav-link:focus-visible, .app-nav-item.flyout-open > .app-nav-link { background: var(--vt-accent); color: #fff; outline: none; text-decoration: none; }
.app-icon { fill: none; flex: 0 0 24px; height: 24px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; transition: transform 160ms cubic-bezier(.2, .8, .2, 1); width: 24px; }
.app-nav-link:hover > .app-icon,
.app-nav-link:focus-visible > .app-icon,
.app-nav-item.flyout-open > .app-nav-link > .app-icon { transform: translateX(4px); }
#icon-dashboard, #icon-nps, #icon-magic, #icon-heart, #icon-headset, #icon-inbox, #icon-share, #icon-admin, #icon-apps { fill: currentColor; stroke: none; }
#icon-data, #icon-star { fill: currentColor; stroke: none; }
#icon-data text { font-family: "Courier New", monospace; font-size: 18px; font-weight: 900; letter-spacing: 0; }
.app-uploaded-icon { object-fit: contain; }
.original-nav-icon { object-fit: contain; }
.app-nav-label { opacity: 1; overflow: hidden; text-overflow: ellipsis; transition: opacity 100ms ease; white-space: nowrap; }
.sidebar-logout { margin-top: 0; }

.app-flyout {
    background: #fff;
    border: 2px solid var(--vt-accent-soft);
    border-radius: 0 18px 18px 18px;
    box-shadow: 0 16px 35px rgba(45, 26, 20, .16);
    display: none;
    left: calc(100% + 8px);
    min-width: 260px;
    padding: 15px 12px 12px;
    position: absolute;
    top: 0;
    z-index: 1080;
}
.app-flyout.is-viewport-positioned { left: 0; position: fixed; top: 0; }
.app-nav-item:hover > .app-flyout, .app-nav-item:focus-within > .app-flyout, .app-nav-item.flyout-open > .app-flyout { display: block; }
.app-flyout::before { background: #fff; border-bottom: 2px solid var(--vt-accent-soft); border-left: 2px solid var(--vt-accent-soft); content: ""; height: 18px; left: -10px; position: absolute; top: 13px; transform: rotate(45deg); width: 18px; }
.app-flyout-title { display: block; font-size: 1rem; margin: 0 3px 5px; }
.app-flyout-description { color: var(--vt-muted); font-size: .76rem; line-height: 1.35; margin: 0 3px 9px; white-space: normal; }
.app-trial-status { background: #fff3ef; border: 1px solid #ffd5ca; border-radius: 8px; color: #9b2c1c; display: flex; flex-direction: column; font-size: .75rem; gap: 2px; margin: 7px 3px 10px; padding: 8px 9px; }
.app-trial-status-label { font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.app-trial-status time { font-variant-numeric: tabular-nums; font-weight: 700; }
.app-flyout-empty { color: var(--vt-muted); font-size: .76rem; margin: 4px 8px 9px; }
.app-flyout > a { border-radius: 6px; color: #3f3f3f; display: block; font-size: .8rem; padding: 7px 8px; text-decoration: none; }
.app-flyout > a:hover, .app-flyout > a:focus-visible { background: #fff0eb; color: var(--vt-accent); outline: none; }
.app-flyout > .app-flyout-manage { border-top: 1px solid #f0e4e0; border-radius: 0 0 6px 6px; color: var(--vt-accent); font-weight: 700; margin-top: 7px; padding-top: 10px; }
.app-flyout details { border-top: 1px solid #f0e4e0; color: var(--vt-muted); font-size: .72rem; margin: 7px 3px 0; padding-top: 7px; }
.app-flyout summary { color: var(--vt-accent); cursor: pointer; font-weight: 700; }
.app-flyout details p { line-height: 1.4; margin: 5px 0 0; }

.app-trial-banner { align-items: center; background: #fff3ef; border: 1px solid #ffd5ca; border-radius: 9px; color: #7d291e; display: flex; gap: 18px; justify-content: space-between; margin: 18px auto 0; max-width: 1180px; padding: 10px 14px; }
.app-trial-banner > div { display: flex; flex-direction: column; gap: 2px; }
.app-trial-banner strong { color: #682219; font-size: .88rem; }
.app-trial-banner span { font-size: .78rem; }
.app-trial-banner time { background: #fff; border: 1px solid #ffc4b6; border-radius: 999px; flex: 0 0 auto; font-size: .76rem; font-variant-numeric: tabular-nums; font-weight: 800; padding: 5px 9px; }

@media (max-width: 700px) {
    .app-trial-banner { align-items: flex-start; flex-direction: column; gap: 8px; margin: 12px 10px 0; }
}

body.sidebar-collapsed .app-nav-label { display: none; opacity: 0; }
body.sidebar-collapsed .sidebar-nav { padding-left: 8px; padding-right: 8px; }
body.sidebar-collapsed .app-nav-link { color: #fff; gap: 0; justify-content: center; padding-left: 8px; padding-right: 8px; }
body.sidebar-collapsed .app-nav-link:hover,
body.sidebar-collapsed .app-nav-link:focus-visible,
body.sidebar-collapsed .app-nav-item.flyout-open > .app-nav-link { background: rgba(255, 255, 255, .18); color: #fff; }
body.sidebar-collapsed .app-nav-link:hover > .app-icon,
body.sidebar-collapsed .app-nav-link:focus-visible > .app-icon,
body.sidebar-collapsed .app-nav-item.flyout-open > .app-nav-link > .app-icon { transform: translateX(3px); }
body.sidebar-collapsed .original-nav-icon { filter: brightness(0) invert(1); }
body.sidebar-collapsed .app-nav-link:not(.app-nav-trigger)::after {
    background: #292321;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(20, 12, 10, .2);
    color: #fff;
    content: attr(data-nav-label);
    font-size: .75rem;
    font-weight: 600;
    left: calc(100% + 10px);
    opacity: 0;
    padding: 6px 9px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-4px, -50%);
    transition: opacity 130ms ease, transform 130ms ease;
    visibility: hidden;
    white-space: nowrap;
    z-index: 1090;
}
body.sidebar-collapsed .app-nav-link:not(.app-nav-trigger):hover::after,
body.sidebar-collapsed .app-nav-link:not(.app-nav-trigger):focus-visible::after { opacity: 1; transform: translate(0, -50%); visibility: visible; }

.main-content { background: var(--vt-canvas); margin-left: var(--vt-sidebar-width); min-height: calc(100vh - var(--vt-header-height)); padding: 24px 20px; padding-top: calc(var(--vt-header-height) + 24px); transition: margin-left var(--vt-motion); width: auto; }
body:not(.has-app-shell) .main-content { margin-left: 0; }
.site-footer { background: var(--vt-accent-soft); color: #fff; margin-left: var(--vt-sidebar-width); padding: 18px 0; text-align: center; transition: margin-left var(--vt-motion); width: auto; }
body:not(.has-app-shell) .site-footer { margin-left: 0; }
.site-footer p { margin: 0 0 6px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .legal-copy { font-size: .68rem; line-height: 1.45; margin: 0 auto; max-width: 1050px; opacity: .9; }

@media (max-width: 767.98px) {
    :root { --vt-sidebar-width: var(--vt-sidebar-collapsed); }
    body { --vt-sidebar-width: var(--vt-sidebar-collapsed); }
    .sidebar { width: var(--vt-sidebar-collapsed); }
    body:not(.sidebar-collapsed) .sidebar { box-shadow: 8px 0 30px rgba(45, 26, 20, .2); width: min(82vw, var(--vt-sidebar-expanded)); }
    body:not(.sidebar-collapsed) .sidebar-scrim { background: rgba(31, 20, 16, .32); border: 0; display: block; inset: 0; padding: 0; position: fixed; z-index: 1035; }
    .app-nav-label { display: none; }
    .app-nav-link { justify-content: center; padding-left: 8px; padding-right: 8px; }
    body:not(.sidebar-collapsed) .app-nav-label { display: inline; opacity: 1; }
    body:not(.sidebar-collapsed) .app-nav-link { gap: 13px; justify-content: flex-start; padding-left: 11px; padding-right: 11px; }
    .brand-link--wordmark { height: 44px; top: 8px; }
    .brand-wordmark { height: 44px; width: 168px; }
    .brand-wordmark .logo { height: 40px; max-width: none; }
    .profile-link span { display: none; }
    .profile-link { padding: 6px; }
    .main-content { padding: calc(var(--vt-header-height) + 16px) 12px 18px; }
    .app-flyout { max-height: calc(100vh - 80px); min-width: min(280px, calc(100vw - 84px)); overflow-y: auto; }
}

@media (max-width: 359.98px) {
    .brand-wordmark { width: 154px; }
    .brand-wordmark .logo { height: 37px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}