:root {
  --ink: #07142d;
  --muted: #65718a;
  --subtle: #8c96ad;
  --line: #e7eaf2;
  --panel: #ffffff;
  --soft: #f6f7fb;
  --nav: #06172f;
  --nav-2: #0a2140;
  --violet: #5b2df2;
  --violet-2: #7a5cff;
  --violet-soft: #f0ebff;
  --blue: #3584ff;
  --green: #21b461;
  --orange: #ff8a2a;
  --red: #ef3b46;
  --beige: #e8ded2;
  --radius: 16px;
  --shadow: 0 20px 60px rgba(15, 23, 42, .08);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--soft);
  color: var(--ink);
  letter-spacing: 0;
  font-size: 13px;
  overflow-x: hidden;
}
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: var(--violet); text-decoration: none; font-weight: 700; }
.hidden { display: none !important; }

.brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow: 0 14px 34px rgba(16, 84, 224, .22);
  overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand-row { display: flex; align-items: center; gap: 12px; font-size: 17px; color: white; }
.brand-row.compact { color: var(--ink); font-size: 17px; }
.brand-logo-full {
  width: min(190px, 66%);
  max-height: 76px;
  object-fit: contain;
  object-position: left center;
  display: block;
  margin-bottom: 18px;
}

.icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  display: inline-grid;
  place-items: center;
  color: var(--ink);
  position: relative;
}
.icon-button.has-dot::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--violet);
  top: 10px;
  right: 11px;
}
.primary, .secondary, .chip-button {
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.primary { background: var(--violet); color: #fff; box-shadow: 0 12px 26px rgba(91,45,242,.22); }
.primary.dark { background: var(--ink); box-shadow: none; }
.secondary { background: #fff; color: var(--ink); border-color: var(--line); }
.secondary.violet { color: var(--violet); border-color: var(--violet-2); }
.secondary.danger { color: var(--red); background: #fff6f6; border-color: #ffdada; }
.chip-button { min-height: 40px; padding: 0 12px; background: #fff; border-color: var(--line); color: var(--ink); }
.chip-button.active { background: var(--violet); color: white; border-color: var(--violet); }
.full { width: 100%; }

.login-view {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(500px, 1.35fr) minmax(380px, .9fr);
  background: #f7f8fc;
}
.login-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4.2vw, 56px);
  background:
    radial-gradient(circle at 84% 27%, rgba(108, 64, 255, .52), transparent 34%),
    linear-gradient(135deg, #04152d 0%, #071a37 54%, #241679 100%);
  border-radius: 0 0 26px 0;
  min-height: 100vh;
}
.login-hero::before {
  content: "";
  position: absolute;
  inset: 14% -18% 0 38%;
  background: repeating-radial-gradient(ellipse at center, rgba(98, 82, 255, .36) 0 1px, transparent 1px 18px);
  opacity: .6;
  transform: rotate(-12deg);
}
.hero-copy { margin-top: clamp(44px, 8vh, 92px); position: relative; max-width: 540px; color: white; }
.eyebrow {
  display: inline-flex;
  padding: 8px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
  color: #f4f5ff;
  font-weight: 700;
}
.hero-copy h1 { font-size: clamp(28px, 3.1vw, 40px); line-height: 1.08; margin: 20px 0 12px; letter-spacing: 0; }
.hero-copy h1 span { color: #9d72ff; display: block; }
.hero-copy p { color: #d9def0; font-size: 14px; line-height: 1.6; max-width: 500px; }
.hero-points { position: relative; display: grid; gap: 18px; max-width: 470px; margin-top: 30px; color: white; }
.hero-points article { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center; }
.hero-points article > span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(124, 90, 255, .22); color: #a988ff; }
.hero-points small { color: #c9d0e2; display: block; margin-top: 5px; line-height: 1.5; }
.login-proof {
  position: absolute;
  left: clamp(34px, 5vw, 72px);
  right: clamp(34px, 5vw, 72px);
  bottom: 38px;
  min-height: 58px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  color: white;
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
}
.login-proof span { color: white; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.login-proof b { white-space: nowrap; }
.login-proof i { display: inline-grid; place-items: center; color: white; }
.dashboard-ghost {
  position: absolute;
  right: 4vw;
  top: 20%;
  width: 44%;
  min-width: 340px;
  height: 48%;
  transform: perspective(900px) rotateY(-16deg) rotateZ(5deg);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(32,49,112,.78), rgba(14,24,66,.7));
  box-shadow: 0 44px 95px rgba(0,0,0,.34);
  padding: 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 70px;
  gap: 12px;
  opacity: .72;
}
.ghost-card, .ghost-chart, .ghost-donut { border-radius: 16px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); }
.ghost-card.wide { grid-column: span 1; }
.ghost-chart { grid-column: span 2; grid-row: span 3; background: linear-gradient(180deg, rgba(113,83,255,.24), rgba(113,83,255,.04)); }
.ghost-donut { grid-row: span 3; border-radius: 22px; }
.login-panel-wrap { padding: 42px clamp(24px, 4vw, 64px); display: grid; align-content: center; position: relative; }
.login-tools { position: absolute; top: 32px; right: clamp(24px, 4vw, 64px); display: flex; gap: 10px; }
.login-card { background: white; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: clamp(24px, 3.3vw, 40px); width: min(100%, 500px); justify-self: center; }
.login-card h2 { font-size: 24px; margin: 0 0 6px; }
.login-card p { color: var(--muted); margin: 0 0 22px; font-size: 13px; }
.login-card label { display: grid; gap: 8px; font-weight: 700; margin-top: 16px; }
.login-card input, .input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 12px;
  background: white;
  color: var(--ink);
  outline: none;
}
.login-card input:focus, .input:focus { border-color: var(--violet-2); box-shadow: 0 0 0 4px rgba(91,45,242,.09); }
.input.strong { height: 44px; border-color: var(--violet); }
.input.invalid { border-color: #ff9c9c; background: #fff6f6; }
.form-row, .split-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.form-row { margin: 18px 0; }
.check { display: flex !important; grid-template-columns: auto 1fr; align-items: center; gap: 10px !important; margin: 0 !important; color: var(--muted); }
.check input { width: 17px; height: 17px; accent-color: var(--violet); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--subtle); margin: 22px 0; }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.split-actions .secondary { flex: 1; }
.login-note { display: block; text-align: center; color: var(--muted); margin-top: 24px; font-size: 13px; }

.workspace-view { min-height: 100vh; height: 100vh; display: grid; grid-template-columns: var(--workspace-nav-width) 1fr; transition: grid-template-columns .22s ease; overflow: hidden; }
.workspace-view.sidebar-collapsed { grid-template-columns: var(--workspace-nav-width) 1fr; }
.workspace-view,
.main-shell {
  position: relative;
}
.workspace-view {
  --workspace-nav-width: 236px;
}
.workspace-view.sidebar-collapsed {
  --workspace-nav-width: 78px;
}
.sidebar {
  background: var(--nav);
  color: white;
  padding: 18px 14px;
  position: sticky;
  top: 0;
  z-index: 40;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-height: 0;
  overflow: hidden;
}
.side-brand { display: grid; grid-template-columns: 46px 1fr 34px; align-items: center; gap: 10px; font-size: 16px; padding: 0 6px 10px; }
.side-brand .brand-mark { width: 46px; height: 46px; }
.sidebar-toggle-button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: #dce6f7;
  display: grid;
  place-items: center;
  padding: 0;
}
.sidebar-toggle-button:hover { background: rgba(255,255,255,.12); color: white; }
.sidebar-toggle-button .icon { width: 18px; height: 18px; transition: transform .18s ease; }
.side-nav {
  display: grid;
  gap: 6px;
  align-content: start;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.34) transparent;
}
.side-nav::-webkit-scrollbar { width: 6px; }
.side-nav::-webkit-scrollbar-track { background: transparent; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); border-radius: 999px; }
.side-nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.44); }
.side-nav button, .logout {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  padding: 0 14px;
  background: transparent;
  color: #dce6f7;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  position: relative;
  }
  .side-nav button.active, .side-nav button:hover { background: var(--violet); color: white; }
