/* ==========================================================================
Dentsu ShelfSignal
Premium Shelf Intelligence Interface
Complete hosted UI stylesheet
Version 7.2.0
========================================================================== */

/* ==========================================================================

1. Design tokens
   ========================================================================== */

:root {
--ink: #07080d;
--ink-soft: #11131c;
--ink-raised: #191c29;
--ink-subtle: #292d3c;

--paper: #f3f5f9;
--paper-deep: #e9edf5;

--surface: #ffffff;
--surface-2: #f8f9fc;
--surface-3: #f0f3f8;
--surface-dark: #0e1018;

--muted: #667085;
--muted-2: #8f98a8;
--muted-3: #b7beca;

--line: #e1e5ec;
--line-strong: #cdd3dd;
--line-dark: rgba(255, 255, 255, 0.1);

--blue: #3759ff;
--blue-deep: #1735d1;
--blue-bright: #6078ff;
--blue-soft: #edf0ff;

--violet: #7848ff;
--violet-soft: #f0eaff;

--pink: #ec3f8f;
--pink-soft: #fff0f6;

--cyan: #20c8d4;
--cyan-soft: #e8fbfc;

--lime: #b9ef4d;
--lime-soft: #f2fbdc;

--yellow: #ffd84a;

--green: #1f8a62;
--green-bright: #43bd83;
--green-soft: #e7f8f1;

--red: #d93662;
--red-soft: #ffedf2;

--amber: #d98b18;
--amber-soft: #fff5df;

--gradient-brand:
linear-gradient(
125deg,
var(--blue) 0%,
var(--violet) 52%,
var(--pink) 100%
);

--gradient-signal:
linear-gradient(
90deg,
var(--cyan),
var(--blue-bright),
var(--violet),
var(--pink)
);

--gradient-dark:
linear-gradient(
145deg,
#090a10 0%,
#111420 48%,
#171a2a 100%
);

--shadow:
0 28px 80px rgba(10, 14, 28, 0.14);

--shadow-soft:
0 10px 30px rgba(12, 18, 38, 0.08);

--shadow-card:
0 5px 18px rgba(16, 24, 40, 0.055);

--shadow-card-hover:
0 20px 45px rgba(16, 24, 40, 0.12);

--shadow-dark:
0 28px 70px rgba(3, 5, 12, 0.34);

--shadow-focus:
0 0 0 4px rgba(55, 89, 255, 0.13);

--radius-xs: 8px;
--radius-sm: 12px;
--radius-md: 16px;
--radius-lg: 22px;
--radius-xl: 30px;

--sidebar-width: 268px;
--topbar-height: 92px;

--font:
"Segoe UI Variable",
"Segoe UI",
Arial,
"Helvetica Neue",
sans-serif;

--mono:
"IBM Plex Mono",
"SFMono-Regular",
Consolas,
"Liberation Mono",
monospace;

color-scheme: light;
}

/* ==========================================================================
2. Reset and global behaviour
========================================================================== */

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

html {
min-height: 100%;
scroll-behavior: smooth;
}

body {
min-height: 100%;
margin: 0;
overflow-x: hidden;

font-family: var(--font);
font-size: 14px;
line-height: 1.5;

color: var(--ink);
background:
radial-gradient(
circle at 88% 5%,
rgba(55, 89, 255, 0.06),
transparent 24%
),
radial-gradient(
circle at 12% 92%,
rgba(236, 63, 143, 0.045),
transparent 26%
),
var(--paper);

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
font: inherit;
}

button {
cursor: pointer;
}

button:disabled {
cursor: not-allowed;
opacity: 0.55;
}

input,
select,
textarea {
color: var(--ink);
}

textarea {
resize: vertical;
}

img {
display: block;
max-width: 100%;
}

svg {
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}

canvas {
max-width: 100%;
}

a {
color: var(--blue);
}

[hidden],
.hidden {
display: none !important;
}

::selection {
color: #ffffff;
background: var(--blue);
}

:focus {
outline: none;
}

:focus-visible {
outline: 3px solid rgba(55, 89, 255, 0.44);
outline-offset: 3px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: none;
box-shadow: var(--shadow-focus);
}

* {
  scrollbar-width: thin;
  scrollbar-color: #b6bdc9 transparent;
  }

*::-webkit-scrollbar {
width: 10px;
height: 10px;
}

*::-webkit-scrollbar-track {
background: transparent;
}

*::-webkit-scrollbar-thumb {
border: 3px solid transparent;
border-radius: 999px;
background: #b6bdc9;
background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
background: #929baa;
background-clip: padding-box;
}

/* ==========================================================================
3. Global animation system
========================================================================== */

@keyframes riseIn {
from {
opacity: 0;
transform: translateY(14px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

@keyframes signalPulse {
0%,
100% {
opacity: 0.55;
transform: scale(0.74);
}

50% {
opacity: 1;
transform: scale(1.16);
}
}

@keyframes statusPulse {
0% {
box-shadow:
0 0 0 0 rgba(67, 189, 131, 0.42);
}

70% {
box-shadow:
0 0 0 8px rgba(67, 189, 131, 0);
}

100% {
box-shadow:
0 0 0 0 rgba(67, 189, 131, 0);
}
}

@keyframes orbFloat {
0%,
100% {
transform: translate3d(0, 0, 0) scale(1);
}

50% {
transform: translate3d(0, -14px, 0) scale(1.06);
}
}

@keyframes drift {
0% {
transform: translate3d(-2%, 0, 0) rotate(0deg);
}

50% {
transform: translate3d(3%, -2%, 0) rotate(3deg);
}

100% {
transform: translate3d(-2%, 0, 0) rotate(0deg);
}
}

@keyframes sheen {
0% {
transform: translateX(-160%) skewX(-18deg);
}

65%,
100% {
transform: translateX(240%) skewX(-18deg);
}
}

@keyframes gridMove {
from {
background-position: 0 0;
}

to {
background-position: 48px 48px;
}
}

@keyframes toastIn {
from {
opacity: 0;
transform: translateY(-10px) scale(0.98);
}

to {
opacity: 1;
transform: translateY(0) scale(1);
}
}

@keyframes tabIn {
from {
opacity: 0;
transform: translateX(-6px);
}

to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.97);
}

to {
opacity: 1;
transform: scale(1);
}
}

.active-page {
animation: fadeIn 0.28s ease both;
}

.active-page > * {
animation: riseIn 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.active-page > *:nth-child(1) {
animation-delay: 0.02s;
}

.active-page > *:nth-child(2) {
animation-delay: 0.07s;
}

.active-page > *:nth-child(3) {
animation-delay: 0.12s;
}

.active-page > *:nth-child(4) {
animation-delay: 0.17s;
}

.active-page > *:nth-child(5) {
animation-delay: 0.22s;
}

.active-explore-view,
.active-settings-view {
animation: riseIn 0.34s ease both;
}

/* ==========================================================================
4. Shared typography and brand system
========================================================================== */

.brand-lockup {
display: flex;
align-items: center;
gap: 12px;
color: var(--ink);
}

.brand-lockup img {
width: 66px;
height: auto;
object-fit: contain;
}

.brand-lockup > span {
width: 1px;
height: 22px;
background: currentColor;
opacity: 0.25;
}

.brand-lockup strong {
font-size: 15px;
font-weight: 760;
letter-spacing: -0.025em;
}

.brand-lockup-light {
color: #ffffff;
}

.brand-lockup-light img {
filter: brightness(0) invert(1);
}

.eyebrow {
display: block;
margin-bottom: 8px;

font-family: var(--font);
font-size: 10px;
font-weight: 850;
line-height: 1.25;

color: var(--blue);
letter-spacing: 0.135em;
text-transform: uppercase;
}

.eyebrow-light {
color: #a8b8ff;
}

.muted {
color: var(--muted-2);
}

.field-help {
display: block;
margin-top: 7px;

font-size: 11px;
line-height: 1.45;
color: var(--muted);
}

/* ==========================================================================
5. Loading screen
========================================================================== */

.loading-screen {
position: fixed;
inset: 0;
z-index: 1500;

display: grid;
place-content: center;
gap: 18px;

overflow: hidden;

text-align: center;
color: #ffffff;

background:
radial-gradient(
circle at 70% 20%,
rgba(55, 89, 255, 0.3),
transparent 30%
),
radial-gradient(
circle at 24% 82%,
rgba(236, 63, 143, 0.18),
transparent 30%
),
#08090d;
}

.loading-screen::before {
position: absolute;
inset: -10%;

content: "";
pointer-events: none;

background-image:
linear-gradient(
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
);

background-size: 48px 48px;
animation: gridMove 10s linear infinite;
}

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

.loading-screen p {
margin: 0;

font-size: 13px;
color: #c9cdd8;
letter-spacing: 0.04em;
}

.signal-loader {
position: relative;
width: 126px;
height: 62px;
margin: auto;
}

.signal-loader i,
.signal-loader b {
position: absolute;
display: block;
border-radius: 50%;
}

.signal-loader i {
width: 10px;
height: 10px;
animation: signalPulse 1.25s ease-in-out infinite;
}

.signal-loader i:nth-child(1) {
top: 28px;
left: 4px;
color: var(--cyan);
background: var(--cyan);
}

.signal-loader i:nth-child(2) {
top: 4px;
left: 42px;
color: var(--blue);
background: var(--blue);
animation-delay: 0.12s;
}

.signal-loader i:nth-child(3) {
top: 42px;
left: 80px;
color: var(--pink);
background: var(--pink);
animation-delay: 0.24s;
}

.signal-loader b {
top: 20px;
right: 4px;

width: 20px;
height: 20px;

color: var(--lime);
background: var(--lime);

animation: signalPulse 1.25s ease-in-out infinite 0.36s;
}

.signal-loader::before,
.signal-loader::after {
position: absolute;

height: 1px;

content: "";
transform-origin: left center;

background: var(--gradient-signal);
}

.signal-loader::before {
top: 31px;
left: 12px;
width: 78px;
transform: rotate(-19deg);
}

.signal-loader::after {
top: 13px;
left: 48px;
width: 68px;
transform: rotate(33deg);
}

/* ==========================================================================
6. Toast notifications
========================================================================== */

.toast-region {
position: fixed;
top: 24px;
right: 26px;
z-index: 1600;

display: grid;
gap: 10px;

width: min(460px, calc(100vw - 32px));
pointer-events: none;
}

.toast {
position: relative;
overflow: hidden;

display: flex;
gap: 12px;

min-width: 320px;
max-width: 460px;
padding: 16px 18px;

color: #ffffff;

background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.045),
transparent
),
#11131b;

border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 15px;

box-shadow: var(--shadow);
pointer-events: auto;

animation: toastIn 0.22s ease-out;
}

