:root {
    --cq-primary: #4e7cff;
    --cq-primary-light: #6b94ff;
    --cq-text: #2c3e50;
    --cq-muted: #8492a6;
    --cq-line: #edf0f6;
}

html.caiyun-chadan-route,
html.caiyun-chadan-route body {
    min-height: 100%;
    overflow-x: hidden;
    background: linear-gradient(135deg, #f0f5ff, #e8f0ff) !important;
}

html.caiyun-chadan-route body > *:not(#caiyun-chadan-app):not(#caiyun-global-announcement) {
    display: none !important;
}

#caiyun-chadan-app,
#caiyun-chadan-app * {
    box-sizing: border-box;
}

#caiyun-chadan-app {
    position: relative;
    z-index: 2147483000;
    min-height: 100vh;
    color: var(--cq-text);
    background:
        radial-gradient(circle at 12% 0, rgba(78, 124, 255, .12), transparent 28rem),
        linear-gradient(135deg, #f4f7ff, #edf3ff);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
}

#caiyun-chadan-app[hidden] { display: none !important; }

@property --caiyun-glass-x {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 50%;
}

.cq-shell {
    width: min(600px, calc(100% - 20px));
    margin: 0 auto;
    padding: 24px 0 125px;
}

.cq-card {
    margin-bottom: 18px;
    overflow: hidden;
    border: 1px solid rgba(78, 124, 255, .12);
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 8px 28px rgba(78, 104, 170, .09);
}

.cq-card-header {
    padding: 15px 17px;
    color: #fff;
    background: linear-gradient(135deg, var(--cq-primary), var(--cq-primary-light));
    font-size: 16px;
    font-weight: 700;
    text-align: center;
}

.cq-card-body { padding: 19px; }

.cq-search-form { display: block; }

.cq-input {
    width: 100%;
    height: 47px;
    padding: 0 18px;
    border: 1px solid #dce5f7;
    border-radius: 24px;
    outline: 0;
    color: var(--cq-text);
    background: #f7f9ff;
    font: inherit;
    font-size: 14px;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.cq-input::placeholder { color: #a3adbf; }

.cq-input:focus {
    border-color: #82a3ff;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(78, 124, 255, .1);
}

.cq-search-button {
    display: block;
    width: 50%;
    height: 43px;
    margin: 18px auto 0;
    border: 0;
    border-radius: 23px;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, var(--cq-primary), var(--cq-primary-light));
    box-shadow: 0 8px 19px rgba(78, 124, 255, .25);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    transition: transform .18s, box-shadow .18s, opacity .18s;
}

.cq-search-button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 11px 23px rgba(78, 124, 255, .3);
}

.cq-search-button:disabled { cursor: not-allowed; opacity: .6; }

.cq-notice {
    display: none;
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid #f0d8a9;
    border-radius: 12px;
    color: #8a611b;
    background: #fff9eb;
    font-size: 12px;
    line-height: 1.55;
}

.cq-notice[data-visible="true"] { display: block; }
.cq-notice[data-kind="error"] { border-color: #f0cbd0; color: #a23947; background: #fff4f6; }

.cq-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 0 28px;
    color: var(--cq-muted);
    font-size: 13px;
}

.cq-loading[data-visible="true"] { display: flex; }

.cq-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #d8e2f7;
    border-top-color: var(--cq-primary);
    border-radius: 50%;
    animation: cq-spin .7s linear infinite;
}

@keyframes cq-spin { to { transform: rotate(360deg); } }

.cq-orders { display: grid; gap: 16px; }
.cq-order { margin-bottom: 0; }

.cq-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 15px;
    text-align: left;
}

