:root {
    --ink: #10202f;
    --muted: #637083;
    --paper: rgba(255, 255, 255, .82);
    --paper-solid: #ffffff;
    --shell: #eef7ff;
    --navy: #10202f;
    --blue: #315cff;
    --cyan: #00b8a9;
    --amber: #ffb020;
    --mint: #50e3c2;
    --soft-green: #e9f8ef;
    --soft-blue: #eef6ff;
    --soft-cream: #fff8eb;
    --line: rgba(16, 32, 47, 0.10);
    --shell-glass: rgba(255, 255, 255, .70);
    --shell-glass-strong: rgba(255, 255, 255, .82);
    --shadow-soft: 0 18px 55px rgba(49, 92, 255, .10);
    --shadow-card: 0 16px 44px rgba(16, 32, 47, .08);
    --radius-lg: 30px;
    --radius-md: 22px;
}

html, body {
    min-height: 100%;
    margin: 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 12% 8%, rgba(80, 227, 194, .20), transparent 30%),
        radial-gradient(circle at 86% 14%, rgba(49, 92, 255, .16), transparent 28%),
        linear-gradient(135deg, var(--shell) 0%, var(--soft-green) 48%, var(--soft-cream) 100%);
    color: var(--ink);
}

.boot-screen {
    min-height: 100vh;
    position: relative;
    overflow: hidden;
    display: grid;
    place-items: center;
    isolation: isolate;
    background:
        radial-gradient(circle at 18% 22%, rgba(0, 229, 176, .24), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(124, 58, 237, .26), transparent 30%),
        radial-gradient(circle at 50% 80%, rgba(49, 92, 255, .20), transparent 34%),
        linear-gradient(135deg, #030712 0%, #081124 48%, #0d1730 100%);
    color: white;
}

.boot-stars {
    position: absolute;
    inset: 0;
    opacity: .86;
    z-index: -3;
}

.boot-stars::before,
.boot-stars::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    box-shadow:
        7vw 11vh rgba(255,255,255,.55), 13vw 38vh rgba(80,227,194,.35), 18vw 72vh rgba(255,255,255,.42),
        24vw 19vh rgba(255,255,255,.78), 31vw 63vh rgba(124,58,237,.35), 37vw 8vh rgba(255,255,255,.50),
        43vw 84vh rgba(255,176,32,.36), 51vw 31vh rgba(255,255,255,.64), 59vw 68vh rgba(80,227,194,.44),
        66vw 14vh rgba(255,255,255,.46), 73vw 47vh rgba(255,255,255,.74), 81vw 78vh rgba(124,58,237,.38),
        88vw 26vh rgba(255,255,255,.52), 94vw 58vh rgba(80,227,194,.33), 3vw 91vh rgba(255,255,255,.47),
        15vw 6vh rgba(255,255,255,.32), 28vw 43vh rgba(255,255,255,.40), 46vw 5vh rgba(80,227,194,.28),
        62vw 92vh rgba(255,255,255,.36), 79vw 9vh rgba(255,176,32,.25), 97vw 88vh rgba(255,255,255,.38);
    animation: bootStarsDrift 28s linear infinite;
}

.boot-stars::after {
    width: 1px;
    height: 1px;
    opacity: .75;
    filter: blur(.15px);
    box-shadow:
        5vw 44vh rgba(255,255,255,.35), 11vw 83vh rgba(255,255,255,.55), 21vw 27vh rgba(80,227,194,.28),
        27vw 91vh rgba(255,255,255,.42), 33vw 13vh rgba(255,255,255,.32), 41vw 52vh rgba(255,176,32,.22),
        49vw 77vh rgba(255,255,255,.50), 56vw 18vh rgba(124,58,237,.24), 64vw 61vh rgba(255,255,255,.28),
        71vw 35vh rgba(80,227,194,.24), 77vw 93vh rgba(255,255,255,.46), 86vw 6vh rgba(255,255,255,.30),
        91vw 41vh rgba(255,255,255,.48), 98vw 69vh rgba(80,227,194,.22), 2vw 18vh rgba(255,255,255,.28),
        19vw 57vh rgba(124,58,237,.24), 35vw 73vh rgba(255,255,255,.36), 54vw 4vh rgba(255,255,255,.42),
        69vw 82vh rgba(255,176,32,.20), 83vw 55vh rgba(255,255,255,.33), 96vw 15vh rgba(255,255,255,.26);
    animation: bootStarsDrift 42s linear infinite reverse;
}

.boot-nebula {
    position: absolute;
    width: min(76vw, 920px);
    aspect-ratio: 1;
    border-radius: 999px;
    background: conic-gradient(from 90deg, rgba(49,92,255,.05), rgba(0,229,176,.28), rgba(124,58,237,.22), rgba(255,176,32,.12), rgba(49,92,255,.05));
    filter: blur(28px);
    animation: bootNebulaSpin 12s linear infinite;
    z-index: -2;
}

.boot-loader-card {
    width: min(420px, calc(100vw - 48px));
    min-height: 320px;
    display: grid;
    place-items: center;
    gap: 20px;
    padding: 42px 34px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 34px;
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.045));
    box-shadow: 0 28px 90px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(20px);
}