.toast::before {
width: 8px;
flex: none;

content: "";
border-radius: 999px;
background: var(--green);
}

.toast::after {
position: absolute;
right: -20px;
bottom: -30px;

width: 90px;
height: 90px;

content: "";

background:
radial-gradient(
circle,
rgba(67, 189, 131, 0.16),
transparent 68%
);

border-radius: 50%;
}

.toast.error::before {
background: var(--red);
}

.toast.warning::before {
background: var(--amber);
}

.toast strong,
.toast span {
display: block;
}

.toast strong {
font-size: 13px;
line-height: 1.35;
}

.toast span {
margin-top: 4px;

font-size: 12px;
line-height: 1.5;
color: #c7cbd4;
}

/* ==========================================================================
7. Login experience
========================================================================== */

.login-screen {
display: grid;
grid-template-columns:
minmax(520px, 1.28fr)
minmax(430px, 0.72fr);

min-height: 100vh;
background: #ffffff;
}

.login-story {
position: relative;
overflow: hidden;

display: flex;
flex-direction: column;

padding: 44px 54px 38px;
color: #ffffff;

background:
radial-gradient(
circle at 82% 18%,
rgba(55, 89, 255, 0.36),
transparent 33%
),
radial-gradient(
circle at 15% 82%,
rgba(236, 63, 143, 0.23),
transparent 31%
),
linear-gradient(
150deg,
#05060a 0%,
#10121b 58%,
#08090e 100%
);
}

.login-story::before {
position: absolute;
inset: -15%;

content: "";
pointer-events: none;

background:
conic-gradient(
from 160deg at 65% 42%,
transparent,
rgba(55, 89, 255, 0.11),
transparent 28%,
rgba(236, 63, 143, 0.08),
transparent 55%
);

filter: blur(12px);
animation: drift 12s ease-in-out infinite;
}

.login-story::after {
position: absolute;
inset: 0;

content: "";
pointer-events: none;

background-image:
linear-gradient(
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
);

background-size: 48px 48px;

mask-image:
linear-gradient(
to bottom,
transparent,
black 24%,
black 84%,
transparent
);
}

.login-story > .brand-lockup,
.story-copy,
.story-proof,
.story-footer {
position: relative;
z-index: 2;
}

.story-copy {
max-width: 750px;
margin: auto 0;
}

.story-copy h1 {
margin: 12px 0 22px;

font-size: clamp(52px, 6vw, 92px);
font-weight: 740;
line-height: 0.92;

letter-spacing: -0.072em;
}

.story-copy h1 em {
font-style: normal;
color: transparent;

background:
linear-gradient(
90deg,
var(--cyan),
#9eafff 46%,
var(--pink)
);

background-size: 180% 100%;
background-clip: text;
-webkit-background-clip: text;
}

.story-copy p {
max-width: 620px;
margin: 0;

font-size: 16px;
line-height: 1.7;
color: #c6cad5;
}

.impact-field {
position: absolute;
inset: 80px 20px 120px 35%;
z-index: 1;
opacity: 0.88;
}

.impact-field .dot,
.impact-field .line {
position: absolute;
display: block;
}

.impact-field .dot {
border-radius: 50%;
box-shadow: 0 0 30px currentColor;
animation: orbFloat 5s ease-in-out infinite;
}

.impact-field .d1 {
top: 22%;
left: 8%;

width: 15px;
height: 15px;

color: var(--cyan);
background: var(--cyan);
}

.impact-field .d2 {
top: 9%;
right: 18%;

width: 28px;
height: 28px;

color: var(--blue);
background: var(--blue);

animation-delay: -1.3s;
}

.impact-field .d3 {
bottom: 22%;
left: 31%;

width: 12px;
height: 12px;

color: var(--pink);
background: var(--pink);

animation-delay: -2.2s;
}

.impact-field .d4 {
right: 6%;
bottom: 34%;

width: 20px;
height: 20px;

color: var(--lime);
background: var(--lime);

animation-delay: -3.1s;
}

.impact-field .line {
height: 1px;
transform-origin: left;

background:
linear-gradient(
90deg,
currentColor,
transparent
);
}

.impact-field .l1 {
top: 24%;
left: 10%;

width: 42%;
color: var(--cyan);
transform: rotate(-12deg);
}

.impact-field .l2 {
top: 60%;
left: 32%;

width: 48%;
color: var(--pink);
transform: rotate(-28deg);
}

.impact-field .l3 {
top: 22%;
right: 0;

width: 40%;
color: var(--blue);
transform: rotate(42deg);
}

.story-proof {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;

margin-top: 34px;
}

.story-proof article {
position: relative;
overflow: hidden;

padding: 16px;

border-top: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.032);

backdrop-filter: blur(6px);

transition:
transform 0.2s ease,
background-color 0.2s ease;
}

.story-proof article:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.055);
}

.story-proof article::after {
position: absolute;
right: -25px;
bottom: -36px;

width: 90px;
height: 90px;

content: "";
opacity: 0;

background:
radial-gradient(
circle,
rgba(55, 89, 255, 0.25),
transparent 68%
);

border-radius: 50%;
transition: opacity 0.2s ease;
}

.story-proof article:hover::after {
opacity: 1;
}

.story-proof strong,
.story-proof span {
display: block;
}

.story-proof strong {
font-size: 12px;
}

.story-proof span {
margin-top: 5px;

font-size: 10px;
line-height: 1.45;
color: #a8aebc;
}

.story-footer {
display: flex;
align-items: center;
gap: 11px;

margin-top: 24px;

font-family: var(--mono);
font-size: 10px;
color: #aeb3c2;

letter-spacing: 0.14em;
text-transform: uppercase;
}

.story-footer span {
width: 42px;
height: 1px;
background: var(--gradient-signal);
}

.login-panel-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

padding: 42px;

background:
radial-gradient(
circle at 80% 10%,
rgba(55, 89, 255, 0.09),
transparent 35%
),
radial-gradient(
circle at 18% 86%,
rgba(236, 63, 143, 0.04),
transparent 30%
),
#ffffff;
}

.login-panel {
position: relative;
overflow: hidden;

width: min(440px, 100%);
padding: 42px;

background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.98),
rgba(250, 251, 255, 0.96)
);

border: 1px solid rgba(216, 221, 231, 0.9);
border-radius: var(--radius-xl);

box-shadow: var(--shadow);

animation: scaleIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.login-panel::before {
position: absolute;
top: 0;
right: 0;
left: 0;

height: 3px;

content: "";
background: var(--gradient-signal);
}

.login-panel::after {
position: absolute;
top: -120px;
right: -110px;

width: 240px;
height: 240px;

content: "";
pointer-events: none;

background:
radial-gradient(
circle,
rgba(55, 89, 255, 0.09),
transparent 68%
);

border-radius: 50%;
}

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

.login-mobile-brand {
display: none;
margin-bottom: 34px;
}

.login-panel h2 {
margin: 7px 0 12px;

font-size: 40px;
font-weight: 770;
line-height: 1.05;

letter-spacing: -0.055em;
}

.login-intro,
.link-sent p,
.pending-access p {
margin: 0 0 28px;

font-size: 14px;
line-height: 1.65;
color: var(--muted);
}

/* ==========================================================================
8. Authentication controls
========================================================================== */

.auth-button {
position: relative;
overflow: hidden;

display: flex;
align-items: center;
justify-content: center;
gap: 12px;

width: 100%;
min-height: 54px;
height: auto;
padding: 12px 20px;

font-size: 15px;
font-weight: 760;
line-height: 1.25;

color: var(--ink);
background: #ffffff;

border: 1px solid var(--line);
border-radius: 14px;

transition:
transform 0.18s ease,
box-shadow 0.18s ease,
border-color 0.18s ease,
background-color 0.18s ease;
}

.auth-button:hover:not(:disabled) {
transform: translateY(-2px);
border-color: var(--line-strong);
box-shadow: var(--shadow-soft);
}

.auth-button:active:not(:disabled) {
transform: translateY(0);
}

.auth-button > svg,
.auth-button-icon {
width: 20px;
min-width: 20px;
max-width: 20px;
height: 20px;
flex: 0 0 20px;
}