.cq-order-title {
    flex: 1;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cq-actions { display: flex; flex: 0 0 auto; gap: 7px; }

.cq-action {
    min-width: 51px;
    height: 29px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 16px;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    backdrop-filter: blur(8px);
    transition: background .18s, transform .18s;
}

.cq-action:hover:not(:disabled) { background: rgba(255, 255, 255, .27); transform: translateY(-1px); }
.cq-action:disabled { cursor: not-allowed; opacity: .58; }

.cq-order-body { padding: 16px 18px 18px; }

.cq-info-row {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    margin-bottom: 9px;
    color: #48556b;
    font-size: 13px;
    line-height: 1.55;
}

.cq-info-label { flex: 0 0 80px; color: #8b96a9; }
.cq-info-value { min-width: 0; overflow-wrap: anywhere; }

.cq-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 12px;
    color: #596579;
    background: #edf0f5;
    font-size: 11px;
}

.cq-status[data-tone="success"] { color: #08754d; background: #e6f8ef; }
.cq-status[data-tone="primary"] { color: #3565d5; background: #e8efff; }
.cq-status[data-tone="warning"] { color: #95610e; background: #fff3d8; }
.cq-status[data-tone="danger"] { color: #ad3747; background: #ffeaee; }

.cq-divider {
    height: 1px;
    margin: 14px 0;
    border: 0;
    background: var(--cq-line);
}

.cq-progress-row { align-items: center; margin-bottom: 0; }

.cq-progress-track {
    flex: 1;
    height: 16px;
    overflow: hidden;
    border-radius: 9px;
    background: #e9eef8;
}

.cq-progress-bar {
    min-width: 0;
    height: 100%;
    border-radius: inherit;
    color: #fff;
    background: linear-gradient(90deg, var(--cq-primary), var(--cq-primary-light));
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    transition: width .35s ease;
}

.cq-empty {
    display: none;
    margin-top: 28px;
    color: #929db0;
    text-align: center;
    font-size: 13px;
}

.cq-empty[data-visible="true"] { display: block; }
.cq-empty p { margin: 7px 0 0; }
.cq-empty-icon { width: 34px; height: 34px; color: #aab4c7; }

.cq-nav {
    --caiyun-nav-height: clamp(50px, 14vw, 60px);
    --caiyun-glass-x: 50%;
    position: fixed;
    bottom: calc(clamp(8px, 3vw, 16px) + env(safe-area-inset-bottom));
    left: 50%;
    z-index: 2147483001;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: min(560px, 92vw);
    height: var(--caiyun-nav-height);
    padding: clamp(4px, 1.2vw, 6px);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: calc(var(--caiyun-nav-height) / 2);
    background: linear-gradient(135deg, rgba(255, 255, 255, .66), rgba(244, 249, 255, .43) 52%, rgba(255, 255, 255, .58));
    box-shadow: 0 16px 38px rgba(41, 56, 100, .14), 0 4px 12px rgba(41, 56, 100, .07), inset 0 1px 0 rgba(255, 255, 255, .96), inset 0 -1px 0 rgba(108, 142, 220, .09);
    backdrop-filter: blur(clamp(17px, 5vw, 24px)) saturate(1.78) contrast(1.035);
    -webkit-backdrop-filter: blur(clamp(17px, 5vw, 24px)) saturate(1.78) contrast(1.035);
    transform: translateX(-50%);
    transition: --caiyun-glass-x .45s cubic-bezier(.16, 1, .3, 1);
    animation: cq-nav-in .55s cubic-bezier(.16, 1, .3, 1) both;
}

.cq-nav-button {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1px, .45vw, 3px);
    min-width: 0;
    margin: 0 clamp(1px, .4vw, 2px);
    border: 0;
    border-radius: 24px;
    cursor: pointer;
    color: #8892a6;
    background: transparent;
    font: inherit;
    transition: color .45s cubic-bezier(.2, .85, .25, 1), transform .45s cubic-bezier(.18, 1.35, .35, 1);
}

.cq-nav-button:hover { color: #4e7cff; }
.cq-nav-button:active { transform: scale(.95); }

.cq-nav-button[aria-current="page"] {
    color: #4e7cff;
    background: transparent;
    box-shadow: none;
}

.cq-nav-icon { width: clamp(18px, 5vw, 21px); height: clamp(18px, 5vw, 21px); }
.cq-nav-label { overflow: hidden; font-size: clamp(9px, 2.55vw, 10.5px); font-weight: 560; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.cq-nav-button[aria-current="page"] .cq-nav-label { font-weight: 720; }

.caiyun-nav-indicator {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .43), rgba(78, 124, 255, .18) 48%, rgba(107, 148, 255, .11));
    box-shadow: 0 7px 18px rgba(78, 124, 255, .17), inset 1px 1px 0 rgba(255, 255, 255, .9), inset -1px -1px 0 rgba(78, 124, 255, .08);
    backdrop-filter: blur(5px) saturate(1.35);
    -webkit-backdrop-filter: blur(5px) saturate(1.35);
    pointer-events: none;
    will-change: transform, border-radius;
}

.caiyun-nav-flight {
    position: fixed;
    z-index: 2147483646;
    display: block;
    border: 1px solid rgba(255, 255, 255, .66);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, .48), rgba(78, 124, 255, .24) 48%, rgba(107, 148, 255, .14));
    box-shadow: 0 8px 19px rgba(78, 124, 255, .2), inset 1px 1px 0 rgba(255, 255, 255, .9), inset -1px -1px 0 rgba(78, 124, 255, .08);
    backdrop-filter: blur(5px) saturate(1.35);
    -webkit-backdrop-filter: blur(5px) saturate(1.35);
    pointer-events: none;
    will-change: transform, border-radius;
}

html.caiyun-nav-is-flying .caiyun-nav-indicator { opacity: 0; }

.cq-nav::before,
html body .kawaii-tabbar:not(.cq-nav)::before {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at var(--caiyun-glass-x) 18%, rgba(255, 255, 255, .9) 0, rgba(255, 255, 255, .35) 13%, transparent 32%),
        radial-gradient(ellipse at calc(var(--caiyun-glass-x) - 10%) 115%, rgba(78, 124, 255, .14), transparent 38%),
        linear-gradient(105deg, transparent 8%, rgba(255, 255, 255, .25) 40%, rgba(255, 255, 255, .05) 61%, transparent 86%);
    opacity: .9;
    pointer-events: none;
    transition: background-position .45s cubic-bezier(.18, 1, .3, 1), opacity .25s ease;
}

.cq-nav::after,
html body .kawaii-tabbar:not(.cq-nav)::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 3 !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(160deg, rgba(255, 255, 255, .88), transparent 28%, transparent 70%, rgba(255, 255, 255, .38)) border-box !important;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2) !important;
    opacity: .56 !important;
    pointer-events: none !important;
    transform: none !important;
}