.boot-orbit {
    width: 132px;
    height: 132px;
    border-radius: 999px;
    position: relative;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: inset 0 0 36px rgba(49,92,255,.22), 0 0 70px rgba(0,229,176,.18);
    animation: bootPulse 2.8s ease-in-out infinite;
}

.boot-orbit::before,
.boot-orbit::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    border: 1px solid rgba(80,227,194,.32);
    border-top-color: rgba(255,255,255,.9);
    animation: bootOrbitSpin 3.4s linear infinite;
}

.boot-orbit::after {
    inset: 16px;
    border-color: rgba(124,58,237,.28);
    border-right-color: rgba(255,176,32,.95);
    animation-duration: 2.1s;
    animation-direction: reverse;
}

.boot-core {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 20px;
    font-size: 28px;
    font-weight: 900;
    letter-spacing: -.08em;
}

.boot-satellite {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #50E3C2;
    box-shadow: 0 0 24px rgba(80,227,194,.9);
}

.sat-a { top: 8px; left: 62px; }
.sat-b { right: 10px; top: 72px; background: #FFB020; box-shadow: 0 0 24px rgba(255,176,32,.9); }
.sat-c { left: 18px; bottom: 26px; background: #7C3AED; box-shadow: 0 0 24px rgba(124,58,237,.9); }

.boot-copy {
    display: grid;
    gap: 8px;
    text-align: center;
}

.boot-copy b {
    font-size: 26px;
    letter-spacing: -.05em;
}

.boot-copy span {
    font-family: "JetBrains Mono", monospace;
    color: rgba(255,255,255,.62);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.boot-progress {
    width: 220px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
}

.boot-progress i {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, #50E3C2, #315CFF, transparent);
    animation: bootProgress 1.45s ease-in-out infinite;
}

.boot-constellation {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .55;
}

.boot-node,
.boot-link {
    position: absolute;
    display: block;
}

.boot-node {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 0 24px rgba(255,255,255,.65);
    animation: bootTwinkle 2.8s ease-in-out infinite;
}

.node-a { left: 18%; top: 28%; }
.node-b { right: 22%; top: 24%; animation-delay: .4s; }
.node-c { left: 24%; bottom: 25%; animation-delay: .8s; }
.node-d { right: 18%; bottom: 30%; animation-delay: 1.2s; }

.boot-link {
    height: 1px;
    transform-origin: left center;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
}

.link-a { left: 18%; top: 28.5%; width: 62vw; transform: rotate(-4deg); }
.link-b { left: 24%; bottom: 25%; width: 56vw; transform: rotate(-18deg); }
.link-c { right: 18%; bottom: 30%; width: 48vw; transform: rotate(205deg); }

@keyframes bootStarsDrift { to { transform: translate3d(3vw, -4vh, 0); } }
@keyframes bootNebulaSpin { to { transform: rotate(360deg); } }
@keyframes bootOrbitSpin { to { transform: rotate(360deg); } }
@keyframes bootPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes bootProgress { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes bootTwinkle { 0%,100% { opacity: .45; transform: scale(.82); } 50% { opacity: 1; transform: scale(1.18); } }

.analy-shell {
    background:
        radial-gradient(circle at 16% 10%, rgba(80, 227, 194, .18), transparent 28%),
        radial-gradient(circle at 90% 18%, rgba(49, 92, 255, .14), transparent 28%),
        linear-gradient(135deg, var(--shell) 0%, var(--soft-green) 52%, var(--soft-cream) 100%);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.analy-drawer {
    width: 280px !important;
    border-right: 0 !important;
    color: #172033;
    background: var(--shell-glass) !important;
    box-shadow: 18px 0 60px rgba(49, 92, 255, .08);
}

.mud-drawer--open.analy-drawer {
    backdrop-filter: blur(24px);
}

.brand-lockup { display: flex; align-items: center; gap: 12px; padding: 28px 22px 16px; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 18px; color: white; font-weight: 900; }
.brand-name { font-weight: 900; letter-spacing: -0.05em; color: var(--ink); }
.brand-caption, .topbar-label, .panel-kicker, .eyebrow, .form-kicker { font-family: "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--muted); }
.analy-main { padding-left: 280px; display: flex; flex-direction: column; flex: 1; min-height: 0; }
.analy-main-full { padding-left: 0 !important; }
.tenant-topbar { min-height: 76px; display: flex; align-items: center; gap: 16px; padding: 0 32px; border-bottom: 1px solid var(--line); border-radius: 0 !important; position: sticky; top: 0; z-index: 4; background: var(--shell-glass-strong); backdrop-filter: blur(20px); }
.topbar-tenant { font-size: 20px; font-weight: 850; letter-spacing: -0.035em; }
.page-stage { padding: 30px 32px 48px; flex: 1; display: flex; flex-direction: column; }

.login-orbit { min-height: 100vh; background: #081124; color: white; padding: 0 !important; }
.login-grid { min-height: 100vh; }
.login-visual-panel { position: relative; overflow: hidden; min-height: 420px; padding: 72px; display: flex; align-items: flex-end; background: radial-gradient(circle at 30% 20%, rgba(0, 184, 169, .22), transparent 34%), radial-gradient(circle at 80% 70%, rgba(49, 92, 255, .28), transparent 36%), #081124; }
.login-copy { position: relative; max-width: 720px; z-index: 2; }
.login-copy h1 { font-size: clamp(42px, 6vw, 86px); line-height: .92; margin: 16px 0 20px; max-width: 780px; color: white; }
.login-copy p { color: rgba(255, 255, 255, .72); max-width: 560px; font-size: 18px; }
.orbit-map { position: absolute; inset: 0; opacity: .9; }
.orbit-line { position: absolute; border: 1px solid rgba(255, 255, 255, .12); border-radius: 999px; transform: rotate(-18deg); }
.orbit-line-a { width: 620px; height: 280px; left: 12%; top: 18%; }
.orbit-line-b { width: 820px; height: 420px; right: -12%; top: 8%; }
.orbit-dot { position: absolute; width: 13px; height: 13px; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 26px rgba(0, 184, 169, .8); }
.dot-a { left: 22%; top: 32%; }
.dot-b { right: 23%; top: 24%; background: var(--amber); }
.dot-c { right: 16%; bottom: 22%; background: var(--blue); }
.login-proof-strip { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.login-proof-strip div { border: 1px solid rgba(255, 255, 255, .12); border-radius: 18px; padding: 14px 18px; background: rgba(255, 255, 255, .06); backdrop-filter: blur(12px); }
.login-proof-strip b, .login-proof-strip span { display: block; }
.login-proof-strip span { color: rgba(255,255,255,.58); font-size: 13px; margin-top: 3px; }
.login-form-panel { background: #f7f8fc; color: var(--ink); display: grid; place-items: center; padding: 32px; }
.login-card { width: min(100%, 460px); padding: 38px; border-radius: 30px !important; border: 1px solid var(--line); background: white; }
.login-button { min-height: 52px; border-radius: 16px !important; }
.login-quick-actions { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line, #EAECF0); }
.login-account-hints { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--muted, #667085); text-align: center; }

.workspace-hero { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 18px 0 30px; flex-wrap: wrap; }
.workspace-hero h1 { font-size: clamp(34px, 4vw, 56px); line-height: .98; margin: 8px 0; letter-spacing: -0.065em; color: var(--ink); }
.workspace-hero p { max-width: 720px; color: var(--muted); font-size: 16px; }
.metric-card, .panel-card { padding: 24px; }
.analy-card { padding: 24px; }

.metric-card,
.panel-card,
.analy-card,
.analy-metric,
.preview-card,
.preview-topbar,
.share-card {
    border: 1px solid rgba(16, 32, 47, .08);
    border-radius: var(--radius-lg, 26px) !important;
    background: rgba(255,255,255,.78);
    box-shadow: 0 12px 34px rgba(16, 32, 47, .06);
    backdrop-filter: blur(12px);
}

.metric-card,
.analy-metric {
    position: relative;
    overflow: hidden;
}

.metric-card::before,
.analy-metric::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), var(--mint, var(--cyan)), var(--amber));
}
.metric-card-blue { background: linear-gradient(135deg, rgba(49, 92, 255, .12), #fff 58%); }
.metric-card-teal { background: linear-gradient(135deg, rgba(0, 184, 169, .14), #fff 58%); }
.metric-label { color: var(--muted); font-weight: 700; }
.metric-value {
    font-size: 38px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -0.06em;
    margin-top: 16px;
    color: var(--metric-custom-color, var(--ink));
}
.metric-value span { font-size: 18px; color: var(--muted); letter-spacing: -0.02em; margin-left: 4px; }
.metric-hint { margin-top: 16px; color: var(--muted); font-size: 13px; }
.metric-field-name {
    margin-top: 12px;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
}
.panel-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.panel-title-row h2, .panel-card h2 { margin: 4px 0 0; font-size: 24px; }

.source-stack { display: grid; gap: 12px; margin-top: 20px; }
.source-item { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.68); box-shadow: 0 6px 18px rgba(49,92,255,.045); }
.source-glyph { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 16%, transparent), color-mix(in srgb, var(--mint) 20%, transparent)); color: var(--blue); font-weight: 900; }
.source-item b, .source-item span { display: block; }
.source-item span { color: var(--muted); font-size: 13px; margin-top: 2px; }

.designer-shell { flex: 1; display: flex; flex-direction: column; }
.designer-toolbar { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border: 1px solid rgba(255,255,255,.72); border-radius: 30px !important; margin-bottom: 16px; background: rgba(255,255,255,.74); box-shadow: var(--shadow-card); backdrop-filter: blur(18px); }
.designer-grid { display: grid; grid-template-columns: 260px minmax(520px, 1fr) 340px; grid-template-rows: 1fr; gap: 16px; flex: 1; min-height: 0; }
.designer-panel { border: 1px solid rgba(255,255,255,.72); border-radius: 30px !important; background: rgba(255,255,255,.72); box-shadow: var(--shadow-card); backdrop-filter: blur(18px); padding: 18px; overflow-y: auto; display: flex; flex-direction: column; }
.palette-item { display: flex; align-items: center; gap: 12px; border: 1px solid rgba(16,32,47,.08); border-radius: 20px; padding: 14px; margin-bottom: 10px; cursor: grab; background: rgba(255,255,255,.66); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.palette-item:hover { transform: translateY(-2px); border-color: rgba(49, 92, 255, .25); box-shadow: 0 16px 34px rgba(49, 92, 255, .12); }
.palette-item b, .palette-item span { display: block; }
.palette-item span { color: var(--muted); font-size: 12px; margin-top: 2px; }
.canvas-stage { padding: 0; position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 0; background: radial-gradient(circle at 14% 18%, rgba(80,227,194,.18), transparent 28%), radial-gradient(circle at 86% 12%, rgba(49,92,255,.16), transparent 30%), linear-gradient(135deg, rgba(255,255,255,.64), rgba(238,247,255,.72)); background-size: auto; }
.canvas-stage::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(49,92,255,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(49,92,255,.055) 1px, transparent 1px); background-size: 86px 72px; mask-image: radial-gradient(circle at center, black, transparent 86%); pointer-events: none; }
.bi-designer-canvas { position: relative; overflow: auto; border-radius: 26px; flex: 1; min-height: 0; }

.preview-shell { max-width: 1440px; margin: 0 auto; }
.preview-topbar { display: flex; align-items: center; gap: 16px; padding: 20px 24px; }
.preview-topbar h1 { margin: 0; font-size: 28px; }
.preview-card { padding: 24px; min-height: 220px; }
.preview-card[style*="min-height"] {
    /* Let inline style from widget control min-height */
    min-height: auto;
}
/* Force smaller height for metric/filter widgets regardless of saved height */
.preview-card.preview-card:has(.metric-preview-card-inline),
.preview-card.preview-card:has(.mud-select),
.preview-card.preview-card:has(.filter-range) {
    min-height: auto !important;
    height: auto !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}
/* Override ANY inline min-height with brute force */
html body .preview-card.preview-card:has(.metric-preview-card-inline),
html body .preview-card.preview-card:has(.mud-select) {
    min-height: auto !important;
    height: auto !important;
    align-self: start !important;
}

/* For compact widgets (metric/filter), reduce padding to make container tighter */
.preview-card[style*="min-height: 80px"] {
    padding-top: 16px;
    padding-bottom: 16px;
}
.preview-grid-real { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: stretch; }

/* On PC, when widget should span 6 columns (50% width), guarantee it */
@media (min-width: 961px) {
    /* Higher specificity to guarantee override of inline style */
    .preview-grid-real .preview-card[style*="grid-column: span 6"],
    .preview-grid-real .preview-card[style*="span 6"] {
        grid-column: span 6 !important;
        width: auto !important;
    }
}

.plan-card { border: 1px solid var(--line); border-radius: 30px !important; padding: 28px; min-height: 440px; height: 100%; position: relative; overflow: hidden; display: flex; flex-direction: column; }
.plan-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--plan-accent); }
.plan-card.is-current { box-shadow: 0 22px 60px rgba(49, 92, 255, .16); border-color: rgba(49, 92, 255, .35); }
.plan-card h2 { margin: 8px 0 12px; font-size: 28px; }
.plan-price { font-size: 34px; font-weight: 900; letter-spacing: -0.06em; margin-bottom: 22px; }
.plan-card ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; flex: 1; align-content: start; }
.plan-card li { display: flex; align-items: center; gap: 9px; color: var(--muted); }

.floating-create-panel { position: fixed; right: 32px; top: 96px; width: min(520px, calc(100vw - 48px)); max-height: calc(100vh - 130px); overflow: auto; padding: 24px; border-radius: 28px !important; border: 1px solid var(--line); z-index: 20; }

.ai-input-bar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border: 1px solid var(--line); border-radius: 18px !important; margin-bottom: 10px; background: var(--paper); }
.ai-text-field { flex: 1; }
.series-card { padding: 16px; border: 1px solid var(--line); border-radius: 14px !important; background: #fbfcff; }
.series-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.drill-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 8px; align-items: center; }
.filter-range { display: grid; gap: 12px; }
.analy-metric { padding: 22px 24px; height: 100%; display: flex; flex-direction: column; }
.analy-metric-value { font-size: 34px; font-weight: 900; line-height: 1; letter-spacing: -0.06em; margin-top: 12px; }
.analy-metric-value span { font-size: 16px; color: var(--muted); font-weight: 500; margin-left: 3px; }
.analy-kicker { font-family: "JetBrains Mono", monospace; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; color: var(--muted); }
.analy-hero { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding: 18px 0 30px; flex-wrap: wrap; }
.analy-hero h1 { font-size: clamp(28px, 3vw, 42px); line-height: 1.08; margin: 8px 0 6px; letter-spacing: -0.065em; color: #10202f; }
.analy-hero p { max-width: 620px; color: var(--muted); font-size: 15px; }
.analy-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 16px; flex-wrap: wrap; }
.analy-empty-wrapper { min-height: 280px; display: grid; place-items: center; text-align: center; padding: 40px 24px; border-radius: 20px !important; border: 1px solid var(--line); }
.analy-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; }
.analy-table th { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.analy-table tbody tr {
    transition: transform .16s ease;
}

.analy-table tbody tr:hover {
    background: rgba(49, 92, 255, .055);
}

.analy-table tbody tr:nth-child(even) {
    background: rgba(49, 92, 255, .026);
}

.analy-table tbody tr:nth-child(even):hover {
    background: rgba(49, 92, 255, .055);
}
.chart-canvas { width: 100%; height: 280px; }
.share-card { width: min(100%, 560px); padding: 32px; }

#blazor-error-ui { background: #fff3cd; bottom: 0; display: none; left: 0; padding: .75rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

@media (max-width: 960px) {
    .tenant-topbar, .page-stage { padding-left: 18px; padding-right: 18px; }
    .workspace-hero, .analy-hero { align-items: flex-start; flex-direction: column; padding-top: 8px; }
    .login-visual-panel { padding: 38px 28px; }
    .login-form-panel { padding: 24px; }

    /* Auto-responsive for preview/share on tablet */
    .preview-grid-real {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 12px;
    }
    .preview-card {
        grid-column: span 3 !important;
    }
    .preview-card[style*="span 6"],
    .preview-card[style*="span 12"] {
        grid-column: span 6 !important;
    }
    .chart-canvas {
        height: 240px;
    }
    .share-preview-shell,
    .preview-shell {
        padding: 16px;
    }
}

@media (max-width: 600px) {
    /* Auto-responsive for preview/share on phone */
    .preview-grid-real {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 0 8px 24px;
    }
    .preview-card,
    .preview-card.real-widget {
        padding: 16px;
        border-radius: 20px !important;
        /* Force EVERY widget to span the entire width on phone - override inline style */
        grid-column: 1 / -1 !important;
    }
    .preview-card .panel-title-row h2 {
        font-size: 18px;
    }
    .preview-topbar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 14px;
    }
    .preview-topbar h1 {
        font-size: 20px;
    }
    .preview-topbar .mud-button {
        font-size: 13px;
        padding: 4px 12px;
    }
    .preview-topbar .mud-chip {
        display: none;
    }
    .preview-shell {
        padding: 12px 8px;
    }
    .share-card {
        width: calc(100vw - 32px);
        margin: 16px;
        padding: 24px 16px;
        border-radius: 20px !important;
    }
    .share-card h1 {
        font-size: 22px;
    }
    .share-report-view .preview-grid-real {
        margin-top: 8px !important;
    }
    .chart-canvas {
        height: 220px !important;
    }
    .share-watermark {
        font-size: clamp(32px, 8vw, 64px);
        letter-spacing: 4px;
    }
    .metric-card,
    .panel-card,
    .analy-metric {
        padding: 16px;
    }
}

/* ---- Device mode frame classes ---- */
.device-tablet .designer-grid,
.device-phone .designer-grid {
    grid-template-columns: 220px 1fr;
}
.device-tablet .config-panel,
.device-phone .config-panel {
    display: none;
}
.device-tablet .bi-designer-canvas {
    transform: scale(0.75);
    transform-origin: top left;
    width: 133.33%;
    height: 133.33%;
}
.device-phone .bi-designer-canvas {
    transform: scale(0.7);
    transform-origin: top left;
    width: 142.86%;
    height: 142.86%;
}
.device-tablet .canvas-stage,
.device-phone .canvas-stage {
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

/* Device mode: tablet compact */
.device-tablet .analy-main { padding-left: 280px; }
.device-tablet .analy-drawer { width: 240px !important; }

/* Device mode: phone - full screen, no persistent sidebar */
.device-phone .analy-main { padding-left: 0; }
.device-phone .mud-drawer:not(.mud-drawer--open) {
    transform: translateX(-100%) !important;
    visibility: hidden;
}
.device-phone .tenant-topbar { min-height: 56px; padding: 0 12px; }
.device-phone .page-stage { padding: 16px 12px 32px; }
.device-phone .workspace-hero,
.device-phone .analy-hero { flex-direction: column; align-items: flex-start; gap: 12px; padding: 0 0 16px; }
.device-phone .workspace-hero h1,
.device-phone .analy-hero h1 { font-size: clamp(24px, 6vw, 32px); }
.device-phone .designer-grid { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
.device-phone .component-palette { display: none; }
.device-phone .config-panel { display: none; }
.device-phone .designer-toolbar { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
.device-phone .preview-grid-real {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 0 12px 24px;
}
.device-phone .preview-card,
.device-phone .preview-card.real-widget {
    padding: 16px;
    border-radius: 20px !important;
    /* Force EVERY widget to span ALL columns on phone - override inline style */
    grid-column: 1 / -1 !important;
}
.device-phone .preview-card .panel-title-row h2 {
    font-size: 15px;
}
.device-phone .preview-topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px;
}
.device-phone .preview-topbar h1 {
    font-size: 18px;
}
.device-phone .preview-topbar .mud-button {
    font-size: 13px;
    padding: 4px 12px;
}
.device-phone .preview-topbar .mud-chip {
    display: none;
}
.device-phone .preview-shell {
    padding: 0;
}
.device-phone .share-card {
    width: calc(100vw - 32px);
    margin: 16px;
    padding: 24px 16px;
    border-radius: 20px !important;
}
.device-phone .share-card h1 {
    font-size: 20px;
}
.device-phone .share-report-view .preview-grid-real {
    margin-top: 8px !important;
}
.device-phone .share-preview-shell {
    padding: 16px 8px !important;
}
.device-phone .share-report-view {
    padding: 0 !important;
}
.device-phone .chart-canvas {
    height: 220px !important;
}
.device-phone .analy-table { font-size: 12px; }
.device-phone .plan-card { min-height: auto; }
.device-phone .metric-card,
.device-phone .panel-card,
.device-phone .analy-metric { padding: 16px; }
.device-phone .source-stack { gap: 8px; }
.device-phone .floating-create-panel { right: 8px; top: 72px; width: calc(100vw - 16px); padding: 16px; }
.device-phone .share-watermark {
    font-size: clamp(32px, 8vw, 64px);
    letter-spacing: 4px;
}

/* ---- Tablet responsive for preview/share pages ---- */
.device-tablet .preview-grid-real {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
}
.device-tablet .preview-card,
.device-tablet .preview-card.real-widget {
    /* Default to 3 columns on tablet - override inline style */
    grid-column: span 3 !important;
}
/* Wide widgets still span the entire width */
.device-tablet .preview-card.real-widget[data-width="6"],
.device-tablet .preview-card.real-widget[data-width="12"],
.device-tablet .preview-card[style*="span 6"],
.device-tablet .preview-card[style*="span 12"] {
    grid-column: span 6 !important;
}
.device-tablet .preview-topbar {
    padding: 16px 20px;
}
.device-tablet .preview-topbar h1 {
    font-size: 24px;
}
.device-tablet .share-preview-shell {
    padding: 16px;
}
.device-tablet .chart-canvas {
    height: 240px;
}

/* ── 手机模式：FAB + 底部弹出层 ── */
.device-phone .phone-fab-container {
    position: fixed;
    bottom: 24px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 100;
}

.device-phone .phone-sheet-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 150;
    animation: phone-fade-in 0.2s ease;
}

@keyframes phone-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.device-phone .phone-bottom-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 70vh;
    border-radius: 16px 16px 0 0;
    z-index: 200;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.device-phone .phone-bottom-sheet.open {
    transform: translateY(0);
}

.device-phone .phone-bottom-sheet.config {
    max-height: 80vh;
}

.device-phone .phone-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    flex-shrink: 0;
    position: relative;
}

.device-phone .phone-sheet-handle {
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: rgba(0,0,0,0.15);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 8px;
}

.device-phone .phone-sheet-header span {
    font-weight: 600;
    font-size: 16px;
}

.device-phone .phone-sheet-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    -webkit-overflow-scrolling: touch;
}

.device-phone .phone-sheet-body.palette {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.device-phone .phone-palette-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.device-phone .phone-palette-item:active {
    background: rgba(0,0,0,0.05);
}

.device-phone .phone-palette-item div {
    display: flex;
    flex-direction: column;
}

.device-phone .phone-palette-item b {
    font-size: 14px;
}

.device-phone .phone-palette-item span {
    font-size: 12px;
    opacity: 0.6;
}

.device-phone .phone-fab-container .mud-fab:disabled {
    opacity: 0.35;
}

/* Device mode option highlight */
.device-option { background: rgba(255,255,255,.82); backdrop-filter: blur(10px); }
.device-option-active { border-color: var(--blue) !important; background: rgba(49, 92, 255, .08) !important; }

/* ---- Designer canvas widget styles ---- */
.bi-canvas-widget {
    position: absolute;
    min-width: 172px;
    min-height: 144px;
    border-radius: 22px;
    border: 1px solid rgba(18, 24, 38, .10);
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 50px rgba(16, 24, 40, .08);
    will-change: transform;
    contain: layout paint style;
    overflow: hidden;
    touch-action: none;
}

.bi-canvas-widget.is-selected {
    border-color: var(--blue);
    box-shadow: 0 0 0 3px rgba(49, 92, 255, .12), 0 18px 50px rgba(16, 24, 40, .10);
}

.widget-chrome {
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border-bottom: 1px solid var(--line);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.widget-plot {
    height: calc(100% - 42px);
    padding: 12px;
}

.metric-preview {
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
}

.metric-preview b {
    display: block;
    font-size: 34px;
    letter-spacing: -0.06em;
    color: var(--metric-custom-color, var(--ink));
}

.metric-preview span,
.filter-preview,
.plot-placeholder {
    color: var(--muted);
}

.filter-preview,
.plot-placeholder {
    height: 100%;
    display: grid;
    place-items: center;
    border: 1px dashed rgba(49,92,255,.25);
    border-radius: 16px;
}

/* ---- DataRaw table ---- */
.dataraw-table-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
}

.dataraw-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px;
}

.dataraw-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dataraw-page-size-select {
    min-width: 90px;
}

.dataraw-table-scroll {
    overflow-x: auto;
    flex: 1;
}

.dataraw-table-scroll tbody tr:nth-child(even) {
    background: rgba(49, 92, 255, 0.035);
}

.preview-shell.style-carbon .dataraw-table-scroll tbody tr:nth-child(even),
.preview-shell.style-midnight .dataraw-table-scroll tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.045);
}

.dataraw-info {
    font-size: 13px;
    color: var(--muted);
}

.dataraw-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dataraw-drillable {
    cursor: pointer;
}

.dataraw-field-select {
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    border: 1px solid rgba(18, 24, 38, 0.12);
    border-radius: 8px;
    font-size: 13px;
    background: white;
    color: #121826;
}

/* ---- Brand style themes ---- */
.preview-shell,
.designer-shell {
    --brand-chart-1: var(--brand-primary);
    --brand-chart-2: var(--brand-accent);
    --brand-chart-3: #FFB020;
    --brand-chart-4: #FF5B5B;
    --brand-chart-5: #10B981;
    --brand-chart-6: #7C3AED;
}

/* Shell backgrounds - all 6 chart colors for every theme */
.style-orbit { --brand-primary: #315CFF; --brand-accent: #00B8A9; --brand-bg: #F7F8FC; --brand-surface: #FFFFFF; --brand-chart-3: #FFB020; --brand-chart-4: #FF5B5B; --brand-chart-5: #10B981; --brand-chart-6: #7C3AED; }
.style-executive { --brand-primary: #1D2939; --brand-accent: #667085; --brand-bg: #F8FAFC; --brand-surface: #FFFFFF; --brand-chart-3: #F59E0B; --brand-chart-4: #EF4444; --brand-chart-5: #10B981; --brand-chart-6: #7C3AED; }
.style-carbon { --brand-primary: #7C3AED; --brand-accent: #00E5B0; --brand-bg: #070B16; --brand-surface: #111827; --brand-chart-3: #F59E0B; --brand-chart-4: #EF4444; --brand-chart-5: #10B981; --brand-chart-6: #3B82F6; }
.style-amber { --brand-primary: #D97706; --brand-accent: #EF4444; --brand-bg: #FFF8EB; --brand-surface: #FFFFFF; --brand-chart-3: #315CFF; --brand-chart-4: #10B981; --brand-chart-5: #F59E0B; --brand-chart-6: #7C3AED; }
.style-ocean { --brand-primary: #0E5A8A; --brand-accent: #50E3C2; --brand-bg: #F0F5FA; --brand-surface: #FFFFFF; --brand-chart-3: #F59E0B; --brand-chart-4: #EF4444; --brand-chart-5: #10B981; --brand-chart-6: #7C3AED; }
.style-forest { --brand-primary: #2D6A4F; --brand-accent: #95D5B2; --brand-bg: #F4F9F4; --brand-surface: #FFFFFF; --brand-chart-3: #D97706; --brand-chart-4: #E07A5F; --brand-chart-5: #6C5CE7; --brand-chart-6: #10B981; }
.style-sunset { --brand-primary: #E07A5F; --brand-accent: #81B29A; --brand-bg: #FDF6F0; --brand-surface: #FFFFFF; --brand-chart-3: #6C5CE7; --brand-chart-4: #E07A5F; --brand-chart-5: #00B8A9; --brand-chart-6: #F59E0B; }
.style-grape { --brand-primary: #6C5CE7; --brand-accent: #FD79A8; --brand-bg: #F8F7FF; --brand-surface: #FFFFFF; --brand-chart-3: #FDCB6E; --brand-chart-4: #00B894; --brand-chart-5: #315CFF; --brand-chart-6: #E07A5F; }
.style-midnight { --brand-primary: #1B2838; --brand-accent: #F0C27F; --brand-bg: #0A0E17; --brand-surface: #1A2332; --brand-chart-3: #50E3C2; --brand-chart-4: #FF5B5B; --brand-chart-5: #6C5CE7; --brand-chart-6: #F59E0B; }

/* Preview page - apply brand background to ALL styles */
.preview-shell,
.share-preview-shell {
    min-height: 100vh;
    padding: 22px;
    background:
        radial-gradient(circle at 15% 8%, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent 30%),
        radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 32%),
        var(--brand-bg);
    box-shadow: 0 0 0 100vmax var(--brand-bg);
    clip-path: inset(0 -100vmax);
}

.preview-shell .preview-card,
.preview-shell .preview-topbar,
.share-preview-shell .share-card {
    background: color-mix(in srgb, var(--brand-surface) 88%, transparent) !important;
    border-color: color-mix(in srgb, var(--brand-primary) 12%, transparent) !important;
    box-shadow: 0 18px 50px rgba(16,32,47,.08);
}

.preview-shell.style-carbon,
.preview-shell.style-midnight,
.share-preview-shell.style-carbon,
.share-preview-shell.style-midnight {
    color: #E5E7EB;
}

.preview-shell.style-carbon .preview-card,
.preview-shell.style-midnight .preview-card,
.preview-shell.style-carbon .preview-topbar,
.preview-shell.style-midnight .preview-topbar,
.share-preview-shell.style-carbon .share-card,
.share-preview-shell.style-midnight .share-card {
    border-color: rgba(255,255,255,.1) !important;
}

.preview-shell.style-carbon .panel-kicker,
.preview-shell.style-midnight .panel-kicker,
.share-preview-shell.style-carbon .panel-kicker,
.share-preview-shell.style-midnight .panel-kicker {
    color: rgba(255,255,255,.58);
}

.preview-shell.style-carbon .metric-preview span,
.preview-shell.style-midnight .metric-preview span,
.preview-shell.style-carbon .filter-preview,
.preview-shell.style-midnight .filter-preview,
.preview-shell.style-carbon .plot-placeholder,
.preview-shell.style-midnight .plot-placeholder,
.preview-shell.style-carbon .dataraw-info,
.preview-shell.style-midnight .dataraw-info,
.preview-shell.style-carbon .metric-hint,
.preview-shell.style-midnight .metric-hint,
.preview-shell.style-carbon .analy-metric-value span,
.preview-shell.style-midnight .analy-metric-value span,
.share-preview-shell.style-carbon .metric-preview span,
.share-preview-shell.style-midnight .metric-preview span,
.share-preview-shell.style-carbon .filter-preview,
.share-preview-shell.style-midnight .filter-preview,
.share-preview-shell.style-carbon .plot-placeholder,
.share-preview-shell.style-midnight .plot-placeholder {
    color: rgba(255,255,255,.68);
}

/* 分享页水印 */
.share-watermark {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(48px, 10vw, 120px);
    font-weight: 700;
    color: rgba(0,0,0,.04);
    transform: rotate(-30deg);
    user-select: none;
    white-space: nowrap;
    letter-spacing: 8px;
}
.style-midnight .share-watermark,
.style-carbon .share-watermark {
    color: rgba(255,255,255,.04);
}

/* 设置页 - 成员管理 */
.member-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #EAECF0);
}
.member-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--primary, #315CFF);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.member-info {
    flex: 1;
    min-width: 0;
}
.member-info b {
    display: block;
    font-size: 14px;
}
.member-info span {
    display: block;
    font-size: 12px;
    color: var(--muted, #667085);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 设置页 - 用量汇总 */
.usage-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.usage-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border, #EAECF0);
    font-size: 14px;
}
.usage-row:last-child {
    border-bottom: none;
}
.usage-row span:first-child {
    color: var(--muted, #667085);
}
.usage-row span:last-child {
    font-weight: 600;
}

/* 邀请表单 */
.invite-form {
    padding: 16px;
    border-radius: 12px;
    background: var(--surface-secondary, #F9FAFB);
    border: 1px solid var(--border, #EAECF0);
}

/* ===== 骨架屏 ===== */
@keyframes skeleton-pulse {
    0% { opacity: .6; }
    50% { opacity: 1; }
    100% { opacity: .6; }
}
.skeleton-page { animation: skeleton-pulse 1.6s ease-in-out infinite; }
.skeleton-hero { margin-bottom: 32px; }
.skeleton-line {
    height: 14px;
    border-radius: 8px;
    background: linear-gradient(90deg, #EAECF0 25%, #F2F4F7 50%, #EAECF0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    margin-bottom: 12px;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-line-xs { width: 80px; height: 10px; }
.skeleton-line-sm { width: 180px; height: 12px; }
.skeleton-line-md { height: 16px; }
.skeleton-line-lg { height: 28px; margin-bottom: 16px; }

.skeleton-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 900px) { .skeleton-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .skeleton-grid { grid-template-columns: 1fr; } }

.skeleton-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #EAECF0;
    padding: 20px;
}
.skeleton-metric-pulse {
    height: 60px;
    border-radius: 8px;
    background: linear-gradient(90deg, #EAECF0 25%, #F2F4F7 50%, #EAECF0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

.skeleton-panels {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
}
@media (max-width: 900px) { .skeleton-panels { grid-template-columns: 1fr; } }
.skeleton-panel {
    background: #fff;
    border-radius: 20px;
    border: 1px solid #EAECF0;
    padding: 24px;
}
.skeleton-panel-wide { min-height: 340px; }
.skeleton-panel-narrow { min-height: 260px; }

.skeleton-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #EAECF0;
}
.skeleton-table-row {
    height: 48px;
    border-radius: 8px;
    background: linear-gradient(90deg, #EAECF0 25%, #F2F4F7 50%, #EAECF0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    margin-bottom: 8px;
}
.skeleton-source-item {
    height: 52px;
    border-radius: 10px;
    background: linear-gradient(90deg, #EAECF0 25%, #F2F4F7 50%, #EAECF0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
    margin-bottom: 8px;
}

/* 工具栏骨架 */
.skeleton-toolbar {
    height: 56px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #EAECF0;
    margin-bottom: 24px;
}

/* 预览页骨架 */
.skeleton-preview-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 16px;
}
@media (max-width: 900px) { .skeleton-preview-grid { grid-template-columns: 1fr; } }
.skeleton-card-lg { grid-column: span 1; min-height: 320px; }
.skeleton-chart-area {
    height: 200px;
    border-radius: 12px;
    background: linear-gradient(90deg, #EAECF0 25%, #F2F4F7 50%, #EAECF0 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}