.primary-auth-button {
margin-top: 14px;

font-size: 16px;
color: #ffffff;

border: 0;
background: var(--gradient-brand);

box-shadow:
0 14px 28px rgba(55, 89, 255, 0.22);
}

.primary-auth-button::before,
.primary-button::before {
position: absolute;
top: -30%;
left: -35%;

width: 26%;
height: 160%;

content: "";
pointer-events: none;

background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.38),
transparent
);

transform: translateX(-160%) skewX(-18deg);
}

.primary-auth-button:hover::before,
.primary-button:hover::before {
animation: sheen 1.2s ease;
}

.primary-auth-button:hover:not(:disabled) {
box-shadow:
0 18px 36px rgba(55, 89, 255, 0.3);
}

.secondary-auth-button {
margin-top: 18px;
}

.microsoft-mark {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2px;

width: 19px;
height: 19px;
flex: 0 0 19px;
}

.microsoft-mark i:nth-child(1) {
background: #f35325;
}

.microsoft-mark i:nth-child(2) {
background: #81bc06;
}

.microsoft-mark i:nth-child(3) {
background: #05a6f0;
}

.microsoft-mark i:nth-child(4) {
background: #ffba08;
}

.auth-divider {
display: flex;
align-items: center;
gap: 12px;

height: 54px;

font-size: 11px;
color: var(--muted-2);
}

.auth-divider::before,
.auth-divider::after {
height: 1px;
flex: 1;

content: "";
background: var(--line);
}

.form-field {
display: grid;
gap: 0;
}

.login-panel label,
.app-dialog label,
.form-grid label {
display: grid;
gap: 8px;

font-family: var(--font);
font-size: 12px;
font-weight: 760;
line-height: 1.35;

color: #475467;
letter-spacing: 0.01em;
text-transform: none;
}

.input-with-icon {
position: relative;
}

.field-icon,
.input-with-icon > svg {
position: absolute;
top: 50%;
left: 16px;
z-index: 2;

display: grid;
place-items: center;

width: 20px;
height: 20px;

color: #667085;
pointer-events: none;

transform: translateY(-50%);
}

.field-icon svg {
width: 20px;
height: 20px;
}

.input-with-icon input {
padding-left: 50px !important;
}

.login-panel input,
.app-dialog input,
.app-dialog select,
.app-dialog textarea,
.form-grid input,
.form-grid select,
.form-grid textarea {
width: 100%;

font-family: var(--font);
font-weight: 520;
color: var(--ink);

letter-spacing: normal;
text-transform: none;

background:
linear-gradient(
180deg,
#ffffff,
#fbfcff
);

border: 1px solid #d9dde5;
border-radius: 12px;

outline: 0;

transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
background-color 0.15s ease,
transform 0.15s ease;
}

.login-panel input,
.app-dialog input,
.app-dialog select,
.form-grid input,
.form-grid select {
height: 50px;
padding: 0 13px;
}

.login-panel input {
font-size: 16px;
line-height: 1.25;
}

.app-dialog textarea,
.form-grid textarea {
min-height: 96px;
padding: 12px;
}

.login-panel input:hover,
.app-dialog input:hover,
.app-dialog select:hover,
.app-dialog textarea:hover,
.form-grid input:hover,
.form-grid select:hover,
.form-grid textarea:hover {
border-color: #c4cad5;
}

.login-panel input:focus,
.app-dialog input:focus,
.app-dialog select:focus,
.app-dialog textarea:focus,
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
background: #ffffff;
border-color: var(--blue);
box-shadow: var(--shadow-focus);
}

input::placeholder,
textarea::placeholder {
color: #9aa2af;
opacity: 1;
}

.auth-message {
margin-top: 14px;
padding: 12px 14px;

font-size: 12px;
line-height: 1.5;

color: #b72e55;
background: #fff1f4;

border: 1px solid #ffc6d4;
border-radius: 12px;
}

.auth-message[data-type="success"] {
color: #176f50;
background: #edf9f5;
border-color: #bfe9d8;
}

.login-security {
display: flex;
align-items: flex-start;
gap: 9px;

margin: 22px 0 0 !important;

font-size: 11px !important;
line-height: 1.5;
color: #8992a2;
}

.login-security svg {
width: 17px;
height: 17px;
flex: none;
margin-top: 1px;
}

.login-legal {
margin-top: 18px;

font-size: 10px;
line-height: 1.45;
text-align: center;
color: #8d96a5;
}

.link-sent,
.pending-access {
text-align: center;
}

.success-ring,
.pending-icon {
display: grid;
place-items: center;

width: 64px;
height: 64px;
margin: 0 auto 20px;

border-radius: 50%;
}

.success-ring {
color: var(--green);
background: #e6f8f0;
}

.pending-icon {
color: var(--amber);
background: #fff5df;
}

.success-ring svg,
.pending-icon svg {
width: 30px;
height: 30px;
}

.pending-email {
padding: 12px;

font-size: 12px;
font-weight: 700;

background: var(--surface-2);
border-radius: 12px;
}

.text-link {
padding: 7px 9px;

font-weight: 750;
color: var(--blue);
background: transparent;

border: 0;
border-radius: 8px;
}

.text-link:hover {
background: var(--blue-soft);
}

/* ==========================================================================
9. Application shell
========================================================================== */

.app-shell {
display: grid;
grid-template-columns:
var(--sidebar-width)
minmax(0, 1fr);

min-height: 100vh;
}

.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 40;

display: flex;
flex-direction: column;

width: var(--sidebar-width);
padding: 28px 18px 18px;

overflow: hidden;

color: #ffffff;

background:
linear-gradient(
180deg,
#07080d 0%,
#0a0b12 58%,
#0b0c14 100%
);

border-right: 1px solid rgba(255, 255, 255, 0.065);
}

.sidebar::before {
position: absolute;
top: 18%;
left: -100px;

width: 330px;
height: 330px;

content: "";
pointer-events: none;

opacity: 0.55;

background:
radial-gradient(
circle,
rgba(55, 89, 255, 0.28),
transparent 68%
);

border-radius: 50%;
filter: blur(10px);

animation: orbFloat 8s ease-in-out infinite;
}

.sidebar::after {
position: absolute;
inset: auto -1px 0 0;

height: 260px;

content: "";
pointer-events: none;

background:
radial-gradient(
circle at 20% 100%,
rgba(55, 89, 255, 0.28),
transparent 58%
),
radial-gradient(
circle at 82% 100%,
rgba(236, 63, 143, 0.2),
transparent 60%
);
}

.sidebar-brand {
position: relative;
z-index: 2;

margin: 0 10px 27px;
}

.sidebar-brand img {
width: 62px;
}

/* Workspace switcher */

.workspace-switcher-wrap {
position: relative;
z-index: 50;
}

.workspace-switcher {
position: relative;
overflow: hidden;

display: flex;
align-items: center;
gap: 11px;

width: 100%;
padding: 11px;

text-align: left;
color: #ffffff;

background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.075),
rgba(255, 255, 255, 0.035)
);

border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;

box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04);

transition:
transform 0.18s ease,
background-color 0.18s ease,
border-color 0.18s ease,
box-shadow 0.18s ease;
}

.workspace-switcher::after {
position: absolute;
top: -40px;
right: -40px;

width: 100px;
height: 100px;

content: "";
pointer-events: none;

background:
radial-gradient(
circle,
rgba(120, 72, 255, 0.24),
transparent 70%
);

border-radius: 50%;
}

.workspace-switcher:hover {
transform: translateY(-1px);

background:
linear-gradient(
135deg,
rgba(255, 255, 255, 0.105),
rgba(255, 255, 255, 0.05)
);

border-color: rgba(255, 255, 255, 0.2);

box-shadow:
0 12px 30px rgba(0, 0, 0, 0.18);
}

.workspace-avatar,
.profile-button > span:first-child {
display: grid;
place-items: center;

width: 36px;
height: 36px;
flex: none;

font-size: 11px;
font-weight: 900;

color: #ffffff;
background: var(--gradient-brand);

border-radius: 11px;

box-shadow:
0 8px 18px rgba(55, 89, 255, 0.24);
}

.workspace-switcher-copy {
min-width: 0;
flex: 1;
}

.workspace-switcher-copy strong,
.workspace-switcher-copy small {
display: block;
overflow: hidden;

text-overflow: ellipsis;
white-space: nowrap;
}

.workspace-switcher-copy strong {
font-size: 12px;
line-height: 1.35;
}

.workspace-switcher-copy small {
margin-top: 4px;

font-size: 10px;
color: #a7adba;
}

.workspace-switcher svg {
width: 16px;
height: 16px;
color: #aeb4c2;
}

.workspace-menu {
position: absolute;
top: calc(100% + 10px);
left: 0;

width: 300px;
max-height: min(480px, calc(100vh - 160px));
overflow-y: auto;
padding: 10px;

color: var(--ink);

background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.995),
rgba(248, 249, 253, 0.99)
);

border: 1px solid var(--line);
border-radius: 17px;

box-shadow:
0 24px 65px rgba(0, 0, 0, 0.3);

animation: scaleIn 0.18s ease both;
transform-origin: top left;
}

.workspace-menu-label {
padding: 7px 9px;

font-size: 10px;
font-weight: 850;
color: #7d8696;

letter-spacing: 0.1em;
text-transform: uppercase;
}

.workspace-menu-item {
display: flex;
align-items: center;
gap: 10px;

width: 100%;
padding: 10px;

text-align: left;
background: transparent;

border: 0;
border-radius: 11px;

transition:
background-color 0.15s ease,
transform 0.15s ease;
}

