:root {
  --z2s-navy: #06194c;
  --z2s-navy-light: #0c2868;
  --z2s-blue: #086ad8;
  --z2s-electric: #169cff;
  --z2s-ink: #142449;
  --z2s-muted: #536783;
  --z2s-bg: #f0f4fb;
  --z2s-line: #d9e3f3;
  --shell-blue: var(--z2s-electric);
  --shell-cyan: var(--z2s-blue);
}

body[data-page="chat"], body[data-page="bots"] {
  --orange: var(--z2s-blue);
  --orange-soft: #e9f3ff;
}
body, body[data-page="account"] { background: var(--z2s-bg); color: var(--z2s-ink); }
:focus-visible { outline: 2px solid var(--z2s-blue); outline-offset: 3px; }

.app-sidebar {
  background: linear-gradient(170deg, var(--z2s-navy-light), var(--z2s-navy) 58%);
  border-right-color: #19366f;
  box-shadow: 4px 0 18px #06194c22;
}
.sidebar-top { border-color: #ffffff20; }
.sidebar-brand { color: #fff; letter-spacing: -.035em; }
.sidebar-brand em, .auth-brand em { color: #6fc7ff; font-style: normal; }
.sidebar-brand img { box-shadow: 0 0 0 1px #6fc7ff48; }
.sidebar-label { color: #b3c5e8; }
.sidebar-nav a { color: #d6e2f7; border-radius: 10px; }
.sidebar-nav a:hover, .sidebar-nav a:focus-visible { background: #ffffff19; color: #fff; }
.sidebar-nav a.active { background: #1879e536; color: #fff; }
.app-sidebar :focus-visible { outline-color: #7acbff; outline-offset: -2px; }
.sidebar-user, .system-card { background: #ffffff15; color: #e0ebff; }
.sidebar-user:hover { background: #ffffff24; }
.sidebar-user b, .account-person>b { background: var(--z2s-blue); }
.app-sidebar:focus-within .sidebar-brand b, .app-sidebar:focus-within .sidebar-label { opacity: 1; }

.dashboard-head, .admin-head, .bots-head, .finance-header,
.labels-page>header, .billing-head, .account-page>header {
  position: relative;
  padding: clamp(18px, 3vw, 32px);
  margin-bottom: 20px;
  border: 1px solid #244383;
  border-radius: 18px;
  background: radial-gradient(ellipse at 100% 0%, #1249a0, transparent 65%),
    linear-gradient(125deg, var(--z2s-navy), var(--z2s-navy-light));
  color: #fff;
}
.dashboard-head h1, .admin-head h1, .bots-head h1, .finance-header h1,
.labels-page>header h1, .billing-head h1, .account-page>header h1 {
  color: #fff;
  letter-spacing: -.04em;
}
.dashboard-head p, .admin-head p, .bots-head p, .finance-header p,
.labels-page>header p, .billing-head p { color: #82ccff; }
.dashboard-head span, .admin-head span, .bots-head span, .finance-header>div>span,
.labels-page>header span, .billing-head span, .account-page>header p { color: #d4e3ff; }
.account-page>header p { margin-bottom: 0; }
.kpis article, .admin-stats article, .account-panel, .users-card, .labels-card, .create-card {
  border-color: var(--z2s-line);
  box-shadow: 0 10px 28px #142e6310;
}
.dashboard-head button, .admin-head button, .create-bot, .save-button,
.ui-dialog-confirm, .integration-actions button:not(.integration-revoke), .integration-copy,
#password-form button, .auth-card .primary {
  background: var(--z2s-blue);
  color: #fff;
}
.ui-dialog.danger .ui-dialog-confirm { background: #bb3047; }
.topbar, .flow-topbar, .chat-head { border-color: var(--z2s-line); }
.topbar, .flow-topbar { box-shadow: inset 0 3px var(--z2s-blue); }
.brand img, .flow-brand img { width: 36px; height: 36px; border-radius: 9px; }
.chat, #messages { background-color: #edf3fc; }
#messages {
  background-image: radial-gradient(#a9c2e255 1px, transparent 1px),
    radial-gradient(#a9c2e255 1px, transparent 1px);
}
.flow-canvas {
  background-color: #f4f7fd;
  background-image: radial-gradient(#b5c9e5 1px, transparent 1px);
}

.auth-hero {
  background: radial-gradient(ellipse at 95% 15%, #134ba2, transparent 60%),
    linear-gradient(145deg, var(--z2s-navy), var(--z2s-navy-light));
}
.auth-hero::before {
  border-radius: 24%;
  transform: rotate(-16deg);
  background: linear-gradient(145deg, #169cff32, #169cff00);
}
.auth-hero::after { border-radius: 24%; background: #169cff19; }
.auth-brand img { box-shadow: 0 0 0 1px #6fc7ff55; }
.auth-brand strong { letter-spacing: -.035em; }
.auth-hero .eyebrow { color: #bce5ff; border-color: #72c3ff60; }
.auth-card { border-color: var(--z2s-line); }

.sidebar-user { font-size: 12px; font-weight: 600; }
.sidebar-nav a { font-size: 13px; }
.account-page { line-height: 1.5; }
.account-panel h2 { font-size: 19px; font-weight: 650; letter-spacing: -.025em; }
.account-person strong { font-size: 15px; font-weight: 600; }
.account-person span, .account-plan { font-size: 13px; }
.account-integration p { font-size: 14px; }
#password-form label, #password-form button,
.integration-actions button, .integration-copy { font-size: 14px; }