html.caiyun-nav-is-flying .cq-nav::before,
html.caiyun-nav-is-flying body .kawaii-tabbar:not(.cq-nav)::before {
    animation: caiyun-glass-flow .45s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes caiyun-glass-flow {
    0% { opacity: .72; filter: brightness(1); }
    45% { opacity: 1; filter: brightness(1.08); }
    100% { opacity: .9; filter: brightness(1); }
}

@keyframes cq-nav-in {
    from { opacity: 0; transform: translateX(-50%) translateY(20px) scale(.96); }
    to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.cq-toast {
    position: fixed;
    top: max(18px, env(safe-area-inset-top));
    left: 50%;
    z-index: 2147483002;
    max-width: min(90vw, 480px);
    padding: 10px 15px;
    border-radius: 12px;
    color: #fff;
    background: rgba(40, 51, 73, .94);
    box-shadow: 0 8px 24px rgba(28, 39, 69, .22);
    font-size: 12px;
    transform: translate(-50%, -16px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}

.cq-toast[data-visible="true"] { opacity: 1; transform: translate(-50%, 0); }

/* 云模板原生底部导航统一优化，不影响新查单页自己的同款导航。 */
html body .kawaii-tabbar:not(.cq-nav) {
    --caiyun-nav-height: clamp(50px, 14vw, 60px);
    --caiyun-glass-x: 50%;
    position: fixed !important;
    right: auto !important;
    bottom: calc(clamp(8px, 3vw, 16px) + env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    display: flex !important;
    width: min(560px, 92vw) !important;
    height: var(--caiyun-nav-height) !important;
    padding: clamp(4px, 1.2vw, 6px) !important;
    overflow: hidden !important;
    isolation: isolate !important;
    border: 1px solid rgba(255, 255, 255, .82) !important;
    border-radius: calc(var(--caiyun-nav-height) / 2) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, .66), rgba(244, 249, 255, .43) 52%, rgba(255, 255, 255, .58)) !important;
    box-shadow: 0 16px 38px rgba(41, 56, 100, .14), 0 4px 12px rgba(41, 56, 100, .07), inset 0 1px 0 rgba(255, 255, 255, .96), inset 0 -1px 0 rgba(108, 142, 220, .09) !important;
    backdrop-filter: blur(clamp(17px, 5vw, 24px)) saturate(1.78) contrast(1.035) !important;
    -webkit-backdrop-filter: blur(clamp(17px, 5vw, 24px)) saturate(1.78) contrast(1.035) !important;
    transform: translateX(-50%) !important;
    transition: --caiyun-glass-x .45s cubic-bezier(.16, 1, .3, 1) !important;
}

html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item {
    position: relative !important;
    z-index: 2 !important;
    min-width: 0 !important;
    margin: 0 clamp(1px, .4vw, 2px) !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    color: #8892a6 !important;
    background: transparent !important;
    opacity: 1 !important;
    transition: color .45s cubic-bezier(.2, .85, .25, 1), transform .45s cubic-bezier(.18, 1.35, .35, 1) !important;
}

html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item--active {
    color: #4e7cff !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item__icon {
    margin-bottom: 2px !important;
    color: inherit !important;
    font-size: clamp(18px, 5vw, 21px) !important;
    transition: transform .45s cubic-bezier(.18, 1.35, .35, 1) !important;
}

html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item--active .van-tabbar-item__icon {
    transform: scale(1.1) !important;
    text-shadow: none !important;
    animation: none !important;
}

html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item__text {
    color: inherit !important;
    font-size: clamp(9px, 2.55vw, 10.5px) !important;
    font-weight: 560 !important;
    line-height: 1.2 !important;
    text-shadow: none !important;
}

html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item--active .van-tabbar-item__text {
    color: inherit !important;
    font-weight: 720 !important;
    transform: none !important;
}

/* 分类切换：旧内容轻微淡出，接口完成后新内容平滑进入。 */
html body .category-item,
html body .active-indicator {
    transition: color .28s ease, background .28s ease, transform .28s cubic-bezier(.2, .8, .2, 1), opacity .28s ease !important;
}

html body .category-item.active { transform: translateX(2px); }

html body .goods-container {
    transition: opacity .28s ease, transform .32s cubic-bezier(.2, .8, .2, 1), filter .28s ease;
    will-change: opacity, transform;
}

html body .goods-container.caiyun-category-switching {
    opacity: .32;
    filter: blur(1px);
    transform: translate3d(10px, 0, 0);
    pointer-events: none;
}

html body .goods-container.caiyun-category-ready {
    animation: caiyun-category-in .4s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes caiyun-category-in {
    from { opacity: .32; transform: translate3d(10px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 520px) {
    .cq-shell { padding-top: 14px; }
    .cq-card { border-radius: 16px; }
    .cq-card-body { padding: 16px; }
    .cq-search-button { width: 58%; }
    .cq-order-header { padding: 11px 13px; }
    .cq-order-body { padding: 14px 15px 16px; }
}

@media (prefers-reduced-motion: reduce) {
    #caiyun-chadan-app *,
    #caiyun-chadan-app *::before,
    #caiyun-chadan-app *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* Match the cloud template's compact floating navigation on every route. */
html body .kawaii-tabbar:not(.cq-nav),
html body .cq-nav {
    width: 312px !important;
    max-width: calc(100vw - 30px) !important;
    height: 52px !important;
    bottom: calc(15px + env(safe-area-inset-bottom)) !important;
    padding: 0 !important;
    border-radius: 26px !important;
    background: rgba(255, 255, 255, .75) !important;
    border: 1px solid rgba(255, 255, 255, .6) !important;
    box-shadow: 0 8px 33px rgba(0, 0, 0, .1), 0 2px 8px rgba(0, 0, 0, .05), inset 0 1px 0 rgba(255, 255, 255, .8) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}

html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item,
html body .cq-nav .cq-nav-button {
    font-size: 12px !important;
    line-height: 12px !important;
}

html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item__icon {
    margin-bottom: 4px !important;
    font-size: 22px !important;
}

html body .cq-nav .cq-nav-icon { width: 22px !important; height: 22px !important; }
html body .cq-nav .cq-nav-label { font-size: 12px !important; line-height: 12px !important; }

@media (min-width: 751px) {
    html body .kawaii-tabbar:not(.cq-nav),
    html body .cq-nav {
        width: 300px !important;
        height: 50px !important;
        border-radius: 25px !important;
    }
}

/* Shared liquid-glass navigation: translucent on both the shell and the
   progress takeover, with a restrained highlight that does not alter layout. */
html body .kawaii-tabbar:not(.cq-nav),
html body .cq-nav {
    background: rgba(255,255,255,.60) !important;
    border-color: rgba(255,255,255,.72) !important;
    box-shadow: 0 10px 34px rgba(44,62,80,.13),
        0 2px 9px rgba(44,62,80,.07),
        inset 0 1px 0 rgba(255,255,255,.92),
        inset 0 -1px 0 rgba(255,255,255,.24) !important;
    backdrop-filter: blur(24px) saturate(185%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(185%) !important;
}
html body .kawaii-tabbar:not(.cq-nav)::before,
html body .cq-nav::before {
    background: linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,0)) !important;
    opacity: .72 !important;
}
html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item__text,
html body .cq-nav .cq-nav-label,
html body .cq-nav .cq-nav-button[aria-current="page"] .cq-nav-label {
    font-weight: 400 !important;
}

/* Progress uses the same already-mounted capsule; do not replay its entrance animation. */
html body .cq-nav { animation: none !important; }

/* Navigation labels keep one regular weight, including the active progress item. */
html body .cq-nav .cq-nav-label,
html body .cq-nav .cq-nav-button[aria-current="page"] .cq-nav-label {
    font-weight: 400 !important;
}

/* Active and inactive nav entries use identical icon boxes and label sizing. */
html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item__icon,
html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item--active .van-tabbar-item__icon {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    font-size: 22px !important;
    transform: none !important;
}
html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item__text {
    font-size: 12px !important;
    line-height: 12px !important;
    font-weight: 400 !important;
}
html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item--active .van-tabbar-item__text {
    font-weight: 400 !important;
}

/* The legacy active rule above uses a heavier weight; the cloud template
   keeps all five labels visually identical. */
html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item--active .van-tabbar-item__text {
    font-weight: 400 !important;
}

/* Cloud home cards are content-driven: short items stay at 104px and long
   descriptions are allowed to grow instead of adding a fixed five-pixel gap. */
html body .home-page .goods-card {
    height: auto !important;
    min-height: 104px !important;
}
html body .home-page .goods-name { margin-bottom: 0 !important; }
html body .home-page .goods-docs { margin-bottom: 5px !important; }

/* Progress route uses the same compact rhythm and isolated scroll as the shell. */
html.caiyun-chadan-route,html.caiyun-chadan-route body{overflow:hidden !important}
#caiyun-chadan-app{width:100vw;min-height:100vh;overflow:hidden}
#caiyun-chadan-app .cq-shell{width:min(600px,calc(100vw - 30px));max-height:calc(100vh - 8px);overflow-y:auto;margin:0 auto;padding:15px 0 84px;overscroll-behavior:contain}
#caiyun-chadan-app .cq-orders{gap:10px}
#caiyun-chadan-app .cq-order-header{padding:12px 14px;font-size:14px}
#caiyun-chadan-app .cq-order-body{padding:13px 14px 15px;font-size:13px;line-height:20px}
#caiyun-chadan-app .cq-info-row{min-height:24px}
#caiyun-chadan-app .cq-nav{position:fixed;left:50%;z-index:2147483001;transform:translateX(-50%);display:flex;align-items:stretch;justify-content:space-around}

/* The detail submit bar must be viewport-fixed; the page entrance animation
   otherwise creates a transformed containing block and pulls it upward. */
html body .detail-mode .page { animation: none !important; transform: none !important; }

/* Keep every active nav icon and label in the same fixed box. */
html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item__icon,
html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item--active .van-tabbar-item__icon {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    font-size: 22px !important;
    transform: none !important;
}
html body .kawaii-tabbar:not(.cq-nav) .van-tabbar-item__text {
    font-size: 12px !important;
    line-height: 12px !important;
}

/* Keep the shared five-item capsule fluid on phones and capped on desktop. */
html body .kawaii-tabbar:not(.cq-nav),
html body .cq-nav {
    width: 80.342vw !important;
    height: 13.676vw !important;
    max-width: 313.333px !important;
    max-height: 53.333px !important;
    min-width: 250px !important;
    min-height: 48px !important;
}

@media (min-width: 751px) {
    html body .kawaii-tabbar:not(.cq-nav),
    html body .cq-nav {
        width: 300px !important;
        height: 50px !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }
}