.workspace-menu-item:hover,
.workspace-menu-item.active {
background: #f0f3ff;
transform: translateX(2px);
}

.workspace-menu-item .workspace-avatar {
width: 32px;
height: 32px;
color: #ffffff;
}

.workspace-menu-item span:nth-child(2) {
min-width: 0;
flex: 1;
}

.workspace-menu-item strong,
.workspace-menu-item small {
display: block;
overflow: hidden;

text-overflow: ellipsis;
white-space: nowrap;
}

.workspace-menu-item strong {
font-size: 12px;
}

.workspace-menu-item small {
margin-top: 3px;

font-size: 10px;
color: var(--muted);
}

.workspace-menu-item b {
color: var(--blue);
}

.workspace-create-button {
width: 100%;
min-height: 44px;
margin-top: 7px;
padding: 9px 10px 0;

font-size: 12px;
font-weight: 760;
text-align: left;
color: var(--blue);

background: transparent;

border: 0;
border-top: 1px solid var(--line);
}

.workspace-create-button:hover {
color: var(--blue-deep);
}

.workspace-create-button span {
display: inline-grid;
place-items: center;

width: 22px;
height: 22px;
margin-right: 8px;

background: var(--blue-soft);
border-radius: 7px;
}

/* Sidebar navigation */

.main-nav {
position: relative;
z-index: 2;

display: grid;
gap: 5px;

margin-top: 25px;
}

.secondary-nav {
margin-top: 6px;
}

.nav-section-label {
position: relative;
z-index: 2;

margin: 24px 12px 7px;

font-size: 9px;
font-weight: 850;
color: #747b8a;

letter-spacing: 0.13em;
text-transform: uppercase;
}

.nav-item {
position: relative;
overflow: hidden;

display: flex;
align-items: center;
gap: 12px;

width: 100%;
height: 45px;
padding: 0 12px;

font-size: 12px;
font-weight: 720;
text-align: left;

color: #a4aab8;
background: transparent;

border: 0;
border-radius: 12px;

transition:
color 0.16s ease,
background-color 0.16s ease,
transform 0.16s ease,
box-shadow 0.16s ease;
}

.nav-item::before {
position: absolute;
top: 50%;
left: -5px;

width: 3px;
height: 20px;

content: "";

opacity: 0;
background: var(--gradient-signal);
border-radius: 999px;

transform: translateY(-50%);
transition:
opacity 0.16s ease,
left 0.16s ease;
}

.nav-item svg {
width: 19px;
height: 19px;
flex: none;
}

.nav-item:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.062);
transform: translateX(2px);
}

.nav-item.active {
color: var(--ink);
background: #ffffff;

box-shadow:
0 10px 24px rgba(0, 0, 0, 0.16);
}

.nav-item.active::before {
left: 0;
opacity: 1;
}

.nav-item.active svg {
color: var(--blue);
}

.nav-badge {
display: grid;
place-items: center;

min-width: 20px;
height: 20px;
margin-left: auto;
padding: 0 6px;

font-size: 9px;
color: #ffffff;

background:
linear-gradient(
135deg,
var(--pink),
#c92b72
);

border-radius: 999px;

box-shadow:
0 6px 14px rgba(236, 63, 143, 0.26);
}

.sidebar-footer {
position: relative;
z-index: 2;

margin-top: auto;
}

.profile-button {
display: flex;
align-items: center;
gap: 10px;

width: 100%;
padding: 16px 9px 4px;

text-align: left;
color: #ffffff;
background: transparent;

border: 0;
border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.profile-button > span:nth-child(2) {
min-width: 0;
flex: 1;
}

.profile-button strong,
.profile-button small {
display: block;
overflow: hidden;

text-overflow: ellipsis;
white-space: nowrap;
}

.profile-button strong {
font-size: 11px;
}

.profile-button small {
margin-top: 3px;

font-size: 9px;
color: #989fad;
}

.profile-button svg {
width: 15px;
height: 15px;
color: #858c9c;
}

/* ==========================================================================
10. Main application stage and top bar
========================================================================== */

.main-stage {
position: relative;
isolation: isolate;

grid-column: 2;
min-width: 0;

background:
linear-gradient(
rgba(255, 255, 255, 0.42),
rgba(255, 255, 255, 0.42)
),
radial-gradient(
circle at 87% 8%,
rgba(55, 89, 255, 0.075),
transparent 24%
),
radial-gradient(
circle at 16% 92%,
rgba(32, 200, 212, 0.045),
transparent 26%
),
var(--paper);
}

.main-stage::before {
position: fixed;
inset: 0 0 0 var(--sidebar-width);
z-index: -1;

content: "";
pointer-events: none;

opacity: 0.42;

background-image:
linear-gradient(
rgba(55, 89, 255, 0.022) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(55, 89, 255, 0.022) 1px,
transparent 1px
);

background-size: 42px 42px;
}

.topbar {
position: sticky;
top: 0;
z-index: 30;

display: flex;
align-items: center;
justify-content: space-between;

min-height: var(--topbar-height);
padding: 0 38px;

background:
linear-gradient(
180deg,
rgba(248, 249, 252, 0.96),
rgba(244, 246, 250, 0.9)
);

border-bottom: 1px solid rgba(212, 217, 227, 0.84);

box-shadow:
0 8px 24px rgba(16, 24, 40, 0.035);

backdrop-filter: blur(18px);
}

.breadcrumbs {
display: flex;
align-items: center;
gap: 7px;

margin-bottom: 7px;

font-size: 11px;
color: #8d96a5;
}

.breadcrumbs i {
font-style: normal;
}

.breadcrumbs strong {
color: var(--blue);
}

.topbar h1 {
margin: 0;

font-size: 29px;
font-weight: 780;
line-height: 1.15;

letter-spacing: -0.047em;
}

.topbar-actions {
display: flex;
align-items: center;
gap: 9px;
}

.period-select-wrap {
display: flex;
align-items: center;
gap: 8px;

height: 44px;
padding: 0 12px;

background:
linear-gradient(
180deg,
#ffffff,
#fafbfe
);

border: 1px solid var(--line);
border-radius: 12px;

box-shadow:
0 4px 12px rgba(16, 24, 40, 0.04);
}

.period-select-wrap span {
font-size: 9px;
font-weight: 850;
color: #667085;

letter-spacing: 0.09em;
text-transform: uppercase;
}

.period-select-wrap select {
max-width: 110px;

font-weight: 760;
color: var(--ink);
background: transparent;

border: 0;
outline: 0;
}

.primary-button,
.outline-button,
.light-button {
position: relative;
overflow: hidden;

display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;

min-height: 44px;
padding: 0 17px;

font-size: 12px;
font-weight: 760;
line-height: 1.2;

border-radius: 12px;

transition:
transform 0.18s ease,
box-shadow 0.18s ease,
border-color 0.18s ease,
background-color 0.18s ease;
}

.primary-button {
color: #ffffff;
background: var(--gradient-brand);

border: 0;

box-shadow:
0 10px 22px rgba(55, 89, 255, 0.22);
}

.primary-button:hover:not(:disabled) {
transform: translateY(-2px);

box-shadow:
0 16px 32px rgba(55, 89, 255, 0.3);
}

.primary-button:active:not(:disabled) {
transform: translateY(0);
}

#refreshBtn > span {
width: 8px;
height: 8px;

border-radius: 50%;
background: var(--lime);

box-shadow:
0 0 0 4px rgba(185, 239, 77, 0.16);

animation: statusPulse 2.1s ease-out infinite;
}

.outline-button {
color: #344054;

background:
linear-gradient(
180deg,
#ffffff,
#fafbfe
);

border: 1px solid var(--line);

box-shadow:
0 4px 12px rgba(16, 24, 40, 0.035);
}

.outline-button:hover:not(:disabled) {
transform: translateY(-1px);
border-color: #b8c0cf;
box-shadow: var(--shadow-soft);
}

.outline-button svg {
width: 17px;
height: 17px;
}

.light-button {
color: var(--ink);
background: #ffffff;

border: 1px solid rgba(255, 255, 255, 0.28);
}

.light-button:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-soft);
}

.content-region {
width: 100%;
max-width: 1580px;
margin: auto;
padding: 28px 38px 72px;
}

.page {
display: none;
}

.active-page {
display: block;
}

/* ==========================================================================
11. Status and collection health strip
========================================================================== */

.status-strip {
position: relative;
overflow: hidden;

display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;

margin-bottom: 18px;
padding: 13px 16px;

font-size: 12px;

background:
linear-gradient(
110deg,
#effaf6,
#f5fcfa
);

border: 1px solid #c6e9dc;
border-radius: 14px;

box-shadow:
0 5px 16px rgba(31, 138, 98, 0.055);
}

.status-strip::after {
position: absolute;
top: 0;
bottom: 0;
left: -80px;

width: 70px;

content: "";
pointer-events: none;

background:
linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.75),
transparent
);

transform: skewX(-18deg);
animation: sheen 5s ease-in-out infinite;
}

.status-strip > div {
display: flex;
align-items: center;
gap: 9px;
}

.status-strip span {
color: #667085;
}

.live-dot {
width: 8px;
height: 8px;
flex: none;

background: var(--green-bright);
border-radius: 50%;

animation: statusPulse 2s ease-out infinite;
}

.status-tag {
padding: 5px 9px;

font-size: 9px !important;
font-weight: 850;
color: #176e4d !important;

letter-spacing: 0.075em;
text-transform: uppercase;

background: #dff6ed;
border-radius: 999px;
}

