:root {
    --app-height: 100vh;
    --app-height: 100dvh;
    --viewport-bottom-gap: 0px;
    --visual-viewport-height: 100dvh;
    --visual-viewport-top: 0px;
    --dt-cream: #FFF7ED;
    --dt-beige: #F3E7D6;
    --dt-gold: #B8751A;
    --dt-gold-deep: #8C5610;
    --dt-charcoal: #1F1F23;
    --dt-black: #111111;
    --dt-muted: #6B7280;
    --dt-border: #E8DED1;
    --dt-success: #16A34A;
    --dt-warning: #F59E0B;
    --dt-danger: #DC2626;
    --dt-white: #FFFFFF;
    --dt-shadow-sm: 0 4px 12px rgba(17, 17, 17, 0.05);
    --dt-shadow-md: 0 10px 30px rgba(17, 17, 17, 0.08);
    --dt-shadow-lg: 0 16px 40px rgba(17, 17, 17, 0.1);
    --dt-radius-sm: 12px;
    --dt-radius-md: 16px;
    --dt-radius-lg: 20px;
    --dt-radius-pill: 999px;
    --dt-mobile-width: 430px;
    --app-route-transition-duration: 300ms;
    --app-route-transition-easing: cubic-bezier(0.32, 0.72, 0, 1);
    --shell-header-top-pad: max(24px, calc(env(safe-area-inset-top) + 4px));
    --shell-header-side-pad: max(6px, env(safe-area-inset-left));
    --shell-header-side-pad-right: max(6px, env(safe-area-inset-right));
    --shell-header-bottom-pad: 6px;
    --shell-topbar-height: 36px;
    --shell-header-overlap:
        calc(var(--shell-header-top-pad) + var(--shell-topbar-height) + var(--shell-header-bottom-pad));
    --dt-shell-surface:
        radial-gradient(circle at top, rgba(184, 117, 26, 0.1), transparent 34%),
        linear-gradient(180deg, #fffaf3 0%, var(--dt-cream) 48%, #fdf5ea 100%);
}

html,
body {
    margin: 0;
    height: 100%;
    min-height: 100%;
    width: 100%;
    background: var(--dt-shell-surface);
    color: var(--dt-black);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
}

body {
    font-family: "Instrument Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    background-color: #fdf5ea;
    min-height: var(--app-height);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: inherit;
}

button,
input,
select {
    font: inherit;
}

a,
button,
[role="button"] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
}

.shell {
    position: relative;
    width: 100%;
    min-height: var(--app-height);
    height: var(--app-height);
    overflow: visible;
    overflow-x: clip;
    touch-action: pan-y;
    background: var(--dt-shell-surface);
}

.shell__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 40;
}

.shell__backdrop--open {
    opacity: 1;
    pointer-events: auto;
}

.shell__body {
    min-height: 100%;
    height: 100%;
    width: 100%;
    max-width: var(--dt-mobile-width);
    margin: 0 auto;
    overflow: clip;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.shell__header {
    position: sticky;
    top: 0;
    z-index: 35;
    padding:
        var(--shell-header-top-pad)
        var(--shell-header-side-pad-right)
        var(--shell-header-bottom-pad)
        var(--shell-header-side-pad);
    background: transparent;
    border-bottom: 0;
    isolation: isolate;
    overflow: visible;
}

.shell__header::before {
    content: "";
    position: absolute;
    inset: -4px 0 -22px 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            rgba(255, 250, 243, 0.58) 0%,
            rgba(255, 248, 239, 0.34) 40%,
            rgba(255, 247, 237, 0.12) 68%,
            rgba(255, 247, 237, 0) 100%);
    backdrop-filter: blur(24px) saturate(1.04);
    -webkit-backdrop-filter: blur(24px) saturate(1.04);
    mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, 0.52) 72%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, 0.52) 72%, transparent 100%);
}

.shell__header > * {
    position: relative;
    z-index: 1;
}

.shell__body--plain {
    width: 100%;
    max-width: none;
    min-height: 100%;
    padding:
        max(6px, env(safe-area-inset-top))
        max(8px, env(safe-area-inset-right))
        max(0px, env(safe-area-inset-bottom))
        max(8px, env(safe-area-inset-left));
}

.shell__body--public-document {
    padding-bottom: 0;
}

.shell__content {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    width: 100%;
    margin-top: calc(-1 * var(--shell-header-overlap));
    padding:
        var(--shell-header-overlap)
        max(8px, env(safe-area-inset-right))
        max(env(safe-area-inset-bottom), var(--viewport-bottom-gap))
        max(8px, env(safe-area-inset-left));
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    background: transparent;
    transform: translate3d(0, var(--shell-elastic-offset, 0px), 0);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.shell__content[data-elastic-active="true"] {
    transition: none;
}

@supports (view-transition-name: dapper-shell-page) {
    .shell__body:not(.shell__body--route-snapshot) {
        view-transition-name: dapper-shell-page;
    }

    .app-bottom-nav {
        view-transition-name: dapper-bottom-navigation;
    }

    html[data-app-navigation-direction]::view-transition-old(root),
    html[data-app-navigation-direction]::view-transition-new(root) {
        animation: none;
    }

    html[data-app-navigation-direction]::view-transition-group(dapper-shell-page) {
        z-index: 1;
        animation-duration: var(--app-route-transition-duration);
        animation-timing-function: var(--app-route-transition-easing);
    }

    html[data-app-navigation-direction]::view-transition-group(dapper-bottom-navigation) {
        z-index: 2;
        animation-duration: var(--app-route-transition-duration);
        animation-timing-function: var(--app-route-transition-easing);
    }

    html[data-app-navigation-direction]::view-transition-image-pair(dapper-shell-page) {
        isolation: isolate;
    }

    html[data-app-navigation-direction]::view-transition-old(dapper-shell-page),
    html[data-app-navigation-direction]::view-transition-new(dapper-shell-page) {
        backface-visibility: hidden;
        mix-blend-mode: normal;
        will-change: opacity, transform;
    }

    html[data-app-navigation-direction="push"]::view-transition-old(dapper-shell-page) {
        z-index: 1;
        animation: app-route-old-push var(--app-route-transition-duration) both var(--app-route-transition-easing);
    }

    html[data-app-navigation-direction="push"]::view-transition-new(dapper-shell-page) {
        z-index: 2;
        animation: app-route-new-push var(--app-route-transition-duration) both var(--app-route-transition-easing);
    }

    html[data-app-navigation-direction="pop"]::view-transition-old(dapper-shell-page) {
        z-index: 2;
        animation: app-route-old-pop var(--app-route-transition-duration) both var(--app-route-transition-easing);
    }

    html[data-app-navigation-direction="pop"]::view-transition-new(dapper-shell-page) {
        z-index: 1;
        animation: app-route-new-pop var(--app-route-transition-duration) both var(--app-route-transition-easing);
    }
}

.shell__body--route-snapshot {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: var(--premium-obsidian, var(--dt-cream));
    pointer-events: none;
    backface-visibility: hidden;
    will-change: opacity, transform;
}

.shell__body--route-snapshot *,
.shell__body--route-snapshot *::before,
.shell__body--route-snapshot *::after {
    animation: none !important;
}

html[data-app-navigation-direction] .shell__body--route-snapshot .shell__header::before,
html[data-app-interactive-navigation] .shell__body--route-snapshot .shell__header::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.shell__body--interactive-underlay {
    z-index: 19;
    opacity: 0.8;
    transform: translate3d(-33%, 0, 0);
    will-change: opacity, transform;
}

.shell__body--retained-underlay {
    z-index: 19;
}

.shell__body[data-interactive-route-layer="foreground"] {
    z-index: 20;
    box-shadow: -12px 0 32px rgba(0, 0, 0, 0.18);
    backface-visibility: hidden;
    will-change: transform;
}

.shell__body[data-route-transition-layer="incoming"] {
    will-change: opacity, transform;
    backface-visibility: hidden;
}

.shell__body[data-route-transition="push"][data-route-transition-layer="incoming"] {
    z-index: 21;
    animation: app-route-new-push var(--app-route-transition-duration) both var(--app-route-transition-easing);
}

.shell__body--route-snapshot[data-route-transition="push"] {
    z-index: 20;
    animation: app-route-old-push var(--app-route-transition-duration) both var(--app-route-transition-easing);
}

.shell__body[data-route-transition="pop"][data-route-transition-layer="incoming"] {
    z-index: 20;
    animation: app-route-new-pop var(--app-route-transition-duration) both var(--app-route-transition-easing);
}

.shell__body[data-route-transition="pop"][data-route-transition-layer="incoming-behind-retained"] {
    z-index: 19;
}

.shell__body--route-snapshot[data-route-transition="pop"][data-route-transition-layer="retained"] {
    z-index: 20;
    animation: app-route-new-pop var(--app-route-transition-duration) both var(--app-route-transition-easing);
}

.shell__body--route-snapshot[data-route-transition="pop"][data-route-transition-layer="outgoing"] {
    z-index: 21;
    animation: app-route-old-pop var(--app-route-transition-duration) both var(--app-route-transition-easing);
}

@keyframes app-route-old-push {
    to { opacity: 0.8; transform: translate3d(-33%, 0, 0); }
}

@keyframes app-route-new-push {
    from { transform: translate3d(100%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes app-route-old-pop {
    to { transform: translate3d(100%, 0, 0); }
}

@keyframes app-route-new-pop {
    from { opacity: 0.8; transform: translate3d(-33%, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .shell__body[data-route-transition],
    .shell__body--route-snapshot[data-route-transition] {
        animation: none;
    }
}

.shell__content,
.drawer__nav,
.mini-tabs {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.shell__content::-webkit-scrollbar,
.drawer__nav::-webkit-scrollbar,
.mini-tabs::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.shell__content--plain {
    display: flex;
    flex: 1 1 auto;
    min-height: 100%;
    padding: 0;
    width: 100%;
    background: transparent;
}

/* Long-form editors are routes, not floating cards. Keep their app frame
   flush so their own fixed header/footer and scroll body own the viewport. */
.shell--editor-route {
    background: var(--premium-ink, #101411);
}

.shell--editor-route .shell__body--editor {
    padding: 0;
    background: var(--premium-ink, #101411);
}

.shell--editor-route .shell__content--editor {
    margin-top: 0;
    min-height: 0;
    max-height: none;
    padding: 0;
    overflow: hidden;
    background: var(--premium-ink, #101411);
}

.shell--editor-route .shell__content--editor .app-pull-refresh,
.shell--editor-route .shell__content--editor .app-pull-refresh__content {
    width: 100%;
    min-height: 100%;
}

@media (max-width: 799px) {
    /* iOS pans the layout viewport to a focused editor textarea unless the
       full-page editor frame is explicitly anchored to the visual viewport.
       Keep the header/footer stationary and leave scrolling to the form body. */
    body.app-keyboard-open .shell--editor-route .shell__body--editor {
        position: fixed;
        top: var(--visual-viewport-top, 0px);
        right: 0;
        bottom: auto;
        left: 0;
        z-index: 37;
        width: 100%;
        height: var(--visual-viewport-height, 100dvh);
        min-height: 0;
        margin: 0;
        overflow: clip;
        transform: none;
        transition: none;
    }

    body.app-keyboard-open .shell--editor-route .shell__content--editor {
        height: 100%;
        min-height: 0;
        overflow: clip;
        transform: none;
        transition: none;
        will-change: auto;
    }

    body.app-keyboard-open .shell--editor-route .app-editor-route,
    body.app-keyboard-open .shell--editor-route .app-editor-page-surface {
        height: var(--visual-viewport-height, 100dvh);
        min-height: var(--visual-viewport-height, 100dvh);
    }
}

.shell__content--public-document {
    margin-top: 0;
    padding-bottom: max(env(safe-area-inset-bottom), var(--viewport-bottom-gap));
}

.drawer {
    position: fixed;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    height: auto;
    max-height: none;
    --app-side-rail-link-height: 46px;
    --app-side-rail-link-padding-x: 18px;
    --app-side-rail-link-gap: 16px;
    --app-side-rail-link-font-size: 14px;
    --app-side-rail-link-line-height: 18px;
    --app-side-rail-link-radius: 15px;
    width: min(86vw, 328px);
    padding:
        max(24px, calc(env(safe-area-inset-top) + 18px))
        22px
        max(20px, calc(env(safe-area-inset-bottom) + 18px))
        22px;
    background: #242429;
    border-radius: 0 24px 24px 0;
    box-shadow: 20px 0 36px rgba(17, 17, 17, 0.3);
    color: rgba(255, 255, 255, 0.92);
    transform: translateX(-108%);
    visibility: hidden;
    transition:
        transform 180ms ease,
        visibility 0s linear 180ms;
    z-index: 50;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 20px;
    overflow: hidden;
    touch-action: pan-y;
}

.drawer--open {
    transform: translateX(0);
    visibility: visible;
    transition-delay: 0s;
}

.drawer__desktop-toggle {
    display: none;
}

.app-side-rail__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
}

.app-side-rail__brand {
    display: none;
}

.app-side-rail__profile {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 14px;
    align-items: center;
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    appearance: none;
    cursor: pointer;
}

.app-side-rail__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5d7b7, #c08a47);
    display: grid;
    place-items: center;
    color: var(--dt-black);
    font-weight: 700;
    box-shadow: 0 10px 18px rgba(17, 17, 17, 0.22);
}

.app-side-rail__avatar--image {
    object-fit: cover;
}

.app-side-rail__profile-copy {
    min-width: 0;
}

.app-side-rail__profile-copy strong,
.app-side-rail__profile-copy span {
    display: block;
}

.app-side-rail__profile-copy strong {
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-side-rail__profile-copy span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-side-rail__nav {
    display: grid;
    align-content: start;
    grid-auto-rows: max-content;
    gap: 10px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    isolation: isolate;
    background: transparent;
}

.app-side-rail__link {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--app-side-rail-link-gap);
    align-items: center;
    min-height: var(--app-side-rail-link-height);
    padding: 0 var(--app-side-rail-link-padding-x);
    border-radius: var(--app-side-rail-link-radius);
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    font-size: var(--app-side-rail-link-font-size);
    font-weight: 700;
    line-height: var(--app-side-rail-link-line-height);
    background: transparent;
    box-shadow: none;
}

.app-side-rail__link-icon {
    opacity: 0.96;
}

.app-side-rail__link-icon-wrap {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
}

.app-side-rail__link-label {
    min-width: 0;
}

@media (max-width: 799px) {
    /* The persistent mobile dock owns Inbox. Retain it in the desktop rail,
       where the dock is intentionally absent. */
    .app-side-rail__link--mobile-hidden {
        display: none;
    }
}

.app-side-rail__notification-badge {
    position: absolute;
    top: -8px;
    right: -15px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--dt-danger);
    color: var(--dt-white);
    border: 2px solid rgba(14, 14, 14, 0.96);
    box-shadow: 0 3px 10px rgba(224, 38, 31, 0.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0;
    pointer-events: none;
}

.app-side-rail__link--active {
    background: rgb(156, 121, 73);
    color: var(--dt-white);
    box-shadow: 0 6px 18px rgba(17, 17, 17, 0.035);
}

.app-side-rail__group {
    display: grid;
    gap: 4px;
}

.app-side-rail__group-toggle {
    width: 100%;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    border: 0;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.app-side-rail__group-chevron {
    opacity: .65;
}

.app-side-rail__children {
    display: grid;
    gap: 2px;
    padding-left: calc(var(--app-side-rail-link-padding-x) + 7px);
}

.app-side-rail__child-link {
    min-width: 0;
    min-height: 34px;
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 9px;
    color: rgba(255,255,255,.68);
    text-decoration: none;
    font-size: 12px;
    font-weight: 650;
}

.app-side-rail__child-link > span:nth-child(2) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-side-rail__child-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .55;
}

.app-side-rail__child-link small {
    min-width: 18px;
    padding: 2px 5px;
    border-radius: 999px;
    color: white;
    background: var(--dt-danger);
    text-align: center;
    font-size: 9px;
}

.app-side-rail__child-link--active {
    color: var(--premium-cream, #fff);
    background: rgba(185,138,75,.12);
}

.portal-dashboard__featured-posts {
    width: min(100%, 760px);
    display: grid;
    gap: 1rem;
    margin-inline: auto;
}

.app-side-rail__footer {
    margin-top: auto;
    background: transparent;
}

.app-side-rail__logout {
    width: 100%;
    min-height: var(--app-side-rail-link-height);
    padding: 0 var(--app-side-rail-link-padding-x);
    border: 0;
    border-radius: var(--app-side-rail-link-radius);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.94);
    display: inline-grid;
    grid-template-columns: 20px 1fr;
    gap: var(--app-side-rail-link-gap);
    align-items: center;
    text-align: left;
    font-size: var(--app-side-rail-link-font-size);
    font-weight: 700;
    line-height: var(--app-side-rail-link-line-height);
    cursor: pointer;
}

.topbar {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 4px;
    align-items: center;
    min-height: 56px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    position: relative;
    top: auto;
    z-index: 30;
}

.topbar__search,
.topbar__desktop-actions,
.topbar__icon-button--desktop-bell {
    display: none;
}

.topbar__icon-button {
    width: 60px;
    height: 54px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--dt-black);
    display: grid;
    place-items: center;
    cursor: pointer;
    align-self: start;
    position: relative;
}

.topbar__menu-notification-dot {
    position: absolute;
    top: 9px;
    right: 10px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--dt-danger);
    border: 2px solid rgba(255, 250, 243, 0.96);
    box-shadow: 0 2px 7px rgba(224, 38, 31, 0.32);
    pointer-events: none;
}

.topbar__mobile-actions {
    display: inline-flex;
    align-items: center;
    justify-self: end;
    gap: 0;
    padding-right: 6px;
}

.topbar__mobile-actions .topbar__context-action.app-icon-button {
    width: 44px;
    height: 54px;
    border: 0;
    border-radius: 16px;
    color: var(--dt-black);
    background: transparent;
    box-shadow: none;
}

.topbar__mobile-profile {
    width: 56px;
    height: 56px;
    border: 0;
    padding: 0;
    border-radius: 18px;
    background: transparent;
    display: grid;
    place-items: center;
    justify-self: end;
    cursor: pointer;
    touch-action: manipulation;
}

.topbar__title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    max-width: calc(100% - 148px);
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    min-height: 54px;
    display: grid;
    align-items: center;
    align-content: center;
    justify-items: center;
    gap: 1px;
    padding-top: 1px;
    pointer-events: none;
    z-index: 1;
}

.topbar__title--interactive {
    pointer-events: auto;
}

.topbar__title-action {
    min-width: 0;
    max-width: 100%;
    padding: 4px 12px;
    display: grid;
    justify-items: center;
    gap: 1px;
    border: 0;
    border-radius: 14px;
    color: inherit;
    background: transparent;
    font: inherit;
    line-height: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    touch-action: manipulation;
}

.topbar__title-action:has(.topbar__title-menu-indicator) {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.topbar__title-menu-indicator {
    flex: 0 0 auto;
    opacity: .72;
}

.topbar__title-action:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--premium-bronze-bright) 72%, transparent);
    outline-offset: 1px;
}

.channel-detail-menu__backdrop {
    position: fixed !important;
    inset: 0;
    z-index: 41 !important;
    padding: 0;
    border: 0;
    background: transparent;
}

.channel-detail-menu {
    position: absolute !important;
    top: calc(100% - 5px);
    right: 14px;
    z-index: 42 !important;
    display: grid;
    min-width: 210px;
    padding: 8px;
    border: 1px solid color-mix(in srgb, var(--premium-cream) 14%, transparent);
    border-radius: 24px;
    background: color-mix(in srgb, var(--premium-black) 92%, transparent);
    box-shadow: 0 18px 40px rgba(0,0,0,.38);
    backdrop-filter: blur(28px) saturate(1.18);
    -webkit-backdrop-filter: blur(28px) saturate(1.18);
}

.channel-detail-menu > button {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 11px;
    border: 0;
    border-radius: 15px;
    color: var(--premium-cream);
    background: transparent;
    font: inherit;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.channel-detail-menu > button:active,
.channel-detail-menu > button:focus-visible {
    outline: 0;
    background: color-mix(in srgb, var(--premium-bronze) 15%, transparent);
}

.topbar__title-text {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__subtitle {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--dt-muted);
    font-family: "Instrument Sans", sans-serif;
    font-size: 10px;
    font-weight: 560;
    line-height: 1.15;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.topbar__subtitle--live {
    color: #75bd8a;
}

.topbar__title--brand .topbar__title-text {
    display: none;
}

.topbar__brand {
    justify-content: center;
}

.topbar__brand .brand-mark__crest {
    display: none;
}

.topbar__brand .brand-mark__wordmark {
    gap: 3px;
}

.topbar__brand .brand-mark__title {
    font-size: 15px;
    letter-spacing: 0.06em;
}

.topbar__brand .brand-mark__subtitle span {
    display: inline-block;
    width: 24px;
}

.topbar__brand .brand-mark__subtitle strong {
    font-size: 6.5px;
    letter-spacing: 0.26em;
}

.topbar__notification-wrap {
    position: relative;
    display: inline-grid;
    place-items: center;
}

.topbar__badge {
    position: absolute;
    top: -6px;
    right: -7px;
    min-width: 15px;
    height: 15px;
    padding: 0 4px;
    border-radius: var(--dt-radius-pill);
    background: var(--dt-danger);
    color: var(--dt-white);
    font-size: 9px;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 2px solid var(--dt-white);
}

.topbar__mobile-profile-avatar,
.topbar__profile-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f5d7b7, #c08a47);
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--dt-black);
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.16);
}

.topbar__mobile-profile-avatar {
    width: 34px;
    height: 34px;
    font-size: 14px;
}

.topbar__mobile-profile-avatar--image,
.topbar__profile-avatar--image {
    object-fit: cover;
}

.topbar__mobile-profile-avatar,
.topbar__mobile-profile-avatar--image,
.topbar__notification-wrap {
    pointer-events: none;
}

.topbar__profile {
    border: 0;
    background: transparent;
    color: var(--dt-black);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    cursor: pointer;
}

.topbar__desktop-notification,
.topbar__desktop-context-action {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--dt-black);
    display: inline-grid;
    place-items: center;
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.05);
    cursor: pointer;
}

.topbar__native-action-menu {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.topbar__native-action-menu-icon {
    display: inline-grid;
    place-items: center;
    pointer-events: none;
}

.topbar__native-action-menu select {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 16px;
}

.topbar__native-title-menu select {
    appearance: auto;
    -webkit-appearance: menulist-button;
}

.topbar__native-title-menu:focus-within {
    outline: 2px solid color-mix(in srgb, var(--premium-bronze-bright) 72%, transparent);
    outline-offset: 1px;
}

.topbar__native-action-menu:focus-within {
    outline: 0;
    box-shadow: none;
}

.topbar__profile-copy {
    display: grid;
    text-align: left;
    gap: 2px;
}

.topbar__profile-copy strong {
    font-size: 14px;
    font-weight: 700;
}

.topbar__profile-copy span {
    font-size: 12px;
    color: var(--dt-muted);
}

.brand-mark {
    display: inline-grid;
    justify-items: center;
    gap: 10px;
    justify-content: center;
}

.brand-mark__crest {
    display: block;
    width: 82px;
    height: 82px;
    object-fit: cover;
    border-radius: 22px;
}

.brand-mark__wordmark {
    display: grid;
    justify-items: center;
    gap: 4px;
}

.brand-mark__title {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 27px;
    line-height: 1;
    color: var(--dt-black);
    letter-spacing: -0.3px;
}

.brand-mark__subtitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--dt-gold);
}

.brand-mark__subtitle span {
    width: 48px;
    height: 1px;
    background: rgba(184, 117, 26, 0.55);
}

.brand-mark__subtitle strong {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

.brand-mark--icon .brand-mark__crest--icon {
    width: 92px;
    height: 92px;
}

.page {
    display: grid;
    gap: 16px;
    min-height: 100%;
    align-content: start;
    padding-bottom: max(env(safe-area-inset-bottom), var(--viewport-bottom-gap));
}

.page::after {
    display: none;
}

.page-hero {
    display: grid;
    gap: 4px;
}

.page-hero--centered {
    text-align: center;
}

.page-hero h1 {
    margin: 0;
    font-size: 25px;
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.35px;
}

.page-hero p,
.page-subtle {
    margin: 0;
    color: var(--dt-muted);
    font-size: 13px;
    line-height: 1.5;
}

.page-caption {
    color: var(--dt-muted);
    font-size: 12px;
    line-height: 1.35;
}

.app-page-intro {
    display: grid;
    gap: 4px;
    padding-top: 10px;
}

.app-page-intro h2 {
    margin: 0;
    color: #111111;
    font-size: clamp(16px, 4.8vw, 20px);
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.app-page-intro .page-subtle {
    color: var(--analytics-charcoal);
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.app-page-intro--clock {
    gap: 14px;
    padding-top: 0;
}

.app-page-intro__meta {
    display: grid;
    gap: 6px;
    justify-items: start;
    text-align: left;
    width: 100%;
}

.app-page-intro__date {
    color: var(--dt-muted);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0;
}

.app-page-intro__clock {
    color: rgba(17, 17, 17, 0.76);
    font-size: clamp(32px, 9.4vw, 48px);
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.035em;
    text-align: center;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-variant-numeric: tabular-nums;
}

.app-page-intro__clock-value {
    white-space: nowrap;
}

.app-page-intro__clock-meridiem {
    display: inline-block;
    min-width: 2.3ch;
    text-align: left;
    white-space: nowrap;
    color: rgba(17, 17, 17, 0.58);
    font-size: 0.58em;
    font-weight: 500;
    letter-spacing: -0.01em;
}

.page-section-heading,
.page-link-row,
.page-chip-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.page-chip-row--end {
    justify-content: flex-end;
}

.page-section-heading h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.page-link {
    color: var(--dt-gold);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
}

.page-chip {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--dt-border);
    background: var(--dt-white);
    color: var(--dt-muted);
    font-size: 13px;
    box-shadow: var(--dt-shadow-sm);
}

.page-chip--dropdown {
    gap: 8px;
    padding-right: 10px;
}

.page-mobile-select {
    width: min(100%, 240px);
    margin: 0;
}

.page-button--full {
    width: 100%;
    justify-content: center;
}

.page-button--soft {
    background: linear-gradient(180deg, #fff6ea 0%, #f7ead7 100%);
    border-color: rgba(232, 222, 209, 0.8);
    box-shadow: none;
}

.page-footer-note {
    color: var(--dt-muted);
    font-size: 12px;
}

.mobile-view {
    display: block;
}

.desktop-view {
    display: none;
}

.splash-screen {
    flex: 1 1 auto;
    min-height: var(--app-height, 100dvh);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        max(24px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #f5f1e9;
    background:
        radial-gradient(circle at 50% 44%, rgba(197, 147, 79, 0.12), transparent 30%),
        #000000;
    touch-action: pan-y;
}

.splash-screen::before,
.app-boot-screen::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0%, rgba(223, 184, 117, 0.05) 50%, transparent 100%) 50% 72% / min(72vw, 360px) 1px no-repeat,
        radial-gradient(circle at 50% 46%, rgba(122, 189, 197, 0.045), transparent 42%);
}

.splash-screen__logo-link {
    display: inline-grid;
    justify-items: center;
    width: 100%;
    text-decoration: none;
    color: inherit;
    transform: none;
    max-width: min(86vw, 320px);
}

.splash-screen__logo-link:focus-visible {
    outline: 3px solid rgba(184, 117, 26, 0.4);
    outline-offset: 10px;
    border-radius: 28px;
}

.splash-screen__brand .brand-mark__crest {
    width: clamp(88px, 22vw, 116px);
    height: clamp(88px, 22vw, 116px);
    border-radius: 28px;
}

.splash-screen__brand.brand-mark--splash {
    position: relative;
    isolation: isolate;
}

html:not([data-theme="light"]) .splash-screen__brand.brand-mark--splash::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: clamp(44px, 11vw, 58px);
    left: 50%;
    width: clamp(140px, 34vw, 172px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(247, 241, 228, 0.76) 0%,
        rgba(247, 241, 228, 0.52) 28%,
        rgba(211, 178, 128, 0.19) 53%,
        transparent 76%
    );
    transform: translate(-50%, -50%);
    filter: blur(8px);
    pointer-events: none;
}

.splash-screen__brand.brand-mark--splash .brand-mark__crest {
    object-fit: contain;
    border-radius: 0;
}

.splash-screen__brand .brand-mark__title {
    font-size: clamp(30px, 7vw, 38px);
    line-height: 0.98;
    letter-spacing: -0.03em;
}

.splash-screen__brand .brand-mark__wordmark {
    gap: 8px;
}

.splash-screen__brand .brand-mark__subtitle {
    gap: 10px;
}

.splash-screen__brand .brand-mark__subtitle span {
    width: 24px;
    opacity: 0.72;
}

.splash-screen__brand .brand-mark__subtitle strong {
    font-size: 11px;
    letter-spacing: 0.24em;
}

.app-boot-screen {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        max(24px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(24px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 44%, rgba(197, 147, 79, 0.12), transparent 30%),
        #000000;
    color: #f5f1e9;
    opacity: 1;
    visibility: visible;
    transition: opacity 180ms ease, visibility 180ms ease;
    pointer-events: auto;
}

.app-loading-brand {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 34px;
    width: min(100%, 360px);
    animation: app-loading-brand-reveal 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.app-loading-brand .brand-mark__title {
    color: #f5f1e9;
}

.app-loading-brand .brand-mark__subtitle {
    color: #dfb875;
}

.app-loading-brand .brand-mark__subtitle span {
    background: rgba(223, 184, 117, 0.54);
}

.app-loading-brand__status {
    display: grid;
    justify-items: center;
    gap: 11px;
    color: rgba(245, 241, 233, 0.58);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.15em;
    text-align: center;
    text-transform: uppercase;
}

.app-loading-brand__progress {
    display: block;
    width: min(42vw, 168px);
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(245, 241, 233, 0.11);
}

.app-loading-brand__progress > span {
    display: block;
    width: 44%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9e6d34, #dfb875 72%, #7abdc5);
    box-shadow: 0 0 14px rgba(223, 184, 117, 0.24);
    animation: app-loading-brand-progress 1.35s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

body.app-boot-complete .app-boot-screen {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes app-loading-brand-reveal {
    from { opacity: 0.78; transform: translateY(6px) scale(0.99); }
    to { opacity: 1; transform: none; }
}

@keyframes app-loading-brand-progress {
    from { transform: translateX(-115%); }
    to { transform: translateX(245%); }
}

@media (prefers-reduced-motion: reduce) {
    .app-loading-brand,
    .app-loading-brand__progress > span {
        animation: none;
    }

    .app-loading-brand__progress > span {
        width: 100%;
        opacity: 0.72;
        transform: none;
    }
}

.login-screen {
    flex: 1 1 auto;
    min-height: var(--visual-viewport-height, 100vh);
    width: 100%;
    display: grid;
    align-content: center;
    justify-items: center;
    padding:
        max(24px, var(--visual-viewport-top, 0px), env(safe-area-inset-top))
        16px
        max(24px, env(safe-area-inset-bottom))
        16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.login-screen__panel {
    display: grid;
    gap: 18px;
    width: min(100%, 420px);
    justify-self: center;
    margin-top: 0;
}

.desktop-auth-stage {
    width: 100%;
}

.login-screen__brand {
    justify-self: center;
}

.login-screen__brand .brand-mark__crest {
    width: 88px;
    height: 88px;
    object-fit: contain;
    border-radius: 0;
}

.login-screen__brand .brand-mark__title {
    font-size: 24px;
}

.login-screen__desktop-copy,
.desktop-auth-stage__footer {
    display: none;
}

body:has(.login-screen),
body:has(.desktop-auth-stage) {
    min-height: var(--visual-viewport-height, 100vh);
    overflow: hidden;
}

.login-form {
    display: grid;
    gap: 14px;
}

.login-screen .app-button--control {
    min-height: 44px;
    font-size: 12px;
}

.login-form__forgot {
    color: var(--dt-gold);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
}

.login-form__recovery-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-block: -12px;
}

/* Keep Safari password-manager fills consistent with the app's form treatment. */
.login-screen .field__input:-webkit-autofill,
.login-screen .field__input:-webkit-autofill:hover,
.login-screen .field__input:-webkit-autofill:focus,
.login-screen .field__input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--dt-black);
    caret-color: var(--dt-black);
    -webkit-box-shadow: 0 0 0 1000px var(--dt-white) inset;
    box-shadow: 0 0 0 1000px var(--dt-white) inset;
}

.login-form__divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--dt-muted);
    font-size: 12px;
}

.login-form__divider::before,
.login-form__divider::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--dt-border);
}

.field {
    display: grid;
    gap: 6px;
}

.field__label {
    font-size: 12px;
    font-weight: 600;
}

.field__input-wrap {
    position: relative;
}

.field__input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--dt-border);
    border-radius: 10px;
    background: var(--dt-white);
    color: var(--dt-black);
    padding: 0 14px;
    outline: none;
    box-shadow: var(--dt-shadow-sm);
    font: inherit;
    line-height: 1.2;
}

.field__input::placeholder {
    color: #9CA3AF;
}

.field__input--with-icon {
    padding-right: 40px;
}

.field__input--search {
    padding-left: 40px;
}

.login-screen .field__input--search {
    padding-left: 14px;
}

.login-screen .app-text-input__icon {
    display: none;
}

.field__input--prefixed {
    padding-left: 32px;
}

.field__input--compact {
    padding-right: 36px;
    appearance: none;
    -webkit-appearance: none;
    background-image: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field__input--long {
    min-height: 88px;
    padding: 12px 14px;
    line-height: 1.4;
    resize: vertical;
}

.field__icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--dt-muted);
    pointer-events: none;
}

.field__icon--leading {
    left: 14px;
    right: auto;
}

.field__prefix {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: var(--dt-muted);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}

.app-button {
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    cursor: pointer;
}

.app-button[disabled] {
    cursor: not-allowed;
    opacity: 0.52;
    box-shadow: none;
}

.app-button--primary {
    color: var(--dt-white);
    background: linear-gradient(135deg, #cb8725 0%, var(--dt-gold) 55%, #a86512 100%);
    box-shadow: 0 10px 22px rgba(184, 117, 26, 0.22);
}

.app-button--secondary {
    color: var(--dt-black);
    background: var(--dt-white);
    border-color: var(--dt-border);
    box-shadow: var(--dt-shadow-sm);
}

.app-button--danger {
    color: var(--dt-white);
    background: linear-gradient(135deg, #e13a25 0%, #c01d18 100%);
    box-shadow: 0 10px 22px rgba(220, 38, 38, 0.16);
}

.app-button--control {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 12px;
    font-size: 10.5px;
    font-weight: 700;
    box-shadow: 0 5px 12px rgba(17, 17, 17, 0.04);
}

.app-multi-select-filter { min-width: 0; }

.app-multi-select-filter__menu { position: relative; }

.app-multi-select-filter__menu > summary {
    display: flex;
    align-items: center;
    gap: 0;
    min-height: 34px;
    padding-block: 0;
    cursor: pointer;
    list-style: none;
}

.app-multi-select-filter__menu > summary::-webkit-details-marker { display: none; }

.app-multi-select-filter__menu > summary .app-filter-select__input {
    display: flex;
    align-items: center;
    align-self: stretch;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}

.app-multi-select-filter__options {
    position: absolute;
    z-index: 12;
    top: calc(100% + 6px);
    right: 0;
    left: auto;
    width: min(360px, calc(100vw - 24px));
    max-width: none !important;
    max-height: 320px;
    overflow: auto;
    padding: 12px;
    border: 1px solid var(--app-border, #e8dfd1);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(48, 36, 18, .12);
}

.app-multi-select-filter--align-start .app-multi-select-filter__options {
    right: auto;
    left: 0;
}

.app-multi-select-filter__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--app-border, #e8dfd1);
    color: var(--app-muted, #6f7480);
    font-size: 13px;
}

.app-multi-select-filter__actions > span { flex: 1 1 auto; min-width: 0; max-width: 132px; }

.app-multi-select-filter__action {
    flex: 0 0 104px;
    width: 104px;
    min-width: 104px;
    white-space: nowrap;
    word-break: keep-all;
}

.app-multi-select-filter__action > span { white-space: nowrap; }

.app-multi-select-filter__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 2px;
    border-bottom: 1px solid rgba(232, 223, 209, .7);
    cursor: pointer;
}

.shell__content[data-customer-bot-chat-active="true"] {
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    overflow-y: hidden;
    overscroll-behavior: none;
}


.app-button--primary.app-button--control {
    background: rgb(156, 121, 73);
    box-shadow: 0 6px 18px rgba(17, 17, 17, 0.035);
}

.app-detail-row {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid rgba(232, 222, 209, 0.88);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    color: #111111;
    text-align: left;
    box-shadow: 0 6px 18px rgba(17, 17, 17, 0.03);
    cursor: pointer;
}

.app-detail-row[disabled] {
    cursor: default;
}

.team-profile-contact-link {
    text-decoration: none;
}

.app-detail-row--active {
    border-color: rgba(184, 117, 26, 0.48);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 244, 232, 0.94) 100%);
}

.app-detail-row__identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.app-detail-row__badge {
    min-width: 34px;
    min-height: 34px;
    padding: 0 8px;
    border-radius: 12px;
    background: rgba(243, 231, 214, 0.72);
    color: var(--analytics-gold-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
}

.app-detail-row__copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.app-detail-row__title-line {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.app-detail-row__title-line strong {
    min-width: 0;
    font-size: 13px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-detail-row__subtitle,
.app-detail-row__helper {
    font-size: 10px;
    line-height: 1.25;
    font-weight: 600;
}

.app-detail-row__subtitle {
    color: var(--analytics-muted);
}

.app-detail-row__helper {
    color: var(--analytics-muted);
}

.app-detail-row__helper--positive {
    color: #4e7a4f;
}

.app-detail-row__helper--negative {
    color: #b4575b;
}

.app-detail-row__meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.app-detail-row__meta em {
    color: #111111;
    font-style: normal;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.app-detail-row__chevron {
    color: var(--analytics-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.app-detail-row__selection {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(156, 121, 73, 0.3);
    background: rgba(255, 255, 255, 0.92);
    color: rgb(156, 121, 73);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.app-detail-row__selection-indicator {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1.5px solid rgba(156, 121, 73, 0.7);
    display: block;
}

.notification-preference-panel {
    display: grid;
    gap: 8px;
    padding: 2px 0 2px 12px;
    border-left: 2px solid rgba(156, 121, 73, 0.22);
}

.notification-preference-panel__heading {
    padding: 6px 2px 0;
    color: var(--analytics-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.app-detail-editor {
    display: grid;
    gap: 12px;
}

.app-detail-editor__message {
    margin: 0;
}

.app-detail-editor__message--negative {
    color: #b4575b;
}

.app-text-input {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.app-text-input__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.app-button--disabled {
    pointer-events: none;
    opacity: 0.6;
}

.app-text-input__control {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.app-text-input__input {
    min-height: 44px;
    min-width: 0;
}

.app-text-input__input.field__input--compact {
    min-height: 34px;
    height: 34px;
    border-radius: 12px;
    border-color: rgba(232, 222, 209, 0.96);
    box-shadow: 0 5px 12px rgba(17, 17, 17, 0.04);
    padding-right: 36px;
    font-size: 9.5px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.92);
    line-height: 13px;
}

.app-text-input__input[type="time"] {
    appearance: none;
    -webkit-appearance: none;
}

.app-text-input__input[type="time"]::-webkit-date-and-time-value {
    text-align: left;
}

.app-text-input__input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0.78;
}

.app-contact-card {
    width: 100%;
    border: 1px solid rgba(232, 222, 209, 0.88);
    border-radius: 18px;
    background: var(--dt-white);
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.04);
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 14px 16px;
    text-align: left;
    color: #111111;
    appearance: none;
    -webkit-appearance: none;
}

.app-contact-card--active {
    outline: 1px solid rgba(184, 117, 26, 0.7);
    outline-offset: -1px;
    background: linear-gradient(180deg, rgba(255, 251, 245, 0.95) 0%, rgba(252, 244, 232, 0.9) 100%);
}

.app-contact-card__avatar {
    width: 52px;
    height: 52px;
    align-self: center;
    justify-self: center;
    border-radius: 999px;
    border: 1px solid rgba(184, 117, 26, 0.16);
    display: grid;
    place-items: center;
    font-size: 16px;
    font-weight: 700;
    color: #111111;
    overflow: hidden;
}

.app-contact-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.app-contact-card__avatar--sage {
    background: #e8f2e7;
}

.app-contact-card__avatar--amber {
    background: #f9e7d5;
}

.app-contact-card__avatar--gold {
    background: #f8e4c8;
}

.app-contact-card__avatar--placeholder {
    color: #72522f;
    background: linear-gradient(145deg, #f2eadf, #dfd1bf);
}

.app-contact-card__content {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.app-contact-card__row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}

.app-contact-card__row strong,
.app-contact-card__subtitle,
.app-contact-card__support {
    margin: 0;
    display: block;
}

.app-contact-card__row strong {
    min-width: 0;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 800;
}

.app-contact-card__subtitle,
.app-contact-card__support,
.app-contact-card__trail-text {
    color: var(--dt-muted);
    font-size: 13px;
    line-height: 1.35;
}

.app-contact-card__subrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.app-contact-card__subrow .app-contact-card__subtitle {
    min-width: 0;
    flex: 1 1 auto;
}

.app-contact-card__chips {
    display: inline-flex;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
}

.app-contact-card__support {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-contact-card__trail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: var(--dt-muted);
}

.app-grid--search-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin-block: 8px;
}

.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.metric-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-card {
    min-height: 102px;
    padding: 13px 14px 12px;
    border-radius: var(--dt-radius-sm);
    border: 1px solid var(--dt-border);
    background: var(--dt-white);
    box-shadow: var(--dt-shadow-sm);
}

.metric-card__title {
    margin: 0;
    color: #4B5563;
    font-size: 12px;
    line-height: 1.35;
}

.metric-card h3 {
    margin: 12px 0 8px;
    font-size: 21px;
    line-height: 1;
    letter-spacing: -0.2px;
}

.metric-card__trend {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 12px;
    font-weight: 600;
}

.metric-card__trend--up {
    color: var(--dt-success);
}

.metric-card__trend--down {
    color: #9CA3AF;
}

.metric-card__trend-glyph {
    font-size: 11px;
}

.list-surface {
    padding: 14px 16px;
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius-md);
    background: var(--dt-white);
    box-shadow: var(--dt-shadow-sm);
}

.analytics-opportunity-list {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.analytics-opportunity-card {
    display: grid;
    gap: 8px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(232, 222, 209, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 245, 239, 0.98) 100%);
}

.analytics-opportunity-card--pending {
    background: linear-gradient(180deg, rgba(255, 252, 245, 0.98) 0%, rgba(249, 240, 225, 0.98) 100%);
}

.analytics-opportunity-card__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.analytics-opportunity-card__header h3 {
    margin: 0;
    font-size: 15px;
    line-height: 1.25;
}

.analytics-info-card {
    min-height: 106px;
    padding: 14px 14px 12px;
    border-radius: 12px;
    border: 1px solid #E8DED1;
    background: #FFFFFF;
    box-shadow: 0 4px 12px rgba(17, 17, 17, 0.05);
}

.analytics-info-card__header,
.analytics-desktop-info-card__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.analytics-info-card__title {
    margin: 0;
    color: #4B5563;
    font-size: 12px;
    line-height: 1.35;
}

.analytics-info-card h3 {
    margin: 10px 0 8px;
    font-size: 22px;
    line-height: 1;
    letter-spacing: -0.2px;
}

.analytics-info-button {
    width: 22px;
    height: 22px;
    border: 1px solid rgba(184, 117, 26, 0.28);
    border-radius: 999px;
    background: rgba(184, 117, 26, 0.1);
    color: var(--dt-gold-deep);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.analytics-info-button--desktop {
    width: 20px;
    height: 20px;
    font-size: 11px;
}

.analytics-info-card__detail {
    display: grid;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(232, 222, 209, 0.9);
    color: #4b5563;
    font-size: 12px;
    line-height: 1.45;
}

.analytics-info-card__detail p {
    margin: 0;
}

.analytics-info-card__detail--desktop {
    margin-top: 12px;
}

.analytics-inline-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--dt-gold-deep);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.analytics-opportunity-card p {
    margin: 0;
    color: #4b5563;
    font-size: 13px;
    line-height: 1.45;
}

.analytics-opportunity-meta {
    display: grid;
    gap: 6px;
    color: var(--dt-muted);
    font-size: 12px;
    line-height: 1.4;
}

.analytics-opportunity-footnote {
    margin: 14px 0 0;
}

.list-surface--flush {
    padding: 0 16px;
}

.activity-list {
    display: grid;
}

.activity-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid rgba(232, 222, 209, 0.8);
}

.activity-row:last-child,
.inbox-row:last-child,
.settings-row:last-child,
.team-row:last-child,
.time-log__row:last-child {
    border-bottom: 0;
}

.activity-row__icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(184, 117, 26, 0.12);
    color: var(--dt-gold);
    display: grid;
    place-items: center;
}

.activity-row__content {
    display: grid;
    gap: 2px;
}

.activity-row__content strong {
    font-size: 14px;
    font-weight: 600;
}

.activity-row__content span,
.activity-row__time {
    color: var(--dt-muted);
    font-size: 12px;
}

.toolbar-grid {
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
}

.toolbar-grid__compose {
    width: 112px;
    min-width: 112px;
    min-height: 40px;
    align-self: center;
}

.shared-inbox-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.shared-inbox__load-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 0 2px;
    color: var(--text-muted);
    text-align: center;
}

.shared-inbox__load-more p {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 650;
}

.field__input-wrap--select .field__input {
    padding-right: 34px;
}

.segmented-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.segmented-tabs__item {
    min-height: 40px;
    border: 1px solid var(--dt-border);
    border-radius: 10px;
    background: var(--dt-white);
    color: var(--dt-muted);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--dt-shadow-sm);
}

.segmented-tabs__item--active {
    color: var(--dt-black);
    font-weight: 700;
}

.inbox-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid rgba(225, 211, 193, 0.98);
}

.inbox-row__avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 700;
    color: #2F2F35;
    border: 1px solid rgba(184, 117, 26, 0.18);
}

.inbox-row__avatar--sage {
    background: #E8F2E7;
}

.inbox-row__avatar--amber {
    background: #F9E7D5;
}

.inbox-row__avatar--gold {
    background: #F8E4C8;
}

.inbox-row__content {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.inbox-row__topline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: baseline;
}

.inbox-row__topline time {
    color: var(--dt-muted);
    font-size: 12px;
    white-space: nowrap;
}

.inbox-row__content strong {
    font-size: 16px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-row__content span,
.inbox-row__content p,
.inbox-row__meta span {
    margin: 0;
    font-size: 12px;
    color: var(--dt-muted);
}

.inbox-row__content p {
    color: #6b6b73;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-row__meta {
    display: grid;
    justify-items: end;
    min-width: 24px;
}

.inbox-row__badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--dt-radius-pill);
    background: var(--dt-gold);
    color: var(--dt-white);
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

.mini-tabs {
    display: flex;
    gap: 14px;
    align-items: center;
    overflow-x: auto;
    padding-bottom: 2px;
}

.mini-tabs--centered {
    justify-content: center;
}

.analytics-tabs {
    width: 100%;
    justify-content: space-between;
    gap: 0;
}

.analytics-tabs .mini-tabs__item,
.time-tabs .mini-tabs__item {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    font-size: 14px;
}

.analytics-tabs .mini-tabs__item {
    padding-inline: 4px;
}

.time-tabs {
    width: 100%;
    justify-content: space-between;
    gap: 0;
}

.mini-tabs__item {
    border: 0;
    background: transparent;
    padding: 3px 0 8px;
    color: var(--dt-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.mini-tabs__item--active {
    color: var(--dt-gold);
    border-bottom-color: var(--dt-gold);
}

.analytics-chart {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    gap: 8px 10px;
    margin-top: 4px;
}

.analytics-chart__axis {
    color: var(--dt-muted);
    font-size: 10px;
}

.analytics-chart__axis--y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0 14px;
}

.analytics-chart__axis--x {
    grid-column: 2;
    display: flex;
    justify-content: space-between;
    padding-left: 2px;
}

.analytics-chart__plot {
    position: relative;
    min-height: 176px;
    border-radius: 14px;
    background:
        linear-gradient(180deg, rgba(184, 117, 26, 0.05), transparent 36%),
        repeating-linear-gradient(
            to top,
            rgba(232, 222, 209, 0.9) 0,
            rgba(232, 222, 209, 0.9) 1px,
            transparent 1px,
            transparent 44px
        );
    overflow: hidden;
}

.analytics-chart__plot svg {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}

.hero-card {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    padding: 16px 16px 15px;
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius-md);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 249, 242, 0.96));
    box-shadow: var(--dt-shadow-sm);
}

.hero-card__copy span {
    display: block;
    color: #4B5563;
    font-size: 12px;
}

.hero-card__copy strong {
    display: block;
    margin-top: 8px;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.8px;
}

.hero-card__trend {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
}

.hero-card__trend--up {
    color: var(--dt-success);
}

.hero-card__badge {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(184, 117, 26, 0.12);
    color: var(--dt-gold);
    display: grid;
    place-items: center;
}

.hero-card--royalties .hero-card__badge {
    width: 50px;
    height: 50px;
    background: #f8efe2;
}

.rankings {
    display: grid;
}

.rankings__row {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(232, 222, 209, 0.82);
}

.rankings__row:last-child {
    border-bottom: 0;
}

.rankings__row span {
    color: var(--dt-muted);
    font-size: 12px;
}

.rankings__row strong,
.rankings__row em {
    font-size: 14px;
    font-style: normal;
}

.rankings__row strong {
    font-weight: 500;
}

.rankings__row em {
    font-weight: 600;
}

.time-card {
    padding: 2px 0 4px;
}

.time-card strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.time-card__clock {
    margin-top: 8px;
    font-size: 38px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.6px;
}

.status-panel {
    padding: 14px 16px;
    border: 1px solid var(--dt-border);
    border-radius: var(--dt-radius-md);
    background: var(--dt-white);
    box-shadow: var(--dt-shadow-sm);
}

.status-panel__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.status-panel__button {
    min-width: 104px;
}

.status-panel__detail {
    display: grid;
    gap: 8px;
}

.status-panel__chip {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
}

.status-panel__icon {
    color: var(--dt-success);
}

.status-panel__chip strong {
    display: block;
    color: var(--dt-success);
    font-size: 16px;
}

.status-panel__chip span {
    color: var(--dt-muted);
    font-size: 12px;
}

.time-log {
    display: grid;
}

.time-log__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid rgba(232, 222, 209, 0.82);
}

.time-log__row strong {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.time-log__row > span {
    color: var(--dt-muted);
    font-size: 12px;
}

.time-log__state {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
}

.time-log__state--up {
    color: var(--dt-success);
}

.time-log__state--down {
    color: var(--dt-danger);
}

.team-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(232, 222, 209, 0.82);
}

.team-row__avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f4dfca, #c58e53);
    color: var(--dt-black);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
}

.team-row__content strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.team-row__content span {
    display: block;
    color: var(--dt-muted);
    font-size: 12px;
}

.status-chip {
    min-width: 70px;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
}

.status-chip--active {
    background: #E9F7EC;
    color: var(--dt-success);
    border-color: rgba(22, 163, 74, 0.12);
}

.status-chip--inactive {
    background: #F3F4F6;
    color: #6B7280;
    border-color: rgba(107, 114, 128, 0.1);
}

.page--dashboard .page-hero {
    margin-top: 2px;
}

.page--dashboard.analytics-page {
    gap: 14px;
}

.dashboard-shell {
    display: grid;
    gap: 14px;
}

.dashboard-header {
    gap: 10px;
}

.dashboard-header h1 {
    font-size: clamp(28px, 5.2vw, 40px);
    letter-spacing: -0.04em;
}

.dashboard-header__support {
    display: grid;
    gap: 10px;
}

.dashboard-hero-copy {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid rgba(232, 222, 209, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 249, 238, 0.96) 100%);
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.04);
}

.dashboard-hero-copy__eyebrow {
    color: var(--analytics-gold-dark);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dashboard-hero-copy strong {
    color: #111111;
    font-size: clamp(16px, 4.8vw, 20px);
    line-height: 1.08;
    letter-spacing: -0.03em;
}

.dashboard-hero-copy span:last-child {
    color: var(--analytics-muted);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
}

.dashboard-header .analytics-header__timestamp {
    display: inline-flex;
}

.dashboard-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.page--dashboard.analytics-page .dashboard-summary-card {
    min-height: 112px;
    padding: 12px;
    gap: 8px;
}

.page--dashboard.analytics-page .dashboard-summary-card .analytics-kpi-card__top {
    align-items: start;
}

.page--dashboard.analytics-page .dashboard-summary-card .analytics-kpi-card__label {
    max-width: none;
    min-height: auto;
    color: #4f5966;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.page--dashboard.analytics-page .dashboard-summary-card .analytics-kpi-card__value {
    font-size: clamp(24px, 6vw, 30px);
    line-height: 0.95;
}

.page--dashboard.analytics-page .dashboard-summary-card .analytics-kpi-card__icon {
    width: 32px;
    height: 32px;
}

.page--dashboard.analytics-page .dashboard-summary-card .analytics-kpi-card__trend {
    margin-top: 2px;
}

.page--dashboard.analytics-page .dashboard-panel {
    padding: 16px;
}

.dashboard-layout,
.dashboard-layout__primary,
.dashboard-layout__secondary {
    display: grid;
    gap: 14px;
}

.page--dashboard.analytics-page .dashboard-panel__header {
    margin-bottom: 0;
}

.page--dashboard.analytics-page .dashboard-panel__header h2 {
    margin: 0;
    font-size: 15px;
}

.page--dashboard.analytics-page .dashboard-panel__header .page-subtle {
    margin-top: 3px;
}

.dashboard-chart__summary {
    display: grid;
    gap: 4px;
}

.dashboard-chart__summary strong {
    font-size: clamp(26px, 6vw, 32px);
    line-height: 0.96;
}

.dashboard-chart {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 10px;
    min-height: 230px;
}

.dashboard-chart__axis {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--analytics-muted);
    font-size: 11px;
    font-weight: 700;
    padding: 8px 0;
}

.dashboard-chart__plot {
    position: relative;
    min-height: 230px;
    border-radius: 16px;
    background:
        linear-gradient(180deg, rgba(184, 117, 26, 0.05), transparent 34%),
        repeating-linear-gradient(
            to top,
            rgba(232, 222, 209, 0.82) 0,
            rgba(232, 222, 209, 0.82) 1px,
            transparent 1px,
            transparent 48px
        );
    overflow: hidden;
}

.dashboard-chart__plot svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dashboard-chart__footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(232, 222, 209, 0.8);
}

.dashboard-chart__footer span,
.dashboard-chart__footer em {
    display: block;
    color: var(--analytics-muted);
    font-size: 11px;
    line-height: 1.4;
    font-style: normal;
}

.dashboard-chart__footer strong {
    display: block;
    margin: 5px 0;
    font-size: clamp(16px, 4.5vw, 20px);
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.page--dashboard.analytics-page .dashboard-location-list {
    display: grid;
    gap: 12px;
}

.page--dashboard.analytics-page .dashboard-location-card {
    gap: 10px;
}

.dashboard-location-card__meta {
    display: grid;
    justify-items: end;
    gap: 3px;
    text-align: right;
}

.dashboard-location-card__meta strong {
    color: #111111;
    font-size: 15px;
    line-height: 1.02;
    letter-spacing: -0.03em;
}

.dashboard-location-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 0;
    padding-top: 10px;
    border-top: 1px solid rgba(232, 222, 209, 0.7);
}

.dashboard-location-card__metric {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding-right: 8px;
}

.dashboard-location-card__metric:nth-child(2n) {
    padding-right: 0;
    padding-left: 10px;
    border-left: 1px solid rgba(232, 222, 209, 0.7);
}

.dashboard-location-card__metric:last-child {
    grid-column: 1 / -1;
    padding-left: 0;
    border-left: 0;
}

.dashboard-location-card__metric span {
    color: var(--analytics-muted);
    font-size: 10px;
    line-height: 12px;
    font-weight: 700;
}

.dashboard-location-card__metric strong {
    color: #111111;
    font-size: 14px;
    line-height: 1.08;
}

.page--dashboard.analytics-page .dashboard-team-list {
    gap: 12px;
}

.page--dashboard.analytics-page .dashboard-team-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 2px 0;
}

.page--shared-inbox {
    gap: 12px;
}

.page--analytics,
.page--royalties,
.page--time-attendance,
.page--team {
    gap: 14px;
}

.page--analytics .metric-card__trend,
.page--royalties .metric-card__trend {
    font-size: 11px;
}

.page--analytics .metric-card,
.page--royalties .metric-card,
.page--time-attendance .metric-card {
    min-height: 94px;
}

.page--analytics .metric-card h3,
.page--royalties .metric-card h3,
.page--time-attendance .metric-card h3 {
    margin-top: 10px;
}

.analytics-surface {
    padding-bottom: 12px;
}

.time-tabs {
    margin-top: -2px;
}

.page--team .page-footer-note {
    margin-top: -2px;
}

.page--team {
    gap: 10px;
}

.page--team .mobile-view {
    position: relative;
    min-height: 0;
}

.page--team .field__input {
    min-height: 40px;
    border-radius: 10px;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(17, 17, 17, 0.04);
}

.page--team .field__icon--leading {
    left: 12px;
}

.page--team .field__input--search {
    padding-left: 34px;
}

.team-directory-list {
    display: grid;
    gap: 18px;
}

.team-directory-panel {
    overflow: visible;
}

.team-directory-list__group {
    display: grid;
    gap: 0;
}

.team-directory-list__band {
    padding: 6px 2px;
    border-block: 1px solid rgba(232, 222, 209, 0.9);
    background: rgba(248, 242, 232, 0.74);
    box-shadow: 0 4px 8px rgba(17, 17, 17, 0.025);
    color: var(--dt-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.team-directory-floating-band {
    position: fixed;
    z-index: 36;
    display: none;
    padding: 6px 2px;
    border-block: 1px solid rgba(232, 222, 209, 0.9);
    background: rgba(248, 242, 232, 0.96);
    box-shadow: 0 4px 8px rgba(17, 17, 17, 0.025);
    color: var(--dt-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    pointer-events: none;
    text-transform: uppercase;
}

.team-directory-list__rows {
    gap: 0;
}

.team-directory-card.app-contact-card {
    padding: 12px 2px;
    border: 0;
    border-bottom: 1px solid rgba(232, 222, 209, 0.86);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.team-directory-list__rows .team-directory-card:last-child {
    border-bottom: 0;
}

.team-directory-card .app-contact-card__subrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}

.team-directory-card .app-contact-card__subtitle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.team-directory-card .app-contact-card__chips {
    flex-wrap: nowrap;
    white-space: nowrap;
}

/*
   A focused access search can leave the final permission behind the iOS
   keyboard. Keep enough scrollable runway after the Roles controls for every
   result and the save action to clear the keyboard and its input accessory.
*/
.team-access-keyboard-buffer {
    display: none;
}

.team-permission-sections {
    display: grid;
    gap: 18px;
}

.team-permission-section {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--dt-border);
    border-radius: 16px;
    color: var(--dt-text);
    background: var(--dt-surface);
    box-shadow: var(--dt-shadow-sm);
}

.team-permission-section__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.team-permission-section__header h3,
.team-permission-section__header span {
    margin: 0;
}

.team-permission-section__header h3 {
    font-size: 17px;
}

.team-permission-section__header span {
    color: var(--dt-muted);
    font-size: 12px;
}

/* Read-only access cards should size to their content. Without explicit track
   alignment, mobile grid rows can stretch and leave permission copy stranded
   inside oversized cards. */
.team-permission-section--readonly {
    align-content: start;
    align-self: start;
    grid-template-rows: auto auto;
    min-height: 0;
    height: auto;
}

.team-permission-section--readonly > .app-grid {
    align-content: start;
    align-items: start;
    margin-block: 0;
}

.team-permission-section--readonly .app-detail-row {
    align-self: start;
    min-height: 0;
    height: auto;
}

@media (max-width: 640px) {
    .team-permission-section {
        padding: 12px;
    }

    .team-permission-section__header {
        align-items: start;
        flex-direction: column;
        gap: 2px;
    }

    .team-access-keyboard-buffer {
        display: block;
        min-height: max(20rem, 42dvh);
        pointer-events: none;
    }
}

#blazor-error-ui {
    background: #fff1d8;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1rem;
    position: fixed;
    right: 0;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

@media (min-width: 1100px) {
    .shell--nav {
        display: grid;
        grid-template-columns: 244px minmax(0, 1fr);
        padding: 5px;
        gap: 0;
        background: #1f2024;
    }

    .shell--nav.shell--nav-collapsed {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .shell--plain-route {
        padding: 0;
        background: linear-gradient(180deg, #fffaf3 0%, var(--dt-cream) 52%, #fdf5ea 100%);
    }

    .shell__backdrop {
        display: none !important;
    }

    .drawer {
        position: relative;
        inset: auto;
        left: auto;
        width: auto;
        height: 100%;
        transform: none !important;
        visibility: visible;
        transition: none;
        border-radius: 0;
        box-shadow: none;
        padding: 30px 18px 18px;
        gap: 26px;
    }

    .drawer__desktop-toggle {
        display: inline-grid;
        width: 40px;
        height: 40px;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
        color: rgba(255, 255, 255, 0.92);
        cursor: pointer;
        margin: 0;
    }

    .app-side-rail__brand {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        min-width: 0;
        color: rgba(255, 255, 255, 0.92);
        text-decoration: none;
    }

    .app-side-rail__brand-logo {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        object-fit: cover;
    }

    .app-side-rail__brand-copy {
        overflow: hidden;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.15;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-side-rail__profile {
        display: none;
    }

    .app-side-rail__nav {
        gap: 12px;
        padding-right: 0;
        margin-right: 0;
        overflow-y: auto;
    }

    .app-side-rail__link {
        grid-template-columns: 22px 1fr;
        white-space: nowrap;
    }

    .app-side-rail__logout {
        margin-top: auto;
    }

    .shell--nav-collapsed .drawer {
        padding-inline: 12px;
        align-items: center;
    }

    .shell--nav-collapsed .drawer__desktop-toggle {
        margin-right: 0;
    }

    .shell--nav-collapsed .app-side-rail__profile-copy {
        display: none;
    }

    .shell--nav-collapsed .app-side-rail__brand {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0;
    }

    .shell--nav-collapsed .app-side-rail__brand-copy {
        display: none;
    }

    .shell--nav-collapsed .app-side-rail__header {
        grid-template-columns: 1fr;
        justify-items: center;
    }

    .shell--nav-collapsed .app-side-rail__profile {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0;
    }

    .shell--nav-collapsed .app-side-rail__nav {
        width: 100%;
        justify-items: center;
    }

    .shell--nav-collapsed .app-side-rail__link {
        width: 56px;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 0;
        padding: 0;
    }

    .shell--nav-collapsed .app-side-rail__link-label {
        display: none;
    }

    .shell--nav-collapsed .app-side-rail__logout {
        width: 56px;
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 0;
    }

    .shell--nav-collapsed .app-side-rail__logout span {
        display: none;
    }

    .shell__body {
        max-width: none;
        min-width: 0;
        width: 100%;
        padding: 0;
        background: var(--dt-shell-surface);
        border-radius: 0 18px 18px 0;
    }

    .shell__body--plain {
        background: rgba(255, 250, 243, 0.12);
        border-radius: 0;
        padding: 0;
    }

    .shell__header {
        padding: 0;
        background: transparent;
        border-bottom: 0;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }

    .shell__content {
        margin-top: 0;
        padding-top: 0;
    }

    .splash-screen {
        display: flex;
        min-height: 100%;
    }

    .login-screen {
        display: block;
        min-height: 100%;
    }

    .topbar {
        grid-template-columns: auto minmax(320px, 1fr) auto;
        gap: 22px;
        align-items: center;
        padding: 22px 30px 18px;
        margin-bottom: 0;
        border-bottom: 0;
    }

    .topbar__icon-button--menu,
    .topbar__mobile-actions {
        display: none;
    }

    .topbar__title {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        width: auto;
        max-width: none;
        text-align: left;
        font-family: "Playfair Display", Georgia, serif;
        font-size: 32px;
        font-weight: 700;
        letter-spacing: -0.45px;
        line-height: 1.05;
        justify-self: start;
        pointer-events: auto;
    }

    .topbar__title-text {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .topbar__title--brand .topbar__title-text {
        display: inline;
    }

    .topbar__title--brand .topbar__brand {
        display: none;
    }

    .topbar__search {
        display: block;
        width: min(100%, 460px);
        justify-self: end;
    }

    .topbar__search .field__input {
        min-height: 44px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.92);
    }

    .topbar__desktop-actions {
        display: inline-flex;
        align-items: center;
        gap: 18px;
    }

    .shell__content {
        padding: 22px 28px 30px;
    }

    .page {
        min-height: 0;
        gap: 22px;
        padding-bottom: 18px;
    }

    .page::after {
        display: none;
    }

    .mobile-view {
        display: none !important;
    }

    .desktop-view {
        display: block;
    }

    .login-screen__desktop-copy {
        display: inline;
    }

    .login-screen .field__input--search {
        padding-left: 40px;
    }

    .login-screen .app-text-input__icon {
        display: block;
    }
}

@media (min-width: 1100px) {
    .desktop-surface {
        padding: 18px 20px;
        border: 1px solid rgba(232, 222, 209, 0.92);
        border-radius: 18px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: var(--dt-shadow-sm);
    }

    .desktop-surface__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin-bottom: 16px;
    }

    .desktop-surface__header h2 {
        margin: 0;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.2;
    }

    .desktop-inline-selects {
        display: inline-flex;
        gap: 10px;
        align-items: center;
    }

    .desktop-stat-grid {
        display: grid;
        gap: 16px;
    }

    .desktop-stat-grid--four {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .desktop-stat-grid--five {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .desktop-stat-card {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 18px 18px 16px;
        border: 1px solid rgba(232, 222, 209, 0.92);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: var(--dt-shadow-sm);
    }

    .desktop-stat-card--compact {
        min-height: 110px;
    }

    .desktop-stat-card--formula {
        flex: 1 1 164px;
        min-width: 164px;
    }

    .desktop-stat-card__eyebrow {
        display: block;
        color: #4b5563;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.3;
        text-transform: uppercase;
    }

    .desktop-stat-card h3 {
        margin: 12px 0 10px;
        font-size: 20px;
        line-height: 1;
        letter-spacing: -0.3px;
    }

    .desktop-stat-card__icon {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: rgba(184, 117, 26, 0.12);
        color: var(--dt-gold);
        flex: 0 0 auto;
    }

    .desktop-positive {
        color: var(--dt-success);
        font-weight: 600;
    }

    .desktop-negative {
        color: var(--dt-danger);
        font-weight: 600;
    }

    .desktop-badge,
    .desktop-pill,
    .desktop-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 26px;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 600;
    }

    .desktop-badge {
        background: #f5f1eb;
        color: #6b7280;
    }

    .desktop-pill {
        background: #ebf6ea;
        color: #2f8f49;
    }

    .desktop-pill--blue {
        background: #eaf1ff;
        color: #4176c5;
    }

    .desktop-status--green {
        background: #ebf7eb;
        color: #2d8d46;
    }

    .desktop-icon-button,
    .desktop-table__action {
        min-height: 38px;
        border: 1px solid rgba(232, 222, 209, 0.92);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.96);
        color: var(--dt-black);
        box-shadow: var(--dt-shadow-sm);
        cursor: pointer;
    }

    .desktop-icon-button {
        width: 38px;
        display: inline-grid;
        place-items: center;
    }

    .desktop-table__action {
        padding: 0 14px;
        font-size: 12px;
        font-weight: 600;
    }

    .desktop-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    .desktop-table-wrap {
        overflow-x: auto;
        margin: 0 -4px;
        padding: 0 4px 4px;
        scrollbar-width: none;
    }

    .desktop-table-wrap::-webkit-scrollbar {
        display: none;
    }

    .desktop-table thead th {
        text-align: left;
        padding: 12px 10px;
        color: #6b7280;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        border-bottom: 1px solid rgba(232, 222, 209, 0.92);
    }

    .desktop-table tbody td {
        padding: 14px 10px;
        vertical-align: top;
        border-bottom: 1px solid rgba(232, 222, 209, 0.7);
    }

    .desktop-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .desktop-table--compact tbody td {
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .desktop-filter-grid {
        display: grid;
        gap: 16px;
        align-items: end;
    }

    .desktop-filter-grid--five {
        grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
    }

    .desktop-auth-stage {
        position: relative;
        width: 100%;
        min-height: 100%;
        display: grid;
        place-items: center;
        padding: 48px 54px 32px;
        background: transparent;
        border-radius: 0;
        overflow: hidden;
    }

    .desktop-auth-stage__watermark {
        display: none;
    }

    .desktop-auth-stage__footer {
        display: block;
        margin-top: 10px;
        text-align: center;
        color: var(--dt-muted);
        font-size: 13px;
    }

    .desktop-auth-stage__center {
        display: inline-grid;
        justify-items: center;
        gap: 22px;
        position: relative;
        z-index: 1;
    }

    .desktop-auth-stage__loading {
        display: grid;
        justify-items: center;
        gap: 10px;
        color: var(--dt-black);
    }

    .desktop-auth-stage__dots {
        display: inline-flex;
        gap: 10px;
    }

    .desktop-auth-stage__dots i {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: rgba(184, 117, 26, 0.2);
        display: block;
    }

    .desktop-auth-stage__dots i:first-child {
        background: var(--dt-gold);
    }

    .desktop-auth-stage__paw {
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(184, 117, 26, 0.06), transparent 60%);
        filter: blur(0.2px);
    }

    .desktop-auth-stage__paw--left {
        top: 52px;
        left: 40px;
    }

    .desktop-auth-stage__paw--right {
        right: 40px;
        bottom: 58px;
    }

    .login-screen__panel--desktop {
        width: min(100%, 480px);
        margin-top: 0;
        position: relative;
        z-index: 1;
    }

    .desktop-auth-stage .field__input,
    .desktop-auth-stage .app-button,
    .desktop-auth-stage .app-button--secondary {
        box-shadow: none;
    }

    .dashboard-desktop,
    .analytics-desktop,
    .royalties-desktop,
    .time-desktop,
    .team-desktop,
    .settings-desktop,
    .inbox-desktop {
        display: grid;
        gap: 20px;
    }

    .dashboard-header__support {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 16px;
    }

    .dashboard-metric-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .page--dashboard.analytics-page .dashboard-summary-card {
        min-height: 124px;
        padding: 16px;
    }

    .page--dashboard.analytics-page .dashboard-summary-card .analytics-kpi-card__label {
        font-size: 12px;
    }

    .page--dashboard.analytics-page .dashboard-summary-card .analytics-kpi-card__icon {
        width: 42px;
        height: 42px;
    }

    .dashboard-layout {
        grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr);
        gap: 20px;
        align-items: start;
    }

    .page--dashboard.analytics-page .dashboard-panel {
        padding: 18px 20px;
    }

    .page--dashboard.analytics-page .dashboard-panel__header h2 {
        font-size: 17px;
    }

    .dashboard-chart__summary {
        display: flex;
        align-items: baseline;
        gap: 18px;
    }

    .dashboard-chart {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 12px;
        min-height: 250px;
    }

    .dashboard-chart__axis {
        font-size: 12px;
        padding: 10px 0;
    }

    .dashboard-chart__plot {
        min-height: 250px;
    }

    .dashboard-chart__footer {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
        padding-top: 16px;
    }

    .dashboard-chart__footer span,
    .dashboard-chart__footer em {
        font-size: 12px;
    }

    .dashboard-chart__footer strong {
        font-size: 22px;
    }

    .dashboard-location-card__meta strong {
        font-size: 16px;
    }

    .dashboard-location-card__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-location-card__metric {
        padding-right: 10px;
    }

    .dashboard-location-card__metric:nth-child(2n) {
        padding-left: 10px;
    }

    .dashboard-location-card__metric:last-child {
        grid-column: auto;
        padding-left: 10px;
        border-left: 1px solid rgba(232, 222, 209, 0.7);
    }

    .dashboard-location-card__metric:not(:first-child) {
        border-left: 1px solid rgba(232, 222, 209, 0.7);
    }

    .dashboard-location-card__metric strong {
        font-size: 15px;
    }

    .inbox-desktop__toolbar,
    .inbox-desktop__toolbar-left,
    .inbox-desktop__toolbar-right {
        display: flex;
        gap: 16px;
        align-items: center;
    }

    .inbox-desktop__toolbar {
        justify-content: space-between;
    }

    .inbox-desktop__toolbar-left {
        flex: 1 1 auto;
        min-width: 0;
    }

    .inbox-desktop__toolbar-left > *:first-child {
        width: 160px;
        flex: 0 0 auto;
    }

    .inbox-desktop__toolbar-left > *:last-child {
        width: min(100%, 340px);
    }

    .inbox-desktop__tabs {
        width: 232px;
    }

    .inbox-desktop__layout {
        display: grid;
        grid-template-columns: 360px minmax(0, 1fr);
        gap: 14px;
        min-height: 760px;
    }

    .inbox-desktop__list,
    .inbox-desktop__detail {
        min-height: 0;
    }

    .inbox-desktop__thread {
        display: grid;
        grid-template-columns: 54px minmax(0, 1fr) auto;
        gap: 14px;
        padding: 14px 16px;
        border-bottom: 1px solid rgba(232, 222, 209, 0.74);
    }

    .inbox-desktop__thread--active {
        outline: 1px solid rgba(184, 117, 26, 0.7);
        outline-offset: -1px;
        background: linear-gradient(180deg, rgba(255, 251, 245, 0.95) 0%, rgba(252, 244, 232, 0.9) 100%);
        border-radius: 18px;
    }

    .inbox-desktop__thread-avatar {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: 700;
        border: 1px solid rgba(184, 117, 26, 0.16);
    }

    .inbox-desktop__thread-avatar--sage { background: #e8f2e7; }
    .inbox-desktop__thread-avatar--amber { background: #f9e7d5; }
    .inbox-desktop__thread-avatar--gold { background: #f8e4c8; }

    .inbox-desktop__thread-copy strong,
    .inbox-desktop__thread-copy span,
    .inbox-desktop__thread-copy p {
        display: block;
        margin: 0;
    }

    .inbox-desktop__thread-copy span,
    .inbox-desktop__thread-copy p,
    .inbox-desktop__thread-meta time {
        color: var(--dt-muted);
        font-size: 13px;
    }

    .inbox-desktop__thread-copy p {
        margin-top: 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .inbox-desktop__thread-meta {
        display: grid;
        justify-items: end;
        gap: 8px;
    }

    .inbox-desktop__thread-source {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 24px;
        padding: 0 10px;
        border-radius: 999px;
        background: #ecf7eb;
        color: #2d8d46;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .inbox-desktop__thread-source--rc {
        background: #f1f5ff;
        color: #4b78c9;
    }

    .inbox-desktop__thread-meta em {
        min-width: 26px;
        height: 26px;
        padding: 0 8px;
        border-radius: 999px;
        background: var(--dt-gold);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-style: normal;
        font-weight: 700;
    }

    .inbox-desktop__pager {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 16px;
    }

    .inbox-desktop__pager button {
        min-width: 32px;
        height: 32px;
        border-radius: 10px;
        border: 1px solid rgba(232, 222, 209, 0.92);
        background: #fff;
    }

    .inbox-desktop__detail {
        display: grid;
        grid-template-rows: auto 1fr auto;
        gap: 16px;
    }

    .inbox-desktop__detail-head,
    .inbox-desktop__detail-actions,
    .inbox-desktop__composer-footer,
    .inbox-desktop__composer-tools {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .inbox-desktop__detail-head h2,
    .inbox-desktop__detail-head p {
        margin: 0;
    }

    .inbox-desktop__detail-head p {
        color: var(--dt-muted);
        font-size: 13px;
        margin-top: 4px;
    }

    .inbox-desktop__messages {
        display: grid;
        gap: 10px;
        align-content: start;
        padding: 18px;
        border-radius: 28px;
        background:
            radial-gradient(circle at top, rgba(255, 255, 255, 0.98) 0%, rgba(250, 245, 238, 0.88) 100%);
        border: 1px solid rgba(234, 224, 211, 0.86);
    }

    .inbox-message {
        display: flex;
        justify-content: flex-start;
    }

    .inbox-message--reply {
        justify-content: flex-end;
    }

    .inbox-message__body {
        max-width: min(72%, 520px);
        padding: 12px 16px;
        border: 1px solid rgba(232, 222, 209, 0.86);
        border-radius: 22px;
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 8px 20px rgba(34, 28, 20, 0.05);
    }

    .inbox-message--reply .inbox-message__body {
        background: linear-gradient(135deg, #d48a1d 0%, #bc7717 100%);
        border-color: rgba(165, 96, 13, 0.74);
        color: #fffdfa;
    }

    .inbox-message__meta span {
        color: var(--dt-muted);
        font-size: 11px;
    }

    .inbox-message--reply .inbox-message__meta span {
        color: rgba(255, 248, 239, 0.82);
    }

    .inbox-message__body p {
        margin: 0;
        font-size: 14px;
        line-height: 1.5;
    }

    .inbox-message__meta {
        margin-top: 6px;
        display: flex;
        justify-content: flex-end;
    }

    .inbox-desktop__composer {
        border-top: 1px solid rgba(232, 222, 209, 0.9);
        padding-top: 14px;
        display: grid;
        gap: 10px;
    }

    .inbox-desktop__composer-input {
        width: 100%;
        min-height: 74px;
        resize: none;
        border: 1px solid rgba(232, 222, 209, 0.92);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.94);
        padding: 14px 18px;
        font: inherit;
    }

    .inbox-desktop__send {
        min-width: 92px;
        opacity: 0.6;
        border-radius: 999px;
    }

    .inbox-desktop__thread-hero {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
    }

    .inbox-desktop__thread-hero-avatar {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-weight: 700;
        flex: 0 0 auto;
        border: 1px solid rgba(184, 117, 26, 0.16);
    }

    .inbox-desktop__thread-hero-copy {
        min-width: 0;
    }

    .inbox-desktop__thread-hero-copy h2,
    .inbox-desktop__thread-hero-copy p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .analytics-desktop__subtitle {
        margin-top: -10px;
    }

    .analytics-desktop__refreshed {
        justify-self: end;
        color: var(--dt-muted);
        font-size: 12px;
        margin-top: -4px;
    }

    .analytics-desktop__middle {
        display: grid;
        grid-template-columns: 1.55fr 1.15fr 1fr;
        gap: 18px;
    }

    .analytics-desktop__triplet {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid rgba(232, 222, 209, 0.8);
    }

    .analytics-desktop__triplet span,
    .analytics-desktop__triplet em,
    .analytics-desktop__trend-list div strong,
    .analytics-desktop__trend-list div span {
        display: block;
    }

    .analytics-desktop__triplet span,
    .analytics-desktop__triplet em {
        color: var(--dt-muted);
        font-size: 12px;
        font-style: normal;
    }

    .analytics-desktop__triplet strong {
        display: block;
        margin: 6px 0;
        font-size: 26px;
    }

    .analytics-desktop__donut-layout {
        display: grid;
        grid-template-columns: 220px 1fr;
        gap: 18px;
        align-items: center;
    }

    .analytics-desktop__donut-ring {
        width: 220px;
        height: 220px;
        border-radius: 50%;
        background: conic-gradient(#b8751a 0 46%, #f0c988 46% 72%, #83b389 72% 84%, #c9ced6 84% 94%, #a7adb5 94% 100%);
        display: grid;
        place-items: center;
        position: relative;
    }

    .analytics-desktop__donut-ring::after {
        content: "";
        width: 118px;
        height: 118px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
    }

    .analytics-desktop__donut-ring strong,
    .analytics-desktop__donut-ring span {
        position: relative;
        z-index: 1;
        display: block;
        text-align: center;
    }

    .analytics-desktop__donut-ring strong {
        font-size: 40px;
        line-height: 1;
    }

    .analytics-desktop__legend {
        display: grid;
        gap: 10px;
    }

    .analytics-desktop__legend div {
        display: grid;
        grid-template-columns: auto 1fr auto;
        gap: 10px;
        align-items: center;
        font-size: 13px;
    }

    .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: block;
    }

    .dot--gold { background: #b8751a; }
    .dot--sand { background: #f0c988; }
    .dot--sage { background: #83b389; }
    .dot--muted { background: #c9ced6; }
    .dot--gray { background: #a7adb5; }

    .analytics-desktop__link {
        justify-self: start;
    }

    .analytics-desktop__trend-list {
        display: grid;
        gap: 12px;
    }

    .analytics-desktop__trend-list div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
    }

    .analytics-desktop__switchers {
        display: inline-flex;
        gap: 10px;
        margin-bottom: 14px;
    }

    .analytics-desktop__switcher {
        min-height: 38px;
        padding-inline: 16px;
    }

    .analytics-desktop__report-button {
        min-height: 40px;
    }

    .royalties-desktop__filters,
    .royalties-desktop__filters-left,
    .royalties-desktop__rates {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        align-items: end;
    }

    .royalties-desktop__filters {
        flex-wrap: wrap;
    }

    .royalties-desktop__filters-left {
        flex: 1 1 auto;
        flex-wrap: wrap;
    }

    .royalties-desktop__filters-left .field {
        min-width: 220px;
    }

    .royalties-desktop__rates {
        align-items: center;
        margin-left: auto;
    }

    .royalties-desktop__rates div span,
    .royalties-desktop__rates div strong,
    .royalties-desktop__rates div em {
        display: block;
    }

    .royalties-desktop__rates div span,
    .royalties-desktop__rates div em {
        color: var(--dt-muted);
        font-size: 12px;
        font-style: normal;
    }

    .royalties-desktop__rates div strong {
        margin: 6px 0 2px;
        color: var(--dt-success);
        font-size: 28px;
        line-height: 1;
    }

    .royalties-desktop__formula {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

    .desktop-stat-card--formula {
        min-width: 0;
        padding: 16px 16px 14px;
        gap: 10px;
    }

    .desktop-stat-card--formula h3 {
        margin: 10px 0 8px;
        font-size: 18px;
    }

    .royalties-desktop__how {
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: 16px;
        align-items: start;
    }

    .royalties-desktop__how-icon {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: rgba(184, 117, 26, 0.12);
        color: var(--dt-gold);
        display: grid;
        place-items: center;
    }

    .royalties-desktop__how p,
    .royalties-desktop__how strong {
        margin: 0 0 8px;
    }

    .royalties-desktop__body {
        display: grid;
        grid-template-columns: 2fr 360px;
        gap: 18px;
        align-items: start;
    }

    .royalties-desktop__submission {
        display: grid;
        gap: 16px;
    }

    .royalties-desktop__coming-soon {
        padding: 16px;
        border: 1px solid rgba(232, 222, 209, 0.9);
        border-radius: 14px;
        background: rgba(255, 250, 244, 0.8);
    }

    .royalties-desktop__coming-soon strong,
    .royalties-desktop__coming-soon p {
        margin: 0 0 8px;
    }

    .royalties-desktop__submit {
        opacity: 0.6;
    }

    .royalties-desktop__timeline {
        display: grid;
        gap: 12px;
        padding-top: 8px;
        border-top: 1px solid rgba(232, 222, 209, 0.82);
    }

    .royalties-desktop__timeline div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }

    .royalties-desktop__timeline span,
    .royalties-desktop__timeline em {
        font-style: normal;
        font-size: 13px;
    }

    .royalties-desktop__timeline span {
        color: var(--dt-muted);
    }

    .time-desktop__tabs {
        justify-content: flex-start;
        gap: 30px;
        overflow: visible;
    }

    .time-desktop__tab-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 22px;
        height: 22px;
        border-radius: 999px;
        margin-left: 6px;
        background: #f8ead7;
        color: var(--dt-gold);
        font-size: 11px;
        font-weight: 700;
    }

    .time-desktop__top,
    .time-desktop__bottom {
        display: grid;
        gap: 18px;
    }

    .time-desktop__top {
        grid-template-columns: 1.35fr 1.1fr 1fr;
    }

    .time-desktop__bottom {
        grid-template-columns: 1.1fr 1fr 0.92fr;
    }

    .time-desktop__status {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        padding-bottom: 16px;
        border-bottom: 1px solid rgba(232, 222, 209, 0.82);
    }

    .time-desktop__mini-stats,
    .time-desktop__weekly {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        padding-top: 16px;
    }

    .time-desktop__weekly {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .time-desktop__mini-stats span,
    .time-desktop__weekly span,
    .time-desktop__weekly em,
    .time-desktop__history div span,
    .time-desktop__history div em,
    .time-desktop__progress small,
    .time-desktop__reports div span,
    .time-desktop__request span,
    .time-desktop__request p,
    .time-desktop__request small {
        display: block;
        color: var(--dt-muted);
        font-size: 12px;
        font-style: normal;
    }

    .time-desktop__mini-stats strong,
    .time-desktop__weekly strong {
        display: block;
        margin-top: 6px;
        font-size: 20px;
        line-height: 1;
    }

    .time-desktop__mini-stat--status em {
        display: inline-flex;
        margin-top: 8px;
        font-style: normal;
    }

    .time-desktop__progress {
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid rgba(232, 222, 209, 0.82);
    }

    .time-desktop__progress > div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        align-items: center;
    }

    .time-desktop__progress-bar {
        margin: 10px 0;
        height: 6px;
        border-radius: 999px;
        background: #ece8e0;
        overflow: hidden;
    }

    .time-desktop__progress-bar span {
        display: block;
        width: 85%;
        height: 100%;
        background: var(--dt-success);
    }

    .time-desktop__history {
        display: grid;
        gap: 14px;
    }

    .time-desktop__history div,
    .time-desktop__history-total,
    .time-desktop__request,
    .time-desktop__reports > div {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: start;
    }

    .time-desktop__history-total {
        margin-top: 18px;
        padding-top: 16px;
        border-top: 1px solid rgba(232, 222, 209, 0.82);
        align-items: center;
    }

    .time-desktop__status-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
        margin-bottom: 16px;
    }

    .time-desktop__status-grid div {
        padding: 14px;
        border-radius: 14px;
        border: 1px solid rgba(232, 222, 209, 0.82);
        text-align: center;
    }

    .time-desktop__status-grid strong {
        display: block;
        font-size: 32px;
        line-height: 1;
        margin-bottom: 8px;
    }

    .time-desktop__requests,
    .time-desktop__reports {
        display: grid;
        gap: 14px;
    }

    .time-desktop__request {
        padding: 14px 0;
        border-bottom: 1px solid rgba(232, 222, 209, 0.82);
    }

    .time-desktop__request:last-child {
        border-bottom: 0;
    }

    .time-desktop__request em {
        min-width: 110px;
        text-align: center;
        padding: 6px 10px;
        border-radius: 999px;
        background: #fff2df;
        color: #b8751a;
        align-self: start;
    }

    .time-desktop__reports > div {
        padding: 10px 0;
        border-bottom: 1px solid rgba(232, 222, 209, 0.82);
    }

    .time-desktop__reports > div:last-child {
        border-bottom: 0;
    }

    .time-desktop__note {
        margin-top: 14px;
        padding: 16px;
        border: 1px solid rgba(184, 117, 26, 0.26);
        border-radius: 14px;
        background: rgba(255, 250, 244, 0.84);
        color: #7b5d32;
        font-size: 13px;
    }

    .team-desktop__toolbar,
    .team-desktop__actions {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        align-items: center;
    }

    .team-desktop__toolbar {
        display: grid;
        gap: 14px;
        align-items: start;
    }

    .team-desktop__filters {
        flex: 1 1 auto;
        min-width: 0;
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .desktop-table--team tbody td {
        white-space: normal;
    }

    .team-desktop__footer {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-top: 18px;
        color: var(--dt-muted);
        font-size: 12px;
    }

    .team-workspace {
        display: grid;
        grid-template-columns: minmax(320px, 0.95fr) minmax(0, 1.45fr);
        gap: 18px;
        align-items: start;
    }

    .team-workspace__list,
    .team-workspace__detail,
    .team-workspace__empty {
        display: grid;
        gap: 18px;
    }

    .team-workspace__list-head,
    .team-detail__hero {
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: start;
    }

    .team-list {
        display: grid;
        gap: 10px;
        max-height: calc(100vh - 270px);
        overflow: auto;
        padding-right: 4px;
    }

    .team-list__item {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr) auto;
        gap: 14px;
        align-items: start;
        padding: 14px;
        border: 1px solid rgba(232, 222, 209, 0.82);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.78);
        text-align: left;
        cursor: pointer;
    }

    .team-list__item--selected {
        border-color: rgba(184, 117, 26, 0.55);
        box-shadow: 0 14px 28px rgba(184, 117, 26, 0.12);
    }

    .team-list__avatar,
    .team-detail__avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #121212;
        color: #fff;
        font-weight: 700;
        letter-spacing: 0.08em;
    }

    .team-detail__avatar {
        width: 64px;
        height: 64px;
        font-size: 18px;
    }

    .team-list__content,
    .team-list__meta,
    .team-detail__chips,
    .team-panel-actions,
    .team-access-group,
    .team-access-columns,
    .team-toggle-row {
        display: grid;
        gap: 8px;
    }

    .team-list__content strong,
    .team-list__content span,
    .team-detail__hero h2,
    .team-detail__hero p {
        margin: 0;
    }

    .team-list__content span,
    .team-detail__hero p {
        color: var(--dt-muted);
        font-size: 13px;
    }

    .team-list__meta {
        justify-items: end;
    }

    .team-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 6px 10px;
        border-radius: 999px;
        background: rgba(232, 222, 209, 0.62);
        color: var(--dt-black);
        font-size: 12px;
        font-weight: 600;
    }

    .team-banner {
        padding: 12px 14px;
        border-radius: 14px;
        font-size: 13px;
    }

    .team-banner--success {
        background: rgba(55, 129, 85, 0.12);
        color: #245a3d;
        border: 1px solid rgba(55, 129, 85, 0.22);
    }

    .team-banner--error,
    .team-note {
        background: rgba(255, 250, 244, 0.84);
        color: #7b5d32;
        border: 1px solid rgba(184, 117, 26, 0.26);
    }

    .team-note {
        padding: 14px;
        border-radius: 14px;
        font-size: 13px;
    }

    .team-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .team-tabs__button {
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid rgba(232, 222, 209, 0.82);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.78);
        color: var(--dt-muted);
        font-weight: 600;
        cursor: pointer;
    }

    .team-tabs__button--active {
        background: #fff4e4;
        border-color: rgba(184, 117, 26, 0.36);
        color: #9a6118;
    }

    .team-panel-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }

    .team-panel-grid--access {
        grid-template-columns: 1fr;
    }

    .team-access-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .team-access-stack {
        display: grid;
        gap: 18px;
    }

    .team-access-group {
        padding: 14px;
        border: 1px solid rgba(232, 222, 209, 0.82);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.74);
    }

    .team-access-group h3 {
        margin: 0 0 14px;
        font-size: 17px;
    }

    .team-role-group {
        display: grid;
        gap: 10px;
    }

    .team-role-group + .team-role-group {
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid rgba(232, 222, 209, 0.72);
    }

    .team-check {
        display: grid;
        grid-template-columns: 18px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
    }

    .team-check--card {
        padding: 10px 0;
    }

    .team-check span {
        display: grid;
        gap: 4px;
    }

    .team-check em {
        color: var(--dt-muted);
        font-size: 12px;
        font-style: normal;
    }

    .team-toggle-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-mobile-card {
        width: 100%;
        border: 0;
        background: transparent;
        padding: 0;
        text-align: left;
        cursor: pointer;
    }

    .team-directory-mobile-list {
        display: grid;
        gap: 0;
    }

    .team-directory-mobile-list-surface {
        flex: 1 1 auto;
        min-height: 0;
        overflow: auto;
        padding: 2px 12px 112px;
        border-radius: 14px;
        box-shadow: 0 10px 24px rgba(17, 17, 17, 0.05);
    }

    .team-directory-mobile-dock {
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 0;
        z-index: 6;
        padding: 10px 0 calc(max(10px, env(safe-area-inset-bottom)));
        transform: translateY(35px);
    }

    .page--team .team-directory-mobile-dock .field__input-wrap {
        min-height: 50px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.54);
        border: 1px solid rgba(246, 240, 233, 0.88);
        backdrop-filter: blur(22px) saturate(1.06);
        -webkit-backdrop-filter: blur(22px) saturate(1.06);
        box-shadow: 0 10px 24px rgba(17, 17, 17, 0.09);
    }

    .team-directory-mobile-list-surface__footer {
        padding: 8px 2px 0;
        color: #78716c;
        font-size: 10px;
        font-weight: 500;
        line-height: 1.15;
    }

    .team-directory-mobile-row {
        width: 100%;
        display: block;
        background: transparent;
        box-shadow: none;
        padding: 0;
        margin: 0;
        text-align: left;
        color: inherit;
    }

    .team-directory-mobile-row--interactive {
        cursor: pointer;
    }

    .team-directory-mobile-row--disabled {
        opacity: 0.82;
    }

    .team-directory-mobile-row__inner {
        width: 100%;
        gap: 10px;
        padding: 11px 2px;
        border-bottom: 1px solid rgba(232, 222, 209, 0.82);
    }

    .team-directory-mobile-row:last-child .team-directory-mobile-row__inner {
        border-bottom: 0;
    }

    .team-directory-mobile-row .team-row__avatar {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 11px;
        font-weight: 700;
        background: linear-gradient(135deg, #f2d7b5, #d8a15b);
        box-shadow: none;
    }

    .team-directory-mobile-row__meta {
        min-width: 0;
    }

    .team-directory-mobile-row__meta strong.team-directory-mobile-row__name {
        font-size: 12px;
        font-weight: 700;
        color: #18181b;
        line-height: 1.16;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .team-directory-mobile-row__meta span.team-directory-mobile-row__role {
        color: #78716c;
        font-size: 9px;
        font-weight: 500;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .team-directory-mobile-row__status {
        min-width: 48px;
        min-height: 20px;
        padding: 0 9px;
        border-radius: 7px;
        font-size: 9px;
        font-weight: 700;
        white-space: nowrap;
        margin-left: 8px;
    }

    .team-profile-surface {
        margin-top: 18px;
    }

    .team-detail-page {
        display: grid;
        gap: 18px;
    }

    .team-detail-page__top {
        display: flex;
        justify-content: flex-start;
    }

    .team-detail-page__back {
        justify-self: start;
    }

    .team-detail-page__back-icon {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: var(--dt-black);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: none;
    }

    .team-detail-page .team-profile-surface {
        margin-top: 0;
    }

    .team-member-page {
        display: grid;
        gap: 18px;
    }

    .team-member-page__topbar {
        display: grid;
        grid-template-columns: 54px 1fr 54px;
        align-items: center;
        gap: 12px;
    }

    .team-member-page__topbar h2 {
        margin: 0;
        text-align: center;
        font-size: 22px;
        font-weight: 700;
    }

    .team-member-page__topbar-spacer {
        width: 54px;
        height: 54px;
    }

    .team-member-page__back-button {
        width: 54px;
        height: 54px;
        border: 1px solid rgba(232, 222, 209, 0.96);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.82);
        color: var(--dt-black);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 8px 22px rgba(17, 17, 17, 0.06);
        cursor: pointer;
    }

    .team-member-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .team-member-tab {
        min-height: 58px;
        border: 1px solid rgba(232, 222, 209, 0.96);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.84);
        color: var(--dt-black);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 0 14px;
        font-size: 14px;
        font-weight: 500;
        box-shadow: 0 8px 22px rgba(17, 17, 17, 0.04);
        cursor: pointer;
    }

    .team-member-tab--active {
        border-color: rgba(184, 117, 26, 0.46);
        color: var(--dt-gold);
        box-shadow: inset 0 -3px 0 rgba(184, 117, 26, 0.96), 0 8px 22px rgba(17, 17, 17, 0.04);
    }

    .team-member-hero {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 20px;
        align-items: center;
        padding: 8px 2px 6px;
    }

    .team-member-hero__avatar {
        width: 104px;
        height: 104px;
        border-radius: 50%;
        border: 2px solid rgba(232, 222, 209, 0.86);
        background: rgba(255, 255, 255, 0.48);
        color: var(--dt-gold);
        display: grid;
        place-items: center;
        font-size: 40px;
        font-weight: 700;
    }

    .team-member-hero__content {
        display: grid;
        gap: 12px;
        min-width: 0;
    }

    .team-member-hero__content h3 {
        margin: 0;
        font-size: 24px;
        line-height: 1.1;
    }

    .team-member-status-pill {
        justify-self: start;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 42px;
        padding: 0 18px;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 600;
        border: 1px solid transparent;
    }

    .team-member-status-pill__dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: currentColor;
    }

    .team-member-status-pill--active {
        background: #ebf8ee;
        color: var(--dt-success);
        border-color: rgba(22, 163, 74, 0.12);
    }

    .team-member-status-pill--inactive,
    .team-member-status-pill--leave {
        background: #f3f4f6;
        color: #6b7280;
        border-color: rgba(107, 114, 128, 0.1);
    }

    .team-member-card-stack {
        display: grid;
        gap: 16px;
    }

    .team-member-card {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: center;
        gap: 18px;
        padding: 22px 22px 22px 20px;
        border: 1px solid rgba(232, 222, 209, 0.94);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 10px 28px rgba(17, 17, 17, 0.05);
    }

    .team-member-card--status {
        grid-template-columns: 48px minmax(0, 1fr) auto;
    }

    .team-member-card__icon {
        color: var(--dt-gold);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .team-member-card__body {
        display: grid;
        gap: 8px;
        min-width: 0;
    }

    .team-member-card__body label {
        color: #6b7280;
        font-size: 14px;
        font-weight: 500;
    }

    .team-member-card__input {
        width: 100%;
        border: 0;
        outline: none;
        background: transparent;
        color: #18181b;
        font: inherit;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.3;
        padding: 0;
    }

    .team-member-card__input::placeholder {
        color: #a8a29e;
    }

    .team-member-card__input[readonly] {
        cursor: default;
    }

    .team-member-card__input--select {
        appearance: none;
        -webkit-appearance: none;
        background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
        background-position: calc(100% - 12px) calc(50% - 3px), calc(100% - 7px) calc(50% - 3px);
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        padding-right: 28px;
    }

    .team-member-status-tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 84px;
        min-height: 42px;
        padding: 0 16px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 600;
        border: 1px solid transparent;
    }

    .team-member-status-tag--active {
        background: #ebf8ee;
        color: var(--dt-success);
        border-color: rgba(22, 163, 74, 0.12);
    }

    .team-member-status-tag--inactive,
    .team-member-status-tag--leave {
        background: #f3f4f6;
        color: #6b7280;
        border-color: rgba(107, 114, 128, 0.1);
    }

    .team-member-actions {
        display: flex;
        justify-content: flex-end;
        padding-top: 4px;
    }

    .team-profile-surface__header {
        display: flex;
        justify-content: space-between;
        gap: 14px;
        align-items: start;
        margin-bottom: 18px;
    }

    .team-profile-surface__header h2,
    .team-profile-surface__header p {
        margin: 0;
    }

    .team-profile-surface__header--compact {
        align-items: center;
        margin-bottom: 12px;
    }

    .team-detail__chips {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
    }

    .team-table__row--selected {
        background: rgba(255, 244, 228, 0.58);
    }

    .team-table__name-button {
        border: 0;
        background: transparent;
        padding: 0;
        color: var(--dt-black);
        font: inherit;
        font-weight: 600;
        cursor: pointer;
        text-align: left;
    }

    .team-table__name-button:hover,
    .team-table__name-button:focus-visible {
        color: #9a6118;
        text-decoration: underline;
    }

}

@media (min-width: 1450px) {
    .royalties-desktop__formula {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .time-desktop__mini-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .team-desktop__toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }
}

@media (max-width: 1279px) {
    .team-workspace {
        grid-template-columns: 1fr;
    }

    .team-list {
        max-height: none;
    }

    .team-access-columns,
    .team-toggle-row,
    .team-panel-grid {
        grid-template-columns: 1fr;
    }

    .team-profile-surface__header,
    .team-detail__hero {
        flex-direction: column;
    }
}

@media (max-width: 360px) {
    .toolbar-grid {
        grid-template-columns: 1fr;
    }

    .shared-inbox-controls {
        grid-template-columns: 1fr;
    }

    .toolbar-grid__compose {
        width: 100%;
    }

    .metric-grid--three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .status-panel__row {
        flex-direction: column;
        align-items: stretch;
    }
}

.team-profile-surface.team-member-page {
    display: grid;
    gap: 18px;
    margin-top: 0;
}

.team-profile-surface.team-member-page .team-member-page__topbar {
    display: grid;
    grid-template-columns: 54px 1fr 54px;
    align-items: center;
    gap: 12px;
}

.team-profile-surface.team-member-page .team-member-page__topbar h2 {
    margin: 0;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
}

.team-profile-surface.team-member-page .team-member-page__topbar-spacer {
    width: 54px;
    height: 54px;
}

.team-profile-surface.team-member-page .team-member-page__back-button {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--dt-gold-deep);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.team-profile-surface.team-member-page .team-member-mini-tabs .mini-tabs__item--active {
    border-bottom-color: transparent;
}

.team-profile-surface.team-member-page .team-member-mini-tabs .mini-tabs__item--active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 42px;
    height: 2px;
    border-radius: 999px;
    background: var(--dt-gold);
    transform: translateX(-50%);
}

.team-profile-surface.team-member-page .team-member-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.team-profile-surface.team-member-page .team-member-tab {
    min-height: 58px;
    border: 1px solid rgba(232, 222, 209, 0.96);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.9);
    color: var(--dt-black);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 22px rgba(17, 17, 17, 0.04);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.team-profile-surface.team-member-page .team-member-tab--active {
    border-color: rgba(184, 117, 26, 0.46);
    color: var(--dt-gold);
    box-shadow: inset 0 -3px 0 rgba(184, 117, 26, 0.96), 0 8px 22px rgba(17, 17, 17, 0.04);
}

.team-profile-surface.team-member-page .team-member-hero {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 8px 2px 6px;
}

.team-profile-surface.team-member-page .team-member-hero__avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    border: 2px solid rgba(232, 222, 209, 0.86);
    background: rgba(255, 255, 255, 0.48);
    color: var(--dt-gold);
    display: grid;
    place-items: center;
    font-size: 40px;
    font-weight: 700;
}

.team-profile-surface.team-member-page .team-member-hero__content {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.team-profile-surface.team-member-page .team-member-hero__content h3 {
    margin: 0;
    font-size: 24px;
    line-height: 1.1;
}

.team-profile-surface.team-member-page .team-member-status-pill {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
}

.team-profile-surface.team-member-page .team-member-status-pill__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: currentColor;
}

.team-profile-surface.team-member-page .team-member-status-pill--active,
.team-profile-surface.team-member-page .team-member-status-tag--active {
    background: #ebf8ee;
    color: var(--dt-success);
    border-color: rgba(22, 163, 74, 0.12);
}

.team-profile-surface.team-member-page .team-member-status-pill--inactive,
.team-profile-surface.team-member-page .team-member-status-pill--leave,
.team-profile-surface.team-member-page .team-member-status-tag--inactive,
.team-profile-surface.team-member-page .team-member-status-tag--leave {
    background: #f3f4f6;
    color: #6b7280;
    border-color: rgba(107, 114, 128, 0.1);
}

.team-profile-surface.team-member-page .team-member-card-stack {
    display: grid;
    gap: 16px;
}

.team-profile-surface.team-member-page .team-member-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 22px 22px 22px 20px;
    border: 1px solid rgba(232, 222, 209, 0.94);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 28px rgba(17, 17, 17, 0.05);
}

.team-profile-surface.team-member-page .team-member-card--status {
    grid-template-columns: 48px minmax(0, 1fr) auto;
}

.team-profile-surface.team-member-page .team-member-card__icon {
    color: var(--dt-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.team-profile-surface.team-member-page .team-member-card__body {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.team-profile-surface.team-member-page .team-member-card__body label {
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}

.team-profile-surface.team-member-page .team-member-card__input {
    width: 100%;
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: #18181b;
    font: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;
    padding: 0;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

.team-profile-surface.team-member-page .team-member-card__input::placeholder {
    color: #a8a29e;
}

.team-profile-surface.team-member-page .team-member-card__input[readonly] {
    cursor: default;
}

.team-profile-surface.team-member-page .team-member-card__input--select {
    background-image: linear-gradient(45deg, transparent 50%, #6b7280 50%), linear-gradient(135deg, #6b7280 50%, transparent 50%);
    background-position: calc(100% - 12px) calc(50% - 3px), calc(100% - 7px) calc(50% - 3px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
}

.team-profile-surface.team-member-page .team-member-status-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 84px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
}

.team-profile-surface.team-member-page .team-member-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.analytics-page {
    --analytics-bg: #fff7ed;
    --analytics-page-surface: var(--analytics-bg);
    --analytics-card: rgba(255, 255, 255, 0.94);
    --analytics-border: #e8ded1;
    --analytics-gold: #9c7949;
    --analytics-gold-dark: #7b5e39;
    --analytics-charcoal: #1f1f23;
    --analytics-muted: #6b7280;
    --analytics-success: #16a34a;
    --analytics-danger: #dc2626;
    --analytics-shadow: 0 14px 36px rgba(17, 17, 17, 0.05);
    --analytics-page-stack:
        radial-gradient(circle at top center, rgba(156, 121, 73, 0.13), transparent 32%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 247, 237, 0.95)),
        var(--analytics-page-surface);
    background: var(--analytics-page-stack);
    padding-inline: 0;
    padding-top: 2px;
}

.analytics-page,
.analytics-page * {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
}

.analytics-shell {
    display: grid;
    gap: 8px;
}

.analytics-hero {
    display: grid;
    justify-items: start;
    gap: 4px;
    padding-top: 0;
    text-align: left;
}

.analytics-hero__brand {
    justify-self: center;
}

.analytics-hero__brand .brand-mark__crest {
    width: 70px;
    height: 70px;
}

.analytics-hero__brand .brand-mark__title {
    font-size: clamp(26px, 4.8vw, 42px);
    letter-spacing: 0.08em;
}

.analytics-hero__brand .brand-mark__subtitle strong {
    letter-spacing: 0.28em;
}

.analytics-hero__copy {
    display: grid;
    gap: 4px;
    max-width: 360px;
}

.analytics-hero__copy h1 {
    margin: 0;
    color: #111111;
    font-size: clamp(17px, 5.2vw, 21px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.analytics-hero__copy .page-subtle {
    display: none;
}

.analytics-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.analytics-header h1 {
    margin: 0;
    color: #111111;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1.05;
}

.analytics-header__eyebrow {
    color: var(--analytics-gold-dark);
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.analytics-header__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.analytics-header__timestamp {
    color: var(--analytics-muted);
    font-size: 12px;
    line-height: 16px;
}

.analytics-refresh-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px solid var(--analytics-border);
    background: rgba(255, 255, 255, 0.82);
    color: var(--analytics-gold-dark);
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(17, 17, 17, 0.04);
}

.analytics-filterbar {
    display: grid;
    gap: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.app-grid {
    display: grid;
    gap: 8px;
}

.app-grid--paired {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.app-grid--paired > .app-button {
    width: 100%;
}

.franchise-network-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.franchise-network-status-control {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.franchise-network-status-control strong,
.franchise-network-status-control p {
    margin: 0;
}

.franchise-network-managed-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.franchise-network-managed-details > div {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--analytics-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.68);
}

.franchise-network-managed-details span,
.franchise-network-managed-details small {
    color: var(--analytics-muted);
    font-size: 11px;
    line-height: 15px;
}

.franchise-network-managed-details strong {
    overflow-wrap: anywhere;
    font-size: 13px;
    line-height: 17px;
}

.franchise-network-field--wide {
    grid-column: 1 / -1;
}

.franchise-network-franchise-picker {
    width: 100%;
    max-width: 720px;
}

.franchise-network-franchise-picker .field__input,
.franchise-network-connection-picker .field__input {
    min-height: 46px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 650;
}

.franchise-network-section-intro {
    display: grid;
    gap: 4px;
    padding-inline: 2px;
}

.franchise-network-section-intro h2,
.franchise-network-section-intro p {
    margin: 0;
}

.franchise-network-maintenance-section {
    display: grid;
    gap: 12px;
    padding-block: 2px 12px;
}

.franchise-network-maintenance-section + .franchise-network-maintenance-section {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--premium-divider, var(--dt-border));
}

.franchise-network-maintenance-section__header {
    display: grid;
    gap: 3px;
}

.franchise-network-maintenance-section__header h2,
.franchise-network-maintenance-section__header p {
    margin: 0;
}

.franchise-network-maintenance-section__header h2 {
    font-size: 15px;
    line-height: 19px;
}

.franchise-network-maintenance-section__header p {
    color: var(--analytics-muted);
    font-size: 12px;
    line-height: 17px;
}

.franchise-network-system-card {
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    box-shadow: none;
}

.franchise-network-system-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
}

.franchise-network-system-card__header > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.franchise-network-system-card__header h3,
.franchise-network-system-card__header p {
    margin: 0;
}

.franchise-network-system-card__header h3 {
    font-size: 18px;
    line-height: 22px;
}

.franchise-network-system-card__header p {
    color: var(--analytics-muted);
    font-size: 13px;
    line-height: 18px;
}

.franchise-network-review-suggestion {
    display: grid;
    gap: 2px;
    margin: 0;
    color: var(--analytics-muted);
    font-size: 12px;
    line-height: 16px;
}

.franchise-network-review-suggestion strong {
    color: var(--dt-black);
}

.franchise-network-connection-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--analytics-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.82);
}

.franchise-network-connection-row + .franchise-network-connection-row {
    margin-top: 8px;
}

.franchise-network-connection-row__copy {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.franchise-network-connection-row__copy strong,
.franchise-network-connection-row__copy span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.franchise-network-connection-row__copy strong {
    font-size: 14px;
    line-height: 18px;
}

.franchise-network-connection-row__copy span {
    color: var(--analytics-muted);
    font-size: 12px;
    line-height: 16px;
}

.franchise-network-connection-row__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.franchise-network-connection-modal {
    max-height: min(82vh, 680px);
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.franchise-network-connection-modal__body {
    gap: 14px;
}

.franchise-network-connection-modal__identity {
    display: grid;
    gap: 3px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--premium-divider, var(--dt-border));
}

.franchise-network-connection-modal__identity span,
.franchise-network-connection-modal__identity small {
    color: var(--analytics-muted);
    font-size: 12px;
    line-height: 16px;
}

.franchise-network-connection-modal__identity strong {
    overflow-wrap: anywhere;
    font-size: 16px;
    line-height: 20px;
}

.franchise-network-connection-modal__message {
    padding: 10px 12px;
    border: 1px solid color-mix(in srgb, var(--dt-success) 35%, transparent);
    border-radius: 12px;
    color: var(--dt-success) !important;
    background: color-mix(in srgb, var(--dt-success) 10%, transparent);
}

.franchise-network-booking-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.franchise-network-booking-actions > .app-button {
    width: 100%;
}

@media (max-width: 720px) {
    .franchise-network-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .franchise-network-field--wide {
        grid-column: auto;
    }

    .franchise-network-managed-details {
        grid-template-columns: minmax(0, 1fr);
    }

    .franchise-network-connection-row {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
    }

    .franchise-network-connection-row__actions {
        justify-content: flex-end;
        flex-wrap: nowrap;
    }

    .franchise-network-booking-actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

.app-grid--metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block: 8px;
}

.app-grid--stack {
    grid-template-columns: minmax(0, 1fr);
    margin-block: 8px;
}

.app-section-title {
    display: grid;
    gap: 6px;
    margin: 4px 2px 0;
}

.app-section-title__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.app-section-title__title-row > h1,
.app-section-title__back-link {
    flex: 1 1 auto;
    min-width: 0;
}

.app-section-title__actions {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.app-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--dt-border);
    border-radius: 999px;
    color: var(--analytics-gold);
    background: var(--dt-white);
    box-shadow: var(--dt-shadow-sm);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.app-icon-button:hover {
    border-color: color-mix(in srgb, var(--dt-gold) 42%, var(--dt-border));
}

.app-icon-button:active:not(:disabled) {
    transform: scale(0.96);
}

.app-icon-button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dt-gold) 22%, transparent);
}

.app-icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.52;
}

.app-icon-button--control {
    border-radius: 12px;
}

.app-section-title__back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    min-width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--analytics-charcoal);
    font: inherit;
    text-decoration: none;
    justify-content: flex-start;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: color 140ms ease;
    min-width: 0;
}

.app-section-title__back {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 999px;
}

.app-section-title__back .app-icon {
    width: 22px;
    height: 22px;
    stroke-width: 2.3;
}

.app-section-title__back-link:hover {
    color: #111111;
}

.app-section-title__back-link:active {
    color: #111111;
}

.app-section-title__back-link:focus-visible {
    outline: none;
}

.app-section-title h1,
.app-section-title .page-subtle {
    margin: 0;
}

.app-section-title h1 {
    color: #111111;
    font-size: clamp(2.15rem, 5.9vw, 2.7rem);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.045em;
}

.app-section-title__back-link h1 {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(1.92rem, 5.2vw, 2.32rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
}

.app-section-title__welcome {
    font-size: 1.05rem;
    line-height: 1.45;
}

.app-section-title--topbar-owned {
    gap: 4px;
    margin-top: 0;
}

.app-section-title--topbar-owned .app-section-title__title-row {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 899px) {
    .app-section-title--mobile-topbar-owned {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

.app-mode-selector--section {
    margin-block: 8px;
}

.app-grid--section {
    margin-block: 8px;
}

.app-panel--section {
    margin-top: 10px;
}

.analytics-panel,
.app-panel,
.analytics-kpi-card,
.app-metric-card,
.analytics-opportunity-card,
.analytics-location-card,
.app-list-card,
.analytics-modal,
.app-info-modal {
    border: 1px solid rgba(232, 222, 209, 0.94);
    background: var(--analytics-card);
    box-shadow: var(--analytics-shadow);
}

.analytics-panel,
.app-panel {
    border-radius: 18px;
}

.analytics-panel,
.app-panel {
    background: #ffffff;
}

.analytics-kpi-card,
.app-metric-card,
.analytics-opportunity-card {
    border-radius: 16px;
}

.analytics-kpi-card,
.app-metric-card {
    background: #ffffff;
}

.analytics-location-card,
.app-list-card,
.analytics-modal,
.app-info-modal {
    border-radius: 18px;
}

.analytics-location-card,
.app-list-card,
.app-action-list-card {
    background: #ffffff;
}

.analytics-filterbar__row {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analytics-filter,
.app-filter-select {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.analytics-filter__sr,
.app-filter-select__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.analytics-filter__label {
    color: var(--analytics-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.analytics-filter__control .field__input,
.app-filter-select__control .field__input,
.analytics-filter--button {
    min-height: 34px;
    border-radius: 12px;
    border-color: rgba(232, 222, 209, 0.96);
    box-shadow: 0 5px 12px rgba(17, 17, 17, 0.04);
}

.analytics-filter__control .field__input,
.app-filter-select__control .field__input {
    padding-left: 30px;
    padding-right: 36px;
    font-size: 9.5px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.92);
    line-height: 13px;
}

.field__input-wrap--select .field__input {
    appearance: none;
    -webkit-appearance: none;
    background-image: none;
}

.analytics-filter__control .field__input option,
.app-filter-select__control .field__input option {
    font-size: 14px;
}

.analytics-filter__icon,
.app-filter-select__icon {
    color: var(--analytics-charcoal);
}

.analytics-filter--button {
    align-items: center;
    padding: 0 8px;
    text-align: left;
    color: var(--analytics-charcoal);
    background: rgba(255, 255, 255, 0.92);
}

.analytics-filter__button-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.analytics-filter--button strong {
    font-size: 10px;
    font-weight: 700;
    line-height: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-custom-range {
    display: grid;
    gap: 10px;
    padding-top: 4px;
}

.analytics-custom-range__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.analytics-tabbar {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 0;
    border-bottom: 1px solid rgba(232, 222, 209, 0.86);
    scrollbar-width: none;
    white-space: nowrap;
    margin-bottom: 10px;
    padding-inline: 2px;
}

.analytics-tabbar::-webkit-scrollbar {
    display: none;
}

.analytics-tabbar__item {
    flex: 0 0 auto;
    padding: 8px 0 9px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #5f6672;
    font-size: 12px;
    font-weight: 700;
}

.analytics-tabbar__item--active {
    color: rgb(156, 121, 73);
    border-bottom-color: rgb(156, 121, 73);
}

.analytics-card-grid {
    display: grid;
    gap: 8px;
}

.analytics-card-grid--kpis,
.analytics-card-grid--opportunities,
.analytics-service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.analytics-kpi-card,
.app-metric-card,
.analytics-opportunity-card {
    display: grid;
    grid-template-rows: minmax(26px, auto) 22px 14px minmax(14px, 28px);
    gap: 4px;
    padding: 10px;
    min-height: 112px;
    height: 112px;
    box-sizing: border-box;
    overflow: hidden;
}

.analytics-meta {
    display: none;
}

.analytics-loading-notice {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(232, 222, 209, 0.94);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 24px rgba(17, 17, 17, 0.05);
}

.analytics-loading-notice__pulse {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--analytics-gold);
    box-shadow: 0 0 0 0 rgba(156, 121, 73, 0.38);
    animation: analytics-pulse 1.6s ease-in-out infinite;
}

.analytics-loading-notice__copy {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.analytics-loading-notice__copy strong {
    color: #111111;
    font-size: 12px;
    line-height: 15px;
}

.analytics-loading-notice__copy span {
    color: var(--analytics-muted);
    font-size: 11px;
    line-height: 14px;
}

.analytics-kpi-card,
.app-metric-card {
    grid-template-columns: 1fr;
    align-content: start;
}

.analytics-kpi-card--interactive {
    width: 100%;
    text-align: left;
    cursor: pointer;
}

.analytics-kpi-card--interactive:hover,
.analytics-kpi-card--interactive:focus-visible {
    border-color: rgba(156, 121, 73, 0.5);
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.06);
}

.analytics-kpi-card--selected {
    border-color: rgba(156, 121, 73, 0.72);
    box-shadow: 0 14px 28px rgba(156, 121, 73, 0.12);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 249, 238, 0.98) 100%);
}

.app-metric-card--positive.analytics-kpi-card--interactive:hover,
.app-metric-card--positive.analytics-kpi-card--interactive:focus-visible {
    border-color: rgba(92, 146, 111, 0.46);
    box-shadow: 0 12px 24px rgba(92, 146, 111, 0.12);
}

.app-metric-card--positive.analytics-kpi-card--selected {
    border-color: rgba(92, 146, 111, 0.68);
    box-shadow: 0 14px 28px rgba(92, 146, 111, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 251, 246, 0.98) 100%);
}

.app-metric-card--negative.analytics-kpi-card--interactive:hover,
.app-metric-card--negative.analytics-kpi-card--interactive:focus-visible {
    border-color: rgba(190, 104, 91, 0.44);
    box-shadow: 0 12px 24px rgba(190, 104, 91, 0.12);
}

.app-metric-card--negative.analytics-kpi-card--selected {
    border-color: rgba(190, 104, 91, 0.62);
    box-shadow: 0 14px 28px rgba(190, 104, 91, 0.14);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(252, 245, 244, 0.98) 100%);
}

.analytics-kpi-card__icon,
.app-metric-card__icon,
.analytics-opportunity-card__title .analytics-kpi-card__icon {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(156, 121, 73, 0.08);
    color: var(--analytics-gold);
}

.analytics-kpi-card__top,
.app-metric-card__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: start;
    min-height: 26px;
}

.analytics-opportunity-card__title {
    display: grid;
    gap: 4px;
}

.analytics-kpi-card__label,
.app-metric-card__label,
.analytics-opportunity-card__title span {
    color: var(--analytics-charcoal);
    font-size: 11px;
    line-height: 13px;
    font-weight: 800;
}

.analytics-kpi-card strong,
.app-metric-card strong,
.analytics-opportunity-card strong,
.analytics-highlight strong {
    color: #111111;
    font-size: 18px;
    line-height: 1.05;
    letter-spacing: 0;
}

.analytics-kpi-card__label,
.app-metric-card__label {
    max-width: none;
    min-height: 26px;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.analytics-kpi-card__label--wide,
.app-metric-card__label--wide {
    max-width: none;
}

.analytics-kpi-card__value,
.app-metric-card__value {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-metric-card__value-row {
    display: contents;
}

.app-metric-card--positive .app-metric-card__value {
    color: #3f7754;
}

.app-metric-card--negative .app-metric-card__value {
    color: #b35e57;
}

.analytics-kpi-card__trend,
.app-metric-card__trend {
    display: flex;
    align-items: baseline;
    gap: 2px;
    flex-wrap: nowrap;
    max-width: 100%;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    min-height: 14px;
}

.analytics-kpi-card__trend-primary,
.app-metric-card__trend-primary {
    font-size: 11px;
    line-height: 1.05;
    flex: 0 0 auto;
}

.analytics-trend,
.app-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    line-height: 11px;
    font-weight: 600;
    flex-wrap: wrap;
}

.analytics-trend--positive,
.app-trend--positive {
    color: var(--analytics-success, #16a34a);
}

.analytics-trend--negative,
.app-trend--negative {
    color: var(--analytics-danger, #dc2626);
}

.analytics-trend--neutral,
.app-trend--neutral {
    color: var(--analytics-muted, #6b7280);
}

.analytics-kpi-card__support,
.app-metric-card__support {
    color: var(--analytics-muted);
    font-size: 10px;
    line-height: 1.25;
    font-weight: 600;
    display: -webkit-box;
    white-space: pre-line;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    min-height: 25px;
}

.app-metric-card--stacked-support .app-metric-card__support {
    display: block;
    white-space: pre-line;
    -webkit-line-clamp: unset;
}

.analytics-kpi-card__support.analytics-trend--positive,
.app-metric-card__support.app-trend--positive {
    color: var(--analytics-success, #16a34a);
}

.analytics-kpi-card__support.analytics-trend--negative,
.app-metric-card__support.app-trend--negative {
    color: var(--analytics-danger, #dc2626);
}

.analytics-kpi-card__support.analytics-trend--neutral,
.app-metric-card__support.app-trend--neutral {
    color: var(--analytics-muted, #6b7280);
}

/* Approved compact metric-card standard. Surfaces opt in deliberately while
   the remaining card families are reviewed in sequence. */
.app-metric-card--standard.app-metric-card {
    grid-template-rows: 28px 38px 28px;
    gap: 4px;
    min-height: 128px;
    height: 128px;
}

.app-metric-card--standard .app-metric-card__top {
    min-height: 28px;
    height: 28px;
}

.app-metric-card--standard .analytics-kpi-card__label,
.app-metric-card--standard .app-metric-card__label {
    min-height: 28px;
    font-size: 11px;
    line-height: 13px;
}

.app-metric-card--standard .app-metric-card__value-row {
    display: grid;
    grid-template-rows: 22px 14px;
    align-content: start;
    gap: 2px;
    min-width: 0;
    min-height: 38px;
    overflow: hidden;
}

.app-metric-card--standard .app-metric-card__value {
    min-width: 0;
    font-size: 19px;
    line-height: 22px;
}

.app-metric-card--standard .app-metric-card__trend {
    flex: 0 0 auto;
    min-height: 0;
    margin-top: 0;
    overflow: visible;
}

.app-metric-card--standard .app-metric-card__trend > span,
.app-metric-card--standard .app-metric-card__trend-primary {
    font-size: 12px;
    line-height: 14px;
}

.app-metric-card--standard .app-metric-card__support {
    min-height: 28px;
    font-size: 11px;
    line-height: 14px;
}

.analytics-kpi-card__placeholder,
.app-metric-card__placeholder {
    visibility: hidden;
}

.analytics-info-button--metric,
.app-info-button--metric {
    width: 24px;
    height: 24px;
    align-self: start;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.analytics-panel,
.app-panel {
    display: grid;
    gap: 8px;
    padding: 9px;
    overflow: hidden;
}

.analytics-panel__header,
.app-panel__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
}

.app-panel__header--with-action {
    position: relative;
    display: block;
    padding-right: 58px;
}

.analytics-panel__header h2,
.app-panel__header h2 {
    margin: 0;
    color: #111111;
    font-size: clamp(12px, 3.8vw, 15px);
    line-height: 1.12;
}

.analytics-panel__header .page-subtle,
.app-panel__header .page-subtle {
    margin-top: 2px;
}

.app-panel__action {
    position: absolute;
    top: 1px;
    right: 0;
    margin: 1px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--analytics-gold);
    font-size: 11px;
    line-height: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.analytics-inline-link {
    color: var(--analytics-gold);
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.analytics-chip-row,
.app-chip-row {
    display: flex;
    gap: 5px;
    flex-wrap: nowrap;
    margin: 2px 0 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.analytics-chip-row::-webkit-scrollbar,
.app-chip-row::-webkit-scrollbar {
    display: none;
}

.analytics-chip,
.app-chip {
    border: 1px solid rgba(232, 222, 209, 0.94);
    background: rgba(243, 231, 214, 0.4);
    color: #495160;
    border-radius: 999px;
    min-height: 24px;
    padding: 0 9px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    flex: 0 0 auto;
}

.analytics-chip--active,
.app-chip--active {
    background: #9c7949;
    color: white;
    border-color: transparent;
}

.analytics-trend-chart,
.app-trend-chart {
    display: grid;
    gap: 8px;
}

.analytics-trend-chart__frame,
.app-trend-chart__frame {
    position: relative;
    min-width: 0;
}

.analytics-trend-chart__plot,
.app-trend-chart__plot {
    position: relative;
    height: 136px;
    min-height: 136px;
    padding: 0;
    overflow: hidden;
}

.analytics-trend-chart__canvas,
.app-trend-chart__canvas {
    width: 100%;
    height: 100%;
    display: block;
    touch-action: pan-y;
}

.analytics-trend-tooltip,
.app-trend-tooltip {
    position: absolute;
    display: grid;
    gap: 2px;
    max-width: 132px;
    min-width: 96px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(31, 31, 35, 0.96);
    border: 0;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    color: white;
    font-size: 11px;
    line-height: 14px;
    z-index: 4;
    pointer-events: none;
    transition: opacity 120ms ease;
}

.analytics-trend-tooltip strong,
.app-trend-tooltip strong {
    font-size: 12px;
    color: white;
}

.analytics-trend-tooltip--hidden,
.app-trend-tooltip--hidden {
    opacity: 0;
    visibility: hidden;
}

.analytics-trend-chart__hint,
.app-trend-chart__hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--analytics-muted);
    font-size: 9px;
    font-weight: 600;
}

.royalties-chart-panel__grouping,
.royalties-trend-chart__hint {
    display: none;
}

.app-rank-card-list,
.analytics-location-card-list,
.analytics-opportunity-list {
    display: grid;
    gap: 2px;
}

.analytics-ranking__footer {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

.analytics-leaderboard {
    display: grid;
    gap: 12px;
}

.analytics-leaderboard__intro {
    display: flex;
    padding: 4px 2px 2px;
}

.analytics-leaderboard__intro h2,
.analytics-leaderboard__card-header h3 {
    margin: 0;
    color: #111111;
}

.analytics-leaderboard__intro h2 {
    font-size: 20px;
    line-height: 24px;
}

.analytics-leaderboard__controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
}

.analytics-leaderboard__week-filter {
    width: 100%;
}

.analytics-leaderboard__controls .analytics-leaderboard__mode-filter {
    width: 100%;
    min-width: 0;
}

.analytics-leaderboard__card {
    padding: 16px;
}

.analytics-leaderboard__podium {
    gap: 0;
    padding: 16px 16px 12px;
}

.analytics-leaderboard__podium-stage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 6px;
    min-height: 188px;
    padding: 8px 2px 0;
    border-bottom: 1px solid rgba(232, 222, 209, 0.82);
}

.analytics-leaderboard__podium-place {
    display: grid;
    grid-template-rows: 42px auto;
    align-items: end;
    min-width: 0;
    text-align: center;
}

.analytics-leaderboard__podium-medal {
    display: inline-flex;
    align-items: end;
    justify-content: center;
    font-size: 38px;
    line-height: 1;
}

.analytics-leaderboard__podium-block {
    display: grid;
    align-content: center;
    gap: 8px;
    min-height: 88px;
    padding: 12px 8px 10px;
    border: 1px solid rgba(232, 222, 209, 0.9);
    border-radius: 10px 10px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 246, 243, 0.98) 100%);
}

.analytics-leaderboard__podium-block strong {
    display: -webkit-box;
    overflow: hidden;
    color: #111111;
    font-size: 12px;
    line-height: 15px;
    font-weight: 800;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.analytics-leaderboard__podium-block span {
    color: var(--analytics-muted);
    font-size: 10px;
    line-height: 13px;
    font-weight: 800;
}

.analytics-leaderboard__podium-place--1 .analytics-leaderboard__podium-medal {
    font-size: 48px;
}

.analytics-leaderboard__podium-place--1 .analytics-leaderboard__podium-block {
    min-height: 126px;
    border-color: rgba(197, 137, 37, 0.38);
    background: linear-gradient(180deg, rgba(255, 253, 246, 0.98) 0%, rgba(252, 240, 205, 0.9) 100%);
}

.analytics-leaderboard__podium-place--1 .analytics-leaderboard__podium-block span {
    color: #9b6b21;
    font-size: 11px;
}

.analytics-leaderboard__podium-place--3 .analytics-leaderboard__podium-block {
    min-height: 72px;
    background: linear-gradient(180deg, rgba(255, 250, 245, 0.98) 0%, rgba(247, 232, 220, 0.9) 100%);
}

.analytics-leaderboard__podium-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    margin-top: 12px;
    padding: 10px 8px;
    border: 1px solid rgba(232, 222, 209, 0.8);
    border-radius: 8px;
    background: rgba(250, 247, 243, 0.72);
}

.analytics-leaderboard__podium-footer span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    color: #4f4a43;
    font-size: 9px;
    line-height: 12px;
    font-weight: 700;
    text-align: center;
}

.analytics-leaderboard__podium-footer .app-icon {
    flex: 0 0 auto;
    color: #96713f;
}

.analytics-leaderboard__card-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
}

.analytics-leaderboard__card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.analytics-leaderboard .analytics-leaderboard__info-button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    margin: -9px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.analytics-leaderboard__card-header h3 {
    font-size: 16px;
    line-height: 20px;
}

.analytics-leaderboard__card-header .page-subtle {
    margin: 3px 0 0;
}

.analytics-leaderboard__direction {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 4px 8px;
    color: #7b5931;
    background: rgba(156, 121, 73, 0.12);
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.analytics-leaderboard__rows {
    display: grid;
}

.analytics-leaderboard__row,
.analytics-leaderboard__your-row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 10px 0;
    border-top: 1px solid rgba(232, 222, 209, 0.82);
}

.analytics-leaderboard__medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
}

.analytics-leaderboard__identity {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.analytics-leaderboard__identity strong,
.analytics-leaderboard__value {
    color: #111111;
    font-size: 13px;
    line-height: 16px;
    font-weight: 800;
}

.analytics-leaderboard__identity strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analytics-leaderboard__identity span {
    color: var(--analytics-muted);
    font-size: 11px;
    line-height: 14px;
}

.analytics-leaderboard__value {
    text-align: right;
    white-space: nowrap;
}

.analytics-leaderboard__your-row {
    grid-template-columns: minmax(78px, auto) minmax(0, 1fr) auto;
    margin-top: 2px;
    padding: 11px 10px;
    border: 1px solid rgba(156, 121, 73, 0.32);
    border-radius: 10px;
    background: rgba(156, 121, 73, 0.07);
}

.analytics-leaderboard__your-row > span {
    color: #7b5931;
    font-size: 10px;
    line-height: 13px;
    font-weight: 800;
}

@media (max-width: 540px) {
    .analytics-leaderboard__intro {
        padding-bottom: 0;
    }

    .analytics-leaderboard__your-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .analytics-leaderboard__your-row > span {
        grid-column: 1 / -1;
    }
}

.analytics-ranking-row,
.app-rank-card {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    text-align: left;
    color: #111111;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    border-bottom: 1px solid rgba(232, 222, 209, 0.82);
}

.analytics-ranking-row:last-child,
.app-rank-card:last-child,
.analytics-opportunity-mobile-row:last-child,
.analytics-opportunity-list__row:last-child {
    border-bottom: 0;
}

.app-rank-card--rankless {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

.analytics-ranking-row__rank,
.app-rank-card__rank,
.analytics-opportunity-list__rank,
.analytics-location-card__rank {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(156, 121, 73, 0.1);
    color: var(--analytics-gold-dark);
    font-size: 11px;
    font-weight: 800;
}

.analytics-location-card__rank {
    display: none;
}

.analytics-ranking-row__content,
.app-rank-card__content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(94px, 120px);
    grid-template-areas:
        "name name"
        "share bar"
        "trend trend";
    align-items: start;
    gap: 5px 10px;
    min-width: 0;
}

.analytics-ranking-row__content--compact,
.app-rank-card__content--compact {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "name"
        "share"
        "trend";
    gap: 4px;
}

.app-rank-card__content--wrap {
    gap: 5px;
}

.analytics-ranking-row__content strong,
.app-rank-card__content strong {
    grid-area: name;
    color: #111111;
    font-size: 14px;
    line-height: 17px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-ranking-row__share,
.app-rank-card__share {
    grid-area: share;
    color: var(--analytics-muted);
    font-size: 12px;
    line-height: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.app-rank-card--secondary-wrap .app-rank-card__share {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.analytics-ranking-row__trend,
.app-rank-card__trend {
    grid-area: trend;
    font-size: 12px;
    line-height: 14px;
    font-weight: 700;
}

@media (max-width: 640px) {
    .analytics-panel--chart .page-subtle,
    .analytics-panel .page-subtle {
        display: none;
    }
}

.analytics-ranking-row__value,
.app-rank-card__value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}

.app-rank-card__value-copy {
    display: grid;
    justify-items: end;
    gap: 1px;
    min-width: 0;
}

.app-rank-card__value-copy small {
    color: var(--analytics-muted);
    font-size: 10px;
    line-height: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.app-rank-card__status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid rgba(156, 121, 73, 0.26);
    border-radius: 999px;
    padding: 3px 7px 3px 6px;
    color: var(--analytics-muted);
    background: rgba(255, 255, 255, 0.76);
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.app-rank-card__status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.78;
}

.app-rank-card__chevron {
    color: var(--analytics-gold);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.analytics-groomer-ranking {
    gap: 0;
}

.analytics-groomer-ranking__group {
    display: grid;
    min-width: 0;
    border-bottom: 1px solid rgba(232, 222, 209, 0.82);
}

.analytics-groomer-ranking__group:last-child {
    border-bottom: 0;
}

.analytics-groomer-ranking__group > .app-rank-card {
    width: 100%;
    border-bottom: 0;
}

.analytics-groomer-appointments {
    display: grid;
    gap: 0;
    margin-left: 30px;
    padding: 2px 0 8px;
}

.analytics-groomer-appointment {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid rgba(232, 222, 209, 0.68);
}

button.analytics-groomer-appointment--interactive {
    width: 100%;
    margin: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

button.analytics-groomer-appointment--interactive:active {
    background: rgba(181, 131, 58, 0.06);
}

button.analytics-groomer-appointment--interactive:focus-visible {
    outline: 2px solid var(--analytics-gold-dark);
    outline-offset: 2px;
}

.app-info-modal__actions {
    display: grid;
    padding: 0 18px 18px;
}

.app-info-modal__actions .app-button {
    width: 100%;
}

.analytics-groomer-appointment__content,
.analytics-groomer-appointment__status {
    display: grid;
    min-width: 0;
}

.analytics-groomer-appointment__content {
    gap: 3px;
}

.analytics-groomer-appointment__content strong {
    color: #111111;
    font-size: 13px;
    line-height: 16px;
    font-weight: 800;
}

.analytics-groomer-appointment__content span {
    color: var(--analytics-muted);
    font-size: 11px;
    line-height: 14px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.analytics-groomer-appointment__status {
    justify-items: end;
    gap: 4px;
    text-align: right;
}

.analytics-groomer-appointment__status em {
    color: var(--analytics-gold-dark);
    font-size: 13px;
    line-height: 16px;
    font-style: normal;
    font-weight: 800;
}

.analytics-groomer-appointment__recovery {
    color: var(--analytics-muted);
    font-size: 10px;
    line-height: 13px;
    font-weight: 750;
    white-space: nowrap;
}

.analytics-groomer-appointment__recovery--recovered {
    color: var(--analytics-green);
}

@media (max-width: 420px) {
    .analytics-groomer-appointments {
        margin-left: 22px;
    }

    .analytics-groomer-appointment {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .analytics-groomer-appointment__status {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: baseline;
        justify-items: start;
        text-align: left;
    }
}

.app-panel--notification-list {
    gap: 0;
    background: #ffffff;
    box-shadow: none;
}

.app-pull-refresh {
    --app-pull-offset: 0px;
    --app-pull-progress: 0;
    --app-pull-dashoffset: 62.832;
    position: relative;
    flex: 1 1 100%;
    min-width: 0;
    width: 100%;
}

.app-pull-refresh__content {
    position: relative;
}

/* The embedded flipbook owns its own gestures and navigation. Keep its route
   fitted to the shell instead of creating a redundant outer page scrollbar. */
.shell__content:has(.resource-flipbook) {
    overflow-y: hidden;
    overscroll-behavior-y: none;
}

.shell__content:has(.resource-flipbook) .app-pull-refresh,
.shell__content:has(.resource-flipbook) .app-pull-refresh__content {
    height: 100%;
    min-height: 0;
}

.shell__content:has(.resource-flipbook) .app-pull-refresh__content {
    display: flex;
    flex-direction: column;
}

.shell__content:has(.resource-flipbook) .resource-flipbook {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.app-pull-refresh__indicator {
    position: absolute;
    /*
       The shell scroll area begins underneath the persistent top bar. Lift the
       wheel into the breathing room between that bar and a page's tabs, rather
       than letting it sit on top of the first page controls.
    */
    top: calc(-1 * var(--shell-header-overlap) - 14px);
    left: 0;
    right: 0;
    display: grid;
    place-items: end center;
    z-index: 4;
    height: clamp(0px, calc(var(--app-pull-offset) + 16px), 96px);
    padding-bottom: 10px;
    opacity: 0;
    pointer-events: none;
    overflow: visible;
    transition: opacity 120ms ease;
}

.app-pull-refresh--pulling .app-pull-refresh__indicator,
.app-pull-refresh--refreshing .app-pull-refresh__indicator {
    opacity: 1;
}

/* Inbox owns a flush, fixed-height canvas, so its pull surface starts much
   closer to the global header than ordinary pages. Lower the wheel only for
   the conversation list; at the armed offset it now clears the Inbox title
   instead of spinning underneath it. */
.shell__content:has(.inbox-page:not(.inbox-page--thread-open)) .app-pull-refresh__indicator {
    top: calc(-1 * var(--shell-header-overlap) + 42px);
}

.app-pull-refresh__line-spinner {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    opacity: calc(0.48 + (var(--app-pull-progress) * 0.52));
    transform:
        translateY(calc((1 - var(--app-pull-progress)) * 6px))
        scale(calc(0.86 + (var(--app-pull-progress) * 0.14)));
    transition: transform 120ms ease, opacity 120ms ease;
    will-change: transform, opacity;
}

.app-pull-refresh__line-spinner i {
    position: absolute;
    top: 2px;
    left: 14px;
    width: 3px;
    height: 9px;
    border-radius: 999px;
    background: #2e2a25;
    transform: rotate(calc(var(--app-pull-line-index) * 30deg));
    transform-origin: 1.5px 14px;
    opacity: calc(0.18 + (var(--app-pull-line-index) * 0.055) + (var(--app-pull-progress) * 0.16));
}

.app-pull-refresh--refreshing .app-pull-refresh__line-spinner {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: app-pull-refresh-line-spin 980ms steps(12) infinite;
}

.app-pull-refresh--pulling .app-pull-refresh__line-spinner {
    animation: app-pull-refresh-line-pull-spin 1.25s linear infinite;
}

.app-pull-refresh__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.app-rank-card-list--notifications {
    gap: 0;
}

.app-rank-card--notification {
    padding: 12px 0;
    align-items: start;
}

.app-rank-card--notification.app-rank-card--unread {
    margin-inline: 0;
    padding-inline: 0;
    border-radius: 0;
    background: transparent;
}

.app-rank-card--notification.app-rank-card--unread .app-rank-card__content strong {
    color: var(--analytics-ink);
}

.app-rank-card--notification .app-rank-card__content strong {
    font-size: 13px;
    line-height: 16px;
}

.app-rank-card--notification .app-rank-card__share {
    font-size: 11px;
    line-height: 15px;
    font-weight: 600;
}

.app-rank-card--notification .app-rank-card__trend {
    color: var(--analytics-gold-dark);
    font-size: 11px;
    line-height: 14px;
}

.app-rank-card--notification .app-rank-card__value {
    padding-top: 1px;
    display: grid;
    grid-template-columns: auto 18px;
    grid-template-areas:
        "time icon"
        "status icon";
    align-items: center;
    justify-items: end;
    gap: 5px 4px;
}

.app-rank-card--notification .app-rank-card__value em {
    color: var(--analytics-muted);
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
}

.app-rank-card--notification .app-rank-card__value em {
    grid-area: time;
}

.app-rank-card--notification .app-rank-card__status {
    grid-area: status;
    justify-self: end;
    width: 10px;
    height: 10px;
    min-width: 10px;
    min-height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.app-rank-card--notification .app-rank-card__chevron {
    grid-area: icon;
    margin-top: -1px;
}

.app-rank-card--notification .app-rank-card__status::before {
    width: 10px;
    height: 10px;
    opacity: 1;
}

.app-rank-card--notification .app-rank-card__status--unread {
    color: var(--analytics-gold-dark);
}

.app-rank-card--notification .app-rank-card__status--read {
    color: rgba(105, 113, 128, 0.68);
}

@keyframes app-pull-refresh-line-spin {
    from {
        transform: translateY(0) scale(1) rotate(0deg);
    }

    to {
        transform: translateY(0) scale(1) rotate(360deg);
    }
}

@keyframes app-pull-refresh-line-pull-spin {
    from {
        transform:
            translateY(calc((1 - var(--app-pull-progress)) * 6px))
            scale(calc(0.86 + (var(--app-pull-progress) * 0.14)))
            rotate(0deg);
    }

    to {
        transform:
            translateY(calc((1 - var(--app-pull-progress)) * 6px))
            scale(calc(0.86 + (var(--app-pull-progress) * 0.14)))
            rotate(360deg);
    }
}

.analytics-progress {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(243, 231, 214, 0.92);
}

.analytics-progress__bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b48d59 0%, #9c7949 100%);
}

.analytics-progress--inline {
    grid-area: bar;
    width: 100%;
    min-width: 94px;
    height: 6px;
    align-self: center;
    justify-self: stretch;
    margin-top: 2px;
}

.analytics-opportunity-card__header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: start;
}

.analytics-opportunity-card__title {
    display: flex;
    gap: 7px;
    align-items: start;
}

.analytics-opportunity-card__subtitle {
    margin: 0;
    color: var(--analytics-muted);
    font-size: 11px;
    line-height: 14px;
}

.analytics-info-button,
.app-info-button {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(156, 121, 73, 0.24);
    background: rgba(255, 250, 243, 0.95);
    color: var(--analytics-gold);
    font-size: 14px;
    font-weight: 700;
    flex: 0 0 auto;
}

.analytics-kpi-card .analytics-info-button--metric,
.app-metric-card .analytics-info-button--metric,
.app-metric-card .app-info-button--metric {
    width: 44px;
    height: 44px;
    margin: -11.5px 0 -11.5px -30px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
}

.analytics-opportunity-table {
    display: grid;
    gap: 10px;
}

.analytics-opportunity-mobile-list {
    display: none;
}

.analytics-opportunity-table__head,
.analytics-opportunity-table__row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.analytics-opportunity-table__head {
    color: var(--analytics-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.analytics-opportunity-table__row {
    padding: 12px 0;
    border-top: 1px solid rgba(232, 222, 209, 0.7);
}

.analytics-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 2px;
    border-radius: 15px;
    border: 1px solid rgba(232, 222, 209, 0.94);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 6px 18px rgba(17, 17, 17, 0.035);
}

.analytics-segmented__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 12px;
    border: 0;
    background: transparent;
    padding: 6px 10px;
    color: #4a535f;
    font-size: 11px;
    font-weight: 700;
    min-height: 38px;
}

.analytics-segmented__item--active {
    background: rgb(156, 121, 73);
    color: white;
    border-color: transparent;
}

.analytics-segmented--compact {
    width: fit-content;
    min-width: min(100%, 188px);
    padding: 1px;
    border-radius: 13px;
}

.analytics-segmented--compact .analytics-segmented__item {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 10.5px;
    line-height: 1;
}

.analytics-segmented--rollup {
    max-width: 210px;
    margin-top: 0;
    min-height: 34px;
    padding: 1px;
}

.analytics-location-toolbar__rollup.analytics-segmented--rollup .analytics-segmented__item {
    min-height: 32px;
}

.analytics-location-toolbar__rollup.analytics-segmented--rollup .analytics-segmented__item--active {
    background: rgb(214, 188, 141);
    color: #2f3540;
}

.analytics-location-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
}

.analytics-location-toolbar__controls {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.analytics-location-toolbar__rollup {
    flex: 0 0 auto;
    width: auto;
    max-width: 170px;
}

.analytics-location-toolbar__sort {
    flex: 1 1 50%;
    min-width: 0;
    width: 100%;
    max-width: none;
}

.analytics-location-toolbar__sort--solo {
    flex: 0 1 calc(50% - 4px);
    width: calc(50% - 4px);
    max-width: calc(50% - 4px);
}

.analytics-location-toolbar__meta {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    color: var(--analytics-muted);
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
}

.analytics-location-toolbar__refresh {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 1px solid rgba(232, 222, 209, 0.94);
    background: rgba(255, 255, 255, 0.92);
    color: var(--analytics-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(17, 17, 17, 0.04);
}

.analytics-location-banner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 13px;
    border: 1px solid rgba(242, 210, 212, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 247, 247, 0.96) 100%);
    box-shadow: 0 8px 18px rgba(17, 17, 17, 0.035);
}

.analytics-location-banner__icon {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #b4575b;
    background: rgba(245, 223, 226, 0.78);
}

.analytics-location-banner__copy {
    display: grid;
    gap: 2px;
}

.analytics-location-banner__copy strong {
    color: #2b2423;
    font-size: 10px;
    line-height: 12px;
}

.analytics-location-banner__copy span {
    color: var(--analytics-muted);
    font-size: 9px;
    line-height: 11px;
}

.analytics-location-card,
.app-list-card {
    appearance: none;
    -webkit-appearance: none;
    display: grid;
    gap: 8px;
    padding: 10px 12px 11px;
    text-align: left;
    color: #111111;
    border-radius: 15px;
    width: 100%;
    cursor: pointer;
}

.analytics-location-card[disabled],
.app-list-card[disabled] {
    cursor: default;
}

.analytics-location-card--attention,
.app-list-card--attention {
    border-color: rgba(243, 214, 218, 0.96);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 250, 250, 0.98) 100%);
}

.app-list-card--active {
    border-color: rgba(184, 117, 26, 0.62);
    background: linear-gradient(180deg, rgba(255, 252, 246, 0.99) 0%, rgba(255, 247, 232, 0.99) 100%);
    box-shadow: inset 3px 0 0 rgba(184, 117, 26, 0.88), 0 8px 20px rgba(184, 117, 26, 0.12);
}

.app-list-card--active .app-list-card__chevron {
    color: var(--dt-gold);
}

.analytics-location-card__header,
.app-list-card__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 6px;
}

.analytics-location-card__identity,
.app-list-card__identity {
    display: grid;
    gap: 4px;
    min-width: 0;
    padding-top: 1px;
}

.analytics-location-card__detail-row,
.app-list-card__detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.analytics-location-card__identity strong,
.app-list-card__identity strong {
    color: #111111;
    font-size: clamp(13px, 4vw, 15px);
    line-height: 1.05;
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-location-card__subtitle,
.app-list-card__subtitle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--analytics-muted);
    font-size: 10px;
    line-height: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.analytics-location-card__subtitle .app-icon,
.app-list-card__subtitle .app-icon {
    flex: 0 0 auto;
    opacity: 0.8;
}

.analytics-location-card__meta,
.app-list-card__meta {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0;
    min-width: 0;
}

.app-list-card__meta-copy {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
}

.analytics-location-card__pill,
.app-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    max-width: none;
    width: auto;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(243, 231, 214, 0.72);
    color: var(--analytics-gold-dark);
    font-size: 9px;
    line-height: 1.2;
    font-weight: 800;
    text-align: left;
    white-space: nowrap;
    flex: 0 0 auto;
    justify-self: end;
}

.analytics-location-card__pill--attention,
.app-status-chip--attention {
    background: rgba(248, 226, 228, 0.92);
    color: #b4575b;
}

.app-status-chip--success {
    background: #e8f2e7;
    color: #4e7a4f;
}

.app-avatar-cropper {
    display: grid;
    gap: 14px;
}

.app-avatar-cropper__stage-shell {
    display: grid;
    place-items: center;
    padding: 8px 0 4px;
}

.app-avatar-cropper__stage {
    position: relative;
    width: min(100%, 320px);
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 24px;
    background: #1f1f22;
    box-shadow: 0 12px 24px rgba(17, 17, 17, 0.14);
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.app-avatar-cropper__image {
    position: absolute;
    display: block;
    max-width: none;
    max-height: none;
    left: 0;
    top: 0;
    transform-origin: center center;
    will-change: width, height, left, top;
}

.app-avatar-cropper__mask {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.app-avatar-cropper__mask {
    background:
        radial-gradient(circle at center,
            transparent 0,
            transparent 36%,
            rgba(15, 15, 16, 0.72) 36%,
            rgba(15, 15, 16, 0.72) 100%);
}

.analytics-location-card__stats,
.app-list-card__stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}

.analytics-location-card__stat,
.app-list-card__stat {
    display: grid;
    gap: 1px;
    min-width: 0;
    padding-left: 0;
}

.analytics-location-card__stat:not(:first-child),
.app-list-card__stat:not(:first-child) {
    border-left: 1px solid rgba(232, 222, 209, 0.7);
    padding-left: 8px;
}

.analytics-location-card__stats span,
.app-list-card__stats span,
.analytics-service-legend__row span,
.analytics-pet-mix__legend span,
.analytics-list-compact__row span {
    color: var(--analytics-muted);
}

.analytics-location-card__stats span,
.app-list-card__stats span {
    font-size: 10px;
    line-height: 12px;
    font-weight: 700;
}

.analytics-location-card__stats strong,
.app-list-card__stats strong {
    color: #111111;
    font-size: clamp(13px, 3.6vw, 15px);
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.analytics-location-card__stats em,
.app-list-card__stats em {
    font-style: normal;
    font-size: 10px;
    line-height: 12px;
    font-weight: 700;
}

.analytics-location-card__trend,
.app-list-card__trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.analytics-location-card__stats .analytics-location-card__trend-text,
.app-list-card__stats .app-list-card__trend-text {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: inherit;
}

.analytics-location-card__stats small,
.app-list-card__stats small {
    color: var(--analytics-muted);
    font-size: 9px;
    line-height: 11px;
    font-weight: 700;
}

.analytics-location-card__helper,
.app-list-card__helper {
    color: var(--analytics-muted);
}

.analytics-location-card__chevron,
.app-list-card__chevron {
    color: var(--analytics-gold);
    padding-top: 1px;
    flex: 0 0 auto;
}

.app-list-card__chevron--placeholder {
    visibility: hidden;
}

.franchise-directory-card .app-list-card__stats strong {
    font-size: clamp(12px, 3.8vw, 14px);
    line-height: 1.08;
}

.franchise-directory-card .app-list-card__stat:last-child strong {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-donut-layout {
    display: grid;
    gap: 14px;
}

.analytics-service-spotlight,
.app-service-spotlight {
    gap: 10px;
}

.analytics-service-spotlight__body,
.app-service-spotlight__body {
    display: grid;
    gap: 0;
    align-items: start;
}

.analytics-service-spotlight__chart-grid,
.app-service-spotlight__chart-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    gap: 6px;
    align-items: start;
}

.analytics-service-donut-frame,
.app-service-spotlight__donut-frame {
    position: relative;
    height: 188px;
    min-height: 188px;
}

.analytics-service-spotlight__side,
.app-service-spotlight__side {
    display: grid;
    gap: 10px;
    align-content: start;
    min-width: 0;
}

.analytics-service-donut-canvas,
.app-service-spotlight__donut-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: pointer;
    touch-action: manipulation;
}

.app-service-spotlight__tooltip {
    position: absolute;
    display: grid;
    gap: 2px;
    min-width: 112px;
    max-width: 138px;
    padding: 8px 10px;
    border-radius: 13px;
    border: 1px solid rgba(232, 222, 209, 0.94);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 12px 24px rgba(36, 28, 18, 0.16);
    color: var(--analytics-ink);
    font-size: 11px;
    line-height: 14px;
    z-index: 3;
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
}

.app-service-spotlight__tooltip strong {
    color: var(--analytics-ink);
    font-size: 12px;
    line-height: 15px;
}

.app-service-spotlight__tooltip span {
    color: var(--analytics-muted);
    font-weight: 700;
}

.app-service-spotlight__tooltip--hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(2px);
}

.analytics-donut-card {
    display: flex;
    justify-content: center;
}

.analytics-donut {
    position: relative;
    width: 190px;
    height: 190px;
    border-radius: 50%;
}

.analytics-donut::after,
.analytics-pet-mix__donut::after {
    content: "";
    position: absolute;
    inset: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: inset 0 0 0 1px rgba(232, 222, 209, 0.72);
}

.analytics-donut__center {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 6px;
}

.analytics-donut__center strong {
    font-size: 28px;
    line-height: 1;
}

.analytics-donut__center span {
    color: var(--analytics-muted);
    font-size: 14px;
}

.analytics-service-legend,
.app-service-legend,
.analytics-pet-mix__legend {
    display: grid;
    gap: 2px;
}

.analytics-service-legend__row,
.app-service-legend__row {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 5px;
    padding: 1px 0;
    border: 0;
    background: transparent;
    text-align: left;
    font-size: 10px;
    line-height: 1.1;
}

.analytics-service-legend__row--active,
.app-service-legend__row--active {
    color: #111111;
}

.analytics-service-legend__row span,
.analytics-service-legend__row em,
.app-service-legend__row span,
.app-service-legend__row em {
    white-space: nowrap;
}

.analytics-service-legend__swatch,
.app-service-legend__swatch {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    justify-self: start;
}

.analytics-service-helper-list,
.app-insight-card-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    min-width: 0;
    border-top: 1px solid rgba(232, 222, 209, 0.82);
    padding-top: 7px;
}

.analytics-service-helper-list--compact,
.app-insight-card-list--compact {
    grid-template-columns: minmax(0, 1fr);
    border-top: 0;
    padding-top: 0;
    gap: 8px;
}

.analytics-service-helper-card,
.app-insight-card {
    display: grid;
    gap: 3px;
    padding: 0;
    min-width: 0;
}

.analytics-service-helper-card + .analytics-service-helper-card,
.app-insight-card + .app-insight-card {
    padding-left: 10px;
    border-left: 1px solid rgba(232, 222, 209, 0.82);
}

.analytics-service-helper-list--compact .analytics-service-helper-card + .analytics-service-helper-card,
.app-insight-card-list--compact .app-insight-card + .app-insight-card {
    padding-left: 0;
    border-left: 0;
    padding-top: 8px;
    border-top: 1px solid rgba(232, 222, 209, 0.82);
}

.analytics-service-helper-card__top,
.app-insight-card__top {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 6px;
}

.analytics-service-helper-card__label,
.app-insight-card__label {
    display: block;
    color: var(--analytics-charcoal);
    font-size: 9px;
    line-height: 11px;
    font-weight: 800;
}

.analytics-service-helper-card__top strong,
.app-insight-card__top strong {
    display: block;
    margin-top: 2px;
    color: #111111;
    font-size: clamp(14px, 4vw, 16px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.analytics-service-helper-card__support,
.app-insight-card__support {
    color: var(--analytics-muted);
    font-size: 9px;
    line-height: 1.2;
    font-weight: 600;
}

.analytics-list-compact {
    display: grid;
    gap: 6px;
}

.analytics-list-compact__row,
.analytics-opportunity-list__row {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
}

.analytics-list-compact__row strong,
.analytics-opportunity-list__row strong,
.analytics-service-legend__row strong,
.app-service-legend__row strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.analytics-highlight {
    display: grid;
    gap: 8px;
}

.analytics-highlight p,
.analytics-opportunity-list__row p,
.analytics-empty-state p {
    margin: 0;
    color: var(--analytics-muted);
}

.analytics-pet-mix {
    display: grid;
    gap: 10px;
}

.analytics-pet-mix__donut {
    position: relative;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    justify-self: center;
}

.analytics-pet-type-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
}

.analytics-pet-type-label {
    font-size: 13px;
    color: var(--analytics-muted);
}

.analytics-pet-type-percent {
    font-size: 16px;
    font-weight: 850;
    color: #111111;
}

.analytics-opportunity-list__row {
    padding: 12px 0;
    border-top: 1px solid rgba(232, 222, 209, 0.74);
}

.analytics-opportunity-list__row strong {
    color: #111111;
    font-size: 14px;
    line-height: 18px;
}

.analytics-ranking-row__detail-separator,
.app-rank-card__detail-separator {
    display: inline-block;
    margin: 0 5px;
    color: rgba(124, 135, 154, 0.6);
}

.analytics-opportunity-list__row em,
.analytics-ranking-row em,
.app-rank-card em,
.analytics-opportunity-table__row em,
.analytics-list-compact__row em {
    color: var(--analytics-gold-dark);
    font-style: normal;
    font-weight: 700;
    font-size: 15px;
}

.analytics-empty-state {
    text-align: center;
}

.analytics-opportunity-mobile-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 14px 0;
    border-top: 1px solid rgba(232, 222, 209, 0.78);
}

.analytics-opportunity-mobile-row__rank {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(156, 121, 73, 0.1);
    color: var(--analytics-gold-dark);
    font-size: 16px;
    font-weight: 800;
}

.analytics-opportunity-mobile-row__content {
    display: grid;
    gap: 2px;
}

.analytics-opportunity-mobile-row__content strong {
    font-size: 14px;
    line-height: 18px;
    color: #111111;
}

.analytics-opportunity-mobile-row__content span {
    font-size: 12px;
    line-height: 16px;
    color: var(--analytics-muted);
}

.analytics-opportunity-mobile-row em {
    color: var(--analytics-gold-dark);
    font-style: normal;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

.analytics-overview,
.analytics-opportunities,
.analytics-locations,
.analytics-services {
    display: grid;
    gap: 16px;
}

body:has(.analytics-modal-backdrop),
body:has(.inbox-compose) {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

.shell__content:has(.analytics-modal-backdrop),
.shell__content:has(.inbox-compose) {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    transform: none;
    transition: none;
    will-change: auto;
}

body:has(.app-bottom-drawer-backdrop),
.shell__content:has(.app-bottom-drawer-backdrop) {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: pan-y;
}

.shell__content:has(.app-bottom-drawer-backdrop) {
    transform: none;
    transition: none;
    will-change: auto;
}

.app-bottom-drawer-backdrop,
.app-bottom-drawer__body {
    touch-action: pan-y;
}

/*
   Drawers fill the app frame unless one of their own editors has opened the
   software keyboard. This prevents a stale iOS visualViewport measurement
   from leaving a read-only drawer floating above the bottom of the screen.
*/
body.app-keyboard-open .app-bottom-drawer-backdrop:has(
    .app-bottom-drawer :is(input, textarea, select, [contenteditable="true"]):focus
) {
    inset: var(--visual-viewport-top, 0px) 0 auto;
    height: var(--visual-viewport-height, 100dvh);
}

.shell:has(.app-bottom-drawer-backdrop) .app-bottom-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.shell__body:has(.app-bottom-drawer-backdrop) .channel-comment-composer-wrap {
    visibility: hidden;
    pointer-events: none;
}

body.inbox-photo-viewer-open {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: pan-x;
}

body.inbox-photo-viewer-open .app-bottom-nav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.shell__content:has(.inbox-photo-viewer) {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: pan-x;
    transform: none;
    transition: none;
    will-change: auto;
}

.analytics-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    background: transparent;
    overscroll-behavior: contain;
}

.analytics-modal,
.app-info-modal {
    position: relative;
    width: min(420px, 100%);
    display: grid;
    gap: 0;
    padding: 0;
    border-radius: 24px;
    border: 1px solid rgba(232, 222, 209, 0.94);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 250, 244, 0.98) 100%);
    box-shadow: 0 22px 48px rgba(17, 17, 17, 0.16);
    max-height: min(68vh, 560px);
    overflow: hidden;
    outline: none;
}

/* Long-form creation and editing use real routes.  They deliberately do not
   inherit the floating-card treatment used by compact information dialogs. */
.app-editor-route {
    min-height: var(--visual-viewport-height, 100dvh);
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    background: var(--premium-ink, #101411);
}

.app-editor-route .app-info-modal.app-editor-page-surface,
.app-editor-route .channel-modal.app-editor-page-surface {
    width: 100%;
    height: var(--visual-viewport-height, 100dvh);
    max-height: none;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.app-editor-route .app-editor-page-surface,
.app-editor-route .app-editor-page-surface * {
    box-sizing: border-box;
}

.app-editor-route .app-info-modal__header,
.app-editor-route .channel-modal__header {
    padding: max(48px, env(safe-area-inset-top)) 16px 12px;
}

.app-editor-route .app-editor-page-header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.app-editor-route .app-editor-page-header__close {
    grid-column: 1;
    margin: 0;
}

.app-editor-route .app-editor-page-header__title {
    grid-column: 2;
    min-width: 0;
}

.app-editor-route .app-editor-page-header__title h2 {
    overflow: hidden;
    font-size: 18px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-editor-route .app-editor-page-header__action {
    grid-column: 3;
    width: auto;
    min-width: 62px;
    min-height: 38px;
    padding-inline: 14px;
    font-size: 12px;
}

.app-editor-route .app-info-modal__body,
.app-editor-route .channel-modal__body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 16px 20px;
}

.app-editor-route .app-confirm-modal__actions,
.app-editor-route .channel-modal__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 64px;
    gap: 8px;
    padding: 10px 16px;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.app-editor-route .app-confirm-modal__actions .app-button,
.app-editor-route .channel-modal__actions .app-button {
    width: auto;
    min-width: 84px;
}

.app-editor-route .app-info-modal__body .field__input {
    min-height: 44px;
}

.app-editor-route .app-info-modal__body .field__input--long {
    min-height: 88px;
}

.analytics-modal__header,
.app-info-modal__header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(232, 222, 209, 0.9);
    background: rgba(255, 255, 255, 0.72);
}

.analytics-modal__title-block,
.app-info-modal__title-block {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.analytics-modal__eyebrow,
.app-info-modal__eyebrow {
    color: var(--analytics-gold-dark);
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.analytics-modal h2,
.app-info-modal h2 {
    margin: 0;
    color: #111111;
    font-size: clamp(14px, 4.4vw, 18px);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.analytics-modal__close,
.app-info-modal__close {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(232, 222, 209, 0.9);
    background: rgba(255, 255, 255, 0.9);
    color: var(--analytics-charcoal);
    flex: 0 0 auto;
}

.analytics-modal__label,
.app-info-modal__label {
    display: block;
    color: var(--analytics-gold-dark);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 12px;
}

.analytics-modal__label:first-child,
.app-info-modal__label:first-child {
    margin-top: 0;
}

.analytics-modal__body p,
.app-info-modal__body p {
    margin: 0;
    color: #26272b;
    font-size: 12px;
    line-height: 1.5;
}

.analytics-modal__body,
.app-info-modal__body {
    display: grid;
    gap: 6px;
    overflow-y: auto;
    padding: 14px;
    min-height: 0;
}

.app-info-modal__body {
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

.app-confirm-modal {
    max-height: min(78vh, 640px);
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.app-confirm-modal__body {
    display: grid;
    gap: 0;
    overflow: hidden;
    padding: 14px 18px 18px;
}

.app-confirm-modal__body p {
    margin: 0;
    color: #26272b;
    font-size: 13px;
    line-height: 1.5;
}

.app-confirm-modal__summary {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    color: #4b4033;
    font-size: 12px;
    line-height: 1.4;
}

.app-confirm-modal__summary strong {
    color: #1f1b16;
    font-size: 14px;
}

.app-confirm-modal__scrollbox {
    margin-top: 12px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid rgba(232, 222, 209, 0.9);
    border-radius: 18px;
    background: rgba(255, 251, 245, 0.92);
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.app-confirm-modal__list {
    display: grid;
}

.app-confirm-modal__list-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(232, 222, 209, 0.72);
}

.app-confirm-modal__list-item:last-child {
    border-bottom: 0;
}

.app-confirm-modal__list-title {
    min-width: 0;
    color: #1f1b16;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.app-confirm-modal__list-value {
    color: #1f1b16;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
}

.app-confirm-modal__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(232, 222, 209, 0.9);
    background: rgba(255, 255, 255, 0.72);
}

.analytics-loading-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analytics-loading-grid--pending {
    visibility: hidden;
}

.analytics-skeleton {
    border-radius: 24px;
    background: linear-gradient(90deg, rgba(243, 231, 214, 0.9), rgba(255, 255, 255, 0.96), rgba(243, 231, 214, 0.9));
    background-size: 240% 100%;
    animation: analytics-shimmer 1.4s ease infinite;
}

.analytics-skeleton--card {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 112px;
    padding: 16px;
    overflow: hidden;
}

.analytics-skeleton__avatar,
.analytics-skeleton__line {
    display: block;
    border-radius: 999px;
    background: rgba(156, 121, 73, 0.12);
}

.analytics-skeleton__avatar {
    width: 42px;
    height: 42px;
}

.analytics-skeleton__body {
    display: grid;
    gap: 9px;
    min-width: 0;
}

.analytics-skeleton__line {
    height: 9px;
}

.analytics-skeleton__line--title {
    width: min(72%, 190px);
    height: 12px;
}

.analytics-skeleton__line--copy {
    width: min(92%, 280px);
}

.analytics-skeleton__line--meta {
    width: min(46%, 120px);
}

.analytics-loading-grid--list {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.analytics-loading-grid--list .analytics-skeleton--card {
    min-height: 92px;
}

.app-inline-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    color: var(--dt-muted);
    font-size: 13px;
    line-height: 1.4;
}

.app-inline-loading--pending {
    visibility: hidden;
}

.app-inline-loading__spinner {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.app-inline-loading__spinner svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    animation: app-inline-loading-spin 1s linear infinite;
}

.app-inline-loading__track,
.app-inline-loading__progress {
    fill: none;
    stroke-width: 2.5;
}

.app-inline-loading__track {
    stroke: rgba(186, 155, 112, 0.22);
}

.app-inline-loading__progress {
    stroke: rgba(156, 121, 73, 0.88);
    stroke-linecap: round;
    stroke-dasharray: 62.832;
    stroke-dashoffset: 18.85;
}

.app-inline-loading__label {
    display: inline-block;
}

.app-activity-banner {
    position: sticky;
    top: calc(var(--shell-header-overlap) + 4px);
    z-index: 18;
    display: flex;
    justify-content: flex-start;
    margin: 6px 0 22px;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease, margin 160ms ease, max-height 160ms ease;
    max-height: 72px;
    overflow: hidden;
}

.app-activity-banner--section-wide {
    width: 100%;
}

.app-activity-banner--section-wide .app-activity-banner__surface {
    width: 100%;
}

.app-activity-banner--pending {
    opacity: 0;
    transform: translateY(-12px);
    margin: 0;
    max-height: 0;
}

.app-activity-banner__surface {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 10px 14px;
    border-radius: var(--dt-radius-pill);
    border: 1px solid rgba(184, 117, 26, 0.18);
    background: rgba(255, 250, 243, 0.9);
    box-shadow: 0 10px 28px rgba(17, 17, 17, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.app-activity-banner__copy {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
}

.app-activity-banner__label {
    color: var(--dt-black);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.app-activity-banner__support {
    color: var(--dt-muted);
    font-size: 11px;
    line-height: 1.2;
}

@keyframes analytics-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: 0 0;
    }
}

@keyframes analytics-pulse {
    0%,
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(156, 121, 73, 0.34);
    }

    50% {
        transform: scale(1);
        box-shadow: 0 0 0 7px rgba(156, 121, 73, 0);
    }
}

@keyframes app-inline-loading-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 640px) {
    .analytics-panel__header,
    .app-panel__header {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .analytics-panel__header .page-subtle,
    .app-panel__header .page-subtle {
        margin-top: 0;
    }

    .analytics-segmented {
        padding: 1px;
    }

    .analytics-segmented__item {
        min-height: 36px;
        padding: 5px 8px;
        font-size: 12px;
        gap: 5px;
    }

    .analytics-segmented--compact {
        min-width: min(100%, 182px);
    }

    .analytics-segmented--compact .analytics-segmented__item {
        min-height: 30px;
        padding: 4px 9px;
        font-size: 10.5px;
    }

    .analytics-segmented--rollup {
        max-width: 164px;
        margin-top: 0;
        min-height: 34px;
        padding: 1px;
    }

    .analytics-location-toolbar__rollup.analytics-segmented--rollup .analytics-segmented__item {
        min-height: 32px;
    }

    .analytics-location-toolbar__rollup.analytics-segmented--rollup .analytics-segmented__item--active {
        background: rgb(214, 188, 141);
        color: #2f3540;
    }

    .analytics-location-toolbar {
        gap: 6px;
    }

    .analytics-location-toolbar__controls {
        gap: 6px;
    }

    .analytics-location-toolbar__rollup {
        max-width: 148px;
    }

    .analytics-location-toolbar__sort {
        max-width: none;
    }

    .analytics-location-toolbar__sort--solo {
        flex-basis: calc(50% - 3px);
        width: calc(50% - 3px);
        max-width: calc(50% - 3px);
    }

    .analytics-location-card__identity strong,
    .app-list-card__identity strong {
        font-size: clamp(14px, 5vw, 16px);
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    .analytics-location-card__subtitle,
    .app-list-card__subtitle {
        font-size: 11px;
        line-height: 13px;
        white-space: normal;
    }

    .analytics-location-card__header,
    .app-list-card__header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: start;
    }

    .analytics-location-card__detail-row,
    .app-list-card__detail-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 8px;
    }

    .analytics-location-card__meta,
    .app-list-card__meta {
        justify-content: flex-end;
        align-items: start;
        width: auto;
        max-width: 46%;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .app-list-card__meta-copy {
        justify-content: flex-end;
        width: auto;
        min-width: 0;
        flex-wrap: nowrap;
    }

    .analytics-location-card__meta > span,
    .app-list-card__meta-copy > span {
        min-width: 0;
        text-align: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .analytics-location-card__stats,
    .app-list-card__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 10px;
    }

    .analytics-location-card__stats span,
    .analytics-location-card__stats em,
    .app-list-card__stats span,
    .app-list-card__stats em {
        font-size: 10px;
        line-height: 11px;
    }

    .analytics-location-card__stats strong,
    .app-list-card__stats strong {
        font-size: clamp(13px, 4.1vw, 16px);
        line-height: 1.08;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .analytics-location-card__stats small,
    .app-list-card__stats small {
        font-size: 9px;
        line-height: 11px;
        overflow-wrap: anywhere;
    }

    .analytics-location-card__pill,
    .app-status-chip {
        font-size: 10px;
    }

    .analytics-location-card,
    .app-list-card {
        padding: 10px 12px 12px;
    }

    .analytics-location-card__stat:not(:first-child),
    .app-list-card__stat:not(:first-child) {
        border-left: 0;
        padding-left: 0;
    }

    .analytics-location-card__stat:not(:nth-child(2n+1)),
    .app-list-card__stat:not(:nth-child(2n+1)) {
        border-left: 1px solid rgba(232, 222, 209, 0.7);
        padding-left: 9px;
    }

    .app-contact-card__row,
    .app-contact-card__subrow,
    .app-detail-row__title-line {
        align-items: start;
        flex-wrap: wrap;
    }

    .app-contact-card__row strong,
    .app-detail-row__title-line strong {
        white-space: normal;
    }

    .app-detail-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 10px;
    }

    .app-detail-row__meta {
        justify-content: flex-end;
        align-self: start;
    }

    .app-detail-row__meta em {
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.12;
        text-align: right;
    }

    .analytics-opportunity-table--desktop {
        display: none;
    }

    .analytics-opportunity-mobile-list {
        display: grid;
    }
}

@media (min-width: 900px) {
    .analytics-hero {
        justify-items: start;
        text-align: left;
    }

    .analytics-hero__brand {
        justify-self: start;
    }

    .analytics-header {
        flex-direction: row;
        justify-content: space-between;
        align-items: end;
    }

    .analytics-filterbar__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-card-grid--kpis {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .analytics-card-grid--opportunities {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .analytics-location-card__stats,
    .app-list-card__stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .analytics-location-card__stat:not(:first-child),
    .app-list-card__stat:not(:first-child) {
        border-left: 1px solid rgba(232, 222, 209, 0.7);
        padding-left: 12px;
    }

    .analytics-donut-layout {
        grid-template-columns: 280px minmax(0, 1fr);
        align-items: center;
    }

    .analytics-service-spotlight__body,
    .app-service-spotlight__body {
        grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.9fr);
        align-items: start;
    }

    .analytics-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analytics-pet-mix {
        grid-template-columns: 170px minmax(0, 1fr);
        align-items: center;
    }

    .analytics-opportunity-mobile-list {
        display: none;
    }

    .analytics-modal-backdrop {
        align-items: center;
    }
}

@media (max-width: 379px) {
    .app-section-title h1 {
        font-size: clamp(1.9rem, 9.2vw, 2.18rem);
        line-height: 1.04;
    }

    .app-section-title__welcome,
    .app-section-title .page-subtle,
    .app-panel__header .page-subtle {
        font-size: 0.92rem;
        line-height: 1.28;
    }

    .app-grid,
    .app-grid--metrics,
    .app-grid--stack,
    .app-grid--paired {
        gap: 6px;
    }

    .analytics-kpi-card,
    .app-metric-card,
    .analytics-opportunity-card {
        grid-template-rows: minmax(24px, auto) 20px 13px minmax(12px, 24px);
        gap: 3px;
        padding: 8px;
        min-height: 104px;
        height: 104px;
    }

    .analytics-kpi-card__label,
    .app-metric-card__label,
    .analytics-opportunity-card__title span {
        font-size: 10px;
        line-height: 12px;
    }

    .analytics-kpi-card strong,
    .app-metric-card strong,
    .analytics-opportunity-card strong,
    .analytics-highlight strong {
        font-size: 16px;
        line-height: 1.02;
    }

    .analytics-kpi-card__support,
    .app-metric-card__support {
        font-size: 9px;
        line-height: 1.18;
        min-height: 22px;
    }

    .analytics-location-toolbar {
        grid-template-columns: minmax(0, 1fr);
    }

    .analytics-location-toolbar__controls {
        width: 100%;
    }

    .analytics-location-toolbar__sort {
        max-width: none;
    }

    .analytics-location-toolbar__meta {
        justify-content: flex-start;
    }

    .analytics-location-card__identity strong,
    .app-list-card__identity strong {
        font-size: clamp(13px, 4.6vw, 15px);
        line-height: 1.02;
    }

    .analytics-location-card__subtitle,
    .app-list-card__subtitle {
        font-size: 10px;
        line-height: 12px;
    }

    .analytics-location-card__meta,
    .app-list-card__meta {
        max-width: 42%;
        gap: 6px;
    }

    .analytics-location-card__pill,
    .app-status-chip {
        min-height: 17px;
        padding: 2px 7px;
        font-size: 9px;
    }

    .analytics-location-card,
    .app-list-card {
        padding: 9px 10px 11px;
        border-radius: 16px;
    }

    .analytics-location-card__stats,
    .app-list-card__stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px 10px;
    }

    .analytics-location-card__stat:not(:first-child),
    .app-list-card__stat:not(:first-child) {
        border-left: 0;
        padding-left: 0;
    }

    .analytics-location-card__stat:not(:nth-child(2n+1)),
    .app-list-card__stat:not(:nth-child(2n+1)) {
        border-left: 1px solid rgba(232, 222, 209, 0.7);
        padding-left: 9px;
    }

    .page--dashboard .app-list-card__meta-copy {
        display: none;
    }

    .page--dashboard .app-list-card__identity strong {
        font-size: clamp(12px, 4.7vw, 14px);
    }

    .page--dashboard .app-list-card__subtitle {
        font-size: 9px;
        line-height: 11px;
    }

    .page--dashboard .app-list-card__stats {
        gap: 6px 8px;
    }

    .page--dashboard .app-list-card__stats span,
    .page--dashboard .app-list-card__stats em,
    .page--dashboard .app-list-card__stats small {
        font-size: 8.5px;
        line-height: 10px;
    }

    .page--dashboard .app-list-card__stats strong {
        font-size: clamp(11px, 4.6vw, 13px);
        line-height: 1.02;
    }

    .franchise-directory-card .app-list-card__identity strong {
        font-size: clamp(12px, 4.8vw, 14px);
    }
}

@media (max-width: 430px) {
    .dashboard-workspace-card .app-list-card__meta-copy {
        display: none;
    }

    .dashboard-workspace-card .app-list-card__header {
        gap: 6px;
    }

    .dashboard-workspace-card .app-list-card__identity strong {
        font-size: clamp(12px, 4.9vw, 14px);
        line-height: 1.02;
    }

    .dashboard-workspace-card .app-list-card__detail-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .dashboard-workspace-card .app-list-card__subtitle {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        white-space: normal;
        overflow: hidden;
        text-overflow: clip;
        font-size: 9.5px;
        line-height: 11px;
    }
}

.page--royalties-invoice {
    gap: 8px;
    color: #1a1a1c;
    background: transparent;
}

.page--royalties-invoice > .app-panel--section {
    margin-top: 0;
}

.royalties-invoice-primary-action--submit {
    display: flex;
    justify-content: flex-end;
    margin: 0;
}

.royalties-invoice-primary-action--submit .app-button {
    width: auto;
    min-width: 176px;
    min-height: 42px;
    padding-inline: 18px;
    border-radius: 14px;
    font-size: 13px;
}

.royalties-brand {
    display: grid;
    justify-items: center;
    gap: 4px;
    padding-top: 8px;
}

.royalties-brand strong {
    position: relative;
    color: #171518;
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.04em;
}

.royalties-brand strong::before,
.royalties-brand strong::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 46px;
    height: 1px;
    background: rgba(205, 118, 0, 0.5);
}

.royalties-brand strong::before {
    right: calc(100% + 14px);
}

.royalties-brand strong::after {
    left: calc(100% + 14px);
}

.royalties-brand span {
    color: #cd7600;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.24em;
}

.royalties-shell__header h1 {
    margin: 0;
    font-size: clamp(1.55rem, 2.3vw, 1.95rem);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.page--royalties-invoice .analytics-filter__control,
.page--royalties-invoice .analytics-filter__input {
    min-height: 54px;
    font-size: 15px;
}

.page--royalties-bill-customer > .app-grid,
.page--royalties-bill-customer > .app-panel {
    margin: 0;
}

.page--royalties-bill-customer .app-section-title__title-row {
    min-width: 0;
}

.page--royalties-bill-customer .app-section-title__back-link {
    width: 100%;
}

.page--royalties-bill-customer .app-section-title__back-link h1 {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page--royalties-bill-customer .app-panel__header + .app-grid--stack {
    margin-block: 0;
}

.royalties-bill-summary-card {
    align-items: flex-start;
    padding: 14px;
    gap: 14px;
}

.royalties-bill-summary-card.app-list-card {
    padding: 14px 16px;
}

.royalties-bill-summary-card.app-list-card .app-list-card__header {
    align-items: flex-start;
}

.royalties-bill-summary-card.app-list-card .app-list-card__identity {
    gap: 6px;
}

.royalties-bill-summary-card.app-list-card .app-list-card__identity strong {
    font-size: clamp(1rem, 4vw, 1.35rem);
    line-height: 1.1;
    letter-spacing: -0.04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.royalties-bill-summary-card.app-list-card .app-list-card__detail-row {
    justify-content: flex-start;
}

.royalties-bill-summary-card.app-list-card .app-list-card__subtitle {
    font-size: 11px;
    line-height: 1.35;
    white-space: normal;
}

.royalties-bill-summary-card__copy {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.royalties-bill-summary-card__eyebrow {
    color: var(--analytics-muted);
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.royalties-bill-summary-card__title {
    min-width: 0;
    margin: 0;
    color: #111111;
    font-size: clamp(1rem, 4vw, 1.35rem);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.04em;
    overflow-wrap: anywhere;
}

.royalties-bill-summary-card__helper {
    color: var(--analytics-muted);
    font-size: 11px;
    line-height: 1.35;
    font-weight: 600;
}

.royalties-bill-summary-card__meta {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    flex: 0 0 auto;
}

.royalties-shell__filters,
.royalties-invoice-topbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.royalties-shell__filter,
.royalties-invoice-topbar__filter {
    margin: 0;
}

.royalties-tabs {
    gap: 18px;
    padding-top: 4px;
}

.royalties-tabs__item {
    min-width: 0;
}

.royalties-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.royalties-line-item-card,
.royalties-invoice-sheet,
.royalties-invoice-detail-card {
    border-radius: 28px;
    border: 1px solid rgba(232, 222, 209, 0.94);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 36px rgba(52, 40, 21, 0.05);
}

.royalties-chart-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
}

.royalties-chart-panel__controls {
    display: grid;
    justify-items: start;
    gap: 10px;
}

.royalties-chart-panel__range {
    width: min(180px, 100%);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.royalties-chart-panel__range .analytics-segmented__item {
    min-height: 44px;
    border: 1px solid rgba(232, 222, 209, 0.94);
    background: rgba(255, 255, 255, 0.96);
    color: #657289;
    font-size: 14px;
    font-weight: 800;
}

.royalties-chart-panel__range .analytics-segmented__item--active {
    background: linear-gradient(135deg, #d17b00, #ee980d);
    color: #fff;
    border-color: transparent;
}

.royalties-chart-panel__grouping,
.royalties-shell__note {
    color: #647089;
    font-size: 12.5px;
    line-height: 1.45;
}

.royalties-line-chart {
    padding-top: 4px;
}

.royalties-line-chart__labels {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    color: #69758c;
    font-size: 11px;
    font-weight: 700;
}

.royalties-line-chart__svg {
    width: 100%;
    height: 160px;
    display: block;
}

.royalties-line-chart__grid {
    stroke: rgba(222, 212, 198, 0.82);
    stroke-dasharray: 3 5;
}

.royalties-line-chart__path {
    fill: none;
    stroke: #cd7600;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.royalties-line-chart__point {
    fill: white;
    stroke: #cd7600;
    stroke-width: 2.4;
}

.royalties-line-chart__label {
    fill: #69758c;
    font-size: 11px;
    font-weight: 700;
}

.royalties-status-segmented {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 52px;
}

.royalties-overview-sort {
    margin-top: 0;
    flex: 0 1 calc(50% - 3px);
    width: calc(50% - 3px);
    max-width: calc(50% - 3px);
    min-width: 0;
}

.royalties-overview-sort .field__input-wrap,
.royalties-overview-action .field__input-wrap {
    min-height: 34px;
}

.royalties-overview-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    align-items: center;
    margin-top: 0;
}

.royalties-overview-action {
    margin-top: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
}

.royalties-overview-controls .analytics-location-toolbar__sort--solo {
    flex: 0 1 auto;
    width: 100%;
    max-width: none;
}

.app-action-list-card--selected,
.royalties-action-card--selected {
    border-color: rgba(156, 121, 73, 0.72);
    box-shadow: 0 14px 28px rgba(156, 121, 73, 0.12);
}

.app-action-list-card {
    color: #111111;
}

.app-action-list-card__title-row,
.royalties-action-card__title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.app-action-list-card__title-row strong,
.royalties-action-card__title-row strong {
    min-width: 0;
}

.app-action-list-card__toggle {
    width: 44px;
    height: 44px;
    margin: -11px 0 -11px -22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgb(156, 121, 73);
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.app-action-list-card__toggle-surface,
.royalties-action-card__toggle {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(156, 121, 73, 0.3);
    background: rgba(255, 255, 255, 0.92);
    color: rgb(156, 121, 73);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.app-action-list-card__toggle:focus-visible {
    outline: 0;
}

.app-action-list-card__toggle:focus-visible .app-action-list-card__toggle-surface {
    box-shadow: 0 0 0 3px rgba(156, 121, 73, 0.2);
}

.app-action-list-card__toggle-indicator,
.royalties-action-card__toggle-indicator {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1.5px solid rgba(156, 121, 73, 0.7);
    display: block;
}

.app-action-list-card-list,
.app-list-card-list,
.royalties-invoice-list,
.royalties-line-item-list {
    display: grid;
    gap: 8px;
}

.royalties-line-item-card__header,
.royalties-invoice-sheet__header,
.royalties-invoice-detail-card__header,
.royalties-line-items-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
}

.royalties-line-item-card__header strong {
    font-size: 17px;
    line-height: 1.2;
    font-weight: 800;
}

.royalties-line-item-card__footer {
    display: grid;
    gap: 4px;
}

.royalties-line-item-card__meta,
.royalties-line-item-card__footer small,
.royalties-invoice-table__head,
.royalties-invoice-detail-table__head,
.royalties-invoice-sheet__meta h2,
.royalties-invoice-sheet__header span {
    color: #66748b;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}

.royalties-invoice-card__action,
.royalties-line-item-card__chevron {
    align-self: center;
}

.royalties-status-button,
.royalties-pill,
.royalties-back-button {
    border: 1px solid rgba(232, 222, 209, 0.94);
    background: rgba(255, 255, 255, 0.9);
}

.royalties-status-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    min-height: 30px;
    min-width: 0;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 800;
    color: #66748b;
}

.royalties-status-button--awaiting {
    background: linear-gradient(135deg, #d17b00, #ee980d);
    color: white;
    border-color: transparent;
}

.royalties-status-button--submitted {
    background: #f5f5f6;
    color: #7a8190;
}

.royalties-status-button--paid,
.royalties-pill--paid {
    background: rgba(64, 184, 93, 0.12);
    color: #149340;
    border-color: rgba(64, 184, 93, 0.28);
}

.royalties-pill {
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    color: #596884;
}

.royalties-pill--awaiting {
    background: rgba(205, 118, 0, 0.12);
    color: #cd7600;
    border-color: rgba(205, 118, 0, 0.22);
}

.royalties-pill--submitted {
    background: rgba(97, 110, 135, 0.12);
    color: #60708a;
    border-color: rgba(97, 110, 135, 0.22);
}

.royalties-pill--active {
    background: rgba(64, 184, 93, 0.12);
    color: #149340;
    border-color: rgba(64, 184, 93, 0.22);
}

.royalties-pill--draft {
    background: rgba(244, 184, 94, 0.14);
    color: #d18205;
    border-color: rgba(244, 184, 94, 0.26);
}

.royalties-pill--credit,
.royalties-pill--rule {
    background: rgba(129, 106, 255, 0.12);
    color: #6752dd;
    border-color: rgba(129, 106, 255, 0.26);
}

.royalties-delta {
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}

.royalties-delta--up {
    color: #149340;
}

.royalties-delta--down {
    color: #dc3d3d;
}

.royalties-delta--flat {
    color: #647089;
}

.royalties-line-items-toolbar__add {
    min-height: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 16px;
    font-size: 0.95rem;
    width: 100%;
}

.royalties-line-items-toolbar__sort {
    margin: 0;
    min-width: 0;
    width: 100%;
    position: relative;
    display: grid;
    align-items: start;
    gap: 4px;
}

.royalties-line-items-toolbar {
    align-items: center;
    margin-top: 4px;
}

.royalties-line-item-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1.15fr) minmax(280px, 0.85fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
}

.royalties-line-item-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(205, 118, 0, 0.08);
    color: #cd7600;
}

.royalties-back-button {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.royalties-invoice-sheet,
.royalties-invoice-detail-card {
    padding: 20px;
}

.royalties-invoice-sheet,
.royalties-invoice-detail-card {
    background: white;
    color: #111316;
}

.royalties-invoice-sheet__header span {
    display: block;
    margin-bottom: 10px;
    color: #121417;
    font-size: 26px;
    line-height: 1;
    letter-spacing: 0.04em;
}

.royalties-invoice-sheet__export {
    min-height: 48px;
    white-space: nowrap;
}

.royalties-invoice-sheet {
    border-radius: 8px;
}

.royalties-invoice-sheet__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 16px;
}

.royalties-invoice-sheet__header-copy {
    min-width: 0;
}

.royalties-invoice-sheet__logo {
    width: 168px;
    height: auto;
    max-width: 100%;
    object-fit: contain;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    justify-self: end;
    align-self: start;
}

.royalties-invoice-sheet__header span {
    font-size: 2rem;
    font-weight: 900;
    color: #111316;
}

.royalties-invoice-sheet h1 {
    font-size: 1.3rem;
    line-height: 1.12;
}

.royalties-invoice-sheet__export {
    width: auto;
    min-height: 44px;
    border-radius: 6px;
    padding-inline: 14px;
    color: #111316;
}

.royalties-invoice-sheet__meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    padding: 18px 0;
    border-top: 2px solid #111316;
    border-bottom: 1px solid rgba(17, 19, 22, 0.2);
    align-items: start;
}

.royalties-invoice-sheet__period {
    justify-self: end;
    width: clamp(230px, 30vw, 350px);
    margin-left: 0;
    padding-left: 0;
    text-align: left;
}

.royalties-invoice-sheet__meta h2 {
    color: #111316;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.royalties-invoice-sheet__meta strong {
    display: block;
    margin-top: 8px;
    font-size: 0.9rem;
    line-height: 1.25;
}

.royalties-invoice-sheet__meta p {
    font-size: 0.78rem;
    line-height: 1.35;
}

.royalties-invoice-sheet__meta .royalties-pill {
    max-width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.15;
}

.royalties-invoice-sheet__note {
    margin-top: 14px;
    color: #7e8697;
    font-size: 11px;
    line-height: 1.45;
}

.royalties-invoice-table,
.royalties-invoice-detail-table {
    display: grid;
    margin-top: 18px;
}

.royalties-invoice-table__head,
.royalties-invoice-table__row,
.royalties-invoice-detail-table__head,
.royalties-invoice-detail-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 6px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(17, 19, 22, 0.1);
    font-size: 0.82rem;
}

.royalties-invoice-table__row {
    align-items: start;
}

.royalties-invoice-table__head {
    border-bottom: 1.5px solid #111316;
}

.royalties-invoice-table__detail {
    display: grid;
    gap: 3px;
}

.royalties-invoice-table__amount-group {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 4px;
    min-width: 0;
}

.royalties-invoice-table__symbol,
.royalties-invoice-table__rate,
.royalties-invoice-table__amount-group strong,
.royalties-invoice-table__head span:last-child {
    justify-self: end;
    text-align: right;
}

.royalties-invoice-table__symbol:empty,
.royalties-invoice-table__rate:empty {
    display: none;
}

.royalties-invoice-detail-table__head,
.royalties-invoice-detail-table__row {
    grid-template-columns: 0.85fr 1.65fr 0.9fr 1fr 1fr;
    font-size: 0.72rem;
}

.royalties-invoice-table__row--emphasis {
    font-weight: 800;
}

.royalties-invoice-table__section {
    margin-top: 4px;
    padding: 8px 10px;
    background: #f2f2f2;
    color: #121417;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.royalties-invoice-table__row--emphasis {
    background: #f3f3f3;
    padding-inline: 10px;
}

.royalties-invoice-table__row:last-child {
    border-top: 1px dashed rgba(17, 19, 22, 0.28);
    border-bottom: 0;
    padding-top: 14px;
    background: transparent;
    font-size: 1.05rem;
}

.royalties-invoice-detail-card {
    border-radius: 8px;
}

.royalties-invoice-detail-table__head {
    color: #111316;
    border-bottom: 1.5px solid #111316;
    text-transform: uppercase;
}

.royalties-shell__empty {
    padding: 28px;
}

.royalties-line-item-card__header {
    align-items: start;
}

.royalties-line-item-card__header strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    line-height: 1.2;
}

.royalties-line-item-card__applies {
    color: #66748b;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
}

.royalties-line-item-card__details {
    display: grid;
    grid-template-columns: minmax(86px, 0.95fr) minmax(96px, 1fr) minmax(82px, auto);
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.royalties-line-item-card__footer,
.royalties-line-item-card__effective {
    text-align: left;
}

.royalties-line-item-card__footer small,
.royalties-line-item-card__effective span {
    color: #66748b;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
}

.royalties-line-item-card__effective strong {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 700;
    color: #1d2230;
}

.royalties-line-item-card__status {
    display: flex;
    justify-content: flex-end;
}

.royalties-line-items-toolbar__sort .field__input-wrap {
    position: relative;
    min-height: 48px;
    display: flex;
    align-items: center;
}

.royalties-line-items-toolbar__sort .field__input {
    min-height: 48px;
}

.royalties-line-items-toolbar__sort-label {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    color: #1f2430;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.royalties-line-items-toolbar__sort .field__input {
    padding-left: 16px;
    font-weight: 700;
}

.royalties-chart-panel {
    padding: 20px;
}

.royalties-chart-panel__header h2,
.royalties-invoice-detail-card__header strong {
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 800;
}

body:has(.app-section-title[data-scroll-title-swap="true"]:not(.app-section-title--topbar-owned)) .topbar__title-text {
    display: none;
}

body:has(.app-section-title[data-scroll-title-swap="true"]:not(.app-section-title--topbar-owned)) .topbar__brand {
    display: flex;
}

body.topbar-page-title-active:has(.app-section-title[data-scroll-title-swap="true"]:not(.app-section-title--topbar-owned)) .topbar__title-text {
    display: inline-block;
}

body.topbar-page-title-active:has(.app-section-title[data-scroll-title-swap="true"]:not(.app-section-title--topbar-owned)) .topbar__brand {
    display: none;
}

body.topbar-page-title-active .app-section-title[data-scroll-title-swap="true"]:not(.app-section-title--topbar-owned) {
    opacity: 0;
    pointer-events: none;
}

body:has(.app-section-title--topbar-owned[data-scroll-title-swap="true"]) .topbar__title-text {
    display: inline-block;
}

body:has(.app-section-title--topbar-owned[data-scroll-title-swap="true"]) .topbar__brand {
    display: none;
}

body:has(.app-section-title--mobile-topbar-owned) .topbar__title-text {
    display: inline-block;
}

@media (max-width: 960px) {
    .royalties-shell__filters,
    .royalties-invoice-topbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .royalties-invoice-sheet__meta {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 20px;
    }

    .royalties-invoice-sheet__period {
        width: clamp(210px, 34vw, 290px);
        margin-left: 0;
    }
}

@media (max-width: 720px) {
    .royalties-shell__header h1 {
        font-size: 22px;
    }

    .royalties-shell__filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .royalties-chart-panel__header,
    .royalties-invoice-detail-card__header {
        flex-direction: column;
        align-items: stretch;
    }

    .royalties-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .royalties-line-items-toolbar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 12px;
    }

    .royalties-line-items-toolbar__add {
        min-height: 52px;
        border-radius: 14px;
        padding: 0 18px;
        font-size: 0.9rem;
    }

    .royalties-line-items-toolbar__sort .field__input-wrap {
        min-height: 52px;
        border-radius: 14px;
    }

    .royalties-line-items-toolbar__sort {
        min-width: 0;
    }

    .royalties-chart-panel__controls {
        justify-items: stretch;
    }

    .royalties-chart-panel__range {
        max-width: none;
    }

    .royalties-chart-panel__grouping {
        text-align: left;
    }

    .royalties-status-button,
    .royalties-invoice-sheet__export {
        width: 100%;
        justify-content: center;
    }

    .royalties-line-item-card {
        grid-template-columns: 42px minmax(0, 1fr) 18px;
        gap: 10px 12px;
        align-items: center;
        padding: 12px 14px;
        border-radius: 16px;
    }

    .royalties-invoice-topbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .royalties-invoice-topbar__filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .royalties-line-item-card__main {
        grid-column: 2;
        grid-row: 1;
        gap: 5px;
    }

    .royalties-line-item-card__details {
        grid-column: 2;
        grid-row: 2;
        grid-template-columns: minmax(74px, 0.9fr) minmax(78px, 1fr) minmax(68px, auto);
        gap: 8px;
        align-items: center;
        padding-top: 0;
    }

    .royalties-line-item-card__footer,
    .royalties-line-item-card__effective {
        display: grid;
        gap: 3px;
        text-align: left;
        min-width: 0;
    }

    .royalties-line-item-card__status {
        display: flex;
        justify-content: flex-end;
        min-width: 0;
    }

    .royalties-line-item-card__chevron {
        grid-column: 3;
        grid-row: 1 / span 2;
        align-self: center;
        justify-self: end;
    }

    .royalties-line-item-card__icon {
        width: 40px;
        height: 40px;
    }

    .royalties-line-item-card__header strong {
        font-size: 0.86rem;
    }

    .royalties-line-item-card__header p,
    .royalties-line-item-card__applies {
        font-size: 0.68rem;
    }

    .royalties-line-item-card__footer strong,
    .royalties-line-item-card__effective strong {
        font-size: 0.76rem;
    }

    .royalties-line-item-card__footer small,
    .royalties-line-item-card__effective span,
    .royalties-pill {
        font-size: 0.62rem;
    }

    .royalties-line-item-card .royalties-pill {
        padding: 6px 9px;
    }

    .royalties-line-items-toolbar__sort .field__input {
        padding-left: 16px;
        padding-right: 42px;
        font-size: 13px;
    }

    .royalties-invoice-sheet__header {
        align-items: stretch;
    }

    .royalties-invoice-sheet__logo {
        width: 140px;
        height: auto;
        padding: 0;
    }

    .royalties-invoice-table__head,
    .royalties-invoice-table__row,
    .royalties-invoice-detail-table__head,
    .royalties-invoice-detail-table__row {
        gap: 6px;
    }

    .royalties-invoice-table__head,
    .royalties-invoice-table__row {
        grid-template-columns: minmax(0, 1fr) max-content;
    }

    .royalties-invoice-detail-table__head,
    .royalties-invoice-detail-table__row {
        grid-template-columns: 0.78fr 1.6fr 0.78fr 0.85fr 0.9fr;
    }

    .royalties-invoice-table__head,
    .royalties-invoice-detail-table__head {
        display: grid;
    }

    .royalties-invoice-table__row,
    .royalties-invoice-table__head {
        font-size: 0.68rem;
    }

    .royalties-invoice-detail-table__row,
    .royalties-invoice-detail-table__head {
        font-size: 0.58rem;
    }

    .royalties-invoice-sheet {
        padding: 16px;
    }

    .royalties-invoice-sheet__header {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .royalties-invoice-sheet__export {
        width: auto;
        min-height: 38px;
        padding: 8px 11px;
        font-size: 0.72rem;
        align-self: start;
    }

    .royalties-invoice-sheet__meta {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px;
    }

    .royalties-invoice-sheet__period {
        width: 156px;
        margin-left: 0;
        padding-left: 0;
    }

    .royalties-invoice-sheet__meta strong {
        font-size: 0.7rem;
    }

    .royalties-invoice-sheet__meta p {
        font-size: 0.62rem;
    }

    .royalties-invoice-sheet__meta .royalties-pill {
        padding: 5px 6px;
        font-size: 0.52rem;
    }
}

.royalties-submit-notice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 13px;
    border: 1px solid rgba(232, 222, 209, 0.94);
    background: rgba(255, 255, 255, 0.9);
    color: var(--analytics-muted);
    font-size: 10px;
    line-height: 13px;
    font-weight: 700;
}

.royalties-autopay-prompt {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 250, 243, 0.94);
}

.royalties-autopay-prompt__copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.royalties-autopay-prompt__copy strong {
    font-size: 12px;
    line-height: 15px;
    font-weight: 800;
}

.royalties-autopay-prompt__copy span {
    color: var(--analytics-muted);
    font-size: 10px;
    line-height: 13px;
    font-weight: 600;
}

.royalties-autopay-prompt__button {
    white-space: nowrap;
}

.royalties-status-button {
    min-height: 28px;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
}

.royalties-line-item-card.analytics-location-card {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 18px;
    gap: 8px 10px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
}

.royalties-line-item-card__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
}

.royalties-line-item-card__main {
    grid-column: 2;
    grid-row: 1;
}

.royalties-line-item-card__description {
    color: var(--analytics-muted);
    font-size: 11px;
    line-height: 13px;
    font-weight: 600;
}

.royalties-line-item-card__details {
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr) auto;
    gap: 8px;
}

.royalties-line-item-card__chevron {
    grid-column: 3;
    grid-row: 1 / span 2;
}

.royalties-line-item-card .royalties-pill {
    min-height: 22px;
    padding: 4px 9px;
    font-size: 10px;
    line-height: 1.1;
}

.royalties-invoice-topbar__filters {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.royalties-invoice-topbar__action,
.royalties-invoice-topbar__status {
    min-height: 54px;
    border-radius: 16px;
    border: 1px solid rgba(232, 222, 209, 0.94);
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 12px 36px rgba(52, 40, 21, 0.05);
}

.royalties-invoice-topbar__action {
    min-width: 0;
    width: 100%;
    padding: 0 14px;
    font-size: 14px;
    justify-content: center;
}

.royalties-invoice-topbar__status {
    display: flex;
    align-items: center;
    padding: 0 14px;
}

.royalties-invoice-topbar__status-content {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.royalties-invoice-topbar__status .royalties-pill {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
}


@media print {
    @page {
        size: Letter portrait;
        margin: 0;
    }

    html,
    body {
        background: white !important;
        width: 8.5in;
        min-height: 11in;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body.royalties-printing * {
        visibility: hidden !important;
    }

    body.royalties-printing .royalties-invoice-sheet[data-print-target="true"],
    body.royalties-printing .royalties-invoice-sheet[data-print-target="true"] * {
        visibility: visible !important;
    }

    body.royalties-printing .royalties-invoice-sheet[data-print-target="true"] {
        position: static;
        display: block;
        width: 8.5in;
        min-height: 11in;
        max-width: none;
        margin: 0;
        padding: 0.5in 0.6in 0.55in;
        box-sizing: border-box;
        border: 0 !important;
        border-radius: 0;
        background: white !important;
        box-shadow: none !important;
        color: #111316 !important;
        overflow: visible;
    }

    .drawer,
    .topbar,
    .shell__backdrop,
    .app-section-title,
    .app-grid,
    .app-panel,
    .royalties-submit-notice {
        display: none !important;
    }

    .page--royalties-invoice,
    .royalties-invoice-sheet,
    .royalties-invoice-detail-card {
        background: white !important;
        box-shadow: none !important;
        border-color: #d9d9d9 !important;
    }

    .page--royalties-invoice {
        display: block;
        width: 8.5in;
        min-height: 11in;
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
    }

    .shell__content,
    .shell__page {
        width: 8.5in;
        min-height: 11in;
        padding: 0 !important;
        margin: 0 !important;
        background: white !important;
    }

    .royalties-invoice-sheet__note {
        color: #555d6d;
    }
}

.analytics-location-mode,
.app-mode-selector {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    min-height: 34px;
    padding: 1px;
    border-radius: 15px;
    border: 1px solid rgba(232, 222, 209, 0.94);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 6px 18px rgba(17, 17, 17, 0.035);
}

.analytics-location-mode__item,
.app-mode-selector__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #4a535f;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 700;
}

.analytics-location-mode__item--active,
.app-mode-selector__item--active {
    background: rgb(156, 121, 73);
    color: #ffffff;
}

.analytics-location-mode__item--active .app-icon,
.app-mode-selector__item--active .app-icon {
    color: #ffffff;
}

.install-screen {
    --install-screen-bg:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.96), transparent 34%),
        radial-gradient(circle at top right, rgba(183, 123, 60, 0.16), transparent 26%),
        linear-gradient(180deg, #faf4eb 0%, #f3eee5 48%, #efe8de 100%);
    --install-screen-text: #25170d;
    --install-screen-muted: rgba(37, 23, 13, 0.82);
    width: 100%;
    min-height: 100svh;
    display: flex;
    justify-content: center;
    padding:
        max(8px, env(safe-area-inset-top))
        10px
        max(8px, env(safe-area-inset-bottom))
        10px;
    box-sizing: border-box;
    color-scheme: light;
    color: var(--install-screen-text);
    background: var(--install-screen-bg);
    overflow-x: hidden;
}

.install-screen__poster {
    width: min(100%, 1040px);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
}

.install-screen__hero {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 8px;
    margin-bottom: 10px;
}

.install-screen__logo-frame {
    width: clamp(88px, 12vw, 124px);
    aspect-ratio: 1 / 1;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.install-screen__logo {
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 22px;
    box-shadow: 0 12px 26px rgba(57, 39, 20, 0.12);
}

.install-screen__title {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 0.94;
    letter-spacing: -0.04em;
    color: var(--install-screen-text);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.install-screen__divider {
    width: min(100%, 520px);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.install-screen__divider::before,
.install-screen__divider::after {
    content: "";
    height: 1px;
    background: rgba(156, 97, 48, 0.34);
}

.install-screen__divider-paw {
    color: #9c6130;
    font-size: 1rem;
    line-height: 1;
}

.install-screen__copy {
    margin: 0;
    max-width: 760px;
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(0.95rem, 2vw, 1.2rem);
    line-height: 1.3;
    color: var(--install-screen-muted);
}

.install-screen__panel {
    color: var(--install-screen-text);
    border: 1px solid rgba(176, 127, 69, 0.22);
    border-radius: 24px;
    background: rgba(255, 252, 247, 0.97);
    box-shadow: 0 18px 40px rgba(57, 39, 20, 0.08);
    backdrop-filter: blur(18px);
    padding: 14px 14px 12px;
}

.install-screen__panel + .install-screen__panel {
    margin-top: 10px;
}

.install-screen__panel-head {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.install-screen__panel-badge {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 10px 20px rgba(65, 40, 11, 0.14);
}

.install-screen__panel-badge--brown {
    background: radial-gradient(circle at 30% 30%, #c07d3d, #8a531f);
}

.install-screen__panel-badge--green {
    background: radial-gradient(circle at 30% 30%, #7ca44f, #476f23);
}

.install-screen__panel-badge-label {
    display: block;
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.install-screen__panel-badge-icon {
    width: 68%;
    height: 68%;
    display: block;
    flex: 0 0 auto;
}

.install-screen__panel-heading {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.45rem, 3.2vw, 2.2rem);
    line-height: 0.96;
    color: var(--install-screen-text);
}

.install-screen__panel-subcopy {
    margin: 2px 0 0;
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(0.78rem, 1.7vw, 0.95rem);
    color: var(--install-screen-muted);
}

.install-screen__android-action {
    display: grid;
    justify-items: center;
    gap: 5px;
    margin: -2px 0 14px;
    text-align: center;
}

.install-screen__android-install-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 14px;
    padding: 11px 20px;
    background: linear-gradient(135deg, #587f2d, #3f6420);
    box-shadow: 0 10px 20px rgba(54, 91, 25, 0.24);
    color: #ffffff;
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    font-weight: 800;
    cursor: pointer;
}

.install-screen__android-install-button svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.install-screen__android-install-button:disabled {
    cursor: wait;
    opacity: 0.72;
}

.install-screen__android-install-button:not(:disabled):active {
    transform: translateY(1px);
}

.install-screen__android-install-status {
    margin: 0;
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(0.7rem, 1.15vw, 0.82rem);
    line-height: 1.25;
    color: rgba(37, 23, 13, 0.78);
}

.install-screen__steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
}

.install-screen__step {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 8px;
    text-align: center;
    position: relative;
}

.install-screen__step:not(:last-child)::after {
    content: "\203A";
    position: absolute;
    top: 40px;
    right: -8px;
    font-size: 1.8rem;
    line-height: 1;
    color: rgba(190, 148, 93, 0.8);
}

.install-screen__step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.install-screen__step-number--brown {
    background: #9c6130;
}

.install-screen__step-number--green {
    background: #587f2d;
}

.install-screen__step-tile {
    width: min(100%, 70px);
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    border: 1px solid rgba(196, 176, 150, 0.25);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(82, 57, 26, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.install-screen__step-tile img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 12px;
}

.install-screen__step-label {
    margin: 0;
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(0.7rem, 1vw, 0.86rem);
    line-height: 1.2;
    color: #25170d;
}

.install-screen__step-label strong {
    color: #9c6130;
}

.install-screen__step-label--green strong {
    color: #587f2d;
}

.install-screen__step-hint {
    margin-top: 3px;
    display: block;
    font-style: italic;
    color: rgba(37, 23, 13, 0.78);
}

.install-screen__step-symbol {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #5f6770;
}

.install-screen__step-symbol svg {
    width: 100%;
    height: 100%;
}

.install-screen__step-symbol--blue {
    color: #2c80e6;
}

.install-screen__step-symbol--green {
    color: #587f2d;
}

.install-screen__step-symbol--gray {
    color: #66707a;
}

.install-screen__step-word {
    font-size: clamp(1.3rem, 3vw, 2rem);
    font-weight: 700;
}

.install-screen__step-word--small {
    font-size: clamp(1.15rem, 2.6vw, 1.7rem);
}

.install-screen__panel--important {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 12px;
    align-items: center;
}

.install-screen__important-shield {
    width: 56px;
    height: 56px;
    color: #9c6130;
}

.install-screen__important-title {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1;
    color: var(--install-screen-text);
}

.install-screen__important-rule {
    width: 1px;
    align-self: stretch;
    background: rgba(156, 97, 48, 0.34);
}

.install-screen__important-copy {
    margin: 0;
    font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: clamp(0.82rem, 1.5vw, 1rem);
    line-height: 1.35;
    color: var(--install-screen-muted);
}

.install-screen__important-copy strong {
    color: var(--install-screen-text);
}

@media (max-width: 900px) {
    .install-screen {
        padding:
            max(6px, env(safe-area-inset-top))
            6px
            max(6px, env(safe-area-inset-bottom))
            6px;
    }

    .install-screen__title {
        font-size: clamp(1.7rem, 7.6vw, 2.3rem);
        line-height: 1;
    }

    .install-screen__copy {
        font-size: 0.9rem;
        line-height: 1.32;
    }

    .install-screen__panel {
        border-radius: 20px;
        padding: 11px 10px 10px;
    }

    .install-screen__panel + .install-screen__panel {
        margin-top: 12px;
    }

    .install-screen__panel-head {
        gap: 8px;
        margin-bottom: 8px;
    }

    .install-screen__panel-badge {
        width: 38px;
        height: 38px;
    }

    .install-screen__panel-badge-label {
        font-size: 0.76rem;
    }

    .install-screen__panel-heading {
        font-size: 1.3rem;
        line-height: 1.05;
    }

    .install-screen__panel-subcopy {
        font-size: 0.76rem;
        line-height: 1.25;
    }

    .install-screen__android-action {
        gap: 3px;
        margin: -1px 0 8px;
    }

    .install-screen__android-install-button {
        min-height: 38px;
        gap: 6px;
        border-radius: 10px;
        padding: 8px 13px;
        font-size: 0.74rem;
    }

    .install-screen__android-install-button svg {
        width: 13px;
        height: 13px;
    }

    .install-screen__android-install-status {
        font-size: 0.65rem;
        line-height: 1.28;
    }

    .install-screen__steps {
        gap: 4px;
    }

    .install-screen__step-tile {
        width: min(100%, 52px);
        border-radius: 11px;
        padding: 6px;
    }

    .install-screen__step-number {
        width: 22px;
        height: 22px;
        font-size: 0.72rem;
    }

    .install-screen__step:not(:last-child)::after {
        top: 30px;
        right: -4px;
        font-size: 0.95rem;
    }

    .install-screen__step-label {
        font-size: 0.64rem;
        line-height: 1.2;
    }

    .install-screen__step-hint {
        display: none;
    }

    .install-screen__panel--important {
        grid-template-columns: 44px 1fr;
        gap: 8px 10px;
    }

    .install-screen__important-shield {
        width: 38px;
        height: 38px;
    }

    .install-screen__important-title {
        font-size: 1.2rem;
        align-self: center;
    }

    .install-screen__important-rule {
        display: none;
    }

    .install-screen__important-copy {
        grid-column: 1 / -1;
        font-size: 0.76rem;
        line-height: 1.34;
    }

    .install-screen__divider {
        width: min(100%, 420px);
        gap: 8px;
    }

    .install-screen__divider-paw {
        font-size: 0.84rem;
    }

    .install-screen__hero {
        gap: 7px;
        margin-bottom: 12px;
    }

    .install-screen__logo-frame {
        width: 80px;
        border-radius: 16px;
    }

    .install-screen__logo {
        border-radius: 16px;
    }
}

body.operations-manual-image-viewer-open {
    overflow: hidden;
}

.operations-manual-image-viewer {
    position: fixed;
    inset: 0;
    z-index: 4200;
    display: grid;
    place-items: center;
    padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: rgba(31, 27, 22, 0.58);
    backdrop-filter: blur(18px) saturate(0.9);
    -webkit-backdrop-filter: blur(18px) saturate(0.9);
    opacity: 0;
    transition: opacity 160ms ease;
}

.operations-manual-image-viewer.is-open {
    opacity: 1;
}

.operations-manual-image-viewer__panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: min(920px, 100%);
    height: min(760px, 84svh);
    overflow: hidden;
    border: 1px solid rgba(226, 213, 194, 0.94);
    border-radius: 24px;
    background: rgba(255, 252, 247, 0.96);
    box-shadow: 0 28px 80px rgba(25, 20, 14, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.operations-manual-image-viewer__header,
.operations-manual-image-viewer__footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255, 252, 247, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.operations-manual-image-viewer__header {
    justify-content: space-between;
    border-bottom: 1px solid rgba(224, 212, 195, 0.78);
    color: #241f19;
    font-size: 0.9rem;
    font-weight: 800;
}

.operations-manual-image-viewer__header button,
.operations-manual-image-viewer__controls button {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(216, 201, 181, 0.9);
    border-radius: 50%;
    color: #3e3428;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 5px 14px rgba(61, 46, 28, 0.08);
    font: inherit;
    font-size: 1.25rem;
    font-weight: 650;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.operations-manual-image-viewer__header button:hover,
.operations-manual-image-viewer__header button:focus-visible,
.operations-manual-image-viewer__controls button:hover,
.operations-manual-image-viewer__controls button:focus-visible {
    border-color: rgba(163, 118, 58, 0.54);
    outline: 0;
    color: #6f4c20;
    background: #fffaf2;
}

.operations-manual-image-viewer__stage {
    display: grid;
    place-items: center;
    min-height: 0;
    overflow: hidden;
    padding: 14px;
    background:
        radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.98), rgba(245, 239, 230, 0.92)),
        #f5efe6;
    cursor: zoom-in;
    touch-action: none;
    overscroll-behavior: contain;
}

.operations-manual-image-viewer__stage.is-zoomed {
    cursor: grab;
}

.operations-manual-image-viewer__stage.is-zoomed:active {
    cursor: grabbing;
}

.operations-manual-image-viewer__stage img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform-origin: center;
    will-change: transform;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.operations-manual-image-viewer__footer {
    justify-content: space-between;
    min-width: 0;
    border-top: 1px solid rgba(224, 212, 195, 0.78);
}

.operations-manual-image-viewer__caption {
    min-width: 0;
    overflow: hidden;
    color: #70675d;
    font-size: 0.76rem;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.operations-manual-image-viewer__controls {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 7px;
}

.operations-manual-image-viewer__controls .operations-manual-image-viewer__zoom {
    width: auto;
    min-width: 58px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 780;
}

@media (max-width: 640px) {
    .operations-manual-image-viewer {
        padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }

    .operations-manual-image-viewer__panel {
        height: min(720px, 82svh);
        border-radius: 20px;
    }

    .operations-manual-image-viewer__footer {
        justify-content: center;
    }

    .operations-manual-image-viewer__caption {
        display: none;
    }
}

/* Dev vNext premium shell. This layer deliberately restyles shared contracts
   without changing route, permission, or workflow behavior. */
.shell--premium {
    --premium-obsidian: #151916;
    --premium-ink: #1a201c;
    --premium-surface: #202722;
    --premium-surface-raised: #29312b;
    --premium-surface-soft: #303932;
    --premium-cream: #f4efe7;
    --premium-muted: #b8b5ae;
    --premium-bronze: #b98a4b;
    --premium-bronze-bright: #d2ad72;
    --premium-teal: #74b7bd;
    --premium-oxblood: #7d423b;
    --channel-accent: var(--premium-bronze-bright);
    --channel-accent-ink: #1b1710;
    --premium-border: rgba(244, 239, 231, 0.1);
    --premium-border-strong: rgba(210, 173, 114, 0.3);
    --premium-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
    --accent: var(--premium-bronze);
    --surface: var(--premium-surface-raised);
    --border-color: var(--premium-border);
    --ink-strong: var(--premium-cream);
    --ink-muted: var(--premium-muted);
    --app-surface: var(--premium-surface-raised);
    --app-surface-soft: rgba(39, 47, 41, 0.92);
    --app-border: var(--premium-border);
    --app-card-shadow: var(--premium-shadow);
    --app-text: var(--premium-cream);
    --app-text-muted: var(--premium-muted);
    --app-muted: var(--premium-muted);
    --app-success-strong: #96d6a8;
    --app-success-surface: rgba(80, 142, 97, 0.18);
    --app-danger-strong: #eea39d;
    --app-danger-surface: rgba(125, 66, 59, 0.24);
    --app-thread-surface: #181d1a;
    --app-thread-marker: rgba(244, 239, 231, 0.07);
    --app-thread-incoming: #2d3630;
    --app-thread-incoming-text: var(--premium-cream);
    --app-thread-incoming-wave: rgba(244, 239, 231, 0.28);
    --app-thread-incoming-wave-progress: rgba(244, 239, 231, 1);
    --app-thread-outgoing: var(--premium-bronze);
    --app-thread-outgoing-text: #fff8ee;
    --resource-card-surface: rgba(41, 49, 43, 0.96);
    --resource-preview-surface: linear-gradient(145deg, rgba(185, 138, 75, 0.16), rgba(41, 49, 43, 0.98));
    --resource-control-surface: rgba(39, 47, 41, 0.94);
    --resource-chip-surface: rgba(185, 138, 75, 0.14);
    --resource-chip-text: #d8ba8d;
    --dt-cream: var(--premium-obsidian);
    --dt-beige: var(--premium-surface);
    --dt-gold: var(--premium-bronze);
    --dt-gold-deep: #90652e;
    --dt-gold-dark: var(--premium-bronze-bright);
    --dt-charcoal: var(--premium-cream);
    --dt-black: var(--premium-cream);
    --dt-muted: var(--premium-muted);
    --dt-border: var(--premium-border);
    --dt-white: var(--premium-surface-raised);
    --dt-surface: var(--premium-surface-raised);
    --dt-text: var(--premium-cream);
    --dt-text-muted: var(--premium-muted);
    --dt-hq-accent-deep: var(--premium-bronze-bright);
    --dt-hq-ink-muted: var(--premium-muted);
    --dt-hq-shadow: var(--premium-shadow);
    --dt-success: #75bd8a;
    --dt-warning: #d6a95e;
    --dt-danger: #df776f;
    --dt-shadow-sm: 0 8px 20px rgba(0, 0, 0, 0.18);
    --dt-shadow-md: 0 16px 36px rgba(0, 0, 0, 0.24);
    --dt-shadow-lg: var(--premium-shadow);
    --analytics-bg: var(--premium-obsidian);
    --analytics-page-bg: var(--premium-obsidian);
    --analytics-page-surface: transparent;
    --analytics-card: rgba(41, 49, 43, 0.96);
    --analytics-border: var(--premium-border);
    --analytics-gold: var(--premium-bronze-bright);
    --analytics-gold-dark: var(--premium-bronze-bright);
    --analytics-charcoal: var(--premium-cream);
    --analytics-ink: var(--premium-cream);
    --analytics-muted: var(--premium-muted);
    --analytics-success: #75bd8a;
    --analytics-green: #75bd8a;
    --analytics-danger: #df776f;
    --analytics-shadow: var(--premium-shadow);
    --dt-shell-surface: linear-gradient(180deg, #1a201c 0%, #151916 44%, #171c19 100%);
    color: var(--premium-cream);
    background: var(--dt-shell-surface);
    font-family: "Instrument Sans", sans-serif;
}

/* The voice-message progress mask lives outside WaveSurfer's shadow tree so
   iOS Safari always paints the played portion as solid white. */
.inbox-page__played-wave-overlay {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    overflow: hidden;
    pointer-events: none;
    filter: drop-shadow(0 0 0.35px rgba(255, 255, 255, 0.9));
}

.inbox-page__played-wave-overlay canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    max-width: none;
}

.shell--premium .shell__body {
    color: var(--premium-cream);
    background: var(--dt-shell-surface);
}

.shell--premium .shell__header::before {
    background:
        linear-gradient(180deg,
            rgba(21, 25, 22, 0.94) 0%,
            rgba(21, 25, 22, 0.76) 42%,
            rgba(21, 25, 22, 0.22) 76%,
            transparent 100%);
    backdrop-filter: blur(22px) saturate(1.03);
    -webkit-backdrop-filter: blur(22px) saturate(1.03);
}

.shell--premium .shell__backdrop {
    background: rgba(2, 4, 3, 0.72);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.shell--premium .drawer {
    border-right: 1px solid var(--premium-border);
    color: var(--premium-cream);
    background:
        radial-gradient(circle at 0 0, rgba(185, 138, 75, 0.1), transparent 32%),
        linear-gradient(165deg, #29312b 0%, #181d1a 72%);
    box-shadow: 24px 0 58px rgba(0, 0, 0, 0.36);
}

.shell--premium .app-side-rail__avatar {
    color: #111512;
    background: linear-gradient(145deg, #e5c899, #a8783c);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.shell--premium .app-side-rail__link {
    color: rgba(244, 236, 223, 0.82);
    transition: color 150ms ease, background 150ms ease, transform 150ms ease;
}

.shell--premium .app-side-rail__link:hover,
.shell--premium .app-side-rail__link:focus-visible {
    color: var(--premium-cream);
    background: rgba(255, 255, 255, 0.055);
    outline: 0;
}

.shell--premium .app-side-rail__link--active {
    color: var(--premium-cream);
    background: rgba(185, 138, 75, 0.13);
    box-shadow: inset 3px 0 var(--premium-bronze-bright);
}

.shell--premium .app-side-rail__link--active .app-icon {
    color: var(--premium-bronze-bright);
}

.shell--premium .app-side-rail__logout {
    color: rgba(244, 236, 223, 0.76);
}

.shell--premium .topbar__icon-button,
.shell--premium .topbar__mobile-notification,
.shell--premium .topbar__desktop-notification,
.shell--premium .topbar__desktop-context-action,
.shell--premium .topbar__profile {
    color: var(--premium-cream);
}

.topbar__mobile-notification {
    width: 54px;
    height: 54px;
    padding: 0;
    border: 0;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: var(--dt-black);
    background: transparent;
    cursor: pointer;
    touch-action: manipulation;
}

.shell--premium .topbar__mobile-notification,
.shell--premium .topbar__desktop-notification,
.shell--premium .topbar__desktop-context-action {
    border: 1px solid var(--premium-border);
    background: rgba(42, 50, 44, 0.82);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16), inset 0 1px rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
}

.shell--premium .topbar__mobile-notification {
    width: 44px;
    height: 44px;
    margin-right: 4px;
    border-radius: 15px;
}

.shell--premium .topbar__badge {
    top: -7px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    border-color: var(--premium-ink);
    background: #d65e56;
    color: white;
}

.topbar__notification-anchor {
    position: relative;
    display: inline-grid;
    place-items: center;
}

.topbar__activity-summary {
    position: absolute;
    top: calc(100% + 11px);
    right: 2px;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: clamp(9px, 3vw, 16px);
    min-height: 42px;
    max-width: calc(100vw - 34px);
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: linear-gradient(135deg, #d26058 0%, #b84742 100%);
    box-shadow: 0 12px 28px rgba(80, 21, 20, 0.26);
    cursor: pointer;
    touch-action: manipulation;
    animation: topbar-activity-summary-lifecycle 6s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.topbar__activity-summary::before {
    position: absolute;
    right: 14px;
    bottom: calc(100% - 1px);
    width: 12px;
    height: 9px;
    background: #be4d46;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    content: "";
}

.topbar__activity-group {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

.topbar__activity-group strong {
    color: inherit;
    font-size: 13px;
    font-weight: 680;
    line-height: 1;
}

@keyframes topbar-activity-summary-lifecycle {
    0% {
        opacity: 0;
        transform: translate3d(0, -7px, 0) scale(0.94);
    }

    7%,
    84% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -4px, 0) scale(0.97);
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar__activity-summary {
        animation: none;
    }
}

.shell--premium .topbar__brand .brand-mark__title,
.shell--premium .topbar__title-text {
    color: var(--premium-cream);
}

.shell--premium .topbar__subtitle {
    color: var(--premium-muted);
}

.shell--premium .topbar__subtitle--live {
    color: #8fd2a2;
}

.shell--premium .topbar__brand .brand-mark__subtitle strong {
    color: var(--premium-bronze-bright);
}

.shell--premium .topbar__search .field__input {
    background: rgba(39, 47, 41, 0.88);
}

.shell--premium .page {
    color: var(--premium-cream);
}

.shell--premium .analytics-page {
    --analytics-bg: var(--premium-obsidian);
    --analytics-page-surface: transparent;
    --analytics-card: rgba(41, 49, 43, 0.96);
    --analytics-border: var(--premium-border);
    --analytics-gold: var(--premium-bronze-bright);
    --analytics-gold-dark: var(--premium-bronze-bright);
    --analytics-charcoal: var(--premium-cream);
    --analytics-muted: var(--premium-muted);
    --analytics-success: #75bd8a;
    --analytics-danger: #df776f;
    --analytics-shadow: var(--premium-shadow);
    --analytics-page-stack: transparent;
    background: transparent;
}

.shell--premium .shell__content :is(h1, h2, h3, h4),
.shell--premium .app-section-title h1,
.shell--premium .app-panel__header h2,
.shell--premium .app-page-intro h2,
.shell--premium .app-page-intro .page-subtle,
.shell--premium .app-list-card__identity strong,
.shell--premium .app-list-card__stats strong,
.shell--premium .app-rank-card__content strong,
.shell--premium .app-rank-card__value,
.shell--premium .app-metric-card strong,
.shell--premium .analytics-kpi-card strong,
.shell--premium .analytics-location-card__identity strong,
.shell--premium .analytics-location-card__stats strong,
.shell--premium .app-contact-card__row strong,
.shell--premium .app-detail-row__title-line strong,
.shell--premium .app-detail-row__meta em,
.shell--premium .app-action-list-card,
.shell--premium .analytics-loading-notice__copy strong {
    color: var(--premium-cream);
}

.shell--premium :is(.page-subtle, .page-caption, .page-footer-note),
.shell--premium :is(.app-list-card__subtitle, .app-list-card__stats span, .app-list-card__stats small),
.shell--premium :is(.app-rank-card__share, .app-rank-card__value-copy small),
.shell--premium :is(.app-metric-card__support, .analytics-kpi-card__support),
.shell--premium :is(.app-detail-row__subtitle, .app-detail-row__helper),
.shell--premium :is(.app-contact-card__subtitle, .app-contact-card__support, .app-contact-card__trail-text),
.shell--premium .analytics-loading-notice__copy span {
    color: var(--premium-muted);
}

.shell--premium .app-page-intro__clock {
    color: var(--premium-cream);
}

.shell--premium :is(.app-page-intro__date, .app-page-intro__clock-meridiem) {
    color: var(--premium-muted);
}

.shell--premium :is(
    .app-panel,
    .analytics-panel,
    .app-metric-card,
    .analytics-kpi-card,
    .analytics-opportunity-card,
    .app-list-card,
    .app-contact-card,
    .analytics-location-card,
    .app-detail-row,
    .app-action-list-card,
    .analytics-modal,
    .app-info-modal,
    .analytics-loading-notice) {
    border-color: var(--premium-border);
    background: rgba(41, 49, 43, 0.96);
    box-shadow: var(--premium-shadow), inset 0 1px rgba(255, 255, 255, 0.03);
}

.shell--premium :is(.app-panel, .analytics-panel) {
    border-radius: 22px;
}

.shell--premium :is(.app-list-card, .analytics-location-card, .app-detail-row, .app-action-list-card) {
    color: var(--premium-cream);
    border-radius: 17px;
    background: rgba(45, 54, 47, 0.88);
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.13), inset 0 1px rgba(255, 255, 255, 0.03);
    transition: transform 170ms ease, border-color 170ms ease, background 170ms ease, box-shadow 170ms ease;
}

.shell--premium .app-contact-card {
    color: var(--premium-cream);
    background: rgba(45, 54, 47, 0.88);
}

.shell--premium .app-contact-card__avatar {
    border-color: rgba(210, 173, 114, 0.38);
    color: var(--premium-cream);
}

.shell--premium .app-contact-card__avatar--sage {
    color: #a6d7b3;
    background: #314038;
}

.shell--premium .app-contact-card__avatar--amber {
    color: #e8bd80;
    background: #43382b;
}

.shell--premium .app-contact-card__avatar--gold {
    color: #e1c493;
    background: #453923;
}

.shell--premium .app-contact-card__avatar--placeholder {
    border-color: rgba(210, 173, 114, 0.28);
    color: var(--premium-bronze-bright);
    background: #343d35;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
}

.shell--premium .team-directory-list__band,
.shell--premium .team-directory-floating-band {
    padding: 8px 10px;
    border-color: rgba(244, 239, 231, 0.13);
    color: #dfc398;
    background: rgba(244, 239, 231, 0.07);
    box-shadow: none;
}

.shell--premium :is(.app-list-card, .analytics-location-card, .app-detail-row, .app-action-list-card):hover,
.shell--premium :is(.app-list-card, .analytics-location-card, .app-detail-row, .app-action-list-card):focus-visible {
    border-color: var(--premium-border-strong);
    background: rgba(49, 59, 51, 0.96);
    outline: 0;
}

.shell--premium .app-list-card__stat:not(:first-child),
.shell--premium .analytics-location-card__stat:not(:first-child) {
    border-color: var(--premium-border);
}

.shell--premium :is(.app-list-card__chevron, .analytics-location-card__chevron, .app-rank-card__chevron, .app-detail-row__chevron) {
    color: var(--premium-bronze-bright);
}

.shell--premium .app-list-card--active,
.shell--premium .analytics-kpi-card--selected,
.shell--premium .app-metric-card.analytics-kpi-card--selected,
.shell--premium .app-action-list-card--selected {
    border-color: rgba(210, 173, 114, 0.34);
    background: linear-gradient(90deg, rgba(185, 138, 75, 0.12), rgba(45, 54, 47, 0.94) 38%);
    box-shadow: inset 2px 0 var(--premium-bronze), 0 12px 28px rgba(0, 0, 0, 0.18);
}

.shell--premium .app-rank-card {
    border-bottom-color: var(--premium-border);
    color: var(--premium-cream);
}

.shell--premium .app-rank-card__rank {
    color: var(--premium-bronze-bright);
    background: rgba(185, 138, 75, 0.12);
}

.shell--premium .analytics-filterbar,
.shell--premium :is(.analytics-location-mode, .app-mode-selector, .analytics-segmented),
.shell--premium .analytics-tabbar {
    border-color: var(--premium-border);
    background: rgba(39, 47, 41, 0.9);
    box-shadow: 0 9px 22px rgba(0, 0, 0, 0.13);
}

.shell--premium .analytics-tabbar {
    gap: 20px;
    border-width: 0 0 1px;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.shell--premium :is(.analytics-tabbar__item, .analytics-location-mode__item, .app-mode-selector__item, .analytics-segmented__item) {
    color: var(--premium-muted);
}

.shell--premium .analytics-tabbar__item--active {
    color: var(--premium-cream);
    border-color: var(--premium-bronze-bright);
    background: transparent;
}

.shell--premium :is(.analytics-location-mode__item--active, .app-mode-selector__item--active, .analytics-segmented__item--active) {
    color: var(--premium-cream);
    border: 1px solid rgba(210, 173, 114, 0.22);
    background: rgba(185, 138, 75, 0.12);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.shell--premium :is(.analytics-location-mode__item--active, .app-mode-selector__item--active) .app-icon {
    color: var(--premium-bronze-bright);
}

.shell--premium :is(.analytics-chip, .app-chip) {
    border-color: var(--premium-border);
    color: var(--premium-muted);
    background: rgba(244, 236, 223, 0.055);
}

.shell--premium :is(.analytics-chip--active, .app-chip--active) {
    border-color: rgba(210, 173, 114, 0.22);
    color: var(--premium-cream);
    background: rgba(185, 138, 75, 0.12);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
}

.shell--premium .app-multi-select-filter__options {
    border-color: var(--premium-border);
    color: var(--premium-cream);
    background: rgba(39, 47, 41, 0.99);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32), inset 0 1px rgba(255, 255, 255, 0.03);
}

.shell--premium :is(.app-multi-select-filter__actions, .app-multi-select-filter__option) {
    border-color: var(--premium-border);
}

.shell--premium .app-multi-select-filter__option input {
    accent-color: var(--premium-bronze);
}

.shell--premium .app-activity-banner__surface {
    border-color: var(--premium-border);
    background: rgba(41, 49, 43, 0.96);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.17), inset 0 1px rgba(255, 255, 255, 0.03);
}

.shell--premium .app-activity-banner__label {
    color: var(--premium-cream);
}

.shell--premium .app-activity-banner__support {
    color: var(--premium-muted);
}

.shell--premium :is(.analytics-modal__header, .app-info-modal__header) {
    border-color: var(--premium-border);
    background: rgba(45, 54, 47, 0.96);
}

.shell--premium :is(.analytics-modal__close, .app-info-modal__close) {
    border-color: var(--premium-border);
    color: var(--premium-cream);
    background: rgba(244, 236, 223, 0.055);
}

.shell--premium :is(.analytics-modal__body p, .app-info-modal__body p, .app-confirm-modal__body p) {
    color: var(--premium-muted);
}

.shell--premium .app-confirm-modal__summary,
.shell--premium .app-confirm-modal__summary strong,
.shell--premium :is(.app-confirm-modal__list-title, .app-confirm-modal__list-value) {
    color: var(--premium-cream);
}

.shell--premium .app-confirm-modal__scrollbox {
    border-color: var(--premium-border);
    background: rgba(32, 39, 34, 0.8);
}

.shell--premium .app-confirm-modal__list-item,
.shell--premium .app-confirm-modal__actions {
    border-color: var(--premium-border);
}

.shell--premium .app-confirm-modal__actions {
    background: rgba(39, 47, 41, 0.96);
}

.shell--premium .app-service-spotlight__tooltip {
    border-color: var(--premium-border);
    color: var(--premium-cream);
    background: rgba(39, 47, 41, 0.99);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
}

.shell--premium .app-service-spotlight__tooltip strong {
    color: var(--premium-cream);
}

.shell--premium :is(.analytics-donut::after, .analytics-pet-mix__donut::after) {
    background: var(--premium-surface-raised);
    box-shadow: inset 0 0 0 1px var(--premium-border);
}

.shell--premium :is(.analytics-service-legend__row--active, .app-service-legend__row--active),
.shell--premium :is(
    .analytics-leaderboard__identity strong,
    .analytics-leaderboard__value,
    .analytics-groomer-appointment__content strong,
    .analytics-service-helper-card__top strong,
    .app-insight-card__top strong,
    .analytics-pet-type-percent,
    .analytics-opportunity-list__row strong,
    .analytics-opportunity-mobile-row__content strong,
    .royalties-bill-summary-card__title) {
    color: var(--premium-cream);
}

.shell--premium .analytics-leaderboard__your-row > span {
    color: var(--premium-bronze-bright);
}

.shell--premium :is(.analytics-refresh-button, .analytics-info-button, .app-info-button, .analytics-location-toolbar__refresh) {
    border-color: var(--premium-border);
    color: var(--premium-bronze-bright);
    background: rgba(45, 54, 47, 0.94);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.14), inset 0 1px rgba(255, 255, 255, 0.03);
}

.shell--premium :is(
    .analytics-kpi-card .analytics-info-button--metric,
    .app-metric-card .analytics-info-button--metric,
    .app-metric-card .app-info-button--metric) {
    border: 0;
    color: var(--premium-bronze-bright);
    background: transparent;
    box-shadow: none;
}

.shell--premium .franchise-network-connection-row {
    border-color: var(--premium-border);
    color: var(--premium-cream);
    background: rgba(45, 54, 47, 0.88);
}

.shell--premium .analytics-leaderboard__podium-stage,
.shell--premium :is(.analytics-leaderboard__row, .analytics-leaderboard__your-row),
.shell--premium :is(.analytics-ranking-row, .app-rank-card) {
    border-color: var(--premium-border);
}

.shell--premium :is(.analytics-ranking-row, .app-rank-card),
.shell--premium .analytics-ranking-row__content strong {
    color: var(--premium-cream);
}

.shell--premium .analytics-leaderboard__podium-block,
.shell--premium .analytics-leaderboard__podium-place--3 .analytics-leaderboard__podium-block {
    border-color: var(--premium-border);
    background: rgba(45, 54, 47, 0.96);
}

.shell--premium .analytics-leaderboard__podium-place--1 .analytics-leaderboard__podium-block {
    border-color: rgba(210, 173, 114, 0.28);
    background: linear-gradient(180deg, rgba(185, 138, 75, 0.13), rgba(45, 54, 47, 0.98));
}

.shell--premium .analytics-leaderboard__podium-block strong {
    color: var(--premium-cream);
}

.shell--premium .analytics-leaderboard__podium-block span,
.shell--premium .analytics-leaderboard__podium-place--1 .analytics-leaderboard__podium-block span {
    color: var(--premium-muted);
}

.shell--premium .analytics-leaderboard__podium-footer {
    border-color: var(--premium-border);
    background: rgba(32, 39, 34, 0.72);
}

.shell--premium .analytics-leaderboard__podium-footer span {
    color: var(--premium-muted);
}

.shell--premium .analytics-leaderboard__direction,
.shell--premium .analytics-leaderboard__your-row {
    color: var(--premium-bronze-bright);
    border-color: rgba(210, 173, 114, 0.26);
    background: rgba(185, 138, 75, 0.1);
}

.shell--premium .app-rank-card__status {
    border-color: var(--premium-border);
    color: var(--premium-muted);
    background: rgba(244, 236, 223, 0.055);
}

.shell--premium .analytics-location-toolbar__rollup.analytics-segmented--rollup .analytics-segmented__item--active {
    border-color: rgba(210, 173, 114, 0.22);
    color: var(--premium-cream);
    background: rgba(185, 138, 75, 0.12);
}

.shell--premium .analytics-location-banner {
    border-color: rgba(223, 119, 111, 0.28);
    background: linear-gradient(145deg, rgba(87, 47, 43, 0.46), rgba(29, 33, 30, 0.96));
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18), inset 0 1px rgba(255, 255, 255, 0.03);
}

.shell--premium .analytics-location-banner__icon {
    color: #eea39d;
    background: rgba(125, 66, 59, 0.34);
}

.shell--premium .analytics-location-banner__copy strong {
    color: var(--premium-cream);
}

.shell--premium .royalties-chart-panel__range .analytics-segmented__item {
    border-color: var(--premium-border);
    color: var(--premium-muted);
    background: rgba(39, 47, 41, 0.9);
}

.shell--premium .royalties-chart-panel__range .analytics-segmented__item--active {
    border-color: rgba(210, 173, 114, 0.22);
    color: var(--premium-cream);
    background: rgba(185, 138, 75, 0.12);
}

.shell--premium :is(.app-action-list-card__toggle-surface, .royalties-action-card__toggle),
.shell--premium :is(.royalties-status-button, .royalties-pill, .royalties-back-button),
.shell--premium :is(.royalties-submit-notice, .royalties-invoice-topbar__action, .royalties-invoice-topbar__status) {
    border-color: var(--premium-border);
    color: var(--premium-muted);
    background: rgba(45, 54, 47, 0.9);
}

.shell--premium .royalties-autopay-prompt {
    border-color: var(--premium-border);
    background: linear-gradient(90deg, rgba(185, 138, 75, 0.1), rgba(45, 54, 47, 0.96) 42%);
}

.shell--premium :is(.royalties-status-button--awaiting, .royalties-pill--awaiting) {
    border-color: rgba(210, 173, 114, 0.3);
    color: #e2bd82;
    background: rgba(185, 138, 75, 0.16);
}

.shell--premium :is(.royalties-status-button--submitted, .royalties-pill--submitted) {
    border-color: rgba(170, 167, 159, 0.18);
    color: #bbb8b0;
    background: rgba(170, 167, 159, 0.09);
}

.shell--premium :is(.royalties-status-button--paid, .royalties-pill--paid, .royalties-pill--active) {
    border-color: rgba(117, 189, 138, 0.24);
    color: #96d6a8;
    background: rgba(80, 142, 97, 0.18);
}

.shell--premium .royalties-pill--draft {
    border-color: rgba(214, 169, 94, 0.28);
    color: #e4b76c;
    background: rgba(122, 89, 37, 0.22);
}

.shell--premium :is(.royalties-pill--credit, .royalties-pill--rule) {
    border-color: rgba(116, 183, 189, 0.26);
    color: #9bcdd1;
    background: rgba(53, 101, 106, 0.24);
}

.shell--premium .analytics-loading-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.shell--premium .analytics-loading-grid--list {
    grid-template-columns: minmax(0, 1fr);
}

.shell--premium .analytics-skeleton {
    border: 1px solid var(--premium-border);
    background: rgba(41, 49, 43, 0.96);
    background-size: auto;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.15), inset 0 1px rgba(255, 255, 255, 0.03);
    animation: none;
}

.shell--premium .analytics-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 26%, rgba(244, 236, 223, 0.07) 45%, transparent 64%);
    transform: translateX(-110%);
    animation: premium-skeleton-sweep 1.65s ease-in-out infinite;
}

.shell--premium :is(.analytics-skeleton__avatar, .analytics-skeleton__line) {
    background: rgba(244, 236, 223, 0.095);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.035);
}

.shell--premium .app-pull-refresh__line-spinner {
    background: transparent;
    box-shadow: none;
}

.shell--premium .app-pull-refresh__line-spinner i {
    background: var(--premium-bronze-bright);
}

.shell--premium .field__label,
.shell--premium .analytics-filter__label {
    color: rgba(244, 236, 223, 0.8);
}

.shell--premium .field__input,
.shell--premium .analytics-filter__control .field__input,
.shell--premium .app-filter-select__control .field__input,
.shell--premium .analytics-filter--button {
    border-color: var(--premium-border);
    color: var(--premium-cream);
    background: rgba(39, 47, 41, 0.9);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025), 0 7px 18px rgba(0, 0, 0, 0.12);
}

.shell--premium .field__input:focus,
.shell--premium .analytics-filter__control .field__input:focus,
.shell--premium .app-filter-select__control .field__input:focus {
    border-color: rgba(210, 173, 114, 0.58);
    box-shadow: 0 0 0 3px rgba(185, 138, 75, 0.13), 0 10px 28px rgba(0, 0, 0, 0.2);
}

.shell--premium .field__input::placeholder {
    color: #777c77;
}

.shell--premium .field__input option {
    color: var(--premium-cream);
    background: var(--premium-surface);
}

.shell--premium .app-button {
    border-radius: 14px;
    transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.shell--premium .app-button:active:not([disabled]) {
    transform: scale(0.975);
}

.shell--premium .app-button--primary {
    border-color: rgba(255, 255, 255, 0.07);
    color: #111512;
    background: linear-gradient(135deg, #d9b77f 0%, #b88648 56%, #94642f 100%);
    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.28), inset 0 1px rgba(255, 255, 255, 0.22);
}

.shell--premium .app-button--secondary {
    border-color: var(--premium-border);
    color: var(--premium-cream);
    background: rgba(45, 54, 47, 0.9);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14), inset 0 1px rgba(255, 255, 255, 0.03);
}

.shell--premium .app-status-chip {
    border: 1px solid rgba(210, 173, 114, 0.18);
    color: #d8ba8d;
    background: rgba(185, 138, 75, 0.12);
}

.shell--premium .app-status-chip--success {
    border-color: rgba(117, 189, 138, 0.2);
    color: #96d6a8;
    background: rgba(80, 142, 97, 0.18);
}

.shell--premium .app-status-chip--attention {
    border-color: rgba(223, 119, 111, 0.2);
    color: #eea39d;
    background: rgba(125, 66, 59, 0.24);
}

.shell--premium .analytics-modal-backdrop {
    background: rgba(3, 5, 4, 0.76);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.shell--premium .royalties-invoice-sheet {
    color: #111316;
    background: white;
}

.shell--premium .royalties-invoice-sheet :is(h1, h2, h3, h4, strong, em) {
    color: #111316;
}

.shell--premium .operations-manual__publication {
    color: #302d28;
    background: #ffffff;
}

.shell--premium .operations-manual__publication :is(h1, h2, h3, h4, strong, em) {
    color: #1d1a16;
}

/* Adaptive mobile quick navigation. */
.app-bottom-nav {
    position: fixed;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(10px, calc(env(safe-area-inset-bottom) + 7px));
    left: max(12px, env(safe-area-inset-left));
    z-index: 38;
    display: block;
    max-width: 406px;
    margin-inline: auto;
    opacity: 1;
    pointer-events: none;
    transform: translateY(0) scale(1);
    visibility: visible;
    will-change: opacity, transform;
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}

.app-bottom-nav__surface {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    min-height: 68px;
    padding: 5px 8px;
    border: 1px solid rgba(244, 239, 231, 0.13);
    border-radius: 26px;
    color: rgba(244, 239, 231, 0.72);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015) 58%, rgba(0, 0, 0, 0.025)),
        rgba(22, 29, 24, 0.46);
    box-shadow:
        0 17px 40px rgba(0, 0, 0, 0.3),
        inset 0 1px rgba(255, 255, 255, 0.12),
        inset 0 -1px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(38px) saturate(1.68) contrast(1.02);
    -webkit-backdrop-filter: blur(38px) saturate(1.68) contrast(1.02);
    pointer-events: auto;
    transform-origin: bottom center;
    will-change: transform;
    transition:
        width 420ms cubic-bezier(0.22, 1, 0.36, 1),
        min-height 360ms cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 340ms cubic-bezier(0.22, 1, 0.36, 1),
        padding 360ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
        background-color 260ms ease;
}

.app-bottom-nav__item {
    position: relative;
    display: grid;
    grid-template-rows: 25px 13px;
    place-items: center;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 56px;
    padding: 3px 2px;
    border: 0;
    border-radius: 19px;
    color: inherit;
    background: transparent;
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease,
        min-height 340ms cubic-bezier(0.22, 1, 0.36, 1),
        grid-template-rows 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.app-bottom-nav__item--reserved[disabled] {
    color: rgba(244, 236, 223, 0.44);
    cursor: default;
    opacity: 1;
}

.app-bottom-nav__item--reserved[disabled] .app-bottom-nav__icon {
    opacity: 0.72;
}

.app-bottom-nav__item:active {
    transform: scale(0.94);
}

.app-bottom-nav__item--home {
    grid-column: 1;
}

.app-bottom-nav__item--primary {
    grid-column: 2;
}

.app-bottom-nav__item--dap {
    grid-column: 3;
}

.app-bottom-nav__item--secondary {
    grid-column: 4;
}

.app-bottom-nav__item--profile {
    grid-column: 5;
}

.app-bottom-nav__item--active {
    color: var(--premium-cream, #f4ecdf);
    background: rgba(255, 255, 255, 0.065);
}

.app-bottom-nav__item--active::after {
    content: "";
    position: absolute;
    bottom: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--premium-bronze-bright, #d2ad72);
    box-shadow: 0 0 12px rgba(210, 173, 114, 0.72);
}

.app-bottom-nav__icon {
    position: relative;
    display: grid;
    place-items: center;
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.app-bottom-nav__badge {
    position: absolute;
    top: -8px;
    right: -12px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: inline-grid;
    place-items: center;
    border: 2px solid rgba(18, 23, 20, 0.94);
    border-radius: 999px;
    color: #ffffff;
    background: #d94c4c;
    box-shadow: 0 4px 12px rgba(217, 76, 76, 0.38);
    font-size: 8px;
    line-height: 1;
    font-weight: 850;
}

.app-bottom-nav__label {
    max-width: 100%;
    overflow: hidden;
    font-size: 9px;
    line-height: 11px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition:
        opacity 220ms ease,
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        max-height 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.app-bottom-nav__item--dap {
    color: #111512;
}

.app-bottom-nav__dap-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    margin-top: -13px;
    overflow: hidden;
    border-radius: 15px;
    color: #111512;
    background: linear-gradient(145deg, #e2c38f, #a8763a);
    box-shadow: 0 11px 24px rgba(0, 0, 0, 0.34), inset 0 1px rgba(255, 255, 255, 0.24);
    transition:
        width 360ms cubic-bezier(0.22, 1, 0.36, 1),
        height 360ms cubic-bezier(0.22, 1, 0.36, 1),
        margin 360ms cubic-bezier(0.22, 1, 0.36, 1),
        border-radius 340ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 260ms ease;
}

.app-bottom-nav__dap-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    mix-blend-mode: multiply;
}

.app-bottom-nav__item--dap .app-bottom-nav__label {
    color: var(--premium-cream, #f4ecdf);
}

.app-bottom-nav__avatar {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    overflow: hidden;
    border: 1px solid rgba(210, 173, 114, 0.38);
    border-radius: 50%;
    color: #111512;
    background: linear-gradient(145deg, #e2c38f, #a8763a);
    font-size: 8px;
    font-weight: 800;
}

.app-bottom-nav__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shell--bottom-nav-compact .app-bottom-nav__surface {
    min-height: 54px;
    padding-block: 4px;
    border-radius: 23px;
    transform: translateY(3px);
}

.shell--bottom-nav-compact .app-bottom-nav__item {
    grid-template-rows: 25px 0;
    min-height: 44px;
}

.shell--bottom-nav-compact .app-bottom-nav__icon {
    transform: translateY(1px) scale(0.96);
}

.shell--bottom-nav-compact .app-bottom-nav__label {
    max-height: 0;
    opacity: 0;
    transform: translateY(4px);
}

.shell--bottom-nav-compact .app-bottom-nav__dap-mark {
    width: 34px;
    height: 34px;
    margin-top: 0;
    border-radius: 13px;
}

.shell--bottom-nav-compact .app-bottom-nav__item--active::after {
    bottom: -1px;
}

.app-bottom-nav:focus-within .app-bottom-nav__surface {
    min-height: 68px;
    padding-block: 5px;
    border-radius: 26px;
    transform: none;
}

.app-bottom-nav:focus-within .app-bottom-nav__item {
    grid-template-rows: 25px 13px;
    min-height: 56px;
}

.app-bottom-nav:focus-within .app-bottom-nav__label {
    max-height: 13px;
    opacity: 1;
    transform: none;
}

.app-bottom-nav:focus-within .app-bottom-nav__dap-mark {
    width: 40px;
    height: 40px;
    margin-top: -13px;
    border-radius: 15px;
}

.shell--premium .shell__content {
    padding-bottom: max(106px, calc(env(safe-area-inset-bottom) + var(--viewport-bottom-gap) + 88px));
}

.shell--premium.shell--editor-route .shell__content.shell__content--editor {
    padding: 0;
}

.shell:has(.shell__content[data-customer-bot-chat-active="true"]) .app-bottom-nav {
    display: none;
}

/* Conversation composers own the bottom-right action area at every width.
   Keeping Dap's launcher out of that route prevents it from intercepting the
   message Send button while preserving Dap everywhere else. */
body:has(.inbox-page--thread-open) .dap-assistant:not(.dap-assistant--open) .dap-assistant__launcher,
body:has(.inbox-page--thread-open) .dap-assistant:not(.dap-assistant--open) .dap-assistant__restore {
    display: none;
}

@media (max-width: 799px) {
    body.app-keyboard-open .app-bottom-nav {
        opacity: 0;
        visibility: hidden;
        transform: translateY(14px) scale(0.96);
        transition:
            opacity 180ms ease,
            transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 180ms;
        pointer-events: none;
    }

    body.app-keyboard-open .app-bottom-nav .app-bottom-nav__surface {
        pointer-events: none;
    }

    .shell__body:has(.inbox-page--thread-open) {
        --inbox-composer-clearance: max(
            16px,
            calc(env(safe-area-inset-bottom) + 7px),
            calc(var(--viewport-bottom-gap, 0px) + 7px));
    }

    .app-bottom-nav--inbox-thread:not(.app-bottom-nav--thread-expanded) {
        left: max(18px, calc(env(safe-area-inset-left) + 14px));
        bottom: var(--inbox-composer-clearance, 20px);
        margin: 0;
    }

    .app-bottom-nav--inbox-thread:not(.app-bottom-nav--thread-expanded)[data-inbox-composer-aligned="true"] {
        top: var(--inbox-thread-nav-top);
        bottom: auto;
    }

    .app-bottom-nav--inbox-thread:not(.app-bottom-nav--thread-expanded) .app-bottom-nav__surface {
        width: 52px;
        min-height: 52px;
        padding: 3px;
        grid-template-columns: 44px;
        border-radius: 50%;
        box-shadow:
            0 11px 26px rgba(0, 0, 0, 0.24),
            inset 0 1px rgba(255, 255, 255, 0.12),
            inset 0 -1px rgba(0, 0, 0, 0.08);
        transform-origin: bottom left;
    }

    .app-bottom-nav--inbox-thread:not(.app-bottom-nav--thread-expanded) .app-bottom-nav__item--home {
        grid-template-rows: 25px 0;
        min-height: 44px;
        border-radius: 50%;
    }

    .app-bottom-nav--inbox-thread:not(.app-bottom-nav--thread-expanded) .app-bottom-nav__item--home .app-bottom-nav__label {
        max-height: 0;
        opacity: 0;
        transform: translateY(4px);
    }

    .app-bottom-nav--thread-expanded .app-bottom-nav__item:not(.app-bottom-nav__item--home) {
        animation: app-bottom-nav-thread-reveal 280ms 90ms both cubic-bezier(0.22, 1, 0.36, 1);
    }

    .shell:has(.app-bottom-nav--thread-expanded) .inbox-page--thread-open .inbox-page__composer {
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        pointer-events: none;
    }

    /* Inbox owns its viewport. Keep the shell's dock clearance from creating
       an empty page-level scroll range; long conversation lists scroll inside
       their dedicated list region and pull-to-refresh remains gesture-driven. */
    .shell--premium .shell__content:has(.inbox-page) {
        padding-bottom: 0;
        overflow: hidden;
        overscroll-behavior: none;
    }

    /* The thread scrollport starts beneath the translucent shell header so
       message content can travel into its blur/fade instead of stopping at a
       second visual edge. Initial message padding keeps the resting content
       clear of the controls. */
    .shell--premium .shell__content:has(.inbox-page--thread-open) {
        padding-top: 0;
    }

    /* Conversation routes own the complete shell content box. Keep every
       containing block in this chain tied to that stable box instead of to
       iOS visualViewport frames, which can settle a few pixels short after
       browser chrome or the keyboard animates. When the keyboard is open the
       shell body itself is resized to the visual viewport below, so the same
       percentage-height contract remains correct in both states. */
    .shell--premium .shell__content:has(.inbox-page--thread-open) .app-pull-refresh,
    .shell--premium .shell__content:has(.inbox-page--thread-open) .app-pull-refresh__content {
        height: 100%;
        min-height: 0;
    }

    body.app-keyboard-open .app-bottom-nav--inbox-thread {
        opacity: 0;
        visibility: hidden;
        transform: translateY(18px) scale(0.92);
        pointer-events: none;
    }

    .shell:has(.inbox-page__composer[data-recording="true"]) .app-bottom-nav--inbox-thread {
        opacity: 0;
        visibility: hidden;
        transform: translateY(18px) scale(0.92);
        pointer-events: none;
    }

    body.app-keyboard-open .shell__content:has(.inbox-page--thread-open) {
        transform: none;
    }

    /* iOS may pan the visual viewport when a web textarea receives focus even
       though the document has not scrolled. Pin the complete app frame—not
       just the thread—to the measured visual viewport so the global and thread
       headers keep their resting positions while the composer clears the OSK. */
    body.app-keyboard-open .shell__body:has(.inbox-page--thread-open) {
        position: fixed;
        top: var(--visual-viewport-top, 0px);
        left: 50%;
        z-index: 37;
        width: min(100%, var(--dt-mobile-width));
        height: var(--visual-viewport-height, 100dvh);
        min-height: 0;
        margin: 0;
        transform: translate3d(-50%, 0, 0);
        transition: none;
    }

    body.app-keyboard-open .shell__body:has(.inbox-page--thread-open) .shell__header {
        transition: none;
    }

    body.app-keyboard-open .channel-post-detail-page.inbox-page--thread-open .inbox-page__messages {
        padding-bottom: var(--inbox-composer-overlap, 86px);
        scroll-padding-bottom: var(--inbox-composer-overlap, 86px);
    }

}

@keyframes app-bottom-nav-thread-reveal {
    from {
        opacity: 0;
        transform: translateX(-9px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* InputFile is rendered by a child component and does not receive this Razor
   component's isolation attribute. Keep a real 1px control available as an
   iOS popover anchor while removing it from visual layout and hit testing. */
input.inbox-page__media-picker {
    position: fixed !important;
    z-index: -1 !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    opacity: 0.001 !important;
    clip-path: inset(50%) !important;
    pointer-events: none !important;
}

/* InputFile renders through a child component, so the channel composer's
   picker cannot be hidden reliably by isolated component CSS. Preserve a
   native iOS picker anchor without exposing the browser's file-control UI. */
input.channel-comment-composer__picker {
    position: fixed !important;
    z-index: -1 !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    opacity: 0.001 !important;
    clip-path: inset(50%) !important;
    pointer-events: none !important;
}

/* Shared conversation composer contract. Inbox and channel discussions use
   these same controls so their resting and keyboard-open states cannot drift. */
.app-thread-composer {
    padding: 9px 10px 12px;
    border-top: 1px solid var(--premium-divider,var(--premium-border));
    background: color-mix(in srgb,var(--premium-ink) 96%,transparent);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transition: opacity 180ms ease,visibility 180ms ease,transform 220ms cubic-bezier(.22,1,.36,1);
}

.app-thread-composer__row { position: relative; display: block; }
.app-thread-composer__field { position: relative; min-width: 0; min-height: 42px; overflow: hidden; border: 1px solid var(--premium-border); border-radius: 21px; background: rgba(244,239,231,.06); }
.shell--premium .app-thread-composer__field.inbox-page__composer-field {
    border-color: rgba(255,255,255,.14);
    background:
        linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.018) 62%),
        rgba(14,19,16,.32);
    box-shadow: 0 10px 26px rgba(0,0,0,.19),inset 0 1px rgba(255,255,255,.11);
    backdrop-filter: blur(22px) saturate(1.5);
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
}
.app-thread-composer__field:focus-within { border-color: rgba(210,173,114,.4); box-shadow: 0 0 0 3px rgba(185,138,75,.08); }
.app-thread-composer__input { display: block; width: 100%; min-height: 42px; max-height: 112px; padding: 10px 14px; resize: none; field-sizing: content; overflow-y: auto; border: 0; outline: 0; color: var(--premium-cream); background: transparent; font-size: 16px; font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif; line-height: 20px; }
.app-thread-composer__field[data-sendable="true"] .app-thread-composer__input { padding-right: 48px; }
.app-thread-composer__input::placeholder { color: var(--premium-muted); }
.app-thread-composer__tool,.app-thread-composer__send { width: 38px; height: 38px; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; appearance: none; touch-action: manipulation; }
.app-thread-composer__tool { display: none; border: 0; color: var(--premium-bronze-bright); background: transparent; }
.app-thread-composer__send { position: absolute; right: 0; bottom: -1px; z-index: 2; display: grid; border: 0; color: #111512; background: transparent; }
.app-thread-composer__send::before { position: absolute; inset: 5px; z-index: 0; border-radius: 50%; background: #fff; box-shadow: 0 4px 11px rgba(0,0,0,.18),inset 0 -1px rgba(0,0,0,.08); content: ""; }
.app-thread-composer__send > * { position: relative; z-index: 1; }
.app-thread-composer__media-backdrop { position: fixed; inset: 0; z-index: 7; padding: 0; border: 0; background: transparent; }
.app-thread-composer__media-backdrop[hidden],.app-thread-composer__media-menu[hidden] { display: none; }
.app-thread-composer__media-menu { position: absolute; bottom: calc(100% + 10px); left: max(18px,env(safe-area-inset-left)); z-index: 8; width: min(224px,calc(100% - 36px)); padding: 6px; display: grid; border: 1px solid color-mix(in srgb,var(--premium-cream) 12%,transparent); border-radius: 21px; color: var(--premium-cream); background: color-mix(in srgb,var(--premium-surface-raised) 88%,transparent); box-shadow: 0 14px 36px rgba(0,0,0,.28),inset 0 .5px rgba(255,255,255,.08); backdrop-filter: blur(32px) saturate(1.35); -webkit-backdrop-filter: blur(32px) saturate(1.35); transform-origin: bottom left; animation: inbox-media-menu-in 160ms cubic-bezier(.22,1,.36,1); }
.app-thread-composer__media-action { position: relative; width: 100%; min-height: 50px; padding: 0 12px; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 11px; border: 0; border-radius: 14px; color: inherit; background: transparent; font-size: 1rem; font-weight: 460; line-height: 1.1; text-align: left; cursor: pointer; }
.app-thread-composer__media-action:is(:active,:focus-visible) { outline: 0; background: color-mix(in srgb,var(--premium-cream) 9%,transparent); }
.app-thread-composer__media-action > .app-icon { justify-self: center; }

@media (max-width:799px) {
    .channel-post-detail-page.inbox-page--thread-open .app-thread-composer {
        /* A channel discussion's card shell is the fixed-height thread frame.
           Keep its composer anchored inside that frame. Leaving it in document
           flow places it after the overflow-hidden shell on mobile, where it
           exists but is below the visible viewport. */
        position: absolute;
        right: 0;
        bottom: var(--inbox-composer-clearance,20px);
        left: 0;
        z-index: 24;
        padding-right: max(10px,env(safe-area-inset-right));
        padding-bottom: 0;
        padding-left: max(76px,calc(env(safe-area-inset-left) + 70px));
        border-top: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.app-keyboard-open .channel-post-detail-page.inbox-page--thread-open .app-thread-composer {
        right: 0;
        bottom: 0;
        left: 0;
        padding-right: max(10px,env(safe-area-inset-right));
        padding-bottom: 12px;
        padding-left: max(18px,calc(env(safe-area-inset-left) + 14px));
        transition: none;
    }

    /* Keep the media affordance in the first track. Scoped composer styles can
       otherwise win a late cascade and leave the button as a centered block. */
    body.app-keyboard-open .inbox-page--thread-open .app-thread-composer__row { display: grid !important; grid-template-columns: 52px minmax(0,1fr); align-items: center; gap: 6px; }
    body.app-keyboard-open .inbox-page--thread-open .app-thread-composer__tool:not([hidden]) { position: relative; grid-column: 1; grid-row: 1; display: grid; justify-self: center; align-self: center; width: 44px; height: 44px; border: 1px solid color-mix(in srgb,var(--premium-bronze-bright) 32%,var(--premium-border)); border-radius: 50%; background: transparent; box-shadow: none; }
    body.app-keyboard-open .inbox-page--thread-open .app-thread-composer__field { grid-column: 2; grid-row: 1; min-width: 0; }
    .app-thread-composer__field { min-height: 42px; }
    .app-thread-composer__send { width: 42px; height: 42px; }

    /* Inbox threads are a flex column: the message scrollport and composer
       share one real layout flow. Keeping the composer absolute here makes
       the list believe it owns the space beneath the home control, which is
       why the final message can land underneath it. Channel detail cards use
       the absolute variant above because they have a different fixed card
       frame; never share that positioning contract with Inbox. */
    .inbox-page--thread-open:not(.channel-post-detail-page) .app-thread-composer {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        z-index: 24;
        flex: 0 0 auto;
        padding-right: max(10px, env(safe-area-inset-right));
        padding-bottom: var(--inbox-composer-clearance, 20px);
        padding-left: max(76px, calc(env(safe-area-inset-left) + 70px));
        border-top: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    body.app-keyboard-open .inbox-page--thread-open:not(.channel-post-detail-page) .app-thread-composer {
        position: relative;
        right: auto;
        bottom: auto;
        left: auto;
        flex: 0 0 auto;
        padding-right: max(10px, env(safe-area-inset-right));
        padding-bottom: 12px;
        padding-left: max(18px, calc(env(safe-area-inset-left) + 14px));
        transition: none;
    }
}

@media (min-width: 800px) {
    .app-bottom-nav {
        display: none;
    }

    .topbar__context-action--channels-create,
    .topbar__context-action--channel-compose {
        display: none !important;
    }
}

@keyframes inbox-media-menu-in {
    from { opacity: 0; transform: translateY(7px) scale(.97); }
    to { opacity: 1; transform: none; }
}

/* Premium dashboard landing composition. */
.portal-dashboard {
    --analytics-card: rgba(41, 49, 43, 0.96);
    --analytics-border: var(--premium-border);
    --analytics-gold: var(--premium-bronze-bright);
    --analytics-gold-dark: var(--premium-bronze-bright);
    --analytics-charcoal: var(--premium-cream);
    --analytics-muted: var(--premium-muted);
    gap: 14px;
}

.portal-dashboard__top {
    display: grid;
}

.portal-dashboard__hero {
    position: relative;
    min-height: 446px;
    overflow: hidden;
    border: 1px solid rgba(244, 239, 231, 0.12);
    border-radius: 28px;
    background: #151816;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.08);
    isolation: isolate;
}

.portal-dashboard__hero-image,
.portal-dashboard__hero-scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.portal-dashboard__hero-image {
    object-fit: cover;
    object-position: 48% 38%;
    transform: translateY(-35px) scale(1.13);
    filter: saturate(0.94) contrast(1.02) brightness(0.98);
}

.portal-dashboard__hero-scrim {
    background:
        radial-gradient(
            ellipse 84% 76% at 0% 100%,
            rgba(9, 12, 10, 0.64) 0%,
            rgba(9, 12, 10, 0.32) 38%,
            rgba(9, 12, 10, 0.08) 68%,
            transparent 100%
        ),
        linear-gradient(
            180deg,
            rgba(9, 12, 10, 0.02) 0%,
            rgba(9, 12, 10, 0.12) 38%,
            rgba(9, 12, 10, 0.46) 70%,
            rgba(9, 12, 10, 0.91) 100%
        ),
        linear-gradient(
            90deg,
            rgba(9, 12, 10, 0.48) 0%,
            rgba(9, 12, 10, 0.24) 16%,
            rgba(9, 12, 10, 0.1) 31%,
            transparent 48%
        );
}

.portal-dashboard__hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 446px;
    padding: 24px 20px 20px;
    color: #f8f1e6;
}

.portal-dashboard__eyebrow,
.portal-dashboard__panel-eyebrow,
.portal-dashboard__section-heading > span {
    color: #ddb982;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.portal-dashboard__hero h2 {
    max-width: 720px;
    margin: 7px 0 8px;
    color: #fff8ee;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2.05rem, 9vw, 3.4rem);
    font-weight: 600;
    line-height: 0.97;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.portal-dashboard__hero-content > p {
    max-width: 660px;
    margin: 0;
    color: rgba(246, 238, 226, 0.74);
    font-size: 12px;
    line-height: 1.46;
    font-weight: 550;
}

.portal-dashboard__hero-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 17px;
}

.shell--premium .portal-dashboard__primary-action {
    min-height: 42px;
    padding-inline: 15px;
    border-radius: 14px;
    font-size: 12px;
}

.portal-dashboard__live-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(246, 238, 226, 0.72);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
}

.portal-dashboard__live-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #75bd8a;
    box-shadow: 0 0 0 0 rgba(117, 189, 138, 0.42);
    animation: premium-live-pulse 2s ease-out infinite;
}

.portal-dashboard__hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.portal-dashboard__hero-metric {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding-inline: 10px;
}

.portal-dashboard__hero-metric:first-child {
    padding-left: 0;
}

.portal-dashboard__hero-metric:not(:first-child) {
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.portal-dashboard__hero-metric strong {
    overflow: hidden;
    color: #fff8ee;
    font-size: clamp(14px, 4.6vw, 20px);
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-dashboard__hero-metric span {
    overflow: hidden;
    color: rgba(246, 238, 226, 0.6);
    font-size: 9px;
    line-height: 1.2;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-dashboard__section {
    display: grid;
    gap: 10px;
}

.portal-dashboard__section-heading {
    display: grid;
    gap: 3px;
    padding: 4px 3px 0;
}

.portal-dashboard__section-heading h2,
.portal-dashboard__panel-heading h2 {
    margin: 0;
    color: var(--premium-cream);
    font-size: 19px;
    line-height: 1.1;
    letter-spacing: -0.035em;
}

.portal-dashboard__metric-grid {
    margin: 0;
    gap: 8px;
}

.portal-dashboard__events {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.portal-dashboard__event-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 12px;
    min-width: 0;
    padding: 0 0 9px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-padding-inline: 0;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.portal-dashboard__event-rail::-webkit-scrollbar {
    display: none;
}

.portal-dashboard__event-rail--single {
    grid-auto-columns: 100%;
}

@media (max-width: 719px) {
    .portal-dashboard__event-rail:not(.portal-dashboard__event-rail--single) .portal-dashboard__event-card {
        animation: portal-event-swipe-hint 820ms 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

.portal-dashboard__event-card {
    display: grid;
    grid-template-rows: auto 1fr;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--premium-border);
    border-radius: 22px;
    color: var(--premium-cream);
    background: var(--premium-surface-raised);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.035);
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 220ms ease,
        box-shadow 260ms ease;
}

.portal-dashboard__event-card:focus-visible {
    border-color: var(--premium-border-strong);
    outline: 3px solid rgba(210, 173, 114, 0.2);
    outline-offset: 2px;
}

.portal-dashboard__event-media {
    position: relative;
    display: block;
    aspect-ratio: 2.75 / 1;
    overflow: hidden;
    background:
        radial-gradient(circle at 24% 18%, rgba(210, 173, 114, 0.22), transparent 36%),
        linear-gradient(145deg, #313a33, #171c19);
}

.portal-dashboard__event-media > img,
.portal-dashboard__event-fallback,
.portal-dashboard__event-fallback img {
    width: 100%;
    height: 100%;
}

.portal-dashboard__event-media > img {
    display: block;
    object-fit: contain;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.portal-dashboard__event-fallback {
    display: grid;
    place-items: center;
    padding: 19px 42px;
    background:
        radial-gradient(circle at 74% 24%, rgba(116, 183, 189, 0.12), transparent 34%),
        linear-gradient(145deg, #384239, #191e1a);
}

.portal-dashboard__event-fallback img {
    display: block;
    object-fit: contain;
    opacity: 0.88;
}

.portal-dashboard__event-date {
    position: absolute;
    top: 12px;
    left: 12px;
    display: grid;
    place-items: center;
    min-width: 48px;
    padding: 7px 8px 6px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    color: #fff9f0;
    background: rgba(13, 16, 14, 0.66);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(16px) saturate(1.28);
    -webkit-backdrop-filter: blur(16px) saturate(1.28);
}

.portal-dashboard__event-date small {
    font-size: 8px;
    line-height: 1;
    font-weight: 850;
    letter-spacing: 0.12em;
}

.portal-dashboard__event-date strong {
    margin-top: 2px;
    font-size: 19px;
    line-height: 1;
    letter-spacing: -0.04em;
}

.portal-dashboard__event-content {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    gap: 7px;
    min-width: 0;
    padding: 14px 15px 15px;
}

.portal-dashboard__event-space {
    overflow: hidden;
    color: var(--premium-bronze-bright);
    font-size: 9px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.portal-dashboard__event-title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--premium-cream);
    font-size: 18px;
    line-height: 1.08;
    letter-spacing: -0.035em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.portal-dashboard__event-meta {
    display: grid;
    align-content: start;
    gap: 5px;
    min-width: 0;
    color: var(--premium-muted);
    font-size: 10px;
    line-height: 1.35;
    font-weight: 650;
}

.portal-dashboard__event-meta > span {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.portal-dashboard__event-meta .app-icon {
    flex: none;
    margin-top: -1px;
    color: var(--premium-bronze-bright);
}

.portal-dashboard__event-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    margin-top: 2px;
    padding-top: 10px;
    border-top: 1px solid var(--premium-border);
    color: var(--premium-muted);
    font-size: 9px;
    line-height: 1.2;
    font-weight: 700;
}

.portal-dashboard__event-footer > span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.portal-dashboard__event-open {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 2px;
    color: var(--premium-bronze-bright);
}

.shell--premium .portal-dashboard__metric-card {
    border-color: var(--premium-border);
    background: rgba(41, 49, 43, 0.96);
}

.portal-dashboard__panel {
    padding: 14px;
}

.portal-dashboard__panel-heading {
    margin-bottom: 6px;
}

.portal-dashboard__panel-heading > div {
    display: grid;
    gap: 4px;
}

.shell--premium .portal-dashboard__workspace-card {
    padding-block: 13px;
}

.portal-dashboard__ranking .app-rank-card:last-child {
    border-bottom: 0;
}

@media (min-width: 720px) {
    .portal-dashboard__hero {
        min-height: 420px;
    }

    .portal-dashboard__hero-content {
        min-height: 420px;
        width: min(64%, 780px);
        padding: 42px;
    }

    .portal-dashboard__hero-scrim {
        background:
            linear-gradient(
                90deg,
                rgba(8, 11, 9, 0.76) 0%,
                rgba(8, 11, 9, 0.52) 16%,
                rgba(8, 11, 9, 0.18) 38%,
                transparent 60%
            ),
            linear-gradient(
                180deg,
                rgba(8, 11, 9, 0.03) 0%,
                rgba(8, 11, 9, 0.14) 48%,
                rgba(8, 11, 9, 0.84) 100%
            );
    }

    .portal-dashboard__hero h2 {
        font-size: clamp(3rem, 5vw, 4.7rem);
    }

    .portal-dashboard__hero-content > p {
        font-size: 14px;
    }

    .portal-dashboard__metric-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .portal-dashboard__event-rail {
        grid-auto-columns: clamp(340px, 42vw, 430px);
    }

    .portal-dashboard__panel {
        padding: 20px;
    }
}

@media (min-width: 1100px) {
    .shell--premium.shell--nav {
        background: #121613;
    }

    .shell--premium .shell__body {
        border-left: 1px solid var(--premium-border);
        border-radius: 22px 0 0 22px;
    }

    .shell--premium .shell__header {
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    .shell--premium .topbar__title {
        color: var(--premium-cream);
        font-family: "Cormorant Garamond", Georgia, serif;
        font-size: 35px;
    }

    .shell--premium .shell__content {
        padding: 22px 34px 42px;
    }

    .portal-dashboard {
        max-width: 1480px;
        margin-inline: auto;
    }

    .portal-dashboard__metric-grid {
        gap: 12px;
    }

    .portal-dashboard__event-rail {
        grid-auto-columns: minmax(350px, calc((100% - 24px) / 3));
    }

    .portal-dashboard__event-card:hover {
        border-color: var(--premium-border-strong);
        transform: translateY(-2px);
        box-shadow: 0 18px 38px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.045);
    }

    .portal-dashboard__event-card:hover .portal-dashboard__event-media > img {
        transform: scale(1.025);
    }

    .shell--premium :is(.app-list-card, .analytics-location-card, .app-detail-row, .app-action-list-card):hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 32px rgba(0, 0, 0, 0.2), inset 0 1px rgba(255, 255, 255, 0.04);
    }
}

@media (max-width: 379px) {
    .portal-dashboard__hero {
        min-height: 420px;
        border-radius: 24px;
    }

    .portal-dashboard__hero-content {
        min-height: 420px;
        padding: 20px 17px 17px;
    }

    .portal-dashboard__hero h2 {
        font-size: 2rem;
    }

    .portal-dashboard__hero-actions {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .portal-dashboard > *,
    .portal-dashboard__event-card,
    .portal-dashboard__live-status > span,
    .app-bottom-nav__surface,
    .app-bottom-nav__item,
    .app-bottom-nav__label,
    .app-bottom-nav__dap-mark,
    .analytics-skeleton::after,
    .app-pull-refresh__line-spinner {
        animation: none;
        transition: none;
    }
}

@keyframes portal-event-swipe-hint {
    0%, 100% { transform: translateX(0); }
    48% { transform: translateX(-18px); }
    72% { transform: translateX(3px); }
}

@keyframes premium-rise-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes premium-live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(117, 189, 138, 0.42); }
    70% { box-shadow: 0 0 0 8px rgba(117, 189, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(117, 189, 138, 0); }
}

@keyframes premium-skeleton-sweep {
    0% { transform: translateX(-110%); }
    58%, 100% { transform: translateX(110%); }
}

/* Dev vNext canvas-first refinement. Production apps use tonal surfaces and
   containment to mark hierarchy, not universal black or default card wrappers. */
.shell--premium {
    --premium-obsidian: #111311;
    --premium-ink: #151815;
    --premium-surface: #191c19;
    --premium-surface-raised: #202420;
    --premium-surface-soft: #292e29;
    --premium-cream: #f5f1e9;
    --premium-muted: #aaa9a4;
    --premium-bronze: #c5934f;
    --premium-bronze-bright: #dfb875;
    --premium-teal: #7abdc5;
    --premium-border: rgba(255, 255, 255, 0.09);
    --premium-border-strong: rgba(223, 184, 117, 0.34);
    --premium-divider: rgba(255, 255, 255, 0.105);
    --premium-hover: rgba(255, 255, 255, 0.035);
    --premium-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
    --app-surface: var(--premium-surface-raised);
    --app-surface-soft: var(--premium-surface);
    --app-thread-surface: #151815;
    --app-thread-marker: rgba(255, 255, 255, 0.065);
    --app-thread-incoming: #242924;
    --resource-card-surface: var(--premium-surface-raised);
    --resource-preview-surface: linear-gradient(145deg, rgba(197, 147, 79, 0.12), #151815);
    --resource-control-surface: var(--premium-surface);
    --analytics-bg: var(--premium-obsidian);
    --analytics-page-bg: var(--premium-obsidian);
    --analytics-card: var(--premium-surface-raised);
    --dt-shell-surface: var(--premium-obsidian);
    color: var(--premium-cream);
    background: var(--premium-obsidian);
}

.shell--premium.shell--nav,
.shell--premium .shell__body,
.shell--premium .shell__content,
.shell--premium .app-pull-refresh,
.shell--premium .analytics-page {
    background: var(--premium-obsidian);
}

.shell--premium .shell__header::before {
    background: linear-gradient(180deg,
        rgba(17, 19, 17, 0.99) 0%,
        rgba(17, 19, 17, 0.99) 54%,
        rgba(17, 19, 17, 0.78) 73%,
        transparent 100%);
    inset: -4px 0 -10px 0;
    mask-image: linear-gradient(180deg, #000 0%, #000 67%, rgba(0, 0, 0, 0.64) 84%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 67%, rgba(0, 0, 0, 0.64) 84%, transparent 100%);
}

.shell--premium .drawer {
    border-color: var(--premium-divider);
    background: var(--premium-ink);
    box-shadow: 24px 0 58px rgba(0, 0, 0, 0.52);
}

.shell--premium .app-side-rail__link:hover,
.shell--premium .app-side-rail__link:focus-visible {
    background: var(--premium-hover);
}

.shell--premium .app-side-rail__link--active {
    background: rgba(197, 147, 79, 0.1);
}

.shell--premium .topbar__mobile-notification,
.shell--premium .topbar__desktop-notification,
.shell--premium .topbar__desktop-context-action {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.shell--premium .app-bottom-nav__surface {
    border-color: rgba(255, 255, 255, 0.13);
    color: #cbc9c3;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.012) 58%, rgba(0, 0, 0, 0.025)),
        rgba(14, 19, 16, 0.31);
    box-shadow:
        0 17px 42px rgba(0, 0, 0, 0.4),
        inset 0 1px rgba(255, 255, 255, 0.13),
        inset 0 -1px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(42px) saturate(1.82) contrast(1.03);
    -webkit-backdrop-filter: blur(42px) saturate(1.82) contrast(1.03);
}

/* Large page sections sit directly on the canvas. Focused widgets such as
   charts, media, dialogs, and provider cards retain their own surfaces. */
.shell--premium .app-panel.app-panel--section {
    gap: 10px;
    margin-top: 16px;
    padding: 4px 2px 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.shell--premium .app-panel.app-panel--section + .app-panel.app-panel--section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid var(--premium-divider);
}

.shell--premium .app-panel.app-panel--section:is(
    .royalties-autopay-prompt,
    .royalties-submit-notice,
    .feedback__form-panel,
    .meta-connect__panel,
    .resource-viewer,
    .customer-bot-dashboard__thread-screen,
    .customer-bot-dashboard__follow-up-panel,
    .customer-bot-dashboard__usage-panel) {
    padding: 14px;
    overflow: hidden;
    border: 1px solid var(--premium-border);
    border-radius: 18px;
    background: var(--premium-surface-raised);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24);
}

.shell--premium :is(
    .app-panel,
    .analytics-panel,
    .analytics-panel--chart,
    .app-metric-card,
    .analytics-kpi-card,
    .analytics-opportunity-card,
    .analytics-modal,
    .app-info-modal,
    .analytics-loading-notice,
    .app-service-spotlight,
    .analytics-leaderboard__podium,
    .analytics-leaderboard__card,
    .franchise-network-system-card) {
    border-color: var(--premium-border);
    background: var(--premium-surface-raised);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.025);
}

.shell--premium :is(
    .analytics-leaderboard__podium-block,
    .analytics-leaderboard__podium-footer,
    .franchise-network-connection-row,
    .app-activity-banner__surface,
    .analytics-modal__header,
    .app-info-modal__header,
    .app-confirm-modal__actions,
    .app-service-spotlight__tooltip) {
    border-color: var(--premium-border);
    background: var(--premium-surface);
}

.shell--premium .analytics-leaderboard__podium-place--1 .analytics-leaderboard__podium-block {
    border-color: rgba(223, 184, 117, 0.28);
    background: linear-gradient(180deg, rgba(197, 147, 79, 0.13), var(--premium-surface));
}

.shell--premium .app-panel__header {
    align-items: end;
    margin-bottom: 2px;
}

.shell--premium .app-panel__header h2 {
    font-size: clamp(15px, 4.4vw, 18px);
    line-height: 1.12;
    letter-spacing: -0.025em;
}

/* Metrics read as a single information band rather than a row of nested cards. */
.shell--premium .app-grid--metrics {
    gap: 0;
    overflow: hidden;
    border: 0;
    background: linear-gradient(180deg, #1a1e1a, #151815);
}

.shell--premium .app-grid--metrics > .app-metric-card {
    padding: 12px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.shell--premium .app-grid--metrics > .app-metric-card:nth-child(3n + 2),
.shell--premium .app-grid--metrics > .app-metric-card:nth-child(3n + 3) {
    border-left: 1px solid var(--premium-divider);
}

.shell--premium .gbp-automation__metrics > .app-metric-card {
    border-left: 1px solid var(--premium-divider);
}

.shell--premium .gbp-automation__metrics > .app-metric-card:first-child {
    border-left: 0;
}

.shell--premium .app-grid--metrics > .app-metric-card:hover,
.shell--premium .app-grid--metrics > .app-metric-card:focus-visible {
    outline: 0;
    background: var(--premium-hover);
    box-shadow: none;
}

.shell--premium .app-grid--metrics > .app-metric-card.analytics-kpi-card--selected {
    border-color: var(--premium-divider);
    background: rgba(197, 147, 79, 0.085);
    box-shadow: inset 0 -2px var(--premium-bronze-bright);
}

.shell--premium .app-action-list-card .app-list-card__meta {
    align-items: center;
    gap: 4px;
}

.shell--premium .app-grid--metrics .app-metric-card__icon {
    color: var(--premium-bronze-bright);
    background: transparent;
}

/* Preserve complete values on legacy-width phones instead of compressing six
   business metrics into unreadable 100px columns. Regular iPhones retain the
   established three-column information band. */
@media (max-width: 340px) {
    .shell--premium .app-grid--metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shell--premium .app-grid--metrics > .app-metric-card:nth-child(n) {
        min-height: 116px;
        height: auto;
        border-top: 0;
        border-left: 0;
    }

    .shell--premium .app-grid--metrics > .app-metric-card:nth-child(2n) {
        border-left: 1px solid var(--premium-divider);
    }

    .shell--premium .app-grid--metrics > .app-metric-card:nth-child(n + 3) {
        border-top: 1px solid var(--premium-divider);
    }
}

/* Text-heavy collections use full-width rows and separators. */
.shell--premium :is(.app-list-card, .analytics-location-card, .app-contact-card, .app-detail-row, .app-action-list-card) {
    padding: 14px 2px;
    border: 0;
    border-bottom: 1px solid var(--premium-divider);
    border-radius: 0;
    color: var(--premium-cream);
    background: transparent;
    box-shadow: none;
    transition: background 150ms ease, color 150ms ease;
}

.app-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.shell--premium :is(.app-list-card, .analytics-location-card, .app-contact-card, .app-detail-row, .app-action-list-card):hover,
.shell--premium :is(.app-list-card, .analytics-location-card, .app-contact-card, .app-detail-row, .app-action-list-card):focus-visible {
    border-color: var(--premium-divider);
    outline: 0;
    color: var(--premium-cream);
    background: var(--premium-hover);
    box-shadow: none;
    transform: none;
}

.shell--premium :is(.app-list-card--active, .app-contact-card--active, .app-detail-row--active, .app-action-list-card--selected) {
    border-color: var(--premium-divider);
    border-radius: 0;
    background: linear-gradient(90deg, rgba(197, 147, 79, 0.11), transparent 62%);
    box-shadow: inset 2px 0 var(--premium-bronze-bright);
}

.shell--premium .app-rank-card {
    padding: 13px 2px;
    border-bottom-color: var(--premium-divider);
}

.shell--premium .app-grid--stack:has(> :is(.app-list-card, .app-contact-card, .app-detail-row, .app-action-list-card, .app-rank-card)),
.shell--premium :is(.app-list-card-list, .app-rank-card-list, .app-action-list-card-list, .analytics-location-card-list) {
    gap: 0;
}

.shell--premium .app-grid--stack > :is(.app-list-card, .app-contact-card, .app-detail-row, .app-action-list-card, .app-rank-card):last-child,
.shell--premium :is(.app-list-card-list, .app-rank-card-list, .app-action-list-card-list, .analytics-location-card-list) > :last-child {
    border-bottom: 0;
}

.shell--premium .app-list-card__stat:not(:first-child),
.shell--premium .analytics-location-card__stat:not(:first-child) {
    border-color: var(--premium-divider);
}

.shell--premium .app-detail-row__selection {
    border-color: var(--premium-border-strong);
    background: transparent;
}

.shell--premium .team-directory-panel {
    padding-top: 0;
}

.shell--premium .team-directory-list {
    gap: 8px;
}

.shell--premium .team-directory-list__band,
.shell--premium .team-directory-floating-band {
    padding: 17px 2px 8px;
    border: 0;
    border-bottom: 1px solid var(--premium-divider);
    color: var(--premium-bronze-bright);
    background: transparent;
    box-shadow: none;
}

.shell--premium .team-directory-card.app-contact-card {
    padding: 14px 2px;
    border-bottom: 1px solid var(--premium-divider);
}

.shell--premium .app-contact-card__avatar--placeholder {
    border-color: rgba(223, 184, 117, 0.3);
    color: var(--premium-bronze-bright);
    background: #161916;
}

/* Controls remain contained because the surface communicates interactivity. */
.shell--premium .analytics-filterbar {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.shell--premium :is(.analytics-location-mode, .app-mode-selector, .analytics-segmented),
.shell--premium .field__input,
.shell--premium .analytics-filter__control .field__input,
.shell--premium .app-filter-select__control .field__input,
.shell--premium .analytics-filter--button,
.shell--premium .app-button--secondary {
    border-color: var(--premium-border);
    background: var(--premium-surface);
    box-shadow: none;
}

.shell--premium .field__input:focus,
.shell--premium .analytics-filter__control .field__input:focus,
.shell--premium .app-filter-select__control .field__input:focus {
    border-color: var(--premium-border-strong);
    background: var(--premium-surface-raised);
    box-shadow: 0 0 0 3px rgba(197, 147, 79, 0.1);
}

.shell--premium :is(.analytics-location-mode__item--active, .app-mode-selector__item--active, .analytics-segmented__item--active) {
    border-color: rgba(223, 184, 117, 0.2);
    background: rgba(197, 147, 79, 0.12);
}

.shell--premium .app-multi-select-filter__options,
.shell--premium :is(.analytics-modal, .app-info-modal, .app-confirm-modal) {
    border-color: var(--premium-border);
    background: #121412;
}

.shell--premium .analytics-skeleton {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.shell--premium :is(.analytics-loading-grid--cards, .analytics-loading-grid--list) {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    align-content: start;
    gap: 2px;
    min-height: 0;
    padding-top: 6px;
}

.shell--premium :is(.analytics-loading-grid--cards, .analytics-loading-grid--list) .analytics-skeleton--card {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    min-height: 94px;
    padding: 13px 2px;
}

.shell--premium :is(.analytics-loading-grid--cards, .analytics-loading-grid--list) .analytics-skeleton__avatar {
    width: 44px;
    height: 44px;
}

.shell--premium :is(.analytics-loading-grid--cards, .analytics-loading-grid--list) .analytics-skeleton__body {
    gap: 7px;
}

.shell--premium :is(.analytics-loading-grid--cards, .analytics-loading-grid--list) .analytics-skeleton__line {
    height: 7px;
}

.shell--premium :is(.analytics-loading-grid--cards, .analytics-loading-grid--list) .analytics-skeleton__line--title {
    width: min(58%, 180px);
    height: 9px;
}

.shell--premium :is(.analytics-loading-grid--cards, .analytics-loading-grid--list) .analytics-skeleton__line--copy {
    width: min(86%, 300px);
}

.shell--premium :is(.analytics-loading-grid--cards, .analytics-loading-grid--list) .analytics-skeleton__line--meta {
    width: min(42%, 112px);
}

/* Customer Bot loads as the compact conversation list users are about to scan. */
.shell--premium .customer-bot-dashboard__loading {
    width: 100%;
    min-height: min(620px, calc(var(--app-height, 100dvh) - 210px));
    padding-top: 6px;
    gap: 2px;
    align-content: start;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 64px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 64px), transparent 100%);
}

.shell--premium .customer-bot-dashboard__loading .analytics-skeleton {
    border: 0;
}

.team-directory-list__band--floating-source {
    visibility: hidden;
}

.team-directory-floating-band--premium {
    padding: 10px 2px 8px;
    border: 0;
    border-bottom: 1px solid rgba(223, 184, 117, 0.18);
    color: var(--premium-bronze-bright, #dfb875);
    background: rgba(17, 19, 17, 0.94);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    backdrop-filter: blur(16px) saturate(130%);
}

/* Icon-only information actions should not read as square content cards. */
.shell--premium :is(.analytics-info-button, .app-info-button) {
    border: 0;
    border-radius: 999px;
    color: var(--premium-bronze-bright);
    background: transparent;
    box-shadow: none;
}

.shell--premium :is(
    .analytics-info-button,
    .app-info-button,
    .analytics-tabbar__item
):focus-visible {
    outline: 0;
}

.shell--premium :is(.analytics-info-button, .app-info-button):focus-visible {
    box-shadow: 0 0 0 3px rgba(223, 184, 117, 0.2);
}

.shell--premium .analytics-tabbar__item:focus-visible {
    border-bottom-color: var(--premium-bronze-bright);
    box-shadow: inset 0 -2px var(--premium-bronze-bright);
}

.shell--premium :is(
    .analytics-tabbar__item,
    .analytics-segmented__item,
    .app-mode-selector__item,
    .app-metric-card[role="button"],
    .topbar__icon-button
):active:not(:disabled) {
    opacity: 0.76;
    transition: opacity 80ms ease-out;
}

/* Ranked invoice rows share the same quiet separator as every premium list. */
.shell--premium :is(
    .analytics-groomer-ranking__group,
    .analytics-groomer-appointment
) {
    border-color: var(--premium-divider);
}

/* Header utilities stay quiet and consistent with native mobile toolbar actions. */
.shell--premium .app-icon-button {
    border-color: var(--premium-border);
    color: var(--premium-bronze-bright);
    background: var(--premium-surface);
    box-shadow: none;
}

.shell--premium .app-icon-button:is(:hover, :focus-visible) {
    border-color: var(--premium-border-strong);
    background: var(--premium-hover);
}

.shell--premium input:is([type="checkbox"], [type="radio"]) {
    accent-color: var(--premium-bronze-bright);
}

/* Dashboard media is reserved for the hero and useful community events. */
.shell--premium .portal-dashboard {
    --analytics-card: var(--premium-surface-raised);
    gap: 22px;
}

.shell--premium .portal-dashboard__hero {
    border-color: var(--premium-border);
    background: #080908;
}

.shell--premium .portal-dashboard__panel {
    padding: 2px 2px 0;
}

.shell--premium .portal-dashboard__section {
    gap: 8px;
}

.shell--premium .portal-dashboard__metric-grid {
    margin-block: 0;
}

.shell--premium .portal-dashboard__metric-card,
.shell--premium .portal-dashboard__workspace-card {
    background: transparent;
    box-shadow: none;
}

.shell--premium .portal-dashboard__workspace-card {
    padding-block: 15px;
}

/* Keep compact visuals while preserving a comfortable mobile touch target. */
@media (max-width: 1099px) {
    .shell--premium :is(
        .analytics-tabbar__item,
        .analytics-segmented__item,
        .analytics-location-mode__item,
        .app-mode-selector__item,
        .app-button--control,
        .analytics-filter--button,
        .segmented-tabs__item,
        .toolbar-grid__compose,
        .portal-dashboard__primary-action
    ) {
        min-height: 44px;
    }

    .shell--premium .analytics-tabbar__item {
        min-width: 44px;
    }

    .shell--premium :is(
        .analytics-filter__control .field__input,
        .app-filter-select__control .field__input,
        .app-multi-select-filter__menu > summary,
        .app-text-input__input
    ) {
        min-height: 44px;
    }

    .app-text-input__input.field__input--compact {
        height: 44px;
    }

    .shell--premium :is(.analytics-chip-row, .app-chip-row) {
        padding-block: 10px;
        margin-block: -8px;
    }

    .shell--premium :is(.analytics-chip, .app-chip) {
        position: relative;
    }

    .shell--premium :is(.analytics-chip, .app-chip)::after {
        content: "";
        position: absolute;
        inset: -10px -2px;
    }
}

@media (min-width: 1100px) {
    .shell--premium .shell__body {
        border-left-color: var(--premium-divider);
        background: var(--premium-obsidian);
    }

    .shell--premium :is(.drawer__desktop-toggle, .topbar__desktop-notification, .topbar__desktop-context-action) {
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
    }

    .shell--premium .portal-dashboard__primary-action {
        min-height: 44px;
    }

    .shell--premium :is(.app-list-card, .analytics-location-card, .app-contact-card, .app-detail-row, .app-action-list-card):hover {
        transform: none;
        box-shadow: none;
    }
}

/* Appearance controls follow the native switch silhouette while retaining a
   full-width row as the accessible touch target. */
.app-toggle-setting {
    width: 100%;
    min-height: 68px;
    padding: 13px 2px;
    border: 0;
    border-bottom: 1px solid var(--premium-divider, var(--dt-border));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    color: inherit;
    background: transparent;
    text-align: left;
    appearance: none;
    cursor: pointer;
}

.app-toggle-setting__copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.app-toggle-setting__copy strong {
    color: var(--premium-cream, var(--dt-black));
    font-size: 0.95rem;
    font-weight: 760;
    line-height: 1.25;
}

.app-toggle-setting__copy > span {
    color: var(--premium-muted, var(--dt-muted));
    font-size: 0.78rem;
    line-height: 1.35;
}

.app-toggle-setting__control {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.app-toggle-setting__state {
    min-width: 20px;
    color: var(--premium-muted, var(--dt-muted));
    font-size: 0.75rem;
    font-weight: 720;
    text-align: right;
}

.app-toggle-setting__track {
    position: relative;
    width: 51px;
    height: 31px;
    padding: 2px;
    border: 1px solid var(--premium-border, var(--dt-border));
    border-radius: 999px;
    background: var(--premium-surface-soft, var(--dt-beige));
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18);
    transition: border-color 170ms ease, background 170ms ease;
}

.app-toggle-setting__thumb {
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
    transform: translateX(0);
    transition: transform 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

.app-toggle-setting[aria-checked="true"] .app-toggle-setting__track {
    border-color: transparent;
    background: var(--premium-bronze, var(--dt-gold));
}

.app-toggle-setting[aria-checked="true"] .app-toggle-setting__state {
    color: var(--premium-bronze-bright, var(--dt-gold-deep));
}

.app-toggle-setting[aria-checked="true"] .app-toggle-setting__thumb {
    transform: translateX(20px);
}

.app-toggle-setting:is(:hover, :focus-visible):not(:disabled) {
    outline: 0;
    background: var(--premium-hover, rgba(17, 17, 17, 0.035));
}

.app-toggle-setting:focus-visible .app-toggle-setting__track {
    box-shadow: 0 0 0 3px rgba(197, 147, 79, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.16);
}

.app-toggle-setting:disabled {
    cursor: default;
    opacity: 0.62;
}

/* Keep the document canvas aligned with the active appearance. iOS exposes
   this layer around its keyboard toolbar while focused controls are open. */
html[data-theme="dark"],
html[data-theme="dark"] body {
    color-scheme: dark;
    color: #f4ecdf;
    background: #111311;
    background-color: #111311;
}

/* Light appearance keeps the canvas-first facelift and changes only the
   material palette. This avoids maintaining a second layout implementation. */
html[data-theme="light"],
html[data-theme="light"] body {
    color-scheme: light;
    color: #20241f;
    background: #f3efe7;
    background-color: #f3efe7;
}

/* Safari exposes the document canvas between the visual viewport and its
   native keyboard assistant. Match that exposed strip to the conversation
   instead of allowing the warmer shell canvas to read as a second toolbar. */
html[data-theme="light"]:has(body.app-keyboard-open .inbox-page--thread-open),
html[data-theme="light"] body.app-keyboard-open:has(.inbox-page--thread-open) {
    background: #f8f5ef;
    background-color: #f8f5ef;
}

html[data-theme="light"] .shell--premium {
    --premium-obsidian: #f3efe7;
    --premium-ink: #fbf9f5;
    --premium-surface: #ece6dc;
    --premium-surface-raised: #fffdf9;
    --premium-surface-soft: #e2dbcf;
    --premium-cream: #20241f;
    --premium-muted: #646760;
    --premium-bronze: #a66c29;
    --premium-bronze-bright: #89561f;
    --premium-teal: #2f747b;
    --premium-oxblood: #8f4039;
    --channel-accent: var(--premium-bronze-bright);
    --channel-accent-ink: #fffaf1;
    --premium-border: rgba(32, 36, 31, 0.115);
    --premium-border-strong: rgba(137, 86, 31, 0.38);
    --premium-divider: rgba(32, 36, 31, 0.12);
    --premium-hover: rgba(92, 68, 39, 0.055);
    --premium-shadow: 0 16px 38px rgba(55, 43, 29, 0.11);
    --accent: var(--premium-bronze);
    --surface: var(--premium-surface-raised);
    --border-color: var(--premium-border);
    --ink-strong: var(--premium-cream);
    --ink-muted: var(--premium-muted);
    --app-surface: var(--premium-surface-raised);
    --app-surface-soft: var(--premium-surface);
    --app-border: var(--premium-border);
    --app-card-shadow: var(--premium-shadow);
    --app-text: var(--premium-cream);
    --app-text-muted: var(--premium-muted);
    --app-muted: var(--premium-muted);
    --app-success-strong: #2f7547;
    --app-success-surface: rgba(47, 117, 71, 0.1);
    --app-danger-strong: #a4453e;
    --app-danger-surface: rgba(164, 69, 62, 0.1);
    --app-thread-surface: #f8f5ef;
    --app-thread-marker: rgba(32, 36, 31, 0.065);
    --app-thread-incoming: #e7e1d7;
    --app-thread-incoming-text: #20241f;
    --app-thread-incoming-wave: rgba(32, 36, 31, 0.18);
    --app-thread-incoming-wave-progress: #ffffff;
    --app-thread-outgoing: var(--premium-bronze-bright);
    --app-thread-outgoing-text: #fff8ee;
    --resource-card-surface: var(--premium-surface-raised);
    --resource-preview-surface: linear-gradient(145deg, rgba(166, 108, 41, 0.11), #f8f4ed);
    --resource-control-surface: var(--premium-surface);
    --resource-chip-surface: rgba(166, 108, 41, 0.1);
    --resource-chip-text: #7f511d;
    --dt-cream: var(--premium-obsidian);
    --dt-beige: var(--premium-surface);
    --dt-gold: var(--premium-bronze);
    --dt-gold-deep: #7d4e1c;
    --dt-gold-dark: var(--premium-bronze-bright);
    --dt-charcoal: var(--premium-cream);
    --dt-black: var(--premium-cream);
    --dt-muted: var(--premium-muted);
    --dt-border: var(--premium-border);
    --dt-white: var(--premium-surface-raised);
    --dt-surface: var(--premium-surface-raised);
    --dt-text: var(--premium-cream);
    --dt-text-muted: var(--premium-muted);
    --dt-hq-accent-deep: var(--premium-bronze-bright);
    --dt-hq-ink-muted: var(--premium-muted);
    --dt-hq-shadow: var(--premium-shadow);
    --dt-success: #367b4c;
    --dt-warning: #9a6c22;
    --dt-danger: #a4453e;
    --dt-shadow-sm: 0 7px 18px rgba(55, 43, 29, 0.08);
    --dt-shadow-md: 0 14px 32px rgba(55, 43, 29, 0.1);
    --dt-shadow-lg: var(--premium-shadow);
    --analytics-bg: var(--premium-obsidian);
    --analytics-page-bg: var(--premium-obsidian);
    --analytics-page-surface: transparent;
    --analytics-card: var(--premium-surface-raised);
    --analytics-border: var(--premium-border);
    --analytics-gold: var(--premium-bronze-bright);
    --analytics-gold-dark: var(--premium-bronze-bright);
    --analytics-charcoal: var(--premium-cream);
    --analytics-ink: var(--premium-cream);
    --analytics-muted: var(--premium-muted);
    --analytics-success: #367b4c;
    --analytics-green: #367b4c;
    --analytics-danger: #a4453e;
    --analytics-shadow: var(--premium-shadow);
    --dt-shell-surface: #f3efe7;
    color: var(--premium-cream);
    background: var(--premium-obsidian);
}

html[data-theme="light"] .shell--premium :is(
    .shell__body,
    .shell__content,
    .app-pull-refresh,
    .analytics-page) {
    color: var(--premium-cream);
    background: var(--premium-obsidian);
}

html[data-theme="light"] .shell--premium .shell__header::before {
    background: linear-gradient(180deg,
        rgba(243, 239, 231, 0.99) 0%,
        rgba(243, 239, 231, 0.99) 54%,
        rgba(243, 239, 231, 0.78) 73%,
        transparent 100%);
}


html[data-theme="light"] .shell--premium .inbox-page:not(.inbox-page--thread-open) .inbox-page__list {
    background: linear-gradient(
        180deg,
        var(--premium-obsidian) 0%,
        color-mix(in srgb, var(--premium-obsidian) 62%, var(--premium-ink)) 112px,
        var(--premium-ink) 280px);
}

@media (max-width: 799px) {
    /* Align the shell's underlay to the Inbox gradient. The warm segment stays
       beneath the translucent header while the settled canvas continues
       through the space reserved for the floating dock. */
    html[data-theme="light"] .shell--premium .shell__content:has(
        .inbox-page:not(.inbox-page--thread-open)) {
        background: linear-gradient(
            180deg,
            var(--premium-obsidian) 0%,
            var(--premium-obsidian) var(--shell-header-overlap),
            color-mix(in srgb, var(--premium-obsidian) 62%, var(--premium-ink))
                calc(var(--shell-header-overlap) + 112px),
            var(--premium-ink) calc(var(--shell-header-overlap) + 280px));
    }
}

html[data-theme="light"] .shell--premium .inbox-page--thread-open :is(
    .inbox-page__thread,
    .inbox-page__messages) {
    background-color: var(--app-thread-surface);
}

html[data-theme="light"] .shell--premium .inbox-page--thread-open .inbox-page__composer {
    border-top-color: color-mix(in srgb, var(--premium-divider) 48%, transparent);
    background: color-mix(in srgb, var(--app-thread-surface) 94%, transparent);
}

html[data-theme="light"] .shell--premium .app-thread-composer__field.inbox-page__composer-field {
    border-color: rgba(32,36,31,.14);
    background:
        linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.22) 64%),
        rgba(250,247,240,.36);
    box-shadow: 0 10px 24px rgba(55,43,29,.11),inset 0 1px rgba(255,255,255,.72);
}

@media (max-width: 799px) {
    html[data-theme="light"] .shell--premium .inbox-page--thread-open .inbox-page__composer {
        border-top: 0;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

html[data-theme="light"] .shell--premium .shell__backdrop {
    background: rgba(32, 36, 31, 0.38);
}

html[data-theme="light"] .shell--premium .drawer {
    border-color: var(--premium-divider);
    color: var(--premium-cream);
    background: var(--premium-ink);
    box-shadow: 22px 0 54px rgba(55, 43, 29, 0.18);
}

html[data-theme="light"] .shell--premium :is(
    .app-side-rail__link,
    .app-side-rail__logout,
    .app-side-rail__profile-copy strong) {
    color: var(--premium-cream);
}

html[data-theme="light"] .shell--premium .app-side-rail__profile-copy span {
    color: var(--premium-muted);
}

html[data-theme="light"] .shell--premium .app-side-rail__group-toggle[aria-expanded="true"] {
    color: var(--premium-cream);
    background: color-mix(in srgb, var(--premium-bronze) 7%, var(--premium-surface));
}

html[data-theme="light"] .shell--premium .app-side-rail__child-link {
    color: var(--premium-muted);
}

html[data-theme="light"] .shell--premium .app-side-rail__child-link:hover,
html[data-theme="light"] .shell--premium .app-side-rail__child-link:focus-visible {
    color: var(--premium-cream);
    background: var(--premium-hover);
    outline: 0;
}

html[data-theme="light"] .shell--premium .app-side-rail__child-link--active {
    color: var(--premium-bronze-bright);
    background: color-mix(in srgb, var(--premium-bronze) 10%, transparent);
}

html[data-theme="light"] .shell--premium .app-side-rail__child-link--active .app-side-rail__child-dot {
    opacity: 0.9;
}

html[data-theme="light"] .shell--premium .app-side-rail__logout {
    background: rgba(32, 36, 31, 0.045);
}

html[data-theme="light"] .shell--premium .app-side-rail__avatar {
    color: #fff;
    background: linear-gradient(145deg, #b88345, #89561f);
    box-shadow: 0 10px 24px rgba(55, 43, 29, 0.15);
}

html[data-theme="light"] .shell--premium .app-bottom-nav__surface {
    border-color: rgba(32, 36, 31, 0.13);
    color: var(--premium-cream);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.075) 62%, rgba(156, 137, 111, 0.028)),
        rgba(250, 247, 240, 0.34);
}

html[data-theme="light"] .shell--premium :is(
    .topbar__mobile-notification,
    .topbar__desktop-notification,
    .topbar__desktop-context-action) {
    border-color: transparent;
    color: var(--premium-cream);
    background: transparent;
    box-shadow: none;
}

html[data-theme="light"] .shell--premium .app-bottom-nav__surface {
    box-shadow: 0 15px 36px rgba(55, 43, 29, 0.14), inset 0 1px rgba(255, 255, 255, 0.78);
}

html[data-theme="light"] .shell--premium :is(
    .app-bottom-nav__item,
    .app-bottom-nav__icon,
    .app-bottom-nav__label) {
    color: var(--premium-muted);
}

html[data-theme="light"] .shell--premium .app-bottom-nav__item--active :is(.app-bottom-nav__icon, .app-bottom-nav__label) {
    color: var(--premium-cream);
}

html[data-theme="light"] .shell--premium .app-bottom-nav__item--active {
    background: rgba(166, 108, 41, 0.09);
}

html[data-theme="light"] .shell--premium :is(
    .app-panel,
    .analytics-panel,
    .analytics-panel--chart,
    .app-metric-card,
    .analytics-kpi-card,
    .analytics-opportunity-card,
    .analytics-modal,
    .app-info-modal,
    .analytics-loading-notice,
    .app-service-spotlight,
    .analytics-leaderboard__podium,
    .analytics-leaderboard__card,
    .franchise-network-system-card) {
    border-color: var(--premium-border);
    background: var(--premium-surface-raised);
    box-shadow: var(--premium-shadow), inset 0 1px rgba(255, 255, 255, 0.76);
}

html[data-theme="light"] .shell--premium .app-panel.app-panel--section {
    background: transparent;
    box-shadow: none;
}

html[data-theme="light"] .shell--premium .app-panel.app-panel--section:is(
    .royalties-autopay-prompt,
    .royalties-submit-notice,
    .feedback__form-panel,
    .meta-connect__panel,
    .resource-viewer,
    .customer-bot-dashboard__thread-screen,
    .customer-bot-dashboard__follow-up-panel,
    .customer-bot-dashboard__usage-panel) {
    background: var(--premium-surface-raised);
    box-shadow: var(--premium-shadow);
}

html[data-theme="light"] .shell--premium .app-grid--metrics {
    background: #fffdf9;
}

html[data-theme="light"] .shell--premium .app-grid--metrics > .app-metric-card {
    background: transparent;
    box-shadow: none;
}

html[data-theme="light"] .shell--premium .app-grid--metrics > .app-metric-card.analytics-kpi-card--selected {
    border-color: var(--premium-divider);
    background: rgba(166, 108, 41, 0.055);
    box-shadow: inset 0 -2px #a66c29;
}

html[data-theme="light"] .shell--premium .app-action-list-card__toggle-surface {
    border-color: rgba(117, 72, 23, 0.24);
    color: #89561f;
    background: transparent;
}

html[data-theme="light"] .shell--premium .app-action-list-card__toggle-indicator {
    border-color: rgba(117, 72, 23, 0.56);
    background: rgba(255, 253, 249, 0.78);
}

html[data-theme="light"] .shell--premium :is(
    .analytics-leaderboard__podium-block,
    .analytics-leaderboard__podium-footer,
    .franchise-network-connection-row,
    .app-activity-banner__surface,
    .analytics-modal__header,
    .app-info-modal__header,
    .app-confirm-modal__actions,
    .app-service-spotlight__tooltip) {
    color: var(--premium-cream);
    background: var(--premium-surface);
}

html[data-theme="light"] .shell--premium .analytics-leaderboard__podium-place--1 .analytics-leaderboard__podium-block {
    background: linear-gradient(180deg, rgba(166, 108, 41, 0.11), var(--premium-surface));
}

html[data-theme="light"] .shell--premium .app-contact-card__avatar--placeholder {
    border-color: rgba(137, 86, 31, 0.24);
    color: var(--premium-bronze-bright);
    background: #ece5d9;
}

html[data-theme="light"] .shell--premium .app-status-chip {
    border-color: rgba(117, 72, 23, 0.2);
    color: #754817;
    background: #efe5d5;
}

html[data-theme="light"] .shell--premium .app-status-chip--success {
    border-color: rgba(47, 104, 65, 0.2);
    color: #2f6841;
    background: #e1eee4;
}

html[data-theme="light"] .shell--premium :is(.app-status-chip--attention, .app-status-chip--danger) {
    border-color: rgba(141, 56, 53, 0.2);
    color: #8d3835;
    background: #f3dfdc;
}

html[data-theme="light"] .shell--premium .app-status-chip--warning {
    border-color: rgba(120, 80, 27, 0.2);
    color: #78501b;
    background: #f2e6d2;
}

html[data-theme="light"] .team-directory-floating-band--premium {
    border-color: rgba(137, 86, 31, 0.18);
    color: #7b4c18;
    background: rgba(243, 239, 231, 0.95);
    box-shadow: 0 10px 22px rgba(55, 43, 29, 0.1);
}

html[data-theme="light"] .shell--premium :is(
    .analytics-location-mode,
    .app-mode-selector,
    .analytics-segmented,
    .field__input,
    .analytics-filter__control .field__input,
    .app-filter-select__control .field__input,
    .analytics-filter--button,
    .app-button--secondary) {
    border-color: var(--premium-border);
    color: var(--premium-cream);
    background: var(--premium-surface-raised);
}

html[data-theme="light"] .shell--premium :is(
    .analytics-location-mode__item--active,
    .app-mode-selector__item--active,
    .analytics-segmented__item--active) {
    color: var(--premium-cream);
    background: rgba(166, 108, 41, 0.1);
}

html[data-theme="light"] .shell--premium :is(
    .app-multi-select-filter__options,
    .analytics-modal,
    .app-info-modal,
    .app-confirm-modal) {
    color: var(--premium-cream);
    background: #fffdf9;
    box-shadow: 0 18px 42px rgba(55, 43, 29, 0.16);
}

html[data-theme="light"] .shell--premium .analytics-modal-backdrop {
    background: rgba(32, 36, 31, 0.42);
}

html[data-theme="light"] .shell--premium .analytics-skeleton::after {
    background: linear-gradient(105deg, transparent 26%, rgba(255, 255, 255, 0.72) 45%, transparent 64%);
}

html[data-theme="light"] .shell--premium :is(.analytics-skeleton__avatar, .analytics-skeleton__line) {
    background: rgba(52, 48, 42, 0.1);
    box-shadow: none;
}

html[data-theme="light"] .shell--premium .field__input::placeholder {
    color: #8b8d87;
}

html[data-theme="light"] .shell--premium :is(.field__label, .analytics-filter__label) {
    color: #53564f;
}

html[data-theme="light"] .shell--premium .field__input option {
    color: var(--premium-cream);
    background: var(--premium-surface-raised);
}

html[data-theme="light"] .shell--premium .app-button--primary {
    border-color: rgba(94, 56, 18, 0.14);
    color: #111512;
    background: linear-gradient(135deg, #d9b77f 0%, #c89a58 62%, #a8783c 100%);
    box-shadow: 0 11px 26px rgba(88, 56, 22, 0.18), inset 0 1px rgba(255, 255, 255, 0.2);
}

html[data-theme="light"] .shell--premium .portal-dashboard__hero {
    border-color: rgba(32, 36, 31, 0.16);
    background: #080908;
    box-shadow: 0 18px 42px rgba(55, 43, 29, 0.16);
}

html[data-theme="light"] .shell--premium .portal-dashboard__hero h2 {
    color: #fff8ee;
}

html[data-theme="light"] .shell--premium :is(
    .portal-dashboard__panel-eyebrow,
    .portal-dashboard__section-heading > span) {
    color: #89561f;
}

html[data-theme="light"] .shell--premium .topbar__badge {
    border-color: #fffdf9;
    color: #fff;
    background: #a63d37;
}

html[data-theme="light"] .shell--premium .topbar__activity-summary {
    background: linear-gradient(135deg, #b44841 0%, #993832 100%);
    box-shadow: 0 11px 25px rgba(105, 53, 41, 0.17);
}

html[data-theme="light"] .shell--premium .topbar__activity-summary::before {
    background: #a63d37;
}

html[data-theme="light"] .app-boot-screen {
    color: #20241f;
    background:
        radial-gradient(circle at 50% 28%, rgba(166, 108, 41, 0.13), transparent 31%),
        #f3efe7;
}

html[data-theme="light"] .app-boot-screen::before {
    background: linear-gradient(180deg, rgba(255, 253, 249, 0.45), transparent 38%);
}

html[data-theme="light"] .app-boot-screen :is(.brand-mark__title, .app-loading-brand__status) {
    color: #20241f;
}

html[data-theme="light"] .app-boot-screen .brand-mark__subtitle {
    color: #89561f;
}

html[data-theme="light"] .app-boot-screen .brand-mark__subtitle span {
    background: rgba(137, 86, 31, 0.52);
}

html[data-theme="light"] .app-boot-screen .brand-mark__crest {
    opacity: 1;
    filter: none;
}

html[data-theme="light"] .app-boot-screen .app-loading-brand__progress {
    background: rgba(32, 36, 31, 0.12);
}

/* Destructive utilities stay quiet in toolbars in both appearance modes. */
.shell--premium .customer-bot-dashboard__reset-action.app-button.app-button--secondary.app-button--control {
    border-color: transparent;
    color: var(--app-danger-strong, var(--dt-danger));
    background: transparent;
    box-shadow: none;
}

.shell--premium .customer-bot-dashboard__reset-action.app-button.app-button--secondary.app-button--control:is(:hover, :focus-visible) {
    border-color: transparent;
    background: var(--app-danger-surface, rgba(164, 69, 62, 0.1));
    box-shadow: none;
}

/* Franchise discovery is a quiet refresh utility, not a primary workflow action. */
.shell--premium .franchise-network-discovery-action.app-button.app-button--secondary.app-button--control {
    justify-self: start;
    border-color: transparent;
    color: var(--premium-bronze-bright);
    background: transparent;
    box-shadow: none;
}

.shell--premium .franchise-network-discovery-action.app-button.app-button--secondary.app-button--control:is(:hover, :focus-visible) {
    border-color: transparent;
    background: var(--premium-hover);
    box-shadow: none;
}

/* Review selection uses a stable wash instead of the animated-looking inset bar. */
.shell--premium .franchise-network-review-item.app-list-card--review-selected {
    border-color: var(--premium-divider);
    background: var(--premium-hover);
    box-shadow: none;
}

.shell--premium .franchise-network-review-item.app-list-card--review-selected .app-list-card__chevron {
    color: var(--premium-bronze-bright);
}

.shell--premium .franchise-network-review-item .app-list-card__meta {
    max-width: none;
}

.shell--premium .franchise-network-review-item .app-list-card__meta-copy > span {
    overflow: visible;
    text-overflow: clip;
}

/* System-managed identity fields use the same quiet information band in both themes. */
.shell--premium .franchise-network-managed-details {
    gap: 0;
    border-block: 1px solid var(--premium-divider);
}

.shell--premium .franchise-network-managed-details > div {
    padding: 12px;
    border: 0;
    border-left: 1px solid var(--premium-divider);
    border-radius: 0;
    color: var(--premium-cream);
    background: transparent;
    box-shadow: none;
}

.shell--premium .franchise-network-managed-details > div:first-child {
    border-left: 0;
}

.shell--premium .franchise-network-managed-details :is(span, small) {
    color: var(--premium-muted);
}

/* Connection maintenance reads as one settings list instead of nested cards. */
html .shell--premium .franchise-network-system-card.app-panel {
    gap: 12px;
    margin: 0;
    padding: 16px 2px;
    border: 0;
    border-bottom: 1px solid var(--premium-divider);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

html .shell--premium .franchise-network-system-card.app-panel:last-child {
    border-bottom: 0;
}

html .shell--premium .franchise-network-system-card .franchise-network-connection-row {
    margin: 0;
    padding: 10px 0;
    border: 0;
    border-bottom: 1px solid var(--premium-divider);
    border-radius: 0;
    color: var(--premium-cream);
    background: transparent;
    box-shadow: none;
}

.shell--premium .franchise-network-connection-edit.app-icon-button {
    border-color: var(--premium-divider);
    color: var(--premium-bronze-bright);
    background: transparent;
    box-shadow: none;
}

.shell--premium .franchise-network-connection-edit.app-icon-button:is(:hover, :focus-visible) {
    border-color: var(--premium-border-strong);
    background: var(--premium-hover);
}

.shell--premium .franchise-network-disconnect-action.app-button.app-button--secondary.app-button--control {
    border-color: var(--premium-border-strong);
    color: var(--premium-cream);
    background: var(--premium-surface-raised);
    box-shadow: none;
}

.shell--premium .franchise-network-disconnect-action.app-button.app-button--secondary.app-button--control:is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--app-danger-strong, var(--dt-danger)) 46%, var(--premium-border));
    color: var(--app-danger-strong, var(--dt-danger));
    background: var(--app-danger-surface, rgba(164, 69, 62, 0.1));
    box-shadow: none;
}

.shell--premium .franchise-network-connection-modal__identity {
    border-color: var(--premium-divider);
}

.shell--premium .franchise-network-connection-modal__identity strong {
    color: var(--premium-cream);
}

@media (max-width: 720px) {
    .shell--premium .franchise-network-managed-details > div {
        border-left: 0;
        border-bottom: 1px solid var(--premium-divider);
    }

    .shell--premium .franchise-network-managed-details > div:last-child {
        border-bottom: 0;
    }

    .franchise-network-connection-modal {
        width: 100%;
        max-height: min(84dvh, 680px);
    }

    .franchise-network-connection-modal .app-confirm-modal__actions {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Privacy is intentionally a document rather than another dashboard page. */
.shell--privacy-route {
    --privacy-canvas: #111311;
    --privacy-surface: #191c19;
    --privacy-text: #f5f1e9;
    --privacy-muted: #aaa9a4;
    --privacy-accent: #dfb875;
    --privacy-divider: rgba(255, 255, 255, 0.11);
    color: var(--privacy-text);
    background: var(--privacy-canvas);
}

.shell--privacy-route :is(.shell__body, .shell__content, .app-pull-refresh) {
    color: var(--privacy-text);
    background: var(--privacy-canvas);
}

.shell--privacy-route .app-pull-refresh__content {
    width: 100%;
}

.privacy-page {
    width: min(100%, 880px);
    margin-inline: auto;
    padding:
        max(38px, calc(env(safe-area-inset-top) + 24px))
        clamp(20px, 5vw, 56px)
        max(56px, calc(env(safe-area-inset-bottom) + 40px));
}

.privacy-page__hero {
    position: relative;
    padding: clamp(22px, 6vw, 46px) 0 clamp(28px, 7vw, 52px);
    border-bottom: 1px solid var(--privacy-divider);
}

.privacy-page__eyebrow {
    display: block;
    margin-bottom: 12px;
    color: var(--privacy-accent);
    font-size: 0.72rem;
    font-weight: 820;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.privacy-page .app-section-title {
    margin: 0;
    padding: 0;
}

.privacy-page .app-section-title h1 {
    color: var(--privacy-text);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(2.55rem, 10vw, 4.6rem);
    font-weight: 650;
    line-height: 0.96;
    letter-spacing: -0.045em;
}

.privacy-page .app-section-title .page-subtle {
    margin-top: 12px;
    color: var(--privacy-muted);
    font-size: 0.76rem;
    letter-spacing: 0.015em;
}

.privacy-page__lede {
    max-width: 680px;
    margin: 26px 0 0;
    color: var(--privacy-text);
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.2rem, 4.6vw, 1.55rem);
    line-height: 1.4;
}

.privacy-page .app-panel.app-panel--section {
    gap: 13px;
    margin: 0;
    padding: clamp(26px, 6vw, 44px) 0;
    border: 0;
    border-bottom: 1px solid var(--privacy-divider);
    border-radius: 0;
    color: var(--privacy-text);
    background: transparent;
    box-shadow: none;
}

.privacy-page .app-panel.app-panel--section:last-child {
    border-bottom: 0;
}

.privacy-page .app-panel__header {
    margin: 0;
}

.privacy-page .app-panel__header h2 {
    color: var(--privacy-text);
    font-size: clamp(1.18rem, 4.7vw, 1.45rem);
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.privacy-page .page-subtle {
    margin: 0;
    color: var(--privacy-muted);
    font-size: clamp(0.91rem, 3.7vw, 1rem);
    line-height: 1.72;
}

.privacy-page .page-subtle + .page-subtle {
    margin-top: 4px;
}

.privacy-page__details {
    gap: 0;
    display: grid;
    border-top: 1px solid var(--privacy-divider);
}

.privacy-page__detail {
    padding: 17px 0;
    border: 0;
    border-bottom: 1px solid var(--privacy-divider);
    color: var(--privacy-text);
}

.privacy-page__detail h3 {
    margin: 0;
    color: var(--privacy-text);
    font-size: 0.95rem;
    line-height: 1.35;
}

.privacy-page__detail p {
    margin: 5px 0 0;
    color: var(--privacy-muted);
    font-size: 0.86rem;
    line-height: 1.55;
}

.privacy-page a {
    color: var(--privacy-accent);
    font-weight: 700;
    text-decoration-color: color-mix(in srgb, var(--privacy-accent) 50%, transparent);
    text-underline-offset: 3px;
}

.privacy-page a:focus-visible {
    border-radius: 3px;
    outline: 3px solid color-mix(in srgb, var(--privacy-accent) 28%, transparent);
    outline-offset: 3px;
}

html[data-theme="light"] .shell--privacy-route {
    --privacy-canvas: #f3efe7;
    --privacy-surface: #fffdf9;
    --privacy-text: #20241f;
    --privacy-muted: #686b65;
    --privacy-accent: #89561f;
    --privacy-divider: rgba(32, 36, 31, 0.13);
}

@media (min-width: 760px) {
    .privacy-page .app-panel.app-panel--section {
        grid-template-columns: minmax(190px, 0.36fr) minmax(0, 1fr);
        column-gap: 42px;
        align-items: start;
    }

    .privacy-page .app-panel.app-panel--section > .app-panel__header {
        grid-column: 1;
        grid-row: 1 / span 20;
        position: sticky;
        top: 24px;
    }

    .privacy-page .app-panel.app-panel--section > :not(.app-panel__header) {
        grid-column: 2;
    }
}

@media (max-width: 390px) {
    .app-toggle-setting__state {
        display: none;
    }

    .privacy-page {
        padding-inline: 18px;
    }
}

/* Full-page editors share one semantic palette while respecting the active
   app theme. Neutral surfaces keep brand green and bronze reserved for meaning. */
.shell--editor-route .app-editor-route {
    --editor-canvas: #101010;
    --editor-surface: #161616;
    --editor-surface-subtle: #1c1c1c;
    --editor-control: #212121;
    --editor-control-focus: #272727;
    --editor-text: #f4efe7;
    --editor-muted: #aaa9a4;
    --editor-placeholder: #8f928c;
    --editor-border: rgba(255, 255, 255, 0.1);
    --editor-border-strong: rgba(223, 184, 117, 0.42);
    --panel: var(--editor-surface);
    --border: var(--editor-border);
    --text-muted: var(--editor-muted);
    color: var(--editor-text);
    background: var(--editor-canvas);
}

html[data-theme="light"] .shell--editor-route .app-editor-route {
    --editor-canvas: #f3efe7;
    --editor-surface: #fbf9f5;
    --editor-surface-subtle: #f3eee6;
    --editor-control: #fffdf9;
    --editor-control-focus: #ffffff;
    --editor-text: #20241f;
    --editor-muted: #646760;
    --editor-placeholder: #74776f;
    --editor-border: rgba(32, 36, 31, 0.14);
    --editor-border-strong: rgba(137, 86, 31, 0.45);
}

.shell--editor-route .app-editor-route .app-editor-page-surface {
    border-color: var(--editor-border);
    color: var(--editor-text);
    background: var(--editor-surface);
    box-shadow: none;
}

.shell--editor-route .app-editor-route .app-editor-page-surface :is(h2, h3, strong, .field__label) {
    color: inherit !important;
}

.shell--editor-route .app-editor-route .app-editor-page-surface :is(.app-info-modal__body, .channel-modal__body) {
    align-content: start;
    color: var(--editor-text);
    background: var(--editor-surface);
}

.shell--editor-route .app-editor-route .app-editor-page-surface .app-info-modal__body > * {
    align-self: start;
    width: 100%;
    min-width: 0;
}

.shell--editor-route .app-editor-route .app-editor-page-surface :is(
    .app-info-modal__header,
    .channel-modal__header,
    .app-confirm-modal__actions,
    .channel-composer__page-actions) {
    border-color: var(--editor-border);
    color: var(--editor-text);
    background: var(--editor-surface);
}

.shell--editor-route .app-editor-route .app-editor-page-surface :is(.app-info-modal__close, .channel-icon-button) {
    border-color: var(--editor-border);
    color: var(--editor-text);
    background: var(--editor-surface-subtle);
}

.shell--editor-route .app-editor-route .app-info-modal.app-editor-page-surface .field__input {
    border-color: var(--editor-border) !important;
    color: var(--editor-text) !important;
    background: var(--editor-control) !important;
    box-shadow: none !important;
}

.shell--editor-route .app-editor-route .app-info-modal.app-editor-page-surface .field__input:focus {
    border-color: var(--editor-border-strong) !important;
    background: var(--editor-control-focus) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--premium-bronze) 12%, transparent) !important;
}

.shell--editor-route .app-editor-route .app-editor-page-surface .field__input::placeholder {
    color: var(--editor-placeholder) !important;
    opacity: 1;
}

.shell--editor-route .app-editor-route .app-editor-page-surface .app-audience-picker {
    border-color: var(--editor-border);
    color: var(--editor-text);
    background: var(--editor-surface-subtle);
}

.shell--editor-route .app-editor-route .app-editor-page-surface .app-audience-picker :is(p, small, .app-audience-picker__empty) {
    color: var(--editor-muted);
}

.shell--editor-route .app-editor-route .app-editor-page-surface :is(
    .app-audience-picker__options,
    .app-audience-picker__selection-chip,
    .resource-editor-modal__file,
    .channel-manage-modal__color input) {
    border-color: var(--editor-border);
    color: var(--editor-text);
    background: var(--editor-control);
}

.shell--editor-route .app-editor-route .app-editor-page-surface :is(
    .channel-manage-modal__access-intro,
    .app-audience-picker__option,
    .channel-composer__page-actions) {
    border-color: var(--editor-border);
}

/* One shared mention tray for comments and the post editor.  Keep the exact
   comment-composer contract here so both surfaces remain visually identical. */
.channel-comment-composer__mentions {
    position: absolute;
    z-index: 33;
    right: max(14px, env(safe-area-inset-right));
    bottom: calc(100% + .45rem);
    left: max(14px, env(safe-area-inset-left));
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    max-height: 132px;
    overflow-y: auto;
    padding: .45rem;
    border: 1px solid var(--premium-border, rgba(255,255,255,.12));
    border-radius: 14px;
    background: var(--premium-surface-raised, #202420);
    box-shadow: var(--premium-shadow, 0 12px 32px rgba(0,0,0,.26));
}

.channel-comment-composer__mentions button {
    min-height: 32px;
    padding: .35rem .58rem;
    border: 0;
    border-radius: 9px;
    color: var(--premium-cream, #f4efe7);
    background: color-mix(in srgb, var(--premium-bronze, #b98a4b) 16%, transparent);
    font: inherit;
    font-size: .78rem;
    cursor: pointer;
}

.channel-comment-composer__mentions button:hover,
.channel-comment-composer__mentions button:focus-visible {
    background: color-mix(in srgb, var(--premium-bronze, #b98a4b) 28%, transparent);
}
.channel-comment-composer__mentions .channel-comment-composer__mention--channel {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    color: var(--premium-bronze-bright, #dfb875);
    background: color-mix(in srgb, var(--premium-bronze, #b98a4b) 22%, transparent);
}
.channel-comment-composer__mention--channel small { color: var(--premium-muted, #aaa); font-size: .66rem; }

/* Keyboard-open inbox composer contract.  This intentionally lives after the
   component bundle and outside the mobile breakpoint: Safari can report a
   wider visual viewport while its keyboard is raised, which previously let
   the component's block layout win and stacked the plus above the field. */
body.app-keyboard-open .inbox-page--thread-open .inbox-page__composer-row.app-thread-composer__row,
.inbox-page--thread-open .inbox-page__composer:focus-within .inbox-page__composer-row.app-thread-composer__row {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) !important;
    grid-template-rows: auto;
    align-items: center;
    gap: 6px;
}

body.app-keyboard-open .inbox-page--thread-open .inbox-page__composer-row.app-thread-composer__row > .inbox-page__tool:not([hidden]),
.inbox-page--thread-open .inbox-page__composer:focus-within .inbox-page__composer-row.app-thread-composer__row > .inbox-page__tool:not([hidden]) {
    position: relative;
    grid-column: 1;
    grid-row: 1;
    display: grid !important;
    justify-self: center;
    align-self: center;
    width: 44px;
    height: 44px;
}

/* The recording control and plus share this rail. Never let a layout override
   expose the inactive sibling simply because its `hidden` attribute is set. */
body.app-keyboard-open .inbox-page--thread-open .inbox-page__composer-row.app-thread-composer__row > .inbox-page__tool[hidden],
.inbox-page--thread-open .inbox-page__composer:focus-within .inbox-page__composer-row.app-thread-composer__row > .inbox-page__tool[hidden] {
    display: none !important;
}

body.app-keyboard-open .inbox-page--thread-open .inbox-page__composer-row.app-thread-composer__row > .inbox-page__composer-field,
.inbox-page--thread-open .inbox-page__composer:focus-within .inbox-page__composer-row.app-thread-composer__row > .inbox-page__composer-field {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}