.side-nav button .icon,
.logout .icon {
  width: 18px;
  height: 18px;
  color: #b7c7df;
}
.side-nav button.active .icon,
.side-nav button:hover .icon,
.logout:hover .icon {
  color: white;
}
.side-nav button.nav-highlight {
  border: 1px solid rgba(148, 240, 208, .22);
  background: rgba(17, 184, 134, .12);
}
.side-nav button.nav-highlight .icon {
  color: #94f0d0;
}
.side-nav button.nav-highlight.active,
.side-nav button.nav-highlight:hover {
  background: linear-gradient(135deg, var(--violet), #0f766e);
  color: white;
}
.side-nav button::after,
.logout::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  z-index: 50;
  min-width: max-content;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #101828;
  color: #fff;
  box-shadow: 0 14px 34px rgba(7,20,45,.24);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  white-space: nowrap;
}
.side-nav button::before,
.logout::before {
  content: "";
  position: absolute;
  left: calc(100% + 6px);
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #101828;
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
  z-index: 51;
}
.side-nav button:hover::after,
.side-nav button:focus-visible::after,
.logout:hover::after,
.logout:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.side-nav button:hover::before,
.side-nav button:focus-visible::before,
.logout:hover::before,
.logout:focus-visible::before {
  opacity: 1;
}
.side-footer {
  flex: 0 0 auto;
  display: grid;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,.11);
  padding-top: 14px;
  margin-top: 0;
}
.logout { width: 100%; }
.logout:hover { background: rgba(255,255,255,.08); color: white; }
.workspace-view.sidebar-collapsed .sidebar { padding-inline: 10px; }
.workspace-view.sidebar-collapsed .side-brand { grid-template-columns: 1fr; justify-items: center; padding-inline: 0; }
.workspace-view.sidebar-collapsed .side-brand strong,
.workspace-view.sidebar-collapsed .side-nav b,
.workspace-view.sidebar-collapsed .side-footer b {
  display: none;
}
.workspace-view.sidebar-collapsed .side-brand .brand-mark { width: 40px; height: 40px; }
.workspace-view.sidebar-collapsed .sidebar-toggle-button {
  width: 36px;
  height: 32px;
}
.workspace-view.sidebar-collapsed .sidebar-toggle-button .icon { transform: scaleX(-1); }
.workspace-view.sidebar-collapsed .side-nav button,
.workspace-view.sidebar-collapsed .logout {
  justify-content: center;
  width: 48px;
  min-height: 48px;
  margin-inline: auto;
  padding-inline: 0;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.workspace-view.sidebar-collapsed .side-nav { padding-right: 0; }
.workspace-view.sidebar-collapsed .side-nav button.active,
.workspace-view.sidebar-collapsed .side-nav button:hover,
.workspace-view.sidebar-collapsed .logout:hover {
  background: rgba(91,45,242,.92);
  border-color: rgba(166,140,255,.52);
}

.main-shell { min-width: 0; z-index: 1; width: 100%; min-height: 100vh; height: 100vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.topbar {
  min-height: 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 460px) auto;
  align-items: center;
  gap: 14px;
  padding: 10px 26px;
  width: 100%;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  background: rgba(247,248,252,.92);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.mobile-brand { display: none; align-items: center; gap: 10px; }
.mobile-brand .brand-mark { width: 38px; height: 38px; font-size: 12px; }
.topbar-breadcrumb {
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.search {
  justify-self: stretch;
  width: 100%;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: white;
  cursor: pointer;
}
.search:focus-within, .search:hover { border-color: #d7dcef; box-shadow: 0 10px 28px rgba(15, 23, 42, .05); }
.search input { border: 0; outline: 0; flex: 1; min-width: 0; cursor: pointer; background: transparent; color: var(--muted); }
kbd { background: #f3f4f8; color: var(--muted); border-radius: 8px; padding: 3px 9px; font-weight: 700; }
.top-actions { display: flex; gap: 12px; align-items: center; }
.workspace-picker, .profile {
  min-height: 42px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 14px;
  display: grid;
  align-items: center;
}
.workspace-picker { grid-template-columns: auto auto auto; column-gap: 10px; padding: 6px 12px; }
.workspace-picker small, .profile small { color: var(--muted); font-size: 11px; }
.workspace-picker b, .profile b { grid-column: 2; text-align: left; }
.profile { grid-template-columns: 34px auto; column-gap: 9px; padding: 6px 12px; }
.profile span { width: 32px; height: 32px; border-radius: 50%; background: var(--violet); color: white; display: grid; place-items: center; font-weight: 800; grid-row: span 2; }

.page-host { min-height: 0; padding: 0 26px 26px; overflow: auto; overscroll-behavior: contain; }
.page { display: none; }
.page.active { display: block; }
.app-footer {
  padding: 0 26px 22px;
  color: var(--subtle);
  font-size: 12px;
  text-align: right;
}
.app-footer strong { color: var(--muted); font-weight: 800; }
.command-palette {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: start center;
  padding: min(10vh, 84px) 18px 18px;
}
.command-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 20, 45, .46);
  backdrop-filter: blur(7px);
}
.command-dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: min(720px, 84vh);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(231,234,242,.92);
  border-radius: 18px;
  box-shadow: 0 32px 92px rgba(7,20,45,.28);
  overflow: hidden;
}
.command-head {
  height: 58px;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
.command-head input {
  height: 44px;
  border: 0;
  outline: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  background: transparent;
}
.command-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  color: var(--muted);
  border-bottom: 1px solid #f0f2f7;
}
.command-meta strong { color: var(--ink); }
.command-results { overflow: auto; padding: 8px; display: grid; gap: 4px; }
.command-item {
  width: 100%;
  min-height: 66px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  padding: 10px 12px;
  text-align: left;
  color: var(--ink);
}
.command-item.active, .command-item:hover { background: var(--violet-soft); border-color: #ded6ff; }
.command-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: white;
  color: var(--violet);
  border: 1px solid #e8e3ff;
}
.command-copy { min-width: 0; display: grid; gap: 4px; }
.command-copy b { font-size: 13px; }
.command-copy small { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.command-item em {
  font-style: normal;
  color: var(--subtle);
  font-size: 11px;
  font-weight: 800;
  background: #f7f8fb;
  border-radius: 999px;
  padding: 5px 8px;
}
.command-empty {
  min-height: 180px;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 8px;
  color: var(--muted);
}
.command-empty b { color: var(--ink); font-size: 15px; }
.command-foot {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: #fbfcff;
  font-size: 12px;
}
.command-foot span { display: inline-flex; align-items: center; gap: 5px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin: 14px 0 20px; }
.page-head small { color: var(--muted); font-weight: 800; }
.page-head h1 { font-size: clamp(24px, 2vw, 32px); line-height: 1.12; margin: 5px 0 6px; }
.page-head p { margin: 0; color: var(--muted); font-size: 13px; }
.action-head { align-items: center; }
.action-cluster { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid #e4e8f2;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 8px 24px rgba(15,23,42,.04);
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.breadcrumb button {
  border: 0;
  background: transparent;
  color: #55627c;
  font: inherit;
  min-height: 22px;
  padding: 0 4px;
  border-radius: 999px;
  cursor: pointer;
}
.breadcrumb button:hover {
  color: var(--violet);
  background: var(--violet-soft);
}
.breadcrumb svg {
  width: 13px;
  height: 13px;
  color: #9aa4b7;
  flex: 0 0 auto;
}
.breadcrumb strong {
  color: var(--violet);
  padding: 0 6px;
  white-space: nowrap;
}
.page-head .breadcrumb { display: none; }
.topbar-breadcrumb .breadcrumb {
  display: inline-flex;
  min-height: 34px;
  padding: 5px 12px;
  font-size: 12px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-breadcrumb .breadcrumb button {
  min-height: 24px;
  padding: 0 5px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.metric, .panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(15,23,42,.04);
}
.metric { padding: 16px; min-height: 106px; position: relative; overflow: hidden; }
.metric > span:first-child { width: 42px; height: 42px; display: grid; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 13px; float: left; margin-right: 12px; }
.metric small { color: var(--muted); font-weight: 700; }
.metric b { display: block; font-size: 15px; margin: 5px 0; clear: right; }
.metric em { font-style: normal; font-size: 12px; color: var(--muted); }
.metric em.up, .up { color: var(--green); }
.metric em.down { color: var(--red); }
.spark { height: 32px; width: 90px; margin-left: auto; border-radius: 50% 50% 0 0; background: linear-gradient(180deg, rgba(91,45,242,.22), transparent); clip-path: polygon(0 80%, 12% 64%, 24% 72%, 36% 38%, 48% 55%, 60% 34%, 72% 18%, 84% 44%, 100% 20%, 100% 100%, 0 100%); }
.spark.blue { background: linear-gradient(180deg, rgba(53,132,255,.25), transparent); }
.spark.green { background: linear-gradient(180deg, rgba(33,180,97,.25), transparent); }
.spark.orange { background: linear-gradient(180deg, rgba(255,138,42,.25), transparent); }

.dashboard-grid {
  display: grid;
  grid-template-columns: 1.35fr .74fr .72fr;
  gap: 14px;
  align-items: start;
}
.panel { padding: 16px; }
.panel h2 { margin: 0 0 12px; font-size: 14px; }
.panel-title { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 10px; }
.panel-title h2 { margin: 0; }
.sales-analytics { min-height: 300px; }
.chart-lines { height: 220px; position: relative; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0 43px, #edf0f6 44px); overflow: hidden; }
.chart-lines span, .chart-lines i, .chart-lines b { position: absolute; left: 0; right: 0; height: 100%; bottom: 0; }
.chart-lines span { background: linear-gradient(180deg, rgba(91,45,242,.16), rgba(91,45,242,.02)); clip-path: polygon(0 84%, 5% 54%, 10% 68%, 16% 32%, 22% 58%, 28% 38%, 34% 76%, 41% 61%, 48% 40%, 55% 62%, 62% 48%, 70% 68%, 78% 36%, 85% 32%, 92% 78%, 100% 48%, 100% 100%, 0 100%); }
.chart-lines i { border-bottom: 3px solid var(--violet); clip-path: polygon(0 84%, 5% 54%, 10% 68%, 16% 32%, 22% 58%, 28% 38%, 34% 76%, 41% 61%, 48% 40%, 55% 62%, 62% 48%, 70% 68%, 78% 36%, 85% 32%, 92% 78%, 100% 48%); }
.chart-lines b { border-bottom: 2px dashed #a68cff; opacity: .6; clip-path: polygon(0 72%, 8% 62%, 14% 42%, 22% 24%, 30% 58%, 38% 48%, 46% 64%, 54% 42%, 62% 28%, 70% 58%, 78% 30%, 86% 42%, 94% 22%, 100% 36%); }
.donut-wrap { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; }
.donut { width: 144px; height: 144px; border-radius: 50%; background: conic-gradient(var(--violet) 0 57%, var(--blue) 57% 82%, #62cc82 82% 95%, var(--orange) 95%); display: grid; place-items: center; position: relative; }
.donut::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: white; }
.donut strong, .donut small { z-index: 1; text-align: center; }
.donut small { display: block; color: var(--muted); margin-top: 34px; }
.donut-wrap ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.donut-wrap li { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; }
.donut-wrap li b { color: var(--ink); }
.alert-row, .product-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f2f7; }
.product-thumb { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; background: #f1f3f7; }
.alert-row small { display: block; color: var(--red); margin-top: 5px; }
.table-panel { grid-column: span 2; }
.products-panel, .quick-actions, .stock-alerts { min-height: 230px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 700px; }
th, td { text-align: left; padding: 10px 9px; border-bottom: 1px solid #edf0f5; font-size: 12px; }
th { color: #5b6681; font-size: 10px; text-transform: uppercase; }
.pill { padding: 5px 8px; border-radius: 8px; font-weight: 800; font-size: 11px; display: inline-flex; }
.paid, .completed { background: #e7f8ed; color: #148f4c; }
.pending { background: #fff2df; color: #db7600; }
.partial { background: #ffe9df; color: #dd5e10; }
.draft { background: #eff1f5; color: #667085; }
.deleted { background: #ffe1e3; color: #d31624; }
.refunded { background: #e5f1ff; color: #1769d5; }
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick-grid button { min-height: 76px; border: 0; border-radius: 12px; background: #f7f5ff; color: var(--ink); display: grid; place-items: center; gap: 6px; }
.quick-grid span { color: var(--violet); }

.invoice-layout {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(580px, 1.45fr);
  gap: 14px;
}
.scanner-panel { grid-row: span 2; }
steplabel { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--violet-soft); color: var(--violet); font-weight: 900; margin-right: 8px; }
.search-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; margin: 12px 0; }
.mini-table { display: grid; gap: 0; border-top: 1px solid var(--line); margin-top: 12px; }
.mini-row { display: grid; grid-template-columns: 1.4fr .8fr .5fr .7fr auto; gap: 8px; align-items: center; padding: 10px 0; border-bottom: 1px solid #eff1f5; font-size: 12px; }
.mini-row b { color: var(--violet); }
.fit { width: fit-content; margin-top: 14px; }
.cart-panel { min-height: 340px; min-width: 0; overflow: hidden; }
.cart-panel .panel-title strong span { color: var(--violet); }
.cart-rows { display: grid; gap: 0; min-width: 0; }
.cart-row { display: grid; grid-template-columns: minmax(160px, 1fr) 82px 116px 80px 90px 100px 38px; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid #eff1f5; }
.cart-row .item { display: flex; gap: 10px; align-items: center; }
.cart-row .qty { display: grid; grid-template-columns: 30px 1fr 30px; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.cart-row .qty button { border: 0; background: white; min-height: 30px; }
.cart-row .qty input { border: 0; text-align: center; width: 100%; }
.customer-panel, .billing-panel { min-height: 230px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.form-grid.wide { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; color: #47536d; }
.form-grid .wide-field { grid-column: span 2; }
.party-layout { display: grid; grid-template-columns: minmax(360px, .95fr) minmax(0, 1.05fr); gap: 14px; align-items: start; }
.party-form, .party-list { min-width: 0; }
.party-list .filters { grid-template-columns: minmax(220px, 1fr) auto; }
.party-form .action-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
textarea.input { min-height: 72px; resize: vertical; line-height: 1.4; padding-top: 10px; }
.total-panel { background: #f5f2ff; }
.total-panel strong { color: var(--violet); font-size: 20px; display: block; margin-bottom: 12px; }
.total-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.total-grid span { background: rgba(255,255,255,.7); border: 1px solid #e6e0ff; border-radius: 10px; padding: 10px; color: var(--muted); font-size: 11px; }
.total-grid b { display: block; color: var(--ink); font-size: 14px; margin-top: 5px; }
.sticky-actions {
  position: sticky;
  bottom: 0;
  z-index: 18;
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  padding: 14px 0 8px;
  background: linear-gradient(180deg, transparent, var(--soft) 34%);
}
.sticky-actions button { min-width: 160px; }
#page-product .sticky-actions {
  margin-top: 18px;
  padding: 14px 0;
  background: linear-gradient(180deg, rgba(247,248,252,0), var(--soft) 28%, var(--soft));
}

.history-metrics .metric { min-height: 100px; }
.history-grid { display: grid; grid-template-columns: minmax(0, 1fr) 292px; gap: 14px; align-items: start; }
.filters { display: grid; grid-template-columns: repeat(4, 1fr) auto auto; gap: 12px; margin-bottom: 14px; }
.pager { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding-top: 16px; }
.pager span { margin-right: auto; color: var(--muted); }
.history-side { display: grid; gap: 14px; }
.mini-chart b { font-size: 17px; display: block; margin-bottom: 12px; }
.quick-list { display: grid; gap: 10px; }
.quick-list button { height: 40px; border: 1px solid var(--line); border-radius: 10px; background: white; display: flex; justify-content: space-between; align-items: center; padding: 0 12px; color: var(--ink); font-weight: 700; }

.product-master-panel { min-width: 0; }
.product-master-filters { grid-template-columns: minmax(260px, 1fr) 150px 150px auto auto; }
.product-master-panel tbody tr[data-product-open] { cursor: pointer; }
.product-master-panel tbody tr[data-product-open]:hover { background: #faf8ff; }
.product-master-panel td small { display: block; color: var(--muted); margin-top: 3px; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-master-panel code { color: var(--violet); font-weight: 800; }
#page-product { padding-bottom: 96px; }
.product-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr) 280px; gap: 14px; align-items: start; }
.variant-shelf, .product-side { position: sticky; top: 80px; }
.variant-row {
  width: 100%;
  border: 1px solid transparent;
  background: white;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name pill"
    "barcode stock";
  gap: 6px 10px;
  align-items: center;
  padding: 11px 10px;
  border-bottom-color: #eff1f5;
  font-size: 12px;
  color: var(--ink);
  text-align: left;
  overflow: hidden;
}
.variant-row:hover, .variant-row.active { background: #f7f4ff; border-color: #e5dcff; color: var(--violet); border-radius: 12px; }
.variant-row b { grid-area: name; min-width: 0; font-size: 12px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; }
.variant-row > span:nth-of-type(1) { grid-area: barcode; min-width: 0; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.variant-row > span:nth-of-type(2) { grid-area: stock; color: var(--ink); font-weight: 800; text-align: right; }
.variant-row .pill { grid-area: pill; white-space: nowrap; justify-self: end; padding: 4px 7px; font-size: 10px; }
.variant-total { margin-top: 16px; display: grid; grid-template-columns: 42px 1fr 1fr; gap: 10px; align-items: center; background: #fafbfe; border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.variant-total > span { width: 36px; height: 36px; display: grid; place-items: center; background: var(--violet-soft); color: var(--violet); border-radius: 10px; }
.variant-total small { display: block; margin-bottom: 4px; }
.product-form { display: grid; gap: 14px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); background: white; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.steps button { border: 0; background: white; min-height: 62px; display: grid; grid-template-columns: 34px 1fr; align-items: center; text-align: left; column-gap: 10px; padding: 10px 16px; font-weight: 800; border-bottom: 3px solid transparent; }
.steps button.active { border-bottom-color: var(--violet); color: var(--violet); }
.steps b { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--violet); color: white; grid-row: span 2; }
.steps small { color: var(--muted); font-weight: 600; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
#page-product .form-grid.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#page-product .form-grid label { min-width: 0; }
#page-product .input { min-width: 0; min-height: 38px; padding: 8px 12px; font-size: 12px; }
.toggle-line { grid-template-columns: 1fr auto !important; align-items: center; }
.toggle-line input { width: 46px; height: 24px; accent-color: var(--violet); }
.price-matrix { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.price-matrix-head, .price-matrix label { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #edf0f5; }
.price-matrix-head { background: #fafbfe; color: #5b6681; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.price-matrix label { font-size: 12px; font-weight: 800; color: var(--ink); }
.price-matrix label:last-child { border-bottom: 0; }
.price-matrix .input { min-height: 34px; padding: 6px 9px; }
.enterprise-logo-panel {
  display: grid;
  gap: 10px;
}
.enterprise-logo-preview {
  min-height: 124px;
  border: 1px dashed #cfd8e6;
  border-radius: 14px;
  background: linear-gradient(135deg, #f9fbff, #ffffff);
  padding: 16px;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  color: var(--muted);
}
.enterprise-logo-preview.has-image {
  place-items: start;
  justify-items: start;
  text-align: left;
}
.enterprise-logo-preview img {
  max-width: 180px;
  max-height: 92px;
  object-fit: contain;
}
.enterprise-logo-preview b {
  color: var(--ink);
}
.snapshot b { font-size: 21px; display: block; margin: 7px 0; }
.snapshot p { display: flex; justify-content: space-between; color: var(--muted); }
.media-drop { min-height: 124px; display: grid; place-items: center; text-align: center; border-style: dashed; color: var(--muted); }
.media-drop span { color: var(--muted); }
.empty-state { padding: 14px 0; color: var(--muted); font-size: 12px; }
.source-summary { color: var(--muted); font-size: 12px; font-weight: 700; min-height: 22px; padding: 6px 2px 2px; }
.status-toast {
  position: fixed;
  right: 22px;
  top: 82px;
  z-index: 90;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid #bce8c8;
  background: #f0fff5;
  color: #107c3f;
  box-shadow: 0 18px 48px rgba(15, 23, 42, .14);
  font-weight: 800;
}
.status-toast.error {
  border-color: #ffd0d0;
  background: #fff4f4;
  color: #dc2626;
}
.status-toast.hidden { display: none; }

.setup-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.setup-nav {
  position: sticky;
  top: 80px;
  display: grid;
  gap: 8px;
  padding: 10px;
}
.setup-nav button {
  min-height: 62px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  display: grid;
  grid-template-columns: 38px 1fr;
  column-gap: 10px;
  align-items: center;
  text-align: left;
  padding: 10px;
  color: var(--ink);
}
.setup-nav button:hover, .setup-nav button.active {
  background: #f4f1ff;
  border-color: #ded6ff;
  color: var(--violet);
}
.setup-nav button > span { grid-row: span 2; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: white; color: currentColor; }
.setup-nav small { color: var(--muted); font-size: 11px; line-height: 1.35; }
.setup-content { min-width: 0; }
.setup-tab { display: none; }
.setup-tab.active { display: grid; gap: 14px; }
.setup-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.setup-form-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(4, auto);
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.setup-select { max-width: 280px; }
.switch-line {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  display: grid !important;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  background: #fff;
}
.switch-line input { display: none; }
.switch-line span {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: #d8deea;
  position: relative;
  transition: .18s ease;
}
.switch-line span::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  left: 3px;
  top: 3px;
  box-shadow: 0 2px 8px rgba(15,23,42,.18);
  transition: .18s ease;
}
.switch-line input:checked + span { background: var(--violet); }
.switch-line input:checked + span::after { transform: translateX(18px); }
.switch-line b { font-size: 12px; color: var(--ink); }
.rule-explainer {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #dfe7ff;
  border-radius: 12px;
  background: #f7f9ff;
}
.rule-explainer p, .roadmap-card p { color: var(--muted); line-height: 1.55; margin: 6px 0 0; }
.integration-stack { display: grid; gap: 14px; }
.integration-block {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafbfe;
}
.integration-switch {
  justify-self: start;
  min-width: 260px;
  background: white;
}
.integration-switch-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.import-guidance {
  margin-top: 14px;
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafbfe;
}
.import-guidance p { color: var(--muted); margin: 0; line-height: 1.5; }
.import-columns {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.import-columns span {
  color: var(--muted);
  font-weight: 800;
  font-size: 11px;
  text-transform: uppercase;
}
.import-columns code {
  white-space: normal;
  color: var(--ink);
}
.import-job-form { margin-top: 14px; }
.roadmap-card { min-height: 150px; }
.roadmap-card > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--violet); background: var(--violet-soft); border-radius: 13px; margin-bottom: 14px; }

.mobile-nav { display: none; }

@media (max-width: 1320px) {
  .metric-grid { grid-template-columns: repeat(3, 1fr); }
    .dashboard-grid, .history-grid, .product-layout, .setup-shell, .party-layout { grid-template-columns: 1fr; }
  .table-panel { grid-column: auto; }
  .product-side, .variant-shelf, .setup-nav { position: static; }
  .setup-nav { grid-template-columns: repeat(3, 1fr); }
  .invoice-layout { grid-template-columns: 1fr; }
  .cart-row { grid-template-columns: minmax(180px, 1fr) 84px 128px 90px 96px 100px 42px; }
}

@media (max-width: 1500px) and (min-width: 1321px) {
  .cart-row {
    grid-template-columns: minmax(136px, 1fr) 68px 98px 68px 78px 82px 36px;
    gap: 8px;
    font-size: 12px;
  }
  .cart-row .input {
    padding-inline: 10px;
  }
}

@media (max-width: 980px) {
  .login-view { grid-template-columns: 1fr; }
  .login-hero { min-height: auto; border-radius: 0 0 22px 22px; padding-bottom: 36px; }
  .dashboard-ghost, .login-proof { display: none; }
  .hero-copy { margin-top: 52px; }
  .login-panel-wrap { padding-top: 78px; }
  .workspace-view { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topbar { grid-template-columns: 1fr; height: auto; padding: 10px 14px; }
  .mobile-brand { display: flex; }
  .search { justify-self: stretch; order: 2; }
  .top-actions { justify-content: space-between; overflow-x: auto; padding-bottom: 2px; }
  .workspace-picker { min-width: 178px; }
  .profile b, .profile small { display: none; }
  .profile { display: flex; padding: 8px; }
  .page-host { padding: 0 14px 84px; }
  .app-footer { padding: 0 14px 92px; text-align: center; }
  .command-palette { padding-top: 18px; }
  .command-dialog { max-height: calc(100vh - 36px); border-radius: 16px; }
  .command-meta, .command-foot { align-items: flex-start; flex-direction: column; }
  .command-item { grid-template-columns: 38px minmax(0, 1fr); }
  .command-item em { display: none; }
  .mobile-nav {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 9999;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: var(--nav);
    border-radius: 16px;
    padding: 6px;
    box-shadow: 0 18px 50px rgba(0,0,0,.24);
    pointer-events: auto;
    transform: translateZ(0);
  }
  .mobile-nav button { border: 0; border-radius: 12px; min-height: 48px; color: #cbd6ea; background: transparent; display: grid; place-items: center; gap: 2px; font-size: 10px; pointer-events: auto; }
  .mobile-nav button.active { color: white; background: var(--violet); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.wide, .filters, .setup-card-grid, .party-list .filters, .product-master-filters { grid-template-columns: repeat(2, 1fr); }
  .setup-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-nav { grid-template-columns: repeat(2, 1fr); }
  .cart-row { grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
  .cart-row .qty { max-width: 140px; }
  .sticky-actions { position: static; flex-wrap: wrap; background: transparent; padding: 18px 0 0; }
  .sticky-actions button { flex: 1; min-width: 150px; }
  #page-product .form-grid.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-toast { top: 12px; right: 14px; left: 14px; max-width: none; }
}

@media (max-width: 620px) {
  .login-hero { padding: 20px; }
  .brand-row { font-size: 16px; }
  .brand-mark { width: 38px; height: 38px; }
  .hero-copy h1 { font-size: 28px; }
  .hero-copy p { font-size: 13px; }
  .hero-points article { grid-template-columns: 40px 1fr; }
  .hero-points article > span { width: 38px; height: 38px; }
  .login-panel-wrap { padding: 68px 14px 22px; }
  .login-tools { top: 20px; right: 14px; }
  .login-card { padding: 20px; border-radius: 18px; }
  .login-card h2 { font-size: 24px; margin-top: 0; }
  .split-actions, .form-row, .page-head, .action-head { flex-direction: column; align-items: stretch; }
  .breadcrumb { width: 100%; overflow-x: auto; justify-content: flex-start; border-radius: 14px; }
  .breadcrumb button, .breadcrumb strong { white-space: nowrap; }
  .metric-grid, .form-grid, .form-grid.wide, .two-col, .filters, .total-grid, .donut-wrap, .setup-card-grid, .setup-form-row, .setup-nav, .party-list .filters, .product-master-filters { grid-template-columns: 1fr; }
  #page-product .form-grid.wide { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 24px; }
  .action-cluster { justify-content: stretch; }
  .action-cluster button { flex: 1; }
  .quick-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .top-actions .icon-button { display: none; }
  .workspace-picker small { display: none; }
}