/* ==========================================================================
12. Workspace setup command centre
========================================================================== */

.setup-card {
position: relative;
overflow: hidden;

display: grid;
grid-template-columns:
minmax(250px, 0.7fr)
minmax(570px, 1.3fr);
align-items: center;
gap: 28px;

margin-bottom: 20px;
padding: 24px;

color: #ffffff;

background:
radial-gradient(
circle at 94% 0%,
rgba(81, 95, 255, 0.46),
transparent 30%
),
radial-gradient(
circle at 5% 120%,
rgba(236, 63, 143, 0.19),
transparent 34%
),
linear-gradient(
125deg,
#0a0c13 0%,
#151824 57%,
#111526 100%
);

border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 22px;

box-shadow:
0 20px 45px rgba(10, 14, 28, 0.16);
}

.setup-card::before {
position: absolute;
top: -80px;
right: 24%;

width: 180px;
height: 180px;

content: "";
pointer-events: none;

background:
radial-gradient(
circle,
rgba(32, 200, 212, 0.12),
transparent 68%
);

border-radius: 50%;
animation: orbFloat 7s ease-in-out infinite;
}

.setup-card::after {
position: absolute;
inset: 0;

content: "";
pointer-events: none;

background-image:
linear-gradient(
rgba(255, 255, 255, 0.026) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.026) 1px,
transparent 1px
);

background-size: 38px 38px;

mask-image:
linear-gradient(
to right,
transparent,
black 42%,
black
);
}

.setup-card > div {
position: relative;
z-index: 2;
}

.setup-card .eyebrow {
color: #8fa4ff;
}

.setup-card h2 {
max-width: 500px;
margin: 0;

font-size: 25px;
font-weight: 770;
line-height: 1.16;

letter-spacing: -0.042em;
}

.setup-steps {
position: relative;
z-index: 2;

display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}

.setup-step {
position: relative;
overflow: hidden;

display: grid;
grid-template-columns: 34px minmax(0, 1fr);
grid-template-rows: auto auto;
column-gap: 11px;
align-content: center;

min-height: 92px;
padding: 14px;

color: #ffffff;

background:
linear-gradient(
145deg,
rgba(255, 255, 255, 0.078),
rgba(255, 255, 255, 0.032)
);

border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 15px;

box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04);

transition:
transform 0.2s ease,
background-color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}

.setup-step::after {
position: absolute;
right: -30px;
bottom: -42px;

width: 90px;
height: 90px;

content: "";
pointer-events: none;

opacity: 0;

background:
radial-gradient(
circle,
rgba(55, 89, 255, 0.22),
transparent 68%
);

border-radius: 50%;

transition: opacity 0.2s ease;
}

.setup-step:hover {
transform: translateY(-3px);

border-color: rgba(255, 255, 255, 0.28);

box-shadow:
0 14px 28px rgba(0, 0, 0, 0.18);
}

.setup-step:hover::after {
opacity: 1;
}

.setup-step.done {
background:
linear-gradient(
145deg,
rgba(185, 239, 77, 0.18),
rgba(185, 239, 77, 0.065)
);

border-color: rgba(185, 239, 77, 0.5);
}

.setup-step.done::after {
opacity: 0.55;

background:
radial-gradient(
circle,
rgba(185, 239, 77, 0.22),
transparent 68%
);
}

.setup-step b {
grid-row: 1 / 3;

display: grid;
place-items: center;

width: 34px;
height: 34px;
margin: 0;

font-size: 13px;
color: #ffffff;

background: rgba(255, 255, 255, 0.12);

border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
}

.setup-step.done b {
color: #10130a;

background:
linear-gradient(
135deg,
#cdfa70,
#aee83f
);

box-shadow:
0 8px 18px rgba(185, 239, 77, 0.22);
}

.setup-step strong {
align-self: end;

font-size: 12px;
font-weight: 770;
line-height: 1.3;

color: #ffffff;
letter-spacing: 0;
}

.setup-step small {
align-self: start;

display: block;
margin-top: 3px;

font-size: 10px;
font-weight: 550;
line-height: 1.35;

color: #bdc3d0;
}

.setup-step.done small {
color: #dcebb8;
}

/* ==========================================================================
13. KPI intelligence cards
========================================================================== */

.kpi-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 13px;

margin-bottom: 18px;
}

.kpi-card {
position: relative;
overflow: hidden;

min-height: 148px;
padding: 19px;

background:
linear-gradient(
155deg,
#ffffff 0%,
#fbfcff 72%,
var(--kpi-tint, #eef2ff) 140%
);

border: 1px solid var(--line);
border-radius: 18px;

box-shadow: var(--shadow-card);

transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}

.kpi-card::before {
position: absolute;
top: 0;
right: 0;
left: 0;

height: 3px;

content: "";

background:
linear-gradient(
90deg,
var(--kpi-color, var(--blue)),
transparent 78%
);
}

.kpi-card::after {
position: absolute;
right: -32px;
bottom: -45px;

width: 112px;
height: 112px;

content: "";

background:
radial-gradient(
circle,
var(--kpi-tint, #eef2ff),
transparent 70%
);

border-radius: 50%;

transition:
transform 0.25s ease,
opacity 0.25s ease;
}

.kpi-card:hover {
transform: translateY(-5px);

border-color:
color-mix(
in srgb,
var(--kpi-color, var(--blue)) 25%,
var(--line)
);

box-shadow: var(--shadow-card-hover);
}

.kpi-card:hover::after {
transform: scale(1.2);
}

.kpi-card > span {
position: relative;
z-index: 1;

display: block;
max-width: calc(100% - 42px);

font-size: 9px;
font-weight: 850;
line-height: 1.4;
color: #667085;

letter-spacing: 0.095em;
text-transform: uppercase;
}

.kpi-card strong {
position: relative;
z-index: 1;

display: block;
margin-top: 22px;

font-size: 32px;
font-weight: 790;
line-height: 1;

letter-spacing: -0.055em;
}

.kpi-card small {
position: relative;
z-index: 1;

display: block;
margin-top: 8px;

font-size: 10px;
line-height: 1.4;
color: #7d8696;
}

.kpi-card small.positive {
color: var(--green);
}

.kpi-card small.negative {
color: var(--red);
}

.kpi-card i {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;

display: grid;
place-items: center;

width: 31px;
height: 31px;

font-size: 11px;
font-weight: 900;
font-style: normal;

color: var(--kpi-color, var(--blue));
background: var(--kpi-tint, #eef2ff);

border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 10px;

box-shadow:
0 7px 16px rgba(16, 24, 40, 0.075);

transition:
transform 0.22s ease,
box-shadow 0.22s ease;
}

.kpi-card:hover i {
transform: rotate(-5deg) scale(1.08);

box-shadow:
0 10px 22px rgba(16, 24, 40, 0.11);
}

/* ==========================================================================
14. Panels and analytics surfaces
========================================================================== */

.dashboard-grid {
display: grid;
grid-template-columns:
minmax(0, 1.65fr)
minmax(320px, 0.85fr);
gap: 18px;

margin-bottom: 18px;
}

.panel {
position: relative;
overflow: hidden;

min-width: 0;
padding: 22px;

background:
linear-gradient(
155deg,
#ffffff 0%,
#fcfdff 100%
);

border: 1px solid var(--line);
border-radius: var(--radius-lg);

box-shadow: var(--shadow-card);

transition:
transform 0.22s ease,
box-shadow 0.22s ease,
border-color 0.22s ease;
}

.panel::before {
position: absolute;
top: 0;
right: 0;
left: 0;

height: 2px;

content: "";
opacity: 0.68;

background:
linear-gradient(
90deg,
var(--blue),
var(--violet),
transparent 76%
);
}

.panel::after {
position: absolute;
top: -90px;
right: -90px;

width: 190px;
height: 190px;

content: "";
pointer-events: none;

opacity: 0.42;

background:
radial-gradient(
circle,
rgba(55, 89, 255, 0.055),
transparent 70%
);

border-radius: 50%;
}

.panel:hover {
border-color: #d4d9e3;

box-shadow:
0 16px 38px rgba(16, 24, 40, 0.085);
}

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

.panel-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;

margin-bottom: 18px;
}

.panel-heading h2 {
margin: 0;

font-size: 19px;
font-weight: 770;
line-height: 1.25;

letter-spacing: -0.033em;
}

.panel-heading .eyebrow {
margin-bottom: 6px;
font-size: 9px;
}

.panel-copy {
margin-top: -5px;
margin-bottom: 20px;

font-size: 12px;
line-height: 1.6;
color: #667085;
}

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

.legend {
display: flex;
flex-wrap: wrap;
gap: 15px;

font-size: 10px;
color: #667085;
}

.legend span {
display: inline-flex;
align-items: center;
}

.legend span::before {
display: inline-block;

width: 18px;
height: 3px;
margin-right: 6px;

vertical-align: middle;
content: "";
background: currentColor;
border-radius: 999px;
}

.legend-blue {
color: var(--blue);
}

.legend-pink {
color: var(--pink);
}

.chart-stage {
position: relative;
height: 330px;
}

.chart-stage::before {
position: absolute;
inset: 0;

content: "";
pointer-events: none;

opacity: 0.45;

background-image:
linear-gradient(
rgba(55, 89, 255, 0.025) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(55, 89, 255, 0.025) 1px,
transparent 1px
);

background-size: 36px 36px;
border-radius: 12px;
}

.chart-stage canvas {
position: relative;
z-index: 1;
}

.chart-stage-small {
height: 280px;
}

.donut-stage {
position: relative;

display: grid;
place-items: center;

height: 260px;
}

.donut-stage::before {
position: absolute;

width: 210px;
height: 210px;

content: "";
pointer-events: none;

background:
radial-gradient(
circle,
rgba(55, 89, 255, 0.055),
transparent 67%
);

border-radius: 50%;

animation: signalPulse 4s ease-in-out infinite;
}

.donut-stage canvas {
position: relative;
z-index: 1;
max-height: 250px;
}

.donut-centre {
position: absolute;
z-index: 2;

text-align: center;
pointer-events: none;
}

.donut-centre strong {
display: block;

font-size: 29px;
font-weight: 790;
line-height: 1;

letter-spacing: -0.045em;
}

.donut-centre span {
display: block;
margin-top: 4px;

font-size: 9px;
font-weight: 780;
color: #8b94a3;

letter-spacing: 0.08em;
text-transform: uppercase;
}

.brand-legend {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px 14px;

margin-top: 9px;
}

.brand-legend div {
display: flex;
justify-content: space-between;
gap: 8px;

padding: 4px 6px;

font-size: 10px;

border-radius: 8px;

transition:
background-color 0.15s ease,
transform 0.15s ease;
}

.brand-legend div:hover {
background: #f3f5fa;
transform: translateX(2px);
}

.brand-legend span {
display: flex;
align-items: center;
gap: 7px;

min-width: 0;
}

.brand-legend span b {
overflow: hidden;

text-overflow: ellipsis;
white-space: nowrap;
}

.brand-legend i {
width: 8px;
height: 8px;
flex: none;

background: var(--dot);
border-radius: 50%;

box-shadow:
0 0 0 3px
color-mix(
in srgb,
var(--dot) 18%,
transparent
);
}

/* ==========================================================================
15. Attention and intelligence signals
========================================================================== */

.attention-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}

.attention-card {
position: relative;
overflow: hidden;

min-height: 120px;
padding: 16px;

background:
linear-gradient(
145deg,
#fafbfe,
#f4f6fb
);

border: 1px solid var(--line);
border-radius: 15px;

transition:
transform 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease;
}

.attention-card::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;

width: 3px;

content: "";

background:
linear-gradient(
180deg,
var(--pink),
var(--violet)
);
}

.attention-card::after {
position: absolute;
right: -35px;
bottom: -45px;

width: 100px;
height: 100px;

content: "";
pointer-events: none;

background:
radial-gradient(
circle,
rgba(236, 63, 143, 0.09),
transparent 68%
);

border-radius: 50%;
}

.attention-card:hover {
transform: translateY(-3px);
border-color: #d6dbe5;

box-shadow:
0 14px 28px rgba(16, 24, 40, 0.08);
}

.attention-card .attention-type {
font-size: 9px;
font-weight: 850;
color: var(--muted);

letter-spacing: 0.09em;
text-transform: uppercase;
}

.attention-card strong {
display: block;
margin: 14px 0 7px;

font-size: 15px;
line-height: 1.35;
}

.attention-card p {
margin: 0;

font-size: 11px;
line-height: 1.5;
color: var(--muted);
}

.attention-card .attention-value {
font-weight: 860;
color: var(--red);
}

.attention-empty {
grid-column: 1 / -1;

padding: 32px;

text-align: center;
color: var(--muted-2);
}

/* ==========================================================================
16. Data tables and scorecards
========================================================================== */

.data-table-wrap,
.matrix-wrap {
overflow: auto;

background: rgba(255, 255, 255, 0.72);

border: 1px solid #e7ebf1;
border-radius: 14px;
}

.data-table-wrap:focus-visible,
.matrix-wrap:focus-visible {
box-shadow: var(--shadow-focus);
}

.data-table {
width: 100%;
min-width: 760px;

border-collapse: collapse;
}

.data-table th {
position: sticky;
top: 0;
z-index: 1;

padding: 12px 13px;

font-size: 10px;
font-weight: 850;
line-height: 1.35;
text-align: left;
color: #475467;

letter-spacing: 0.055em;
text-transform: uppercase;

background:
linear-gradient(
180deg,
#f7f8fb,
#f3f5f9
);

border-bottom: 1px solid #e8ebf1;
}

.data-table td {
padding: 13px;

font-size: 12px;
line-height: 1.45;
vertical-align: middle;

border-top: 1px solid #eef0f4;

transition:
background-color 0.14s ease,
color 0.14s ease;
}

.data-table tbody tr:nth-child(even) td {
background: rgba(248, 249, 252, 0.44);
}

.data-table tbody tr:hover td {
background: #f2f5ff;
}

.data-table td:first-child {
font-weight: 650;
}

.data-table td strong {
font-size: 12px;
line-height: 1.4;
}

.data-table td small {
display: block;
margin-top: 3px;

font-size: 10px;
line-height: 1.4;
color: var(--muted-2);
}

.rank-pill,
.status-pill,
.placement-pill,
.ownership-pill,
.priority-pill,
.offer-pill {
display: inline-flex;
align-items: center;

padding: 4px 8px;

font-size: 9px;
font-weight: 850;
line-height: 1.25;

white-space: nowrap;

border: 1px solid transparent;
border-radius: 999px;
}

.rank-pill {
color: var(--blue);
background: #eef2ff;
border-color: #dde4ff;
}

.status-pill.good {
color: #14704e;
background: #e7f8f1;
border-color: #d1f0e3;
}

.status-pill.warn {
color: #a7650a;
background: #fff5df;
border-color: #f7e5bb;
}

.status-pill.bad {
color: #b92d54;
background: #ffedf2;
border-color: #f8d9e2;
}

.placement-pill.paid {
color: #6f41da;
background: #f2eaff;
border-color: #e4d6ff;
}

.placement-pill.organic {
color: #177b80;
background: #e4f8f7;
border-color: #cbefed;
}

.ownership-pill.owned {
color: var(--blue);
background: #e8edff;
border-color: #d7dfff;
}

.ownership-pill.competitor {
color: #b32d64;
background: #fff0f6;
border-color: #f6dce7;
}

.ownership-pill.unclassified {
color: #5b6472;
background: #edf0f4;
border-color: #dfe3e8;
}

.priority-pill.high {
color: #b52e56;
background: #ffedf2;
}

.priority-pill.medium {
color: #98630e;
background: #fff6df;
}

.priority-pill.low {
color: #526070;
background: #edf1f5;
}

.offer-pill.promotion {
color: #9c6104;
background: #fff0dc;
}

.offer-pill.full_price {
color: #23715a;
background: #edf7f4;
}

.empty-content {
padding: 45px;

font-size: 12px;
text-align: center;
color: var(--muted-2);
}

.table-action {
padding: 6px 9px;

font-size: 10px;
font-weight: 760;
color: #465064;

background:
linear-gradient(
180deg,
#ffffff,
#fafbfe
);

border: 1px solid var(--line);
border-radius: 9px;

transition:
transform 0.15s ease,
border-color 0.15s ease,
background-color 0.15s ease;
}

.table-action:hover {
transform: translateY(-1px);
background: #f5f7fb;
border-color: #c8ced8;
}

.table-action.danger {
color: var(--red);
}

/* ==========================================================================
17. Explore controls
========================================================================== */

.explore-tabs {
display: inline-flex;
gap: 2px;

margin-bottom: 14px;
padding: 4px;

background:
linear-gradient(
180deg,
#e8eaf0,
#e2e5ec
);

border: 1px solid rgba(205, 211, 221, 0.7);
border-radius: 14px;

box-shadow:
inset 0 1px 2px rgba(16, 24, 40, 0.05);
}

.explore-tab {
min-height: 38px;
padding: 0 17px;

font-size: 11px;
font-weight: 760;
color: #667085;

background: transparent;

border: 0;
border-radius: 10px;

transition:
color 0.15s ease,
background-color 0.15s ease,
box-shadow 0.15s ease,
transform 0.15s ease;
}

.explore-tab:hover {
color: var(--ink);
}

.explore-tab.active {
color: var(--ink);
background: #ffffff;

box-shadow:
0 5px 14px rgba(16, 24, 40, 0.1);

animation: tabIn 0.2s ease both;
}

.filter-panel {
position: relative;
overflow: hidden;

margin-bottom: 18px;
padding: 22px;

background:
linear-gradient(
145deg,
#ffffff,
#fbfcff
);

border: 1px solid var(--line);
border-radius: var(--radius-lg);

box-shadow: var(--shadow-card);
}

.filter-panel::before {
position: absolute;
top: 0;
right: 0;
left: 0;

height: 2px;

content: "";
background: var(--gradient-signal);
}

.filter-title {
display: flex;
align-items: center;
justify-content: space-between;

margin-bottom: 18px;
}

.filter-title h2 {
margin: 0;

font-size: 20px;
font-weight: 770;

letter-spacing: -0.03em;
}

.filter-title .eyebrow {
margin-bottom: 5px;
font-size: 9px;
}

.text-button {
padding: 7px 9px;

font-size: 11px;
font-weight: 760;
color: var(--blue);

background: transparent;

border: 0;
border-radius: 8px;
}

.text-button:hover {
background: var(--blue-soft);
}

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

.filter-grid label {
display: grid;
gap: 7px;

font-size: 11px;
font-weight: 760;
color: #475467;

letter-spacing: 0.01em;
text-transform: none;
}

.filter-grid input,
.filter-grid select {
width: 100%;
height: 44px;
padding: 0 12px;

font-family: var(--font);
color: var(--ink);

letter-spacing: normal;
text-transform: none;

background:
linear-gradient(
180deg,
#ffffff,
#fbfcff
);

border: 1px solid #dfe3ea;
border-radius: 12px;

outline: 0;

transition:
border-color 0.15s ease,
box-shadow 0.15s ease,
transform 0.15s ease;
}

.filter-grid input:hover,
.filter-grid select:hover {
border-color: #c7cdd7;
}

.filter-grid input:focus,
.filter-grid select:focus {
background: #ffffff;
border-color: var(--blue);
box-shadow: var(--shadow-focus);
}

.filter-apply {
margin-top: 16px;
}

.compact-kpis {
grid-template-columns: repeat(7, minmax(0, 1fr));
}

.compact-kpis .kpi-card {
min-height: 120px;
padding: 16px;
}

.compact-kpis .kpi-card strong {
margin-top: 17px;
font-size: 26px;
}

.explore-view {
display: none;
}

.active-explore-view {
display: block;
}

/* Search-term matrix */

.matrix-table {
width: 100%;
min-width: 760px;

border-collapse: separate;
border-spacing: 0;
}

.matrix-table th {
position: sticky;
top: 0;
z-index: 1;

padding: 12px;

font-size: 10px;
font-weight: 850;
text-align: left;
color: #475467;

letter-spacing: 0.05em;
text-transform: uppercase;

background:
linear-gradient(
180deg,
#f7f8fb,
#f3f5f9
);

border-bottom: 1px solid var(--line);
}

.matrix-table td {
padding: 8px;
border-bottom: 1px solid #eef0f4;
}

.matrix-term {
min-width: 170px;

font-size: 11px;
font-weight: 760;
}

.matrix-cell {
min-width: 130px;
padding: 10px;

color: var(--ink);
background: #f4f6ff;

border: 1px solid rgba(55, 89, 255, 0.055);
border-radius: 11px;

transition:
transform 0.16s ease,
box-shadow 0.16s ease;
}

.matrix-cell:hover {
transform: translateY(-2px);

box-shadow:
0 10px 20px rgba(55, 89, 255, 0.1);
}

@supports (
background:
color-mix(in srgb, #000000 50%, #ffffff)
) {
.matrix-cell {
background:
color-mix(
in srgb,
var(--blue) calc(var(--strength, 0) * 100%),
#f4f6ff
);
}
}

.matrix-cell strong,
.matrix-cell small {
display: block;
}

.matrix-cell strong {
font-size: 15px;
}

.matrix-cell small {
margin-top: 3px;

font-size: 10px;
color: #5d6676;
}

.matrix-empty {
text-align: center;
color: #b0b5c0;
}

/* ==========================================================================
18. Alerts
========================================================================== */

.alert-list {
display: grid;
gap: 10px;
}

.alert-item {
position: relative;
overflow: hidden;

display: flex;
gap: 14px;

padding: 15px;

background:
linear-gradient(
145deg,
#ffffff,
#fbfcff
);

border: 1px solid var(--line);
border-left: 4px solid var(--amber);
border-radius: 14px;

transition:
transform 0.18s ease,
box-shadow 0.18s ease;
}

.alert-item:hover {
transform: translateX(3px);

box-shadow:
0 12px 26px rgba(16, 24, 40, 0.08);
}

.alert-item::after {
position: absolute;
top: -30px;
right: -30px;

width: 90px;
height: 90px;

content: "";
pointer-events: none;

background:
radial-gradient(
circle,
rgba(217, 139, 24, 0.08),
transparent 68%
);

border-radius: 50%;
}

.alert-item.critical {
border-left-color: var(--red);
}

.alert-item.low {
border-left-color: var(--blue);
}

.alert-item strong {
display: block;
}

.alert-item p {
margin: 5px 0 0;

font-size: 11px;
line-height: 1.5;
color: #667085;
}

.alert-item time {
margin-left: auto;

font-size: 10px;
color: #98a2b3;

white-space: nowrap;
}

/* ==========================================================================
19. Reports
========================================================================== */

.report-hero {
position: relative;
overflow: hidden;

min-height: 530px;
padding: 110px 30px;

text-align: center;
color: #ffffff;

background:
radial-gradient(
circle at 82% 20%,
rgba(55, 89, 255, 0.38),
transparent 31%
),
radial-gradient(
circle at 18% 84%,
rgba(236, 63, 143, 0.2),
transparent 32%
),
linear-gradient(
145deg,
#06070a,
#171925
);

border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 28px;

box-shadow: var(--shadow-dark);
}

.report-hero::before {
position: absolute;
inset: -15%;

content: "";
pointer-events: none;

background:
conic-gradient(
from 90deg,
transparent,
rgba(32, 200, 212, 0.08),
transparent 30%,
rgba(236, 63, 143, 0.08),
transparent 62%
);

animation: drift 10s ease-in-out infinite;
}

.report-hero::after {
position: absolute;
inset: 0;

content: "";

background-image:
linear-gradient(
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
),
linear-gradient(
90deg,
rgba(255, 255, 255, 0.035) 1px,
transparent 1px
);

background-size: 50px 50px;
}

.report-hero > * {
position: relative;
z-index: 2;
}

.report-hero h2 {
margin: 12px 0;

font-size: 52px;
font-weight: 770;
line-height: 1;

letter-spacing: -0.06em;
}

.report-hero p {
max-width: 620px;
margin: 0 auto 26px;

line-height: 1.65;
color: #b6bbc8;
}

.report-orbit {
position: absolute;
inset: 0;
z-index: 1;
}

.report-orbit i {
position: absolute;

border-radius: 50%;
box-shadow: 0 0 30px currentColor;

animation: orbFloat 6s ease-in-out infinite;
}

.report-orbit i:nth-child(1) {
top: 20%;
left: 18%;

width: 18px;
height: 18px;

color: var(--cyan);
background: var(--cyan);
}

.report-orbit i:nth-child(2) {
top: 26%;
right: 16%;

width: 32px;
height: 32px;

color: var(--blue);
background: var(--blue);

animation-delay: -1.5s;
}

.report-orbit i:nth-child(3) {
bottom: 16%;
left: 31%;

width: 20px;
height: 20px;

color: var(--pink);
background: var(--pink);

animation-delay: -3s;
}

/* ==========================================================================
20. Settings
========================================================================== */

.settings-layout {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 18px;
}

.settings-nav {
position: sticky;
top: 120px;

display: grid;
gap: 3px;

height: max-content;
padding: 8px;

background:
linear-gradient(
145deg,
#ffffff,
#fafbfe
);

border: 1px solid var(--line);
border-radius: 18px;

box-shadow: var(--shadow-card);
}

.settings-tab {
position: relative;

width: 100%;
height: 44px;
padding: 0 13px;

font-size: 11px;
font-weight: 760;
text-align: left;
color: #667085;

background: transparent;

border: 0;
border-radius: 11px;

transition:
color 0.15s ease,
background-color 0.15s ease,
transform 0.15s ease;
}

.settings-tab:hover {
color: var(--ink);
background: #f3f5f9;
transform: translateX(2px);
}

.settings-tab.active {
color: var(--blue);

background:
linear-gradient(
90deg,
#edf0ff,
#f3f0ff
);
}

.settings-tab.active::before {
position: absolute;
top: 11px;
bottom: 11px;
left: 0;

width: 3px;

content: "";
background: var(--gradient-brand);
border-radius: 999px;
}

.settings-view {
display: none;
}

.active-settings-view {
display: block;
}

.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
}

.form-grid label {
margin: 0;
}

.form-actions {
grid-column: 1 / -1;
margin-top: 5px;
}

.subsection {
margin-top: 24px;
}

.subsection h3 {
font-size: 14px;
}

.checkbox-label {
display: grid !important;
grid-template-columns: auto 1fr !important;
align-items: center;
justify-content: start;
gap: 9px !important;
}

.checkbox-label input {
width: 18px !important;
height: 18px !important;
margin: 0;

accent-color: var(--blue);
}

.admin-only.hidden {
display: none !important;
}

/* ==========================================================================
21. Profile menu
========================================================================== */

.profile-menu {
position: fixed;
bottom: 74px;
left: 20px;
z-index: 100;

width: 228px;
padding: 12px;

background:
linear-gradient(
145deg,
#ffffff,
#fafbfe
);

border: 1px solid var(--line);
border-radius: 15px;

box-shadow: var(--shadow);

animation: scaleIn 0.18s ease both;
transform-origin: bottom left;
}

.profile-menu div {
padding: 8px;
}

.profile-menu strong,
.profile-menu span {
display: block;
}

.profile-menu span {
margin-top: 4px;

font-size: 10px;
line-height: 1.4;
color: #667085;

overflow-wrap: anywhere;
}

.profile-menu button {
width: 100%;
height: 38px;
padding: 0 12px;

font-weight: 760;
text-align: left;
color: #b62951;

background: #f4f5f8;

border: 0;
border-radius: 10px;

transition:
background-color 0.15s ease,
transform 0.15s ease;
}

.profile-menu button:hover {
transform: translateX(2px);
background: #ffedf2;
}

/* ==========================================================================
22. Dialogs
========================================================================== */

.app-dialog {
width: min(490px, calc(100vw - 30px));
max-height: calc(100vh - 40px);
padding: 0;

overflow: hidden;

background:
linear-gradient(
145deg,
#ffffff,
#fafbfe
);

border: 1px solid rgba(255, 255, 255, 0.9);
border-radius: 24px;

box-shadow:
0 32px 100px rgba(10, 10, 18, 0.38);
}

.app-dialog[open] {
animation: scaleIn 0.22s ease both;
}

.app-dialog-wide {
width: min(760px, calc(100vw - 30px));
}

.app-dialog::backdrop {
background:
radial-gradient(
circle at 50% 20%,
rgba(55, 89, 255, 0.12),
transparent 40%
),
rgba(7, 7, 12, 0.76);

backdrop-filter: blur(7px);
}

.app-dialog form {
position: relative;

max-height: calc(100vh - 40px);
overflow-y: auto;
padding: 27px;
}

.app-dialog form::before {
position: absolute;
top: 0;
right: 0;
left: 0;

height: 3px;

content: "";
background: var(--gradient-signal);
}

.dialog-heading {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;

margin-bottom: 22px;
}

.dialog-heading h2 {
margin: 0;

font-size: 24px;
font-weight: 770;
line-height: 1.2;

letter-spacing: -0.04em;
}

.dialog-heading p {
margin: 7px 0 0;

font-size: 12px;
line-height: 1.55;
color: #667085;
}

.dialog-heading .eyebrow {
font-size: 9px;
}

.dialog-close {
display: grid;
place-items: center;

width: 36px;
height: 36px;
flex: none;
padding: 0;

font-size: 22px;
line-height: 1;
color: #475467;

background: #f1f2f5;

border: 0;
border-radius: 50%;

transition:
transform 0.16s ease,
background-color 0.16s ease,
color 0.16s ease;
}

.dialog-close:hover {
color: var(--ink);
background: #e5e7eb;
transform: rotate(6deg);
}

.app-dialog label {
margin-bottom: 14px;
}

.app-dialog .primary-button {
margin-top: 4px;
}

.collector-credentials {
position: relative;
overflow: hidden;

margin-top: 20px;
padding: 15px;

color: #ffffff;

background:
radial-gradient(
circle at 90% 0%,
rgba(55, 89, 255, 0.24),
transparent 36%
),
#0f1018;

border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
}

.collector-credentials p {
margin-top: 0;

font-size: 11px;
line-height: 1.5;
color: #c2c6d2;
}

.collector-credentials label {
color: #aeb4c7;
}

.collector-credentials code {
display: block;

margin-top: 5px;
padding: 10px;

font-family: var(--mono);
font-size: 11px;
font-weight: 500;
color: #78e2ec;

overflow-wrap: anywhere;
word-break: break-word;

letter-spacing: 0;
text-transform: none;

background: #191b28;

border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
}

/* ==========================================================================
23. Responsive desktop and tablet
========================================================================== */

@media (max-width: 1320px) {
.kpi-grid {
grid-template-columns: repeat(3, 1fr);
}

.compact-kpis {
grid-template-columns: repeat(4, 1fr);
}

.filter-grid {
grid-template-columns: repeat(3, 1fr);
}

.setup-card {
grid-template-columns: 1fr;
}

.setup-steps {
grid-template-columns: repeat(4, 1fr);
}
}

@media (max-width: 1120px) {
.topbar {
gap: 20px;
}

.topbar-actions {
flex-wrap: wrap;
justify-content: flex-end;
}

.dashboard-grid {
grid-template-columns: 1fr;
}
}

/* ==========================================================================
24. Compact sidebar layout
========================================================================== */

@media (max-width: 1020px) {
:root {
--sidebar-width: 78px;
}

.login-screen {
grid-template-columns: 1fr;
}

.login-story {
display: none;
}

.login-panel-wrap {
min-height: 100vh;
}

.login-mobile-brand {
display: flex;
}

.app-shell {
grid-template-columns: 78px minmax(0, 1fr);
}

.sidebar {
width: 78px;
padding: 22px 10px;
}

.sidebar-brand {
justify-content: center;
margin-inline: 0;
}

.sidebar-brand img {
width: 48px;
}

.sidebar-brand > span,
.sidebar-brand strong,
.workspace-switcher-copy,
.workspace-switcher > svg,
.nav-item > span,
.nav-section-label,
.profile-button > span:nth-child(2),
.profile-button > svg {
display: none;
}

.workspace-switcher {
justify-content: center;
padding: 9px;
}

.workspace-menu {
top: 0;
left: 58px;
}

.main-stage {
grid-column: 2;
}

.main-stage::before {
left: 78px;
}

.nav-item {
justify-content: center;
padding: 0;
}

.nav-item::before {
display: none;
}

.nav-badge {
position: absolute;
top: 5px;
right: 4px;

```
min-width: 17px;
height: 17px;
padding: 0 4px;

font-size: 8px;
```

}

.profile-button {
justify-content: center;
padding-inline: 0;
}

.topbar {
padding: 0 24px;
}

.content-region {
padding: 22px;
}

.attention-grid {
grid-template-columns: 1fr 1fr;
}

.settings-layout {
grid-template-columns: 1fr;
}

.settings-nav {
position: static;

```
display: flex;
overflow-x: auto;
```

}

.settings-tab {
min-width: max-content;
}

.filter-grid {
grid-template-columns: repeat(2, 1fr);
}

.profile-menu {
left: 86px;
}
}

/* ==========================================================================
25. Mobile layout
========================================================================== */

@media (max-width: 700px) {
:root {
--topbar-height: auto;
}

.topbar {
min-height: 116px;
padding: 19px;

```
align-items: flex-start;
flex-direction: column;
```

}

.topbar-actions {
width: 100%;
justify-content: flex-start;
}

.period-select-wrap {
flex: 1;
min-width: 150px;
}

.content-region {
padding: 14px;
}

.kpi-grid,
.compact-kpis {
grid-template-columns: 1fr 1fr;
}

.filter-grid,
.form-grid {
grid-template-columns: 1fr;
}

.form-actions {
grid-column: auto;
}

.login-panel-wrap {
padding: 16px;
}

.login-panel {
padding: 28px 22px;
}

.login-panel h2 {
font-size: 34px;
}

.auth-button {
white-space: normal;
text-align: center;
}

.field-icon,
.input-with-icon > svg {
left: 15px;
}

.input-with-icon input {
padding-left: 48px !important;
}

.toast-region {
right: 12px;
left: 12px;

```
width: auto;
```

}

.toast {
min-width: 0;
}

.status-strip {
align-items: flex-start;
flex-direction: column;
}

.status-strip > div {
align-items: flex-start;
flex-wrap: wrap;
}

.panel {
padding: 17px;
}

.panel-heading {
align-items: flex-start;
}

.panel-actions {
flex-wrap: wrap;
justify-content: flex-end;
}

.chart-stage {
height: 270px;
}

.attention-grid {
grid-template-columns: 1fr;
}

.setup-steps {
grid-template-columns: 1fr 1fr;
}

.setup-step {
min-height: 92px;
padding: 13px;
}

.report-hero {
min-height: 470px;
padding: 90px 22px;
}

.report-hero h2 {
font-size: 38px;
}

.workspace-menu {
width: 270px;
}

.settings-nav {
padding: 5px;
}

.app-dialog form {
padding: 22px;
}

.dialog-heading h2 {
font-size: 22px;
}
}

/* ==========================================================================
26. Very small screens
========================================================================== */

@media (max-width: 480px) {
.kpi-grid,
.compact-kpis {
grid-template-columns: 1fr;
}

.setup-steps {
grid-template-columns: 1fr;
}

.topbar-actions > button {
flex: 1;
}

.period-select-wrap {
width: 100%;
flex-basis: 100%;
}

.explore-tabs {
display: grid;
grid-template-columns: repeat(3, 1fr);

```
width: 100%;
```

}

.explore-tab {
padding: 0 9px;
}

.panel-heading {
flex-direction: column;
}

.panel-actions {
width: 100%;
justify-content: flex-start;
}

.brand-legend {
grid-template-columns: 1fr;
}

.workspace-menu {
width: min(270px, calc(100vw - 98px));
}
}

/* ==========================================================================
27. Reduced motion
========================================================================== */

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}

*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}

.signal-loader i,
.signal-loader b,
.live-dot,
#refreshBtn > span,
.report-orbit i,
.impact-field .dot {
animation: none;
}
}

/* ==========================================================================
28. High contrast support
========================================================================== */

@media (prefers-contrast: more) {
:root {
--line: #c6cad1;
--line-strong: #aab0ba;
--muted: #4a5260;
--muted-2: #697281;
}

.panel,
.filter-panel,
.kpi-card,
.data-table-wrap,
.matrix-wrap {
border-color: var(--line-strong);
}

.setup-step {
border-color: rgba(255, 255, 255, 0.42);
}
}

/* ==========================================================================
29. Print and report export
========================================================================== */

@media print {
:root {
--paper: #ffffff;
}

body {
background: #ffffff;
}

.sidebar,
.topbar-actions,
.workspace-switcher,
.profile-menu,
.toast-region,
.filter-panel,
.explore-tabs,
.settings-nav,
button {
display: none !important;
}

.app-shell,
.main-stage {
display: block;
}

.main-stage::before {
display: none;
}

.topbar {
position: static;

```
padding: 0 0 20px;
background: #ffffff;

border: 0;
box-shadow: none;
```

}

.content-region {
max-width: none;
padding: 0;
}

.page {
display: block;
}

.panel,
.kpi-card,
.report-hero {
break-inside: avoid;

```
box-shadow: none;
```

}

.data-table-wrap,
.matrix-wrap {
overflow: visible;
}
}