/*
 * CHZM Premium OS
 * Global visual system for the authenticated product and public access screens.
 * Existing route CSS may refine a component, but this file owns the shared shell,
 * materials, typography, controls, tables, dialogs and interaction states.
 */

:root {
  /* Primitive palette */
  --premium-blue-50: #f0f7ff;
  --premium-blue-100: #e0efff;
  --premium-blue-200: #bedcff;
  --premium-blue-300: #85bdff;
  --premium-blue-400: #429aff;
  --premium-blue-500: #0878f9;
  --premium-blue-600: #0068df;
  --premium-blue-700: #0755b5;
  --premium-blue-800: #123f80;
  --premium-blue-900: #102f53;
  --premium-slate-25: #fcfdff;
  --premium-slate-50: #f7f9fc;
  --premium-slate-100: #eef2f7;
  --premium-slate-200: #dce4ee;
  --premium-slate-300: #c7d1de;
  --premium-slate-400: #8d9aad;
  --premium-slate-500: #68778b;
  --premium-slate-600: #4c5a6e;
  --premium-slate-700: #344154;
  --premium-slate-800: #1f2b3a;
  --premium-slate-900: #101923;
  --premium-green-50: #ecfaf3;
  --premium-green-500: #169461;
  --premium-green-700: #0f7048;
  --premium-amber-50: #fff8e8;
  --premium-amber-500: #d28a12;
  --premium-amber-700: #945d06;
  --premium-red-50: #fff1f2;
  --premium-red-500: #d34751;
  --premium-red-700: #a72e38;

  /* Spatial, type and motion primitives */
  --premium-space-1: 4px;
  --premium-space-2: 8px;
  --premium-space-3: 12px;
  --premium-space-4: 16px;
  --premium-space-5: 24px;
  --premium-space-6: 32px;
  --premium-space-7: 40px;
  --premium-radius-sm: 9px;
  --premium-radius-md: 12px;
  --premium-radius-lg: 16px;
  --premium-radius-xl: 20px;
  --premium-radius-pill: 999px;
  --premium-fast: 150ms;
  --premium-normal: 220ms;
  --premium-slow: 320ms;
  --premium-ease: cubic-bezier(.2, .8, .2, 1);
  --premium-z-base: 1;
  --premium-z-sticky: 24;
  --premium-z-topbar: 40;
  --premium-z-popover: 80;
  --premium-z-dialog: 100;
  --premium-z-toast: 120;

  /* Semantic tokens */
  --premium-canvas: #f3f6fa;
  --premium-canvas-deep: #edf2f8;
  --premium-surface: rgba(255, 255, 255, .96);
  --premium-surface-solid: #fff;
  --premium-surface-soft: rgba(247, 250, 253, .9);
  --premium-glass: rgba(248, 251, 255, .76);
  --premium-glass-strong: rgba(252, 253, 255, .91);
  --premium-line: rgba(48, 63, 83, .1);
  --premium-line-strong: rgba(48, 63, 83, .16);
  --premium-ink: #171b21;
  --premium-ink-soft: #334154;
  --premium-muted: #697789;
  --premium-muted-soft: #8894a4;
  --premium-primary: var(--premium-blue-500);
  --premium-primary-hover: var(--premium-blue-600);
  --premium-focus: 0 0 0 4px rgba(8, 120, 249, .14);
  --premium-shadow-xs: 0 1px 2px rgba(30, 48, 72, .04);
  --premium-shadow-sm: 0 7px 22px rgba(37, 57, 84, .065), 0 1px 0 rgba(255, 255, 255, .9) inset;
  --premium-shadow-md: 0 14px 42px rgba(37, 57, 84, .09), 0 1px 0 #fff inset;
  --premium-shadow-lg: 0 28px 85px rgba(21, 37, 61, .22), 0 1px 0 rgba(255, 255, 255, .95) inset;
  --premium-primary-fill: linear-gradient(180deg, #2a96ff 0%, #0878f2 58%, #0068df 100%);
  --premium-primary-shadow: 0 9px 22px rgba(0, 105, 225, .22), 0 1px 0 rgba(255, 255, 255, .58) inset, 0 -1px 0 rgba(0, 68, 155, .24) inset;
  --premium-primary-shadow-hover: 0 12px 27px rgba(0, 105, 225, .29), 0 1px 0 rgba(255, 255, 255, .64) inset, 0 -1px 0 rgba(0, 68, 155, .28) inset;

  /* Component tokens */
  --premium-nav-item-height: 40px;
  --premium-nav-item-gap: var(--premium-space-2);
  --premium-nav-item-padding-x: var(--premium-space-3);
  --premium-nav-item-radius: var(--premium-radius-sm);
  --premium-topbar-control-height: 42px;
  --premium-metric-tile-min-height: 54px;
  --premium-metric-tile-padding-y: 8px;
  --premium-metric-tile-padding-x: 12px;
  --premium-list-row-min-height: 60px;
  --premium-list-row-padding-y: 11px;
  --premium-list-row-padding-x: 14px;
  --premium-table-cell-padding-y: 12px;
  --premium-table-cell-padding-x: 14px;
  --premium-dialog-radius: 22px;
  --premium-dialog-viewport-gap: 24px;
  --premium-popover-radius: 15px;
  --premium-toast-radius: 14px;

  /* Compatibility bridge for existing application CSS */
  --chzm-blue: var(--premium-blue-500);
  --chzm-blue-dark: var(--premium-blue-700);
  --chzm-navy: var(--premium-blue-900);
  --chzm-green: var(--premium-green-700);
  --chzm-red: var(--premium-red-700);
  --ink: var(--premium-ink);
  --muted: var(--premium-muted);
  --line: var(--premium-slate-200);
  --surface: var(--premium-surface-solid);
  --surface-soft: var(--premium-canvas);
  --blue-soft: var(--premium-blue-50);
  --green-soft: var(--premium-green-50);
  --amber-soft: var(--premium-amber-50);
  --red-soft: var(--premium-red-50);
  --focus: #78b6ff;
  --radius: var(--premium-radius-md);
  --shadow: var(--premium-shadow-md);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Inter, sans-serif;
}

html {
  background: var(--premium-canvas);
  color: var(--premium-ink);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background:
    radial-gradient(circle at 96% -4%, rgba(63, 160, 255, .14), transparent 30rem),
    radial-gradient(circle at 18% 4%, rgba(153, 124, 255, .07), transparent 28rem),
    linear-gradient(180deg, #f5f8fc 0%, var(--premium-canvas) 32%, var(--premium-canvas-deep) 100%);
  color: var(--premium-ink);
}

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

a,
button,
summary,
[role="button"] {
  cursor: pointer;
}

::selection {
  background: rgba(8, 120, 249, .2);
  color: var(--premium-slate-900);
}

:focus-visible {
  outline: 0;
  box-shadow: var(--premium-focus);
}

/* Product shell */
.popover-lazy-state,
.popover-lazy-retry {
  min-height: 72px;
  width: 100%;
  display: grid;
  place-items: center;
  padding: var(--premium-space-4);
  border: 0;
  background: transparent;
  color: var(--premium-muted);
  font: inherit;
  font-weight: 700;
  text-align: center;
}

.popover-lazy-retry {
  color: var(--premium-primary);
  cursor: pointer;
}

.authenticated-app .app-main {
  background:
    radial-gradient(circle at 96% 0, rgba(73, 165, 255, .14), transparent 31rem),
    radial-gradient(circle at 17% 8%, rgba(153, 124, 255, .065), transparent 27rem),
    linear-gradient(180deg, rgba(248, 250, 254, .94), var(--premium-canvas));
}

.authenticated-app .app-sidebar {
  width: var(--sidebar-width);
  padding: 17px 13px;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, .075);
  background:
    radial-gradient(circle at 10% 0, rgba(47, 139, 238, .25), transparent 17rem),
    linear-gradient(175deg, #143a63 0%, #102f53 43%, #0c2744 100%);
  box-shadow: 12px 0 34px rgba(13, 38, 67, .1);
}

.authenticated-app .app-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .055), transparent 34%);
}

.authenticated-app .sidebar-brand,
.authenticated-app .sidebar-nav,
.authenticated-app .sidebar-footer {
  position: relative;
  z-index: 1;
}

.authenticated-app .sidebar-brand {
  min-height: 48px;
  gap: 11px;
  margin-bottom: 17px;
  padding-inline: 8px;
  font-size: 14px;
  font-weight: 720;
  letter-spacing: -.01em;
}

.authenticated-app .sidebar-brand-mark {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .075));
  box-shadow: 0 8px 20px rgba(0, 16, 34, .16), 0 1px 0 rgba(255, 255, 255, .18) inset;
  font-size: 11px;
  font-weight: 800;
}

.authenticated-app .sidebar-nav {
  align-content: start;
  grid-auto-rows: min-content;
  gap: 9px;
  scrollbar-color: rgba(255, 255, 255, .2) transparent;
}

.authenticated-app .sidebar-nav-group {
  align-content: start;
  grid-auto-rows: min-content;
  gap: 3px;
}

.authenticated-app .sidebar-nav-label {
  margin: 4px 0 3px;
  color: rgba(222, 235, 249, .48);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .13em;
}

.authenticated-app .sidebar-nav-link {
  width: 100%;
  min-width: 0;
  height: var(--premium-nav-item-height);
  min-height: var(--premium-nav-item-height);
  max-height: var(--premium-nav-item-height);
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: var(--premium-nav-item-gap);
  padding: var(--premium-space-2) var(--premium-nav-item-padding-x);
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: var(--premium-nav-item-radius);
  color: rgba(239, 246, 255, .79);
  font-size: 12.5px;
  font-weight: 540;
  transition: color var(--premium-fast) ease, background-color var(--premium-fast) ease, border-color var(--premium-fast) ease, box-shadow var(--premium-fast) ease;
}

.authenticated-app .sidebar-nav-link > span:last-child {
  min-width: 0;
  display: block;
  overflow: hidden;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.authenticated-app .sidebar-nav-link:hover {
  border-color: rgba(255, 255, 255, .07);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.authenticated-app .sidebar-nav-link.active {
  border-color: rgba(255, 255, 255, .13);
  background: linear-gradient(135deg, rgba(255, 255, 255, .19), rgba(255, 255, 255, .11));
  box-shadow: 0 8px 22px rgba(0, 18, 39, .12), 3px 0 0 #68b0ff inset, 0 1px 0 rgba(255, 255, 255, .08) inset;
  color: #fff;
  font-weight: 540;
}

.authenticated-app .sidebar-nav-icon {
  color: rgba(209, 229, 250, .8);
}

.authenticated-app .sidebar-footer {
  padding: 14px 9px 1px;
  border-top-color: rgba(255, 255, 255, .1);
}

.authenticated-app .sidebar-footer strong {
  font-size: 11.5px;
  font-weight: 690;
}

.authenticated-app .sidebar-footer span {
  color: rgba(224, 236, 249, .52);
  font-size: 11px;
}

.authenticated-app .app-topbar {
  z-index: var(--premium-z-topbar);
  gap: 12px;
  padding-inline: 22px;
  border-bottom: 1px solid rgba(48, 63, 83, .08);
  background: rgba(251, 253, 255, .78);
  box-shadow: 0 8px 25px rgba(35, 54, 79, .035);
  -webkit-backdrop-filter: blur(22px) saturate(165%);
  backdrop-filter: blur(22px) saturate(165%);
}

.authenticated-app .global-search {
  width: min(440px, 42vw);
  height: var(--premium-topbar-control-height);
  border: 1px solid rgba(255, 255, 255, .86);
  border-radius: var(--premium-radius-pill);
  background: rgba(235, 240, 247, .72);
  box-shadow: 0 4px 14px rgba(44, 63, 88, .045), 0 1px 0 #fff inset;
  transition: background-color var(--premium-fast) ease, border-color var(--premium-fast) ease, box-shadow var(--premium-fast) ease;
}

.authenticated-app .global-search:hover {
  background: rgba(242, 246, 251, .9);
}

.authenticated-app .global-search:focus-within {
  border-color: rgba(8, 120, 249, .3);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--premium-focus), 0 5px 16px rgba(44, 63, 88, .065);
}

.authenticated-app .global-search input {
  height: 40px;
  font-size: 13px;
  box-shadow: none;
}

.authenticated-app .topbar-icon,
.authenticated-app .account-switcher > summary,
.authenticated-app .role-context {
  min-height: var(--premium-topbar-control-height);
  border: 1px solid rgba(48, 63, 83, .09);
  border-radius: 12px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 5px 16px rgba(42, 61, 87, .045), 0 1px 0 rgba(255, 255, 255, .95) inset;
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
}

.authenticated-app .topbar-icon:hover,
.authenticated-app .account-switcher > summary:hover {
  border-color: rgba(8, 120, 249, .18);
  background: rgba(255, 255, 255, .96);
}

.authenticated-app .topbar-logout-form {
  flex: 0 0 auto;
  margin: 0;
}

.authenticated-app .topbar-logout-button {
  min-height: var(--premium-topbar-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid rgba(48, 63, 83, .09);
  border-radius: 12px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 5px 16px rgba(42, 61, 87, .045), 0 1px 0 rgba(255, 255, 255, .95) inset;
  color: var(--premium-slate-700);
  cursor: pointer;
  font-size: 11px;
  font-weight: 720;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
  transition: border-color var(--premium-fast) ease, background-color var(--premium-fast) ease, box-shadow var(--premium-fast) ease, color var(--premium-fast) ease, transform var(--premium-fast) ease;
}

.authenticated-app .topbar-logout-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.authenticated-app .topbar-logout-button:hover {
  border-color: rgba(190, 44, 58, .2);
  background: rgba(255, 248, 249, .96);
  box-shadow: 0 7px 18px rgba(117, 35, 44, .08), 0 1px 0 #fff inset;
  color: var(--premium-red-700);
  transform: translateY(-1px);
}

.authenticated-app .topbar-logout-button:focus-visible {
  outline: none;
  box-shadow: var(--premium-focus), 0 5px 16px rgba(42, 61, 87, .055);
}

.authenticated-app .user-avatar {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: linear-gradient(145deg, #e8f4ff, #cfe7ff);
  box-shadow: 0 5px 14px rgba(42, 84, 134, .09), 0 1px 0 #fff inset;
  color: var(--premium-blue-700);
  font-size: 12px;
  overflow: hidden;
}

.authenticated-app .user-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.authenticated-app .user-menu > summary {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
}

.authenticated-app .user-directory-search input {
  box-shadow: none;
}

.authenticated-app .user-copy strong {
  color: var(--premium-slate-800);
  font-weight: 690;
}

.authenticated-app .user-copy small {
  color: var(--premium-muted);
}

.authenticated-app .switcher-popover,
.authenticated-app .notification-popover,
.authenticated-app .user-popover {
  z-index: var(--premium-z-popover);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 17px;
  background: rgba(249, 251, 254, .9);
  box-shadow: var(--premium-shadow-lg);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
}

.authenticated-app .switcher-option,
.authenticated-app .switcher-return,
.authenticated-app .user-popover a,
.authenticated-app .user-popover button {
  border-radius: 10px;
}

.authenticated-app .switcher-option {
  background: rgba(239, 243, 248, .76);
}

.authenticated-app .switcher-option:hover,
.authenticated-app .switcher-option:focus-visible,
.authenticated-app .user-popover a:hover,
.authenticated-app .user-popover button:hover {
  background: rgba(222, 238, 255, .82);
  color: var(--premium-blue-700);
}

.authenticated-app .app-main {
  min-height: 100dvh;
}

.authenticated-app .page-shell {
  width: auto;
  max-width: 1600px;
  padding: 25px 28px 68px;
}

/* Page hierarchy */
.authenticated-app .page-heading {
  gap: 12px;
  margin-bottom: 18px;
}

.authenticated-app .page-heading h1,
.authenticated-app .project-hero h1,
.authenticated-app .leader-command-header h1,
.authenticated-app .role-focus-hero h1,
.authenticated-app .employee-dashboard-intro h1 {
  color: #111820;
  font-weight: 730;
  letter-spacing: -.04em;
}

.authenticated-app .page-heading h1,
.authenticated-app .project-hero h1 {
  font-size: clamp(28px, 2.5vw, 38px);
}

.authenticated-app .page-heading p,
.authenticated-app .lead,
.authenticated-app .leader-command-header p,
.authenticated-app .role-focus-hero p,
.authenticated-app .employee-dashboard-intro p {
  color: var(--premium-muted);
}

.dashboard-eyebrow,
.dialog-eyebrow,
.catalog-code,
.invoice-source-label {
  color: #527499;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.section-heading h2,
.content-card-heading h2,
.dialog-heading h2 {
  color: var(--premium-slate-900);
  font-weight: 710;
  letter-spacing: -.025em;
}

.section-heading span,
.section-heading p,
.content-card-heading p {
  color: var(--premium-muted);
}

/* Shared premium surfaces */
.authenticated-app .content-card,
.authenticated-app .table-frame,
.authenticated-app .attention-card,
.authenticated-app .workspace-filter,
.authenticated-app .role-sections-panel,
.authenticated-app .role-assignment-panel,
.authenticated-app .leader-context-card,
.authenticated-app .metric-card,
.authenticated-app .request-summary-card,
.authenticated-app .issue-item-summary,
.authenticated-app .role-focus-hero,
.authenticated-app .leader-command-header,
.authenticated-app .employee-dashboard-intro {
  border-color: rgba(255, 255, 255, .9);
  background: var(--premium-surface);
  box-shadow: var(--premium-shadow-sm);
}

.authenticated-app .content-card,
.authenticated-app .table-frame,
.authenticated-app .attention-card,
.authenticated-app .role-sections-panel,
.authenticated-app .role-assignment-panel,
.authenticated-app .leader-context-card,
.authenticated-app .metric-card,
.authenticated-app .request-summary-card,
.authenticated-app .issue-item-summary {
  border-radius: var(--premium-radius-lg);
}

.authenticated-app .content-card {
  padding: 18px;
}

.authenticated-app .request-summary-card {
  min-height: 68px;
  padding: 12px 14px;
}

.authenticated-app .workspace-card,
.authenticated-app .role-action-card,
.authenticated-app .directory-row,
.authenticated-app .project-item-row,
.authenticated-app .request-row,
.authenticated-app .stock-movement-row,
.authenticated-app .warehouse-receiving-list > article {
  border-color: var(--premium-line);
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--premium-shadow-xs);
  transition: border-color var(--premium-fast) ease, background-color var(--premium-fast) ease, box-shadow var(--premium-normal) ease, transform var(--premium-fast) var(--premium-ease);
}

.authenticated-app .directory-row,
.authenticated-app .project-item-row,
.authenticated-app .request-row,
.authenticated-app .stock-movement-row,
.authenticated-app .warehouse-receiving-list > article {
  min-height: var(--premium-list-row-min-height);
  padding: var(--premium-list-row-padding-y) var(--premium-list-row-padding-x);
  border-radius: var(--premium-radius-md);
}

@media (hover: hover) {
  .authenticated-app .workspace-card:hover,
  .authenticated-app .role-action-card:hover,
  .authenticated-app .directory-row:hover,
  .authenticated-app .project-item-row:hover,
  .authenticated-app .request-row:hover,
  .authenticated-app .stock-movement-row:hover {
    border-color: rgba(8, 120, 249, .19);
    background: #fff;
    box-shadow: 0 13px 33px rgba(37, 57, 84, .095);
    transform: translateY(-1px);
  }
}

.authenticated-app .role-focus-hero,
.authenticated-app .leader-command-header,
.authenticated-app .employee-dashboard-intro {
  overflow: hidden;
  border-radius: var(--premium-radius-xl);
  background:
    radial-gradient(circle at 95% 8%, rgba(60, 159, 255, .17), transparent 17rem),
    radial-gradient(circle at 12% 110%, rgba(145, 119, 255, .08), transparent 19rem),
    rgba(253, 254, 255, .94);
}

.authenticated-app .executive-metric-strip,
.authenticated-app .role-metric-strip,
.authenticated-app .request-summary,
.authenticated-app .buyer-summary,
.authenticated-app .warehouse-receiving-summary,
.authenticated-app .stock-summary,
.authenticated-app .catalog-summary,
.authenticated-app .issue-summary,
.authenticated-app .stock-records-summary,
.authenticated-app .production-metrics {
  gap: 1px;
  overflow: hidden;
  border-color: rgba(49, 65, 85, .09);
  border-radius: 15px;
  background: rgba(49, 65, 85, .09);
  box-shadow: var(--premium-shadow-sm);
}

.authenticated-app .executive-metric,
.authenticated-app .role-metric,
.authenticated-app .request-summary > *,
.authenticated-app .buyer-summary > *,
.authenticated-app .warehouse-receiving-summary > *,
.authenticated-app .stock-summary > *,
.authenticated-app .catalog-summary > *,
.authenticated-app .issue-summary > *,
.authenticated-app .stock-records-summary > *,
.authenticated-app .production-metrics > * {
  background: rgba(255, 255, 255, .96);
}

.authenticated-app .executive-metric:hover,
.authenticated-app .role-metric:hover {
  background: var(--premium-blue-50);
}

/* Buttons */
.authenticated-app .button,
.public-app .button {
  min-height: 44px;
  padding: 8px 15px;
  border-radius: var(--premium-radius-pill);
  font-size: 12px;
  font-weight: 690;
  letter-spacing: -.005em;
  transition: color var(--premium-fast) ease, background-color var(--premium-fast) ease, border-color var(--premium-fast) ease, box-shadow var(--premium-fast) ease, transform 110ms ease;
}

.authenticated-app .button:focus-visible,
.public-app .button:focus-visible,
.authenticated-app .icon-button:focus-visible,
.public-app .icon-button:focus-visible {
  outline: 0;
  box-shadow: var(--premium-focus);
}

.authenticated-app .button-primary,
.public-app .button-primary {
  border-color: rgba(0, 92, 200, .38);
  background: var(--premium-primary-fill);
  box-shadow: var(--premium-primary-shadow);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 60, 140, .22);
}

@media (hover: hover) {
  .authenticated-app .button-primary:not(:disabled):hover,
  .public-app .button-primary:not(:disabled):hover {
    background: linear-gradient(180deg, #39a0ff 0%, #1083fb 54%, #0067dd 100%);
    box-shadow: var(--premium-primary-shadow-hover);
    transform: translateY(-1px);
  }
}

.authenticated-app .button-primary:not(:disabled):active,
.public-app .button-primary:not(:disabled):active {
  background: linear-gradient(180deg, #0069dc, #0878f2);
  box-shadow: 0 3px 9px rgba(0, 89, 191, .2), 0 1px 2px rgba(0, 62, 139, .28) inset;
  transform: translateY(1px) scale(.99);
}

.authenticated-app .button-quiet,
.public-app .button-quiet,
.authenticated-app .button-link {
  border-color: rgba(48, 63, 83, .11);
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 4px 13px rgba(42, 61, 87, .04), 0 1px 0 #fff inset;
  color: var(--premium-slate-700);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}

@media (hover: hover) {
  .authenticated-app .button-quiet:hover,
  .public-app .button-quiet:hover,
  .authenticated-app .button-link:hover {
    border-color: rgba(8, 120, 249, .21);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 7px 17px rgba(42, 61, 87, .075), 0 1px 0 #fff inset;
    color: var(--premium-blue-700);
    transform: translateY(-1px);
  }
}

.authenticated-app .button-danger,
.authenticated-app .button-archive,
.public-app .button-danger {
  border-color: rgba(211, 71, 81, .17);
  background: rgba(255, 245, 246, .86);
  box-shadow: 0 4px 12px rgba(167, 46, 56, .04), 0 1px 0 #fff inset;
  color: var(--premium-red-700);
}

.authenticated-app .button-danger:hover,
.authenticated-app .button-archive:hover,
.public-app .button-danger:hover {
  border-color: rgba(211, 71, 81, .34);
  background: #fff;
}

.authenticated-app .button-success,
.public-app .button-success {
  border-color: rgba(22, 145, 92, .2);
  background: linear-gradient(180deg, #2bb879, #15935f);
  box-shadow: 0 8px 18px rgba(17, 123, 78, .18), 0 1px 0 rgba(255, 255, 255, .25) inset;
  color: #fff;
}

.authenticated-app .button[aria-busy="true"],
.authenticated-app .button.is-loading,
.public-app .button[aria-busy="true"],
.public-app .button.is-loading {
  pointer-events: none;
  cursor: progress;
}

.authenticated-app .button[aria-busy="true"]::before,
.authenticated-app .button.is-loading::before,
.public-app .button[aria-busy="true"]::before,
.public-app .button.is-loading::before {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  content: "";
  opacity: .82;
  animation: premium-button-spin .72s linear infinite;
}

@keyframes premium-button-spin {
  to { transform: rotate(1turn); }
}

.authenticated-app .button-small {
  min-height: 36px;
  padding: 6px 12px;
  font-size: 11px;
}

.authenticated-app .button-large {
  min-height: 50px;
  padding-inline: 21px;
  font-size: 14px;
}

.authenticated-app .icon-button,
.public-app .icon-button {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid rgba(48, 63, 83, .09);
  border-radius: 50%;
  background: rgba(237, 241, 246, .82);
  box-shadow: 0 4px 13px rgba(42, 61, 87, .045), 0 1px 0 #fff inset;
  color: #4d5866;
  transition: background-color var(--premium-fast) ease, color var(--premium-fast) ease, transform 110ms ease;
}

.authenticated-app .icon-button:hover,
.public-app .icon-button:hover {
  background: #fff;
  color: var(--premium-slate-900);
}

.authenticated-app .icon-button:active,
.public-app .icon-button:active {
  transform: scale(.94);
}

.authenticated-app button:disabled,
.public-app button:disabled {
  filter: saturate(.6);
  opacity: .56;
}

/* Form controls: always visually distinct from their background */
.authenticated-app .field,
.public-app .field {
  gap: 6px;
}

.authenticated-app .field > label,
.public-app .field > label,
.authenticated-app .plain-fieldset legend {
  color: #3d4857;
  font-size: 11.5px;
  font-weight: 650;
}

.authenticated-app .field input,
.authenticated-app .field select,
.authenticated-app .field textarea,
.public-app .field input,
.public-app .field select,
.public-app .field textarea,
.authenticated-app :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"])),
.authenticated-app :where(select),
.authenticated-app :where(textarea) {
  border: 1px solid #c6d0dc;
  border-radius: 11px;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(27, 43, 63, .035), 0 1px 0 rgba(255, 255, 255, .9) inset;
  color: var(--premium-slate-900);
  transition: border-color var(--premium-fast) ease, box-shadow var(--premium-fast) ease, background-color var(--premium-fast) ease;
}

.authenticated-app .field input:hover:not(:focus),
.authenticated-app .field select:hover:not(:focus),
.authenticated-app .field textarea:hover:not(:focus),
.public-app .field input:hover:not(:focus),
.public-app .field select:hover:not(:focus),
.public-app .field textarea:hover:not(:focus) {
  border-color: #aab7c6;
}

.authenticated-app .field input:focus,
.authenticated-app .field select:focus,
.authenticated-app .field textarea:focus,
.public-app .field input:focus,
.public-app .field select:focus,
.public-app .field textarea:focus,
.authenticated-app :where(input:focus),
.authenticated-app :where(select:focus),
.authenticated-app :where(textarea:focus) {
  border-color: var(--premium-blue-500);
  background-color: #fff;
  box-shadow: var(--premium-focus);
  outline: 0;
}

.authenticated-app :where(input::placeholder),
.authenticated-app :where(textarea::placeholder),
.public-app input::placeholder,
.public-app textarea::placeholder {
  color: #929ca9;
}

.authenticated-app input:-webkit-autofill,
.authenticated-app input:-webkit-autofill:hover,
.authenticated-app input:-webkit-autofill:focus,
.public-app input:-webkit-autofill,
.public-app input:-webkit-autofill:hover,
.public-app input:-webkit-autofill:focus {
  border-color: #c6d0dc;
  -webkit-text-fill-color: var(--premium-slate-900);
  box-shadow: 0 0 0 1000px #fff inset, 0 1px 2px rgba(27, 43, 63, .035);
  caret-color: var(--premium-slate-900);
}

.authenticated-app :where(input:disabled),
.authenticated-app :where(select:disabled),
.authenticated-app :where(textarea:disabled) {
  background-color: #eef2f6;
  color: #788391;
  opacity: 1;
}

.authenticated-app .field-invalid :where(input, select, textarea),
.authenticated-app :where(input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]),
.public-app .field-invalid :where(input, select, textarea),
.public-app :where(input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"]) {
  border-color: rgba(211, 71, 81, .56);
  background-color: #fffafa;
  box-shadow: 0 0 0 3px rgba(211, 71, 81, .08);
}

.authenticated-app .field-error,
.public-app .field-error {
  margin: 0;
  color: var(--premium-red-700);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
}

.authenticated-app .field-success,
.public-app .field-success {
  margin: 0;
  color: var(--premium-green-700);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.4;
}

.authenticated-app input[type="checkbox"],
.authenticated-app input[type="radio"],
.public-app input[type="checkbox"],
.public-app input[type="radio"] {
  accent-color: var(--premium-blue-500);
}

.authenticated-app input[type="checkbox"]:focus-visible,
.authenticated-app input[type="radio"]:focus-visible,
.public-app input[type="checkbox"]:focus-visible,
.public-app input[type="radio"]:focus-visible {
  outline: 3px solid rgba(8, 120, 249, .18);
  outline-offset: 2px;
}

.authenticated-app .manual-file-drop input[type="file"],
.authenticated-app input[type="file"] {
  min-height: 44px;
  padding: 5px 7px;
}

.authenticated-app input[type="file"]::file-selector-button,
.public-app input[type="file"]::file-selector-button {
  min-height: 32px;
  margin-right: 9px;
  padding: 5px 11px;
  border: 1px solid rgba(48, 63, 83, .11);
  border-radius: var(--premium-radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(239, 244, 249, .96));
  box-shadow: 0 2px 8px rgba(42, 61, 87, .04), 0 1px 0 #fff inset;
  color: var(--premium-slate-700);
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 680;
}

.authenticated-app .field-checks label,
.authenticated-app .role-checkbox-grid label {
  border-color: var(--premium-line);
  border-radius: 11px;
  background: #fff;
  transition: border-color var(--premium-fast) ease, background-color var(--premium-fast) ease;
}

.authenticated-app .field-checks label:hover,
.authenticated-app .role-checkbox-grid label:hover {
  border-color: rgba(8, 120, 249, .25);
  background: var(--premium-blue-50);
}

.authenticated-app .help-text,
.public-app .help-text,
.authenticated-app .field-help {
  color: var(--premium-muted);
  font-size: 11px;
}

.authenticated-app .form-error,
.public-app .form-error {
  border: 1px solid rgba(211, 71, 81, .15);
  border-left: 4px solid var(--premium-red-500);
  border-radius: 11px;
  background: var(--premium-red-50);
}

/* Project form validation: visible, calm and accessible. */
.project-editor-page .project-form-validation-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid rgba(211, 71, 81, .24);
  border-radius: var(--premium-radius-lg);
  background: linear-gradient(135deg, rgba(255, 248, 248, .98), rgba(255, 241, 242, .92));
  box-shadow: 0 10px 30px rgba(156, 39, 52, .08), 0 1px 0 rgba(255, 255, 255, .95) inset;
  color: var(--premium-red-700);
}

.project-editor-page .project-form-validation-summary:focus-visible {
  box-shadow: 0 10px 30px rgba(156, 39, 52, .1), 0 0 0 4px rgba(211, 71, 81, .12);
}

.project-form-validation-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(180deg, #ff655d, #e83e49);
  box-shadow: 0 7px 18px rgba(211, 55, 66, .2), 0 1px 0 rgba(255, 255, 255, .4) inset;
  color: #fff;
}

.project-form-validation-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.project-form-validation-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.project-form-validation-copy strong {
  color: #8f2630;
  font-size: 14px;
  letter-spacing: -.01em;
}

.project-form-validation-copy small {
  color: #7f4a50;
  font-size: 11px;
  line-height: 1.45;
}

.project-form-validation-action {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(211, 71, 81, .2);
  border-radius: var(--premium-radius-pill);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 3px 10px rgba(116, 35, 44, .06), 0 1px 0 #fff inset;
  color: #9d2e38;
  font-size: 11px;
  font-weight: 720;
  transition: transform var(--premium-fast) var(--premium-ease), border-color var(--premium-fast) ease, box-shadow var(--premium-fast) ease;
}

.project-form-validation-action:hover {
  border-color: rgba(211, 71, 81, .4);
  box-shadow: 0 5px 14px rgba(116, 35, 44, .1), 0 1px 0 #fff inset;
  transform: translateY(-1px);
}

.project-editor-page .required-mark {
  margin-left: 3px;
  color: var(--premium-red-500);
  font-weight: 800;
}

.project-editor-page .form-section:has(.field-invalid) {
  border-color: rgba(211, 71, 81, .22);
  box-shadow: 0 12px 34px rgba(145, 42, 54, .06), 0 1px 0 #fff inset;
}

.project-editor-page .field-invalid > label {
  color: #a82f39;
}

.project-editor-page .field-invalid :where(input, select, textarea) {
  border-color: #e14b55 !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(225, 75, 85, .1), 0 1px 2px rgba(80, 22, 28, .035) inset !important;
}

.project-editor-page .field-invalid :where(input, select, textarea):focus {
  border-color: #d53743 !important;
  box-shadow: 0 0 0 4px rgba(225, 75, 85, .16), 0 1px 2px rgba(80, 22, 28, .04) inset !important;
}

.project-editor-page .field-invalid .field-error {
  position: relative;
  width: fit-content;
  max-width: 100%;
  min-height: 28px;
  display: flex;
  align-items: center;
  padding: 5px 10px 5px 28px;
  border: 1px solid rgba(211, 71, 81, .14);
  border-radius: 9px;
  background: rgba(255, 241, 242, .86);
  color: #a72e38;
  font-size: 11px;
  font-weight: 680;
  line-height: 1.35;
}

.project-editor-page .field-invalid .field-error::before {
  content: "!";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #db414c;
  color: #fff;
  font-size: 9px;
  font-weight: 850;
  transform: translateY(-50%);
}

.project-editor-page .field-invalid .field-error ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 640px) {
  .project-editor-page .project-form-validation-summary {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 13px;
  }

  .project-form-validation-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .project-form-validation-action {
    grid-column: 1 / -1;
    justify-self: stretch;
  }
}

/* Filters, disclosures and tabs */
.authenticated-app .workspace-filter,
.authenticated-app .filter-bar {
  border-color: rgba(48, 63, 83, .09);
  background: rgba(255, 255, 255, .91);
  box-shadow: var(--premium-shadow-sm);
}

.authenticated-app .workspace-filter {
  overflow: hidden;
  border-radius: 14px;
}

.authenticated-app .workspace-filter > summary {
  min-height: 48px;
  padding-inline: 15px;
  color: var(--premium-slate-700);
  font-weight: 680;
}

.authenticated-app .workspace-filter > summary:hover {
  background: rgba(238, 246, 255, .64);
  color: var(--premium-blue-700);
}

.authenticated-app .workspace-filter .filter-bar,
.authenticated-app .workspace-filter .compact-filter {
  border-top-color: var(--premium-line);
  background: rgba(248, 250, 253, .8);
  box-shadow: none;
}

.authenticated-app .project-tabs,
.authenticated-app .management-tabs {
  border-color: rgba(255, 255, 255, .88);
  border-radius: 14px;
  background: rgba(248, 251, 255, .74);
  box-shadow: 0 7px 22px rgba(42, 62, 90, .065), 0 1px 0 #fff inset;
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
}

.authenticated-app .project-tabs a,
.authenticated-app .management-tab {
  border-radius: 10px;
}

.authenticated-app .project-tabs a.active,
.authenticated-app .management-tab.active {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 3px 10px rgba(44, 64, 91, .1), 0 1px 0 #fff inset, 0 0 0 .5px rgba(50, 63, 81, .07);
  color: var(--premium-slate-900);
}

/* Tables and dense lists */
.authenticated-app .table-frame {
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, .92);
  box-shadow: var(--premium-shadow-md);
  scrollbar-width: thin;
}

.authenticated-app table {
  background: transparent;
  font-variant-numeric: tabular-nums;
}

.authenticated-app th {
  height: 44px;
  padding: 11px var(--premium-table-cell-padding-x);
  position: sticky;
  z-index: 2;
  top: 0;
  border-bottom-color: var(--premium-line);
  background: rgba(247, 250, 253, .92);
  color: #67768a;
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .055em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}

.authenticated-app td {
  padding: var(--premium-table-cell-padding-y) var(--premium-table-cell-padding-x);
  border-bottom-color: rgba(48, 63, 83, .075);
  color: var(--premium-slate-700);
  font-size: 12px;
}

.authenticated-app tbody tr {
  background: rgba(255, 255, 255, .88);
  transition: background-color var(--premium-fast) ease;
}

.authenticated-app tbody tr:hover {
  background: rgba(238, 246, 255, .72);
}

/* Status and feedback */
.authenticated-app .badge,
.authenticated-app .status-pill,
.authenticated-app .match-badge {
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid rgba(48, 63, 83, .055);
  border-radius: var(--premium-radius-pill);
  background: #edf2f7;
  color: #4a5a6e;
  font-size: 11px;
  font-weight: 720;
}

.authenticated-app .badge-blue,
.authenticated-app .status-active {
  border-color: rgba(8, 120, 249, .08);
  background: var(--premium-blue-50);
  color: var(--premium-blue-700);
}

.authenticated-app .badge-green,
.authenticated-app .status-pill.success {
  border-color: rgba(22, 148, 97, .08);
  background: var(--premium-green-50);
  color: var(--premium-green-700);
}

.authenticated-app .status-pill.warning,
.authenticated-app .notice-warning {
  background: var(--premium-amber-50);
  color: var(--premium-amber-700);
}

.authenticated-app .status-pill.critical,
.authenticated-app .status-pill.danger {
  background: var(--premium-red-50);
  color: var(--premium-red-700);
}

.authenticated-app .notice {
  border: 1px solid rgba(8, 120, 249, .1);
  border-left: 4px solid var(--premium-blue-500);
  border-radius: 12px;
  background: rgba(235, 245, 255, .88);
}

.authenticated-app .empty-state {
  border: 1px dashed rgba(85, 105, 130, .25);
  border-radius: 15px;
  background: rgba(255, 255, 255, .72);
  color: var(--premium-muted);
}

.authenticated-app .ui-state,
.public-app .ui-state {
  min-height: 142px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--premium-space-4);
  padding: var(--premium-space-6);
  border: 1px dashed rgba(85, 105, 130, .24);
  border-radius: var(--premium-radius-md);
  background: rgba(255, 255, 255, .76);
  color: var(--premium-muted);
}

.authenticated-app .ui-state.is-compact,
.public-app .ui-state.is-compact {
  min-height: 82px;
  gap: var(--premium-space-3);
  padding: var(--premium-space-4) var(--premium-space-5);
}

.authenticated-app .ui-state-icon,
.public-app .ui-state-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--premium-blue-50);
  color: var(--premium-blue-600);
}

.authenticated-app .ui-state-icon svg,
.public-app .ui-state-icon svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.authenticated-app .ui-state-copy,
.public-app .ui-state-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.authenticated-app .ui-state-copy strong,
.public-app .ui-state-copy strong {
  color: var(--premium-ink);
  font-size: 14px;
  line-height: 1.3;
}

.authenticated-app .ui-state-copy p,
.public-app .ui-state-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--premium-muted);
  font-size: 12px;
  line-height: 1.5;
}

.authenticated-app .ui-state-meta,
.public-app .ui-state-meta {
  min-width: 30px;
  padding: 6px 9px;
  border-radius: var(--premium-radius-pill);
  background: var(--premium-blue-50);
  color: var(--premium-blue-700);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.authenticated-app .ui-state-loading,
.public-app .ui-state-loading {
  border-style: solid;
  border-color: rgba(8, 120, 249, .13);
  background: rgba(247, 251, 255, .88);
}

.authenticated-app .ui-state-success,
.public-app .ui-state-success {
  border-style: solid;
  border-color: rgba(20, 142, 82, .2);
  background: var(--premium-green-50);
}

.authenticated-app .ui-state-success .ui-state-icon,
.public-app .ui-state-success .ui-state-icon {
  background: rgba(20, 142, 82, .1);
  color: var(--premium-green-700);
}

.authenticated-app .ui-state-error,
.public-app .ui-state-error {
  border-style: solid;
  border-color: rgba(216, 49, 70, .2);
  background: var(--premium-red-50);
}

.authenticated-app .ui-state-error .ui-state-icon,
.public-app .ui-state-error .ui-state-icon {
  background: rgba(216, 49, 70, .1);
  color: var(--premium-red-700);
}

.authenticated-app .ui-state-spinner,
.public-app .ui-state-spinner {
  width: 22px;
  height: 22px;
  display: block;
  border: 2px solid rgba(8, 120, 249, .18);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: premium-state-spin .8s linear infinite;
}

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

@media (max-width: 620px) {
  .authenticated-app .ui-state,
  .public-app .ui-state {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--premium-space-3);
    padding: var(--premium-space-5);
  }

  .authenticated-app .ui-state-icon,
  .public-app .ui-state-icon {
    width: 40px;
    height: 40px;
  }

  .authenticated-app .ui-state > .button,
  .public-app .ui-state > .button,
  .authenticated-app .ui-state-meta,
  .public-app .ui-state-meta {
    grid-column: 2;
    justify-self: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .authenticated-app .ui-state-spinner,
  .public-app .ui-state-spinner {
    animation-duration: 1.8s;
  }
}

/* VSEOK.PRO public product page */
.public-app:has(.vseok-landing) {
  margin: 0;
  background: #f7f9fc;
  color: #101827;
}

.public-app:has(.vseok-landing) .public-header {
  position: sticky;
  z-index: 60;
  top: 0;
  display: flex;
  align-items: center;
  min-height: 76px;
  padding-inline: clamp(20px, 5vw, 82px);
  border: 0;
  border-bottom: 1px solid rgba(144, 166, 198, .18);
  background: rgba(7, 16, 40, .84);
  box-shadow: none;
}

.public-app:has(.vseok-landing) .public-main {
  width: 100%;
  margin: 0;
}

.public-app:has(.vseok-landing) .skip-link {
  position: fixed;
  z-index: 100;
  top: -80px;
  left: 16px;
  padding: 12px 18px;
  border-radius: 10px;
  color: #fff;
  background: #08193b;
}

.public-app:has(.vseok-landing) .skip-link:focus {
  top: 16px;
}

.public-app .public-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 17px;
  font-weight: 780;
  letter-spacing: -.02em;
  text-decoration: none;
}

.public-app .public-brand-mark {
  min-width: 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #258dff, #0669e8);
  box-shadow: 0 12px 28px rgba(16, 119, 245, .3), inset 0 1px rgba(255, 255, 255, .38);
}

.public-navigation {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
}

.public-navigation a {
  color: rgba(255, 255, 255, .7);
  font-size: 14px;
  font-weight: 620;
  text-decoration: none;
  transition: color .22s ease, transform .22s ease, background .22s ease;
}

.public-navigation a:hover {
  color: #fff;
}

.public-navigation .public-login-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 0 19px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px rgba(255, 255, 255, .12);
}

.public-navigation .public-login-action:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .16);
}

.tenant-context-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 230px;
  min-height: 40px;
  padding: 0 15px;
  border: 1px solid rgba(150, 169, 198, .24);
  border-radius: 999px;
  color: #17365f;
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px rgba(255, 255, 255, .88), 0 10px 24px rgba(37, 68, 116, .08);
  font-size: 12px;
  font-weight: 760;
  text-decoration: none;
  backdrop-filter: blur(18px) saturate(135%);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.tenant-context-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-context-chip i {
  color: #6683aa;
  font-style: normal;
}

.tenant-context-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(42, 116, 231, .34);
  box-shadow: inset 0 1px rgba(255, 255, 255, .95), 0 14px 30px rgba(37, 68, 116, .13);
}

.vseok-landing {
  width: 100%;
  overflow: hidden;
}

.vseok-hero {
  position: relative;
  min-height: min(900px, calc(100dvh - 76px));
  padding: clamp(82px, 9vw, 140px) clamp(20px, 5vw, 82px) 0;
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(rgba(60, 93, 172, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 93, 172, .09) 1px, transparent 1px),
    radial-gradient(circle at 50% 40%, #142c68 0, #0a183c 42%, #060d22 78%);
  background-size: 74px 74px, 74px 74px, auto;
}

.vseok-hero::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: auto 0 0;
  height: 260px;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(4, 10, 27, .85));
}

.vseok-hero-glow {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(10px);
  opacity: .38;
  pointer-events: none;
  animation: vseok-orbit 12s ease-in-out infinite alternate;
}

.vseok-hero-glow-one {
  top: -220px;
  right: -100px;
  background: radial-gradient(circle, rgba(66, 133, 255, .75), transparent 68%);
}

.vseok-hero-glow-two {
  bottom: 80px;
  left: -240px;
  background: radial-gradient(circle, rgba(83, 69, 255, .55), transparent 70%);
  animation-delay: -5s;
}

.vseok-hero-copy {
  position: relative;
  z-index: 3;
  width: min(980px, 100%);
  margin: 0 auto;
  text-align: center;
}

.vseok-hero h1 {
  margin: 0;
  font-size: clamp(48px, 7vw, 92px);
  font-weight: 720;
  line-height: .98;
  letter-spacing: -.065em;
}

.vseok-hero h1 span {
  display: inline-block;
  color: #73adff;
  background: linear-gradient(100deg, #66a7ff, #b5ccff 45%, #6f8fff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vseok-hero-copy > p {
  max-width: 750px;
  margin: 30px auto 0;
  color: rgba(230, 238, 255, .72);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.58;
}

.vseok-hero-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 34px;
}

.vseok-primary-action,
.vseok-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 25px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 720;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, background .25s ease;
}

.vseok-primary-action {
  color: #fff;
  background: linear-gradient(145deg, #2697ff, #086be9);
  box-shadow: 0 16px 40px rgba(17, 116, 243, .36), inset 0 1px rgba(255, 255, 255, .42);
}

.vseok-secondary-action {
  border: 1px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .84);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}

.vseok-primary-action:hover,
.vseok-secondary-action:hover {
  transform: translateY(-3px);
}

.vseok-primary-action:hover {
  box-shadow: 0 22px 50px rgba(17, 116, 243, .46), inset 0 1px rgba(255, 255, 255, .5);
}

.vseok-hero-notes {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 22px;
  color: rgba(215, 225, 246, .6);
  font-size: 12px;
}

.vseok-hero-notes span::before {
  content: "✓";
  margin-right: 7px;
  color: #68d8a0;
}

.vseok-product-scene {
  position: relative;
  z-index: 4;
  width: min(1160px, calc(100vw - 40px));
  margin: clamp(62px, 7vw, 96px) auto 0;
  perspective: 1400px;
}

.vseok-product-window {
  overflow: hidden;
  border: 1px solid rgba(160, 193, 255, .35);
  border-radius: 26px 26px 0 0;
  background: #f5f8fc;
  box-shadow: 0 -18px 80px rgba(52, 113, 241, .17), 0 32px 80px rgba(0, 0, 0, .42);
  transform: rotateX(2.5deg);
  transform-origin: bottom;
  animation: vseok-window-float 7s ease-in-out infinite;
}

.vseok-window-top {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 58px;
  padding: 0 18px;
  color: #152641;
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid #e3e9f2;
}

.vseok-window-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 780;
}

.vseok-window-brand i {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  color: #fff;
  font-style: normal;
  background: #0c78f4;
}

.vseok-window-search {
  width: min(360px, 40%);
  margin-left: 4%;
  padding: 10px 15px;
  border-radius: 12px;
  color: #99a7b9;
  font-size: 10px;
  background: #f3f6fa;
}

.vseok-window-user {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border-radius: 50%;
  color: #0d6bd8;
  font-size: 10px;
  font-weight: 800;
  background: #e6f2ff;
}

.vseok-window-body {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  min-height: 400px;
}

.vseok-window-nav {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 23px 14px;
  color: rgba(230, 239, 255, .72);
  font-size: 10px;
  background: #0c2a51;
}

.vseok-window-nav b,
.vseok-window-nav span {
  padding: 10px 12px;
  border-radius: 9px;
}

.vseok-window-nav b,
.vseok-window-nav .is-active {
  color: #fff;
  background: rgba(91, 166, 255, .22);
}

.vseok-window-content {
  padding: 24px;
  color: #14233a;
}

.vseok-window-content > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vseok-window-content > header div {
  display: grid;
  gap: 5px;
}

.vseok-window-content > header strong {
  font-size: 23px;
  letter-spacing: -.04em;
}

.vseok-window-content > header small {
  color: #718096;
  font-size: 10px;
}

.vseok-window-content > header button {
  min-height: 36px;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 10px;
  font-weight: 750;
  background: linear-gradient(145deg, #2797ff, #0b70ea);
  box-shadow: 0 8px 20px rgba(15, 112, 234, .22);
}

.vseok-window-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 21px;
  overflow: hidden;
  border: 1px solid #e1e8f1;
  border-radius: 14px;
  background: #fff;
}

.vseok-window-metrics div {
  display: grid;
  gap: 7px;
  padding: 16px;
  border-right: 1px solid #e1e8f1;
}

.vseok-window-metrics div:last-child {
  border: 0;
}

.vseok-window-metrics span,
.vseok-window-grid small {
  color: #718096;
  font-size: 9px;
}

.vseok-window-metrics b {
  font-size: 20px;
}

.vseok-window-metrics .is-green,
.vseok-window-grid .is-green {
  color: #0b9b63;
}

.vseok-window-grid {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.vseok-window-grid article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  padding: 15px 17px;
  border: 1px solid #e5eaf2;
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 7px 18px rgba(29, 51, 83, .04);
}

.vseok-window-grid article div {
  display: grid;
  gap: 4px;
}

.vseok-window-grid article b,
.vseok-window-grid article > strong {
  font-size: 11px;
}

.vseok-window-grid article > span {
  min-width: 130px;
  font-size: 9px;
  text-align: right;
}

.vseok-floating-card {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: 3px;
  min-width: 190px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 18px;
  color: #13233e;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 22px 60px rgba(4, 13, 34, .32), inset 0 1px rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  animation: vseok-card-float 5s ease-in-out infinite;
}

.vseok-floating-card span,
.vseok-floating-card small {
  color: #718096;
  font-size: 9px;
}

.vseok-floating-card strong {
  font-size: 18px;
}

.vseok-floating-card-left {
  top: 90px;
  left: -60px;
}

.vseok-floating-card-right {
  right: -45px;
  bottom: 52px;
  animation-delay: -2.2s;
}

.vseok-confidence {
  position: relative;
  z-index: 5;
  padding: 58px clamp(20px, 8vw, 130px);
  color: #c9d5ee;
  text-align: center;
  background: #050b1c;
}

.vseok-confidence p {
  max-width: 920px;
  margin: auto;
  font-size: clamp(19px, 2.1vw, 29px);
  line-height: 1.45;
  letter-spacing: -.025em;
}

.vseok-capabilities {
  padding: clamp(92px, 10vw, 156px) clamp(20px, 6vw, 100px);
  background:
    radial-gradient(circle at 87% 16%, rgba(27, 120, 246, .09), transparent 26rem),
    #f8fafc;
}

.vseok-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(270px, .55fr);
  align-items: end;
  gap: 70px;
  width: min(1180px, 100%);
  margin: 0 auto 54px;
}

.vseok-section-heading h2,
.vseok-result h2,
.vseok-final h2 {
  margin: 0;
  color: #0b1424;
  font-size: clamp(38px, 4.5vw, 67px);
  line-height: 1.03;
  letter-spacing: -.06em;
}

.vseok-section-heading p,
.vseok-result > div > p,
.vseok-final p {
  margin: 0;
  color: #65738a;
  font-size: 17px;
  line-height: 1.65;
}

.vseok-capability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: min(1180px, 100%);
  margin: auto;
}

.vseok-capability-card {
  min-height: 390px;
  padding: clamp(26px, 4vw, 44px);
  overflow: hidden;
  border: 1px solid #e5eaf2;
  border-radius: 32px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 24px 80px rgba(25, 49, 84, .08);
}

.vseok-capability-card.is-dark {
  border-color: #182a54;
  color: #fff;
  background: radial-gradient(circle at 76% 10%, #21488e, #0a1737 48%, #060d20);
}

.vseok-capability-card.is-blue {
  color: #fff;
  background: linear-gradient(145deg, #1789ff, #075dcc);
}

.vseok-capability-card h3 {
  margin: 34px 0 12px;
  color: inherit;
  font-size: clamp(25px, 2.4vw, 35px);
  line-height: 1.08;
  letter-spacing: -.045em;
}

.vseok-capability-card p {
  max-width: 590px;
  margin: 0;
  color: #6b7890;
  font-size: 16px;
  line-height: 1.58;
}

.vseok-capability-card.is-dark p,
.vseok-capability-card.is-blue p {
  color: rgba(235, 242, 255, .73);
}

.vseok-capability-visual {
  min-height: 170px;
  border-radius: 23px;
}

.vseok-saving-visual {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, .11);
  background: rgba(255, 255, 255, .06);
}

.vseok-saving-visual span {
  display: grid;
  gap: 8px;
  color: rgba(255, 255, 255, .55);
  font-size: 12px;
}

.vseok-saving-visual strong {
  color: #fff;
  font-size: clamp(20px, 2.5vw, 32px);
}

.vseok-saving-visual span:last-child strong {
  color: #69e1a9;
}

.vseok-saving-visual i {
  width: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #60a2ff, transparent);
}

.vseok-flow-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: linear-gradient(145deg, #eef5ff, #f9fbff);
}

.vseok-flow-visual span {
  padding: 14px 18px;
  border: 1px solid #dce7f5;
  border-radius: 15px;
  color: #17365f;
  font-size: 12px;
  font-weight: 750;
  background: #fff;
  box-shadow: 0 10px 25px rgba(30, 74, 130, .08);
}

.vseok-flow-visual i {
  width: 30px;
  height: 2px;
  background: #75aef1;
}

.vseok-roles-visual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 20px;
  background: #f0f5fc;
}

.vseok-roles-visual span {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border: 1px solid #dfe8f3;
  border-radius: 14px;
  color: #244160;
  font-size: 12px;
  font-weight: 680;
  background: #fff;
}

.vseok-roles-visual span::before {
  content: "";
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: linear-gradient(145deg, #d9ecff, #b8d9ff);
}

.vseok-mail-visual {
  display: grid;
  align-content: center;
  gap: 10px;
  padding: 24px;
  background: rgba(255, 255, 255, .11);
}

.vseok-mail-visual span {
  width: var(--mail-width, 78%);
  height: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .36);
}

.vseok-mail-visual span:nth-child(2) { --mail-width: 93%; }
.vseok-mail-visual span:nth-child(3) { --mail-width: 61%; }

.vseok-mail-visual b {
  width: max-content;
  margin-top: 12px;
  padding: 10px 13px;
  border-radius: 999px;
  color: #0966cf;
  font-size: 11px;
  background: #fff;
}

.vseok-result {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  align-items: center;
  gap: clamp(50px, 8vw, 120px);
  padding: clamp(90px, 11vw, 160px) clamp(20px, 7vw, 120px);
  background: #fff;
}

.vseok-result > div:first-child {
  display: grid;
  gap: 28px;
}

.vseok-result a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  color: #0870e9;
  font-size: 16px;
  font-weight: 750;
  text-decoration: none;
}

.vseok-result-panel {
  padding: 18px;
  border: 1px solid #e2e8f1;
  border-radius: 28px;
  background: linear-gradient(145deg, #f9fbff, #eef4fc);
  box-shadow: 0 30px 90px rgba(24, 54, 96, .13);
  transform: rotate(1.4deg);
}

.vseok-result-panel header {
  display: grid;
  gap: 5px;
  padding: 18px 20px 22px;
}

.vseok-result-panel header span {
  color: #7c899b;
  font-size: 12px;
}

.vseok-result-panel header b {
  color: #17263d;
  font-size: 23px;
}

.vseok-result-panel article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 18px;
  border-top: 1px solid #e3eaf3;
  color: #30425d;
  font-size: 14px;
}

.vseok-result-panel article i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(54, 137, 255, .1);
}

.vseok-result-panel article i.is-green { background: #1db879; box-shadow: 0 0 0 5px rgba(29, 184, 121, .1); }
.vseok-result-panel article i.is-blue { background: #3188f4; }
.vseok-result-panel article i.is-orange { background: #f0a235; box-shadow: 0 0 0 5px rgba(240, 162, 53, .12); }

.vseok-result-panel article b {
  color: #142944;
}

.vseok-final {
  display: grid;
  justify-items: center;
  gap: 26px;
  padding: clamp(96px, 12vw, 175px) 20px;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(circle at 50% 20%, rgba(45, 122, 247, .42), transparent 30rem),
    linear-gradient(rgba(64, 98, 177, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(64, 98, 177, .08) 1px, transparent 1px),
    #060e24;
  background-size: auto, 70px 70px, 70px 70px, auto;
}

.vseok-final h2 {
  color: #fff;
}

.vseok-final p {
  max-width: 700px;
  color: rgba(222, 232, 250, .67);
}

.vseok-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px clamp(20px, 6vw, 90px);
  color: rgba(228, 236, 252, .53);
  font-size: 13px;
  background: #040a19;
}

.vseok-footer a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 750;
  text-decoration: none;
}

.vseok-footer i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  font-style: normal;
  background: #0d76ef;
}

.vseok-motion-ready .vseok-landing [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}

.vseok-motion-ready .vseok-landing [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes vseok-orbit {
  from { transform: translate3d(-3%, -2%, 0) scale(.92); }
  to { transform: translate3d(8%, 8%, 0) scale(1.08); }
}

@keyframes vseok-window-float {
  0%, 100% { transform: rotateX(2.5deg) translateY(0); }
  50% { transform: rotateX(1.5deg) translateY(-8px); }
}

@keyframes vseok-card-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-10px) rotate(1deg); }
}

/* Tenant and platform workspaces */
.tenant-access-page,
.tenant-workspace-page,
.tenant-team-page,
.platform-tenants-page,
.platform-tenant-form-page,
.platform-tenant-detail-page {
  max-width: 1260px;
  margin-inline: auto;
}

.tenant-access-card {
  width: min(760px, 100%);
  margin: clamp(30px, 8vh, 90px) auto;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 30px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 28px 90px rgba(26, 55, 94, .13);
}

.tenant-access-heading h1 {
  margin: 0;
  color: #101827;
  font-size: clamp(34px, 5vw, 52px);
  letter-spacing: -.055em;
}

.tenant-access-heading p {
  max-width: 610px;
  margin: 13px 0 30px;
  color: #6b7890;
  font-size: 16px;
  line-height: 1.55;
}

.tenant-choice-list,
.tenant-member-list,
.platform-tenant-list {
  display: grid;
  gap: 10px;
}

.tenant-choice-row,
.tenant-member-list article,
.platform-tenant-list > a,
.tenant-team-inline article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid #e3eaf3;
  border-radius: 19px;
  background: #fff;
}

.tenant-choice-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: #086bdc;
  font-size: 12px;
  font-weight: 800;
  background: linear-gradient(145deg, #eef7ff, #dceeff);
}

.tenant-choice-row > span:nth-child(3),
.tenant-member-list article > div,
.platform-tenant-list > a > span:nth-child(2),
.tenant-team-inline article > div {
  display: grid;
  gap: 4px;
}

.tenant-choice-row strong,
.tenant-member-list strong,
.platform-tenant-list strong,
.tenant-team-inline strong {
  color: #17263d;
  font-size: 15px;
}

.tenant-choice-row small,
.tenant-member-list small,
.platform-tenant-list small,
.tenant-team-inline small {
  color: #7a8799;
  font-size: 12px;
}

.premium-page-heading.tenant-workspace-heading,
.tenant-workspace-page .premium-page-heading,
.tenant-team-page .premium-page-heading,
.platform-tenants-page .premium-page-heading,
.platform-tenant-form-page .premium-page-heading,
.platform-tenant-detail-page .premium-page-heading {
  margin-bottom: 16px;
}

.tenant-connection-state,
.tenant-safety-note {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px;
  border: 1px solid #cbe5d9;
  border-radius: 24px;
  background: linear-gradient(145deg, #f5fffa, #edf9f4);
  box-shadow: 0 20px 55px rgba(30, 94, 65, .07);
}

.tenant-state-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 16px;
  color: #fff;
  font-size: 22px;
  background: #13a46b;
  box-shadow: 0 12px 28px rgba(19, 164, 107, .24);
}

.tenant-connection-state h2,
.tenant-safety-note strong {
  margin: 0 0 5px;
  color: #173529;
  font-size: 20px;
}

.tenant-connection-state p,
.tenant-safety-note p {
  margin: 0;
  color: #5f776c;
  line-height: 1.5;
}

.tenant-safety-note {
  margin-top: 16px;
  border-color: #f0d9af;
  background: linear-gradient(145deg, #fffaf1, #fff5e6);
}

.tenant-safety-note strong { color: #7b5314; }
.tenant-safety-note p { color: #8d744c; }

.tenant-workspace-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #e1e8f1;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(26, 55, 94, .07);
}

.tenant-workspace-summary > div {
  display: grid;
  gap: 8px;
  padding: 22px;
  border-right: 1px solid #e1e8f1;
}

.tenant-workspace-summary > div:last-child { border: 0; }
.tenant-workspace-summary span { color: #7c899b; font-size: 11px; }
.tenant-workspace-summary strong { color: #17263d; font-size: 19px; text-transform: capitalize; }

.tenant-member-list,
.platform-tenant-list,
.tenant-team-inline,
.tenant-provision-form {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 26px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 24px 70px rgba(25, 53, 91, .09);
}

.platform-tenant-list > a {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.platform-tenant-list > a:hover {
  transform: translateY(-2px);
  border-color: #aad1ff;
  box-shadow: 0 12px 30px rgba(34, 95, 165, .09);
}

.tenant-access-status {
  padding: 8px 11px;
  border-radius: 999px;
  color: #1b6d4e;
  font-size: 11px;
  font-style: normal;
  background: #eaf8f1;
}

.tenant-access-status.is-suspended,
.tenant-access-status.is-terminated { color: #a02e38; background: #fff0f1; }
.tenant-access-status.is-grace { color: #95620f; background: #fff6df; }

.tenant-provision-form {
  display: grid;
  gap: 16px;
  max-width: 980px;
  margin-inline: auto;
}

.tenant-provision-form section {
  padding: 24px;
  border: 1px solid #e4eaf2;
  border-radius: 21px;
  background: #fff;
}

.tenant-provision-form h2,
.tenant-team-inline h2 {
  margin: 0 0 18px;
  color: #17263d;
  font-size: 19px;
}

.tenant-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.tenant-form-grid .field-wide { grid-column: 1 / -1; }
.tenant-form-grid input,
.tenant-form-grid select { width: 100%; background: #fff; }

.tenant-provision-form > footer,
.tenant-form-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.tenant-credentials {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) 1.3fr;
  gap: 20px;
  margin: 16px 0;
  padding: 22px;
  border: 1px solid #a8d6be;
  border-radius: 22px;
  background: linear-gradient(145deg, #f4fff9, #e9f8f1);
}

.tenant-credentials > div strong { color: #146844; font-size: 18px; }
.tenant-credentials p { margin: 5px 0 0; color: #597468; }
.tenant-credentials dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 0; }
.tenant-credentials dl div { padding: 11px 13px; border-radius: 13px; background: #fff; }
.tenant-credentials dt { color: #7b8c84; font-size: 10px; }
.tenant-credentials dd { margin: 5px 0 0; color: #173c2d; font-size: 14px; font-weight: 750; overflow-wrap: anywhere; }
.tenant-credentials > small { grid-column: 1 / -1; color: #668074; }

.tenant-form-dialog {
  width: min(760px, calc(100vw - 28px));
  border: 0;
  border-radius: 28px;
  padding: 0;
  background: transparent;
}

.tenant-form-dialog::backdrop { background: rgba(8, 18, 39, .54); backdrop-filter: blur(10px); }
.tenant-form-dialog .premium-dialog-card { padding: 0; overflow: hidden; border-radius: 28px; background: #f4f7fb; box-shadow: 0 35px 100px rgba(5, 17, 37, .34); }
.tenant-form-dialog header { display: flex; justify-content: space-between; align-items: center; padding: 24px; background: #fff; }
.tenant-form-dialog header h2 { margin: 0; color: #17263d; font-size: 24px; }
.tenant-form-dialog header p { margin: 5px 0 0; color: #748196; }
.tenant-form-dialog header button { width: 42px; height: 42px; border: 1px solid #dfe6ef; border-radius: 50%; color: #42536b; font-size: 23px; background: #f5f7fa; }
.tenant-form-dialog .tenant-form-grid { padding: 24px; }
.tenant-form-dialog footer { padding: 16px 24px 22px; background: #fff; }

.tenant-team-inline > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 6px 18px;
}

.tenant-team-inline > header h2 { margin-bottom: 4px; }
.tenant-team-inline > header p { margin: 0; color: #748196; font-size: 13px; }
.tenant-team-inline article + article { margin-top: 8px; }

.tenant-empty {
  padding: 34px;
  border: 1px dashed #cdd8e6;
  border-radius: 18px;
  color: #6c7c92;
  text-align: center;
}

@media (max-width: 900px) {
  .vseok-section-heading,
  .vseok-result { grid-template-columns: 1fr; }
  .vseok-section-heading { gap: 20px; }
  .vseok-result { gap: 55px; }
  .vseok-window-body { grid-template-columns: 125px minmax(0, 1fr); }
  .vseok-floating-card-left { left: -12px; }
  .vseok-floating-card-right { right: -12px; }
}

@media (max-width: 700px) {
  .public-navigation { gap: 9px; }
  .public-navigation > a:not(.public-login-action) { display: none; }
  .public-navigation .public-login-action { min-height: 40px; padding: 0 16px; }
  .vseok-hero { min-height: auto; padding-top: 72px; }
  .vseok-hero h1 { font-size: clamp(43px, 13vw, 66px); }
  .vseok-hero-copy > p { font-size: 16px; }
  .vseok-hero-actions { flex-direction: column; align-items: stretch; width: min(360px, 100%); margin-inline: auto; }
  .vseok-hero-notes { display: grid; justify-content: start; width: min(360px, 100%); margin-inline: auto; text-align: left; }
  .vseok-product-scene { margin-top: 54px; }
  .vseok-product-window { border-radius: 20px 20px 0 0; }
  .vseok-window-top { height: 48px; }
  .vseok-window-search,
  .vseok-window-nav { display: none; }
  .vseok-window-body { display: block; min-height: 340px; }
  .vseok-window-content { padding: 16px; }
  .vseok-window-content > header strong { font-size: 18px; }
  .vseok-window-content > header small { max-width: 180px; }
  .vseok-window-metrics { grid-template-columns: 1fr 1fr; }
  .vseok-window-metrics div:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid #e1e8f1; }
  .vseok-window-grid article { grid-template-columns: 1fr auto; }
  .vseok-window-grid article > span { display: none; }
  .vseok-window-grid article:nth-child(3) { display: none; }
  .vseok-floating-card { display: none; }
  .vseok-capability-grid { grid-template-columns: 1fr; }
  .vseok-capability-card { min-height: auto; }
  .vseok-saving-visual { grid-template-columns: 1fr; }
  .vseok-saving-visual i { width: 100%; }
  .vseok-flow-visual { flex-wrap: wrap; }
  .vseok-flow-visual i { width: 16px; }
  .vseok-result { grid-template-columns: 1fr; }
  .vseok-result-panel { transform: none; }
  .vseok-footer { align-items: flex-start; flex-direction: column; gap: 12px; }
  .tenant-choice-row,
  .tenant-member-list article,
  .tenant-team-inline article { grid-template-columns: auto minmax(0, 1fr); }
  .tenant-choice-row .button,
  .tenant-member-list .badge,
  .tenant-team-inline .badge { grid-column: 1 / -1; width: 100%; }
  .tenant-workspace-summary,
  .tenant-form-grid,
  .tenant-credentials,
  .tenant-credentials dl { grid-template-columns: 1fr; }
  .tenant-workspace-summary > div { border-right: 0; border-bottom: 1px solid #e1e8f1; }
  .tenant-form-grid .field-wide,
  .tenant-credentials > small { grid-column: auto; }
  .platform-tenant-list > a { grid-template-columns: auto minmax(0, 1fr) auto; }
  .platform-tenant-list .tenant-access-status { grid-column: 2; width: max-content; }
}

@media (prefers-reduced-motion: reduce) {
  .vseok-hero-glow,
  .vseok-product-window,
  .vseok-floating-card { animation: none; }
  .vseok-landing [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Shared process stage --------------------------------------------------- */
:root {
  --process-stage-surface: rgba(247, 250, 253, .94);
  --process-stage-border: rgba(45, 69, 96, .12);
  --process-stage-line: #d9e2ec;
  --process-stage-muted: #718198;
  --process-stage-ink: #173451;
  --process-stage-current: var(--premium-blue-600, #0878f9);
  --process-stage-done: var(--premium-green-600, #16865a);
  --process-stage-error: #d43d4f;
}

body .process-stage {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(170px, .7fr) minmax(0, 2.3fr);
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 12px 14px;
  overflow: hidden;
  border: 1px solid var(--process-stage-border);
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% 0, rgba(50, 145, 255, .08), transparent 15rem),
    var(--process-stage-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
  color: var(--process-stage-ink);
}

body .process-stage-summary {
  min-width: 0;
  display: grid;
  gap: 2px;
}

body .process-stage-summary > span {
  color: var(--process-stage-current);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .055em;
  line-height: 1.15;
  text-transform: uppercase;
}

body .process-stage-summary > strong {
  overflow: hidden;
  color: var(--process-stage-ink);
  font-size: 14px;
  font-weight: 790;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .process-stage-summary > small {
  overflow: hidden;
  color: var(--process-stage-muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .process-stage-list {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(var(--process-stage-count, 5), minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

body .process-stage-step {
  min-width: 0;
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding-right: 10px;
  color: var(--process-stage-muted);
}

body .process-stage-step::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 13px;
  left: 28px;
  right: 0;
  height: 2px;
  background: var(--process-stage-line);
}

body .process-stage-step:last-child {
  padding-right: 0;
}

body .process-stage-step:last-child::before {
  display: none;
}

body .process-stage-marker {
  width: 28px;
  height: 28px;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  border: 1px solid #cbd6e2;
  border-radius: 9px;
  background: #fff;
  color: #687b91;
  font-size: 11px;
  font-weight: 820;
  line-height: 1;
}

body .process-stage-step > strong {
  min-width: 0;
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 2px 5px 2px 0;
  background: var(--process-stage-surface);
  font-size: 11px;
  font-weight: 720;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body .process-stage-step.is-done {
  color: var(--process-stage-done);
}

body .process-stage-step.is-done::before {
  background: rgba(22, 134, 90, .42);
}

body .process-stage-step.is-done .process-stage-marker {
  border-color: var(--process-stage-done);
  background: var(--process-stage-done);
  color: #fff;
}

body .process-stage-step.is-current,
body .process-stage-step.is-active {
  color: var(--process-stage-current);
}

body .process-stage-step.is-current .process-stage-marker,
body .process-stage-step.is-active .process-stage-marker {
  border-color: var(--process-stage-current);
  background: var(--process-stage-current);
  box-shadow: 0 0 0 4px rgba(8, 120, 249, .11);
  color: #fff;
}

body .process-stage-step.is-current > strong,
body .process-stage-step.is-active > strong {
  color: #0a5fc0;
  font-weight: 820;
}

body .process-stage-step.is-error,
body .process-stage.tone-error .process-stage-summary > span {
  color: var(--process-stage-error);
}

body .process-stage-step.is-error .process-stage-marker {
  border-color: var(--process-stage-error);
  background: #fff0f2;
  color: var(--process-stage-error);
}

body .process-stage-step.is-skipped::before {
  height: 0;
  border-top: 2px dashed #cbd4df;
  background: transparent;
}

body .process-stage-step.is-skipped .process-stage-marker {
  border-style: dashed;
  background: #f3f6f9;
}

body .process-stage.is-compact {
  grid-template-columns: minmax(145px, .65fr) minmax(0, 2.35fr);
  gap: 10px;
  padding: 7px 9px;
  border-radius: 13px;
}

body .process-stage.is-compact .process-stage-summary > strong {
  font-size: 12px;
}

body .process-stage.is-compact .process-stage-marker {
  width: 23px;
  height: 23px;
  border-radius: 7px;
}

body .process-stage.is-compact .process-stage-step {
  grid-template-columns: 23px minmax(0, 1fr);
  gap: 5px;
  padding-right: 7px;
}

body .process-stage.is-compact .process-stage-step::before {
  top: 11px;
  left: 23px;
}

body .process-stage.is-minimal {
  grid-template-columns: minmax(170px, 1fr) auto;
  min-height: 44px;
}

body .process-stage.is-minimal .process-stage-summary {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 7px;
}

body .process-stage.is-minimal .process-stage-summary > small {
  grid-column: 1 / -1;
}

body .process-stage.is-minimal .process-stage-list {
  display: flex;
  gap: 4px;
}

body .process-stage.is-minimal .process-stage-step {
  width: 24px;
  display: block;
  padding: 0;
}

body .process-stage.is-minimal .process-stage-step::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 5px;
  border: 0;
  border-radius: 999px;
  transform: translateY(-50%);
}

body .process-stage.is-minimal .process-stage-marker {
  width: 24px;
  height: 5px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: var(--process-stage-line);
  box-shadow: none;
  color: transparent;
}

body .process-stage.is-minimal .process-stage-step > strong {
  display: none;
}

body .process-stage.is-minimal .process-stage-step.is-done .process-stage-marker {
  background: var(--process-stage-done);
}

body .process-stage.is-minimal .process-stage-step.is-current .process-stage-marker,
body .process-stage.is-minimal .process-stage-step.is-active .process-stage-marker {
  background: var(--process-stage-current);
  box-shadow: 0 0 0 2px rgba(8, 120, 249, .11);
}

body .process-stage.is-minimal .process-stage-step.is-error .process-stage-marker {
  background: var(--process-stage-error);
}

body .process-stage.request-roadmap,
body .process-stage.sourcing-card-progress,
body .process-stage.commerce-card-stage,
body .process-stage.warehouse-process-stage {
  width: 100%;
  margin-top: 0;
}

body .process-stage.request-detail-roadmap,
body .process-stage.sourcing-progress-steps,
body .process-stage.commerce-workflow {
  width: 100%;
}

/* Business data must remain readable even inside compact operational cards. */
body .sourcing-card-identity > span,
body .sourcing-card-identity p,
body .sourcing-card-ownership > span,
body .sourcing-card-ownership small,
body .sourcing-card-status,
body .sourcing-card-deadline span,
body .sourcing-card-deadline strong,
body .sourcing-card-price-row span,
body .sourcing-card-price-row small,
body .sourcing-case-footer,
body .sourcing-case-open,
body .warehouse-review-code,
body .warehouse-review-project,
body .warehouse-review-main > small {
  font-size: 11px;
  line-height: 1.25;
}

body .sourcing-card-price-row span,
body .sourcing-card-identity > span,
body .warehouse-review-code {
  letter-spacing: .025em;
}

@media (max-width: 760px) {
  body .process-stage:not(.is-minimal) {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  body .process-stage:not(.is-minimal) .process-stage-list {
    grid-template-columns: repeat(var(--process-stage-count, 5), minmax(112px, 1fr));
    padding: 3px 1px 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  body .process-stage.is-minimal {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  body .process-stage.is-minimal .process-stage-summary > small {
    display: none;
  }
}

@media (max-width: 420px) {
  body .process-stage.is-minimal {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  body .process-stage.is-minimal .process-stage-list {
    justify-content: stretch;
  }

  body .process-stage.is-minimal .process-stage-step {
    width: auto;
    flex: 1 1 0;
  }
}

.authenticated-app .message-stack.toast-stack {
  z-index: var(--premium-z-toast);
}

.authenticated-app .message,
.public-app .message {
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: var(--premium-toast-radius);
  background: rgba(249, 251, 254, .91);
  box-shadow: var(--premium-shadow-md);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

/* Dialog system */
.authenticated-app .dialog,
.public-app .dialog {
  max-height: calc(100dvh - var(--premium-dialog-viewport-gap));
  z-index: var(--premium-z-dialog);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .84);
  border-radius: var(--premium-dialog-radius);
  background: transparent;
  box-shadow: 0 34px 100px rgba(21, 37, 61, .28), 0 1px 0 rgba(255, 255, 255, .9) inset;
}

.authenticated-app .dialog::backdrop,
.public-app .dialog::backdrop {
  background: rgba(24, 31, 42, .35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.authenticated-app .dialog-card,
.public-app .dialog-card {
  max-height: calc(100dvh - var(--premium-dialog-viewport-gap));
  border-radius: var(--premium-dialog-radius);
  scrollbar-gutter: stable;
  background: rgba(248, 250, 253, .96);
  box-shadow: 0 1px 0 #fff inset;
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

.authenticated-app .dialog-heading,
.public-app .dialog-heading {
  align-items: center;
  position: sticky;
  z-index: 3;
  top: 0;
  background: rgba(248, 250, 253, .94);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.authenticated-app .dialog-heading h2,
.public-app .dialog-heading h2 {
  font-size: 23px;
  font-weight: 720;
}

.authenticated-app .dialog-heading p,
.public-app .dialog-heading p {
  color: var(--premium-muted);
  font-size: 11px;
}

.authenticated-app .dialog-actions,
.public-app .dialog-actions {
  position: sticky;
  z-index: 3;
  bottom: 0;
  padding-top: 13px;
  border-top: 1px solid var(--premium-line);
  background: rgba(248, 250, 253, .94);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

/* Project editor: create a counterparty without leaving the project draft. */
.project-counterparty-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
}

.project-counterparty-control select {
  min-width: 0;
}

.project-counterparty-add {
  min-height: 43px;
  padding-inline: 15px;
  white-space: nowrap;
}

.project-counterparty-add span {
  font-size: 17px;
  font-weight: 400;
  line-height: 1;
}

.project-counterparty-selection {
  min-height: 16px;
  color: var(--premium-success);
  font-size: 11px;
  font-weight: 650;
}

.project-counterparty-dialog {
  width: min(780px, calc(100% - 24px));
}

.project-counterparty-dialog-card {
  gap: 0 !important;
  max-height: calc(100dvh - 24px);
  padding: 0 !important;
  overflow: hidden auto;
}

.project-counterparty-dialog-heading {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 14px !important;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--premium-line);
  background: rgba(255, 255, 255, .74);
}

.project-counterparty-dialog-heading h2 {
  margin: 2px 0 0;
}

.project-counterparty-dialog-heading p {
  max-width: 570px;
  margin: 5px 0 0;
  line-height: 1.45;
}

.project-counterparty-dialog-symbol {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(44, 132, 240, .14);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(225, 240, 255, .92));
  color: #0a73dc;
  box-shadow: 0 10px 24px rgba(41, 108, 182, .12), 0 1px 0 #fff inset;
}

.project-counterparty-dialog-symbol svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.project-counterparty-dialog-body {
  display: grid;
  gap: 18px;
  padding: 18px 24px 22px;
}

.project-counterparty-lookup {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(52, 126, 213, .15);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(235, 246, 255, .9), rgba(248, 251, 255, .94));
  box-shadow: 0 10px 28px rgba(35, 80, 132, .06), 0 1px 0 #fff inset;
}

.project-counterparty-lookup > div:first-child {
  display: grid;
  gap: 2px;
}

.project-counterparty-lookup strong {
  color: var(--premium-ink);
  font-size: 13px;
}

.project-counterparty-lookup small {
  color: var(--premium-muted);
  font-size: 10.5px;
}

.project-counterparty-lookup-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.project-counterparty-lookup-button {
  min-height: 43px;
}

.project-counterparty-status {
  min-height: 16px;
  color: var(--premium-muted);
  font-size: 11px;
  line-height: 1.4;
}

.project-counterparty-status[data-tone="progress"] { color: #245f9f; }
.project-counterparty-status[data-tone="success"] { color: var(--premium-success); }
.project-counterparty-status[data-tone="warning"] { color: #9a5a08; }
.project-counterparty-status[data-tone="error"] { color: var(--premium-danger); }

.project-counterparty-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.project-counterparty-details .field-wide {
  grid-column: 1 / -1;
}

.project-counterparty-dialog .field input,
.project-counterparty-dialog .field textarea {
  background: #fff;
}

.project-counterparty-dialog .field textarea {
  min-height: 72px;
  resize: vertical;
}

.project-counterparty-dialog-actions {
  position: sticky;
  z-index: 2;
  bottom: 0;
  margin: 0;
  padding: 14px 24px 18px !important;
  background: rgba(248, 250, 253, .92);
  box-shadow: 0 -14px 30px rgba(22, 45, 72, .045);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.project-counterparty-form-error {
  margin: 0;
}

@media (max-width: 640px) {
  .project-counterparty-control,
  .project-counterparty-lookup-control,
  .project-counterparty-details {
    grid-template-columns: 1fr;
  }

  .project-counterparty-add,
  .project-counterparty-lookup-button {
    width: 100%;
  }

  .project-counterparty-details .field-wide {
    grid-column: auto;
  }

  .project-counterparty-dialog-heading {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 10px !important;
    padding: 17px 16px 15px;
  }

  .project-counterparty-dialog-symbol {
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .project-counterparty-dialog-body {
    padding: 14px 16px 18px;
  }

  .project-counterparty-dialog-actions {
    padding: 12px 16px 16px !important;
  }
}

/* Public access */
.public-app {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 82% 4%, rgba(55, 154, 255, .18), transparent 29rem),
    radial-gradient(circle at 18% 12%, rgba(150, 119, 255, .09), transparent 25rem),
    #f3f6fa;
}

.public-header {
  min-height: 70px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: rgba(16, 47, 83, .92);
  box-shadow: 0 12px 34px rgba(15, 42, 73, .12);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.public-brand-mark {
  min-width: 54px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .08));
  box-shadow: 0 7px 18px rgba(0, 20, 44, .15), 0 1px 0 rgba(255, 255, 255, .18) inset;
}

.public-app .login-card,
.public-app .narrow-card,
.public-app .registration-card {
  border: 1px solid rgba(255, 255, 255, .9);
  border-top: 1px solid rgba(255, 255, 255, .9);
  border-radius: 22px;
  background: rgba(253, 254, 255, .9);
  box-shadow: var(--premium-shadow-lg);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

.public-app .login-heading h1,
.public-app .narrow-card h1 {
  color: var(--premium-slate-900);
  font-weight: 730;
  letter-spacing: -.04em;
}

.public-app .login-heading {
  display: grid;
  gap: 8px;
}

.public-app .login-eyebrow {
  color: var(--premium-blue-700);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.public-app .login-heading p {
  max-width: 38rem;
  margin: 0;
  color: var(--premium-slate-600);
  font-size: 15px;
  line-height: 1.5;
}

/* Responsive shell */
@media (max-width: 1180px) {
  .authenticated-app .user-copy {
    display: none;
  }
}

@media (max-width: 820px) {
  .authenticated-app .app-sidebar {
    box-shadow: 18px 0 55px rgba(10, 31, 56, .24);
  }

  .authenticated-app .sidebar-backdrop {
    background: rgba(15, 24, 36, .32);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
  }

  .authenticated-app .app-topbar {
    padding-inline: 12px;
  }

  .authenticated-app .page-shell {
    padding: 18px 14px 92px;
  }

  .authenticated-app .button {
    min-height: 44px;
  }

  .authenticated-app .dialog,
  .public-app .dialog {
    width: calc(100% - 20px);
    max-height: calc(100dvh - 20px);
    border-radius: 19px;
  }

  .authenticated-app .dialog-card,
  .public-app .dialog-card {
    max-height: calc(100dvh - 20px);
    border-radius: 19px;
  }

  .authenticated-app .table-frame {
    border-radius: 14px;
  }
}

@media (max-width: 620px) {
  .authenticated-app .page-shell {
    padding-top: 14px;
  }

  .authenticated-app .page-heading h1,
  .authenticated-app .project-hero h1 {
    font-size: 27px;
  }

  .authenticated-app .content-card {
    padding: 15px;
    border-radius: 14px;
  }

  .authenticated-app .page-heading-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .authenticated-app .page-heading-actions .button {
    width: 100%;
  }

  .authenticated-app .topbar-logout-button {
    width: 44px;
    min-height: 44px;
    padding: 0;
  }

  .authenticated-app .topbar-logout-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .authenticated-app .notification-button {
    display: grid;
  }

  .authenticated-app .dialog-actions,
  .public-app .dialog-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .authenticated-app .dialog-actions .button,
  .public-app .dialog-actions .button {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .authenticated-app .account-switcher > summary,
  .authenticated-app .role-context {
    font-size: 11px;
  }

  .authenticated-app .dialog-actions,
  .public-app .dialog-actions {
    grid-template-columns: 1fr;
  }
}

/* Backdrop filter fallback keeps contrast and speed predictable. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .authenticated-app .app-topbar,
  .authenticated-app .global-search,
  .authenticated-app .topbar-icon,
  .authenticated-app .switcher-popover,
  .authenticated-app .notification-popover,
  .authenticated-app .user-popover,
  .authenticated-app .button-quiet,
  .authenticated-app .dialog-card,
  .public-app .dialog-card {
    background: #fff;
  }
}

/* Leader workspace shell --------------------------------------------------
 * Navigation and page controls live on a single floating material layer.
 * The document itself remains the only scroll container; headers use sticky
 * positioning so long tables and queues never lose their context.
 */
.authenticated-app .workspace-page-header,
.authenticated-app .page-heading:not(.workspace-page-header),
.authenticated-app :is(.project-hero, .request-detail-hero, .stock-detail-hero, .sourcing-case-header) {
  position: sticky;
  top: calc(var(--topbar-height) + 12px);
  z-index: var(--premium-z-sticky);
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 21px;
  background:
    radial-gradient(circle at 96% 0, rgba(56, 151, 255, .13), transparent 17rem),
    linear-gradient(135deg, rgba(254, 254, 255, .94), rgba(245, 249, 254, .88));
  box-shadow: 0 15px 42px rgba(34, 55, 82, .11), 0 1px 0 rgba(255, 255, 255, .98) inset;
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  backdrop-filter: blur(22px) saturate(155%);
}

.authenticated-app .workspace-page-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 18px;
  margin: 0 0 14px;
  padding: 15px 17px 12px;
}

.authenticated-app .page-heading:not(.workspace-page-header),
.authenticated-app :is(.project-hero, .request-detail-hero, .stock-detail-hero, .sourcing-case-header) {
  margin-bottom: 14px;
  padding: 14px 17px;
}

.authenticated-app .workspace-page-copy {
  min-width: 0;
}

.authenticated-app .workspace-page-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: #507396;
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.authenticated-app .workspace-page-header h1 {
  margin: 0;
  font-size: clamp(24px, 2.1vw, 32px);
  line-height: 1.06;
}

.authenticated-app .workspace-page-header p {
  max-width: 720px;
  margin: 5px 0 0;
  font-size: 11px;
  line-height: 1.45;
}

.authenticated-app .workspace-page-header .page-heading-actions,
.authenticated-app .workspace-page-header .sourcing-heading-actions,
.authenticated-app .workspace-page-header .leader-command-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  margin: 0;
}

.authenticated-app .workspace-page-header .button {
  min-height: 38px;
  padding: 7px 14px;
  white-space: nowrap;
}

.authenticated-app .workspace-header-metrics {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(45, 69, 96, .09);
  border-radius: 13px;
  background: rgba(45, 69, 96, .08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
}

.authenticated-app .workspace-header-metrics > span {
  min-width: 118px;
  min-height: var(--premium-metric-tile-min-height);
  flex: 1 1 132px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: var(--premium-metric-tile-padding-y) var(--premium-metric-tile-padding-x);
  background: rgba(255, 255, 255, .79);
}

.authenticated-app .workspace-header-metrics > span > small {
  color: #718094;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
  white-space: normal;
}

.authenticated-app .workspace-header-metrics > span > strong {
  overflow: hidden;
  color: #183957;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.authenticated-app .workspace-header-metrics > .is-danger > strong {
  color: var(--premium-red-700);
}

.authenticated-app .workspace-header-metrics > .is-warning > strong {
  color: var(--premium-amber-700);
}

.authenticated-app .workspace-header-metrics > .is-success > strong {
  color: var(--premium-green-700);
}

.authenticated-app .workspace-header-metrics .is-date,
.authenticated-app .workspace-header-metrics .is-label {
  font-size: 13px;
}

.authenticated-app .workspace-header-metrics-compact > span {
  min-width: 180px;
  max-width: 240px;
  flex: 0 1 210px;
}

.authenticated-app .workspace-header-updated {
  max-width: 130px;
  margin-left: auto;
}

.authenticated-app .workspace-header-updated small {
  white-space: normal !important;
}

.authenticated-app .workspace-overview-disclosure,
.authenticated-app .sourcing-secondary-overview {
  margin: 0 0 14px;
  overflow: hidden;
  border: 1px solid var(--premium-line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .88);
  box-shadow: var(--premium-shadow-xs);
}

.authenticated-app .workspace-overview-disclosure > summary,
.authenticated-app .sourcing-secondary-overview > summary {
  min-height: 47px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  list-style: none;
}

.authenticated-app .workspace-overview-disclosure > summary::-webkit-details-marker,
.authenticated-app .sourcing-secondary-overview > summary::-webkit-details-marker {
  display: none;
}

.authenticated-app .workspace-overview-disclosure > summary > span:first-child,
.authenticated-app .sourcing-secondary-overview > summary > span:first-child {
  display: grid;
  gap: 2px;
}

.authenticated-app .workspace-overview-disclosure > summary strong,
.authenticated-app .sourcing-secondary-overview > summary strong {
  color: var(--premium-slate-900);
  font-size: 11px;
}

.authenticated-app .workspace-overview-disclosure > summary small,
.authenticated-app .sourcing-secondary-overview > summary small {
  color: var(--premium-muted);
  font-size: 11px;
}

.authenticated-app .workspace-overview-disclosure > summary i,
.authenticated-app .sourcing-secondary-overview > summary .sourcing-chevron {
  margin-left: auto;
  transition: transform var(--premium-fast) ease;
}

.authenticated-app .workspace-overview-disclosure[open] > summary i,
.authenticated-app .sourcing-secondary-overview[open] > summary .sourcing-chevron {
  transform: rotate(180deg);
}

.authenticated-app .workspace-overview-disclosure .request-summary {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0;
  box-shadow: none;
}

.authenticated-app .sourcing-secondary-overview {
  padding: 0;
}

.authenticated-app .sourcing-secondary-overview-content {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.authenticated-app .sourcing-secondary-overview .sourcing-buyer-rating {
  margin: 0;
  box-shadow: none;
}

.authenticated-app .sourcing-savings-dashboard {
  grid-template-columns: minmax(240px, 1.45fr) repeat(3, minmax(120px, 1fr));
}

@media (max-width: 820px) {
  .authenticated-app .workspace-page-header,
  .authenticated-app .page-heading:not(.workspace-page-header),
  .authenticated-app :is(.project-hero, .request-detail-hero, .stock-detail-hero, .sourcing-case-header) {
    top: calc(var(--topbar-height) + 8px);
    border-radius: 18px;
  }

  .authenticated-app .workspace-page-header {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 12px 12px 10px;
  }

  .authenticated-app .workspace-page-header h1 {
    font-size: 24px;
  }

  .authenticated-app .workspace-page-header p {
    display: none;
  }

  .authenticated-app .workspace-page-header .page-heading-actions,
  .authenticated-app .workspace-page-header .sourcing-heading-actions,
  .authenticated-app .workspace-page-header .leader-command-actions {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .authenticated-app .workspace-page-header .page-heading-actions::-webkit-scrollbar,
  .authenticated-app .workspace-page-header .sourcing-heading-actions::-webkit-scrollbar,
  .authenticated-app .workspace-page-header .leader-command-actions::-webkit-scrollbar {
    display: none;
  }

  .authenticated-app .workspace-page-header .page-heading-actions .button,
  .authenticated-app .workspace-page-header .button {
    width: auto;
    min-height: 44px;
  }

  .authenticated-app .workspace-header-metrics {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .authenticated-app .workspace-header-metrics::-webkit-scrollbar {
    display: none;
  }

  .authenticated-app .workspace-header-metrics > span {
    min-width: 132px;
    min-height: 48px;
    flex: 0 0 132px;
    padding: 6px 10px;
  }

  .authenticated-app .workspace-header-metrics-compact > span {
    min-width: 168px;
    max-width: 168px;
    flex-basis: 168px;
  }

  .authenticated-app .workspace-header-metrics > span > strong {
    font-size: 16px;
  }

  .authenticated-app .workspace-header-updated {
    min-width: 118px !important;
  }
}

@media (max-width: 480px) {
  .authenticated-app .workspace-page-eyebrow {
    margin-bottom: 2px;
  }

  .authenticated-app .workspace-page-header h1 {
    font-size: 21px;
  }

  .authenticated-app .workspace-page-header .button {
    min-height: 44px;
    padding: 6px 12px;
    font-size: 11px;
  }

  .authenticated-app .page-heading:not(.workspace-page-header),
  .authenticated-app :is(.project-hero, .request-detail-hero, .stock-detail-hero, .sourcing-case-header) {
    padding: 12px;
  }
}

@media (prefers-contrast: more) {
  :root {
    --premium-line: rgba(22, 34, 50, .28);
    --premium-line-strong: rgba(22, 34, 50, .42);
    --premium-muted: #4e5c6f;
  }

  .authenticated-app .button-quiet,
  .authenticated-app .field input,
  .authenticated-app .field select,
  .authenticated-app .field textarea {
    border-color: var(--premium-line-strong);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Counterparty card and compact edit workspace ------------------------- */
.authenticated-app .counterparty-row[data-counterparty-row] {
  position: relative;
  cursor: pointer;
}

.authenticated-app .counterparty-row-open {
  position: absolute;
  z-index: 1;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.authenticated-app .counterparty-row:has(.counterparty-row-open:focus-visible) {
  z-index: 1;
  outline: 0;
  background: var(--premium-blue-50);
  box-shadow: 0 0 0 3px rgba(8, 120, 249, .18) inset;
}

.authenticated-app .counterparty-row-open:focus-visible {
  outline: 0;
}

.authenticated-app .counterparty-edit-action {
  position: relative;
  z-index: 2;
}

.authenticated-app .counterparty-info-dialog {
  width: min(760px, calc(100vw - 28px));
}

.authenticated-app .counterparty-info-card {
  max-height: min(720px, calc(100dvh - 32px));
  overflow: hidden;
}

.authenticated-app .counterparty-info-heading {
  grid-template-columns: 46px minmax(0, 1fr) 44px;
  gap: 13px;
  align-items: center;
  padding: 18px 20px;
}

.authenticated-app .counterparty-info-heading > div {
  min-width: 0;
}

.authenticated-app .counterparty-info-heading h2 {
  overflow: hidden;
  margin: 1px 0 7px;
  color: var(--premium-ink);
  font-size: clamp(20px, 3vw, 27px);
  font-weight: 760;
  letter-spacing: -.035em;
  line-height: 1.14;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.authenticated-app .counterparty-info-heading .badge {
  min-height: 22px;
  padding-inline: 8px;
  font-size: 9px;
}

.authenticated-app .counterparty-info-body {
  padding: 16px 20px 18px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 100% 0, rgba(70, 164, 255, .08), transparent 20rem),
    rgba(246, 249, 252, .74);
}

.authenticated-app .counterparty-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.authenticated-app .counterparty-info-grid > div {
  min-width: 0;
  min-height: 72px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 12px 13px;
  border: 1px solid rgba(63, 84, 108, .1);
  border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 5px 14px rgba(43, 61, 82, .04), 0 1px 0 #fff inset;
}

.authenticated-app .counterparty-info-grid > .counterparty-info-wide {
  grid-column: 1 / -1;
}

.authenticated-app .counterparty-info-grid > div.is-empty {
  background: rgba(255, 255, 255, .6);
}

.authenticated-app .counterparty-info-grid dt {
  color: #718197;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .055em;
  line-height: 1.2;
  text-transform: uppercase;
}

.authenticated-app .counterparty-info-grid dd {
  overflow-wrap: anywhere;
  margin: 0;
  color: #22344b;
  font-size: 12px;
  font-weight: 620;
  line-height: 1.45;
  white-space: pre-line;
}

.authenticated-app .counterparty-info-grid .is-empty dd {
  color: #8492a3;
  font-weight: 520;
}

.authenticated-app .counterparty-info-actions {
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
}

.authenticated-app .counterparty-info-actions > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.authenticated-app .counterparty-copy-action {
  gap: 8px;
  transition: color var(--premium-fast) ease, border-color var(--premium-fast) ease, background-color var(--premium-fast) ease, box-shadow var(--premium-fast) ease;
}

.authenticated-app .counterparty-copy-action svg,
.authenticated-app .counterparty-back-link svg,
.authenticated-app .counterparty-edit-actions svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.authenticated-app .counterparty-copy-action.is-copied {
  border-color: rgba(22, 148, 97, .24);
  background: var(--premium-green-50);
  box-shadow: 0 8px 22px rgba(22, 148, 97, .1);
  color: var(--premium-green-700);
}

.authenticated-app .counterparty-edit-workspace {
  width: min(1180px, 100%);
  display: grid;
  gap: 14px;
  margin-inline: auto;
}

.authenticated-app .counterparty-edit-header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding-block: 15px;
}

.authenticated-app .counterparty-edit-header .workspace-page-copy {
  min-width: 0;
}

.authenticated-app .counterparty-edit-header h1 {
  overflow: hidden;
  max-width: 800px;
  font-size: clamp(25px, 3.2vw, 38px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.authenticated-app .counterparty-back-link {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: -2px 0 6px;
  color: var(--premium-blue-700);
  font-size: 10px;
  font-weight: 690;
  text-decoration: none;
}

.authenticated-app .counterparty-back-link:hover {
  color: var(--premium-blue-500);
}

.authenticated-app .counterparty-edit-card {
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 22px;
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--premium-shadow-sm);
}

.authenticated-app .counterparty-edit-form {
  display: grid;
}

.authenticated-app .counterparty-edit-form > .form-error {
  margin: 16px 18px 0;
}

.authenticated-app .counterparty-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  padding: 18px;
}

.authenticated-app .counterparty-edit-grid .field-wide {
  grid-column: 1 / -1;
}

.authenticated-app .counterparty-edit-grid .field {
  min-width: 0;
  gap: 5px;
}

.authenticated-app .counterparty-edit-grid label {
  color: #53677e;
  font-size: 10px;
  font-weight: 690;
}

.authenticated-app .counterparty-edit-grid input,
.authenticated-app .counterparty-edit-grid textarea {
  min-height: 44px;
  padding: 10px 12px;
  border-color: rgba(61, 82, 106, .17);
  border-radius: 12px;
  background: #fff;
  font-size: 12px;
}

.authenticated-app .counterparty-edit-grid textarea {
  min-height: 66px;
  max-height: 94px;
  resize: vertical;
}

.authenticated-app .counterparty-edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-top: 1px solid var(--premium-line);
  background: rgba(248, 250, 253, .86);
}

.authenticated-app .counterparty-edit-actions .button {
  gap: 6px;
}

@media (max-width: 720px) {
  .authenticated-app .counterparty-info-grid,
  .authenticated-app .counterparty-edit-grid {
    grid-template-columns: 1fr;
  }

  .authenticated-app .counterparty-info-grid > .counterparty-info-wide,
  .authenticated-app .counterparty-edit-grid .field-wide {
    grid-column: auto;
  }

  .authenticated-app .counterparty-edit-header {
    grid-template-columns: 1fr;
  }

  .authenticated-app .counterparty-edit-header > .counterparty-copy-action {
    width: 100%;
    justify-content: center;
    margin-top: 12px;
  }

  .authenticated-app .counterparty-info-actions {
    align-items: stretch;
  }

  .authenticated-app .counterparty-info-actions > div {
    flex: 1 1 100%;
  }

  .authenticated-app .counterparty-info-actions > div .button {
    flex: 1 1 auto;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .authenticated-app .counterparty-info-heading {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    padding: 14px;
  }

  .authenticated-app .counterparty-info-body,
  .authenticated-app .counterparty-edit-grid {
    padding: 14px;
  }

  .authenticated-app .counterparty-info-actions,
  .authenticated-app .counterparty-edit-actions {
    padding: 12px 14px;
  }

  .authenticated-app .counterparty-info-actions > .button {
    display: none;
  }

  .authenticated-app .counterparty-info-actions > div {
    display: grid;
    grid-template-columns: 1fr;
  }

  .authenticated-app .counterparty-edit-actions .button {
    min-width: 0;
  }
}

/* Action center: invoice decisions stay visually separate from routine events. */
.authenticated-app .notification-popover {
  width: min(460px, calc(100vw - 24px));
  max-height: min(720px, calc(100dvh - 88px));
  border-color: rgba(255, 255, 255, .96);
  border-radius: 22px;
  background: rgba(250, 252, 255, .94);
  box-shadow: 0 34px 90px rgba(20, 37, 62, .26), 0 1px 0 #fff inset;
}

.authenticated-app .notification-popover-heading {
  min-height: 82px;
  padding: 16px 18px;
  background: radial-gradient(circle at 90% 0, rgba(72, 155, 255, .16), transparent 38%), rgba(255, 255, 255, .72);
}

.authenticated-app .notification-popover-heading > div {
  gap: 1px;
}

.authenticated-app .notification-popover-heading > div > span {
  color: var(--premium-blue-700);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.authenticated-app .notification-popover-heading strong {
  color: var(--premium-ink);
  font-size: 18px;
  letter-spacing: -.025em;
}

.authenticated-app .notification-popover-heading button,
.authenticated-app .notification-section-read button {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--premium-line);
  border-radius: var(--premium-radius-pill);
  background: rgba(255, 255, 255, .86);
  color: var(--premium-blue-700);
  box-shadow: var(--premium-shadow-xs);
}

.authenticated-app .notification-preview-list {
  max-height: 530px;
  gap: 0;
  background: rgba(245, 248, 252, .76);
}

.authenticated-app .notification-preview-section {
  display: grid;
  padding: 8px;
  border-bottom: 1px solid var(--premium-line);
}

.authenticated-app .notification-preview-section > header {
  min-height: 38px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 2px 7px 6px;
}

.authenticated-app .notification-preview-section > header > strong {
  color: var(--premium-slate-700);
  font-size: 11px;
}

.authenticated-app .notification-preview-section > header > span:last-child {
  min-width: 23px;
  min-height: 23px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: var(--premium-radius-pill);
  background: var(--premium-slate-100);
  color: var(--premium-slate-600);
  font-size: 9px;
  font-weight: 800;
}

.authenticated-app .notification-preview-section.is-sourcing > header > span:last-child {
  background: var(--premium-amber-50);
  color: var(--premium-amber-700);
}

.authenticated-app .notification-section-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--premium-blue-50);
  color: var(--premium-blue-700);
}

.authenticated-app .notification-preview-section.is-sourcing .notification-section-icon {
  background: var(--premium-amber-50);
  color: var(--premium-amber-700);
}

.authenticated-app .notification-section-icon svg,
.authenticated-app .notification-preview-empty svg,
.authenticated-app .notification-all-link svg,
.authenticated-app .notification-center-section-icon svg,
.authenticated-app .notification-action-icon svg,
.authenticated-app .notification-card-icon svg,
.authenticated-app .notification-card-action svg,
.authenticated-app .notification-center-clear svg,
.authenticated-app .notification-history summary > svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.authenticated-app .notification-preview {
  min-height: 82px;
  grid-template-columns: 7px minmax(0, 1fr) auto;
  gap: 9px;
  margin-top: 3px;
  padding: 11px 12px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: rgba(255, 255, 255, .9);
  transition: border-color var(--premium-fast) ease, background var(--premium-fast) ease, box-shadow var(--premium-fast) ease;
}

.authenticated-app .notification-preview:hover,
.authenticated-app .notification-preview:focus-visible {
  border-color: rgba(8, 120, 249, .2);
  background: #fff;
  box-shadow: var(--premium-shadow-sm);
}

.authenticated-app .notification-preview strong {
  color: var(--premium-ink);
  font-size: 12px;
  line-height: 1.3;
}

.authenticated-app .notification-preview small {
  color: var(--premium-muted);
  font-size: 10px;
}

.authenticated-app .notification-preview time {
  font-size: 9px;
}

.authenticated-app .notification-preview-action {
  align-self: center;
  color: var(--premium-blue-700);
  font-size: 9px;
  font-weight: 800;
}

.authenticated-app .notification-preview-empty > span {
  width: 44px;
  height: 44px;
}

.authenticated-app .notification-all-link {
  min-height: 52px;
  grid-auto-flow: column;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, .82);
}

.authenticated-app .notification-all-link svg {
  width: 16px;
  height: 16px;
  transition: transform var(--premium-fast) ease;
}

.authenticated-app .notification-all-link:hover svg {
  transform: translateX(2px);
}

.authenticated-app .action-center-page {
  max-width: 1500px;
}

.authenticated-app .notification-page-heading {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 188px;
  align-content: center;
}

.authenticated-app .notification-center-tabs {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.authenticated-app .notification-center-tabs a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: var(--premium-radius-pill);
  background: rgba(255, 255, 255, .74);
  color: var(--premium-slate-700);
  box-shadow: var(--premium-shadow-xs);
  font-size: 11px;
  font-weight: 750;
  text-decoration: none;
}

.authenticated-app .notification-center-tabs strong {
  min-width: 24px;
  min-height: 24px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: var(--premium-radius-pill);
  background: var(--premium-blue-100);
  color: var(--premium-blue-700);
  font-size: 9px;
}

.authenticated-app .notification-center-section {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 22px;
  background: rgba(255, 255, 255, .9);
  box-shadow: var(--premium-shadow-md);
  scroll-margin-top: calc(var(--topbar-height) + 18px);
}

.authenticated-app .notification-center-sourcing {
  border-color: rgba(233, 173, 75, .24);
}

.authenticated-app .notification-center-section-heading {
  min-height: 92px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 18px 20px;
  border-bottom: 1px solid var(--premium-line);
  background: linear-gradient(135deg, rgba(250, 252, 255, .98), rgba(244, 248, 253, .82));
}

.authenticated-app .notification-center-sourcing .notification-center-section-heading {
  background: radial-gradient(circle at 90% 0, rgba(255, 193, 84, .16), transparent 34%), linear-gradient(135deg, #fff, #fffaf2);
}

.authenticated-app .notification-center-section-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: var(--premium-blue-50);
  color: var(--premium-blue-700);
  box-shadow: inset 0 0 0 1px rgba(8, 120, 249, .08);
}

.authenticated-app .notification-center-sourcing .notification-center-section-icon {
  background: var(--premium-amber-50);
  color: var(--premium-amber-700);
  box-shadow: inset 0 0 0 1px rgba(210, 138, 18, .1);
}

.authenticated-app .notification-center-section-heading h2 {
  margin: 0;
  color: var(--premium-ink);
  font-size: 19px;
  letter-spacing: -.025em;
}

.authenticated-app .notification-center-section-heading p {
  margin: 3px 0 0;
  color: var(--premium-muted);
  font-size: 11px;
}

.authenticated-app .notification-section-summary {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.authenticated-app .notification-section-summary strong {
  color: var(--premium-ink);
  font-size: 24px;
  line-height: 1;
}

.authenticated-app .notification-section-summary small {
  color: var(--premium-muted);
  font-size: 9px;
}

.authenticated-app .notification-action-list,
.authenticated-app .notification-list {
  display: grid;
  gap: 0;
}

.authenticated-app .notification-action-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--premium-line);
  background: rgba(248, 250, 253, .78);
  color: var(--premium-muted);
  font-size: 10px;
}

.authenticated-app .notification-action-pagination > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.authenticated-app .notification-action-pagination a,
.authenticated-app .notification-action-pagination strong {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(148, 163, 184, .26);
  border-radius: 12px;
  padding: 0 13px;
  background: rgba(255, 255, 255, .88);
  color: var(--premium-ink);
  text-decoration: none;
}

.authenticated-app .notification-action-pagination a:hover {
  border-color: rgba(8, 120, 249, .3);
  color: var(--premium-blue-700);
  box-shadow: var(--premium-shadow-xs);
}

.authenticated-app .notification-action-pagination strong {
  background: rgba(241, 245, 249, .9);
  font-weight: 800;
}

.authenticated-app .notification-action-card {
  min-height: 132px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
  border-bottom: 1px solid var(--premium-line);
  background: rgba(255, 255, 255, .82);
}

.authenticated-app .notification-action-card:last-child {
  border-bottom: 0;
}

.authenticated-app .notification-action-card.is-decision {
  background: linear-gradient(90deg, rgba(255, 249, 237, .9), rgba(255, 255, 255, .86) 48%);
}

.authenticated-app .notification-action-card.is-error {
  background: linear-gradient(90deg, rgba(255, 244, 245, .9), rgba(255, 255, 255, .86) 48%);
}

.authenticated-app .notification-action-icon,
.authenticated-app .notification-card-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--premium-blue-50);
  color: var(--premium-blue-700);
}

.authenticated-app .notification-action-card.is-decision .notification-action-icon {
  background: var(--premium-amber-50);
  color: var(--premium-amber-700);
}

.authenticated-app .notification-action-card.is-error .notification-action-icon {
  background: var(--premium-red-50);
  color: var(--premium-red-700);
}

.authenticated-app .notification-action-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.authenticated-app .notification-action-kicker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--premium-blue-700);
  font-size: 9px;
  font-weight: 800;
}

.authenticated-app .notification-action-kicker small {
  color: var(--premium-muted);
  font-size: inherit;
}

.authenticated-app .notification-action-copy h3 {
  margin: 0;
  color: var(--premium-ink);
  font-size: 15px;
}

.authenticated-app .notification-action-copy > p {
  max-width: 820px;
  margin: 0;
  color: var(--premium-ink-soft);
  font-size: 11px;
  line-height: 1.5;
}

.authenticated-app .notification-action-case {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--premium-muted);
  font-size: 9px;
}

.authenticated-app .notification-action-case strong {
  color: var(--premium-slate-600);
}

.authenticated-app .notification-action-side {
  display: grid;
  justify-items: end;
  gap: 10px;
}

.authenticated-app .notification-action-state {
  padding: 5px 9px;
  border-radius: var(--premium-radius-pill);
  background: var(--premium-amber-50);
  color: var(--premium-amber-700);
  font-size: 9px;
  font-weight: 800;
}

.authenticated-app .notification-center-clear {
  min-height: 104px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 18px 20px;
}

.authenticated-app .notification-center-clear > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--premium-green-50);
  color: var(--premium-green-700);
}

.authenticated-app .notification-center-clear > div {
  display: grid;
  gap: 2px;
}

.authenticated-app .notification-center-clear strong {
  color: var(--premium-ink);
  font-size: 13px;
}

.authenticated-app .notification-center-clear small {
  color: var(--premium-muted);
  font-size: 10px;
}

.authenticated-app .notification-center-clear > a {
  color: var(--premium-blue-700);
  font-size: 10px;
  font-weight: 800;
}

.authenticated-app .notification-history {
  border-top: 1px solid var(--premium-line);
}

.authenticated-app .notification-history > summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
  background: rgba(248, 250, 253, .82);
  cursor: pointer;
  list-style: none;
}

.authenticated-app .notification-history > summary::-webkit-details-marker {
  display: none;
}

.authenticated-app .notification-history summary > span {
  display: grid;
  gap: 1px;
}

.authenticated-app .notification-history summary strong {
  color: var(--premium-slate-700);
  font-size: 11px;
}

.authenticated-app .notification-history summary small {
  color: var(--premium-muted);
  font-size: 9px;
}

.authenticated-app .notification-history summary > svg {
  color: var(--premium-muted);
  transition: transform var(--premium-fast) ease;
}

.authenticated-app .notification-history[open] summary > svg {
  transform: rotate(180deg);
}

.authenticated-app .notification-history-content > .ui-state {
  margin: 14px 18px;
}

.authenticated-app .notification-activity-pager {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-top: 1px solid var(--premium-line);
  background: rgba(248, 250, 253, .72);
}

.authenticated-app .notification-activity-pager small {
  color: var(--premium-muted);
  font-size: 10px;
}

.authenticated-app .notification-lazy-history[open] > summary {
  border-bottom: 1px solid var(--premium-line);
}

.authenticated-app .notification-list form {
  margin: 0;
}

.authenticated-app .notification-card {
  min-height: 104px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 13px;
  padding: 14px 20px;
  border: 0;
  border-bottom: 1px solid var(--premium-line);
  border-radius: 0;
  background: rgba(255, 255, 255, .74);
  box-shadow: none;
  transition: background var(--premium-fast) ease;
}

.authenticated-app .notification-card:hover,
.authenticated-app .notification-card:focus-visible {
  background: var(--premium-blue-50);
}

.authenticated-app .notification-card.unread {
  border-color: var(--premium-line);
  background: rgba(241, 247, 255, .76);
  box-shadow: inset 4px 0 0 var(--premium-blue-500);
}

.authenticated-app .notification-card-icon.is-sourcing {
  background: var(--premium-amber-50);
  color: var(--premium-amber-700);
}

.authenticated-app .notification-card-icon.is-warehouse {
  background: var(--premium-green-50);
  color: var(--premium-green-700);
}

.authenticated-app .notification-card-copy {
  gap: 4px;
}

.authenticated-app .notification-card-top {
  gap: 7px;
}

.authenticated-app .notification-card-top > span {
  padding: 0;
  background: transparent;
  color: var(--premium-blue-700);
  font-size: 8px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.authenticated-app .notification-card-top em {
  padding: 2px 6px;
  border-radius: var(--premium-radius-pill);
  background: var(--premium-blue-100);
  color: var(--premium-blue-700);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.authenticated-app .notification-card-copy > strong {
  color: var(--premium-ink);
  font-size: 13px;
}

.authenticated-app .notification-card-copy > small {
  max-width: 900px;
  font-size: 10px;
}

.authenticated-app .notification-card-action {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--premium-blue-700);
}

.authenticated-app .notification-card-action strong {
  font-size: 9px;
}

.authenticated-app .notification-card-action svg {
  width: 15px;
  height: 15px;
}

.authenticated-app .notification-section-read {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 12px 20px;
  background: rgba(248, 250, 253, .84);
}

@media (max-width: 760px) {
  .authenticated-app .notification-popover {
    width: calc(100vw - 20px);
    right: -54px;
  }

  .authenticated-app .notification-page-heading {
    min-height: 168px;
    grid-template-columns: 1fr;
  }

  .authenticated-app .notification-page-heading > form {
    display: none;
  }

  .authenticated-app .notification-center-tabs {
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .authenticated-app .notification-center-tabs a {
    flex: 0 0 auto;
  }

  .authenticated-app .notification-center-section {
    border-radius: 18px;
  }

  .authenticated-app .notification-center-section-heading {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px;
  }

  .authenticated-app .notification-center-section-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .authenticated-app .notification-center-section-heading h2 {
    font-size: 16px;
  }

  .authenticated-app .notification-center-section-heading p,
  .authenticated-app .notification-section-summary small {
    display: none;
  }

  .authenticated-app .notification-action-card {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  .authenticated-app .notification-action-icon,
  .authenticated-app .notification-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .authenticated-app .notification-action-side {
    grid-column: 2;
    justify-items: stretch;
  }

  .authenticated-app .notification-action-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .authenticated-app .notification-action-state {
    width: fit-content;
  }

  .authenticated-app .notification-center-clear {
    grid-template-columns: 42px minmax(0, 1fr);
    padding: 14px;
  }

  .authenticated-app .notification-center-clear > a {
    grid-column: 2;
  }

  .authenticated-app .notification-card {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 13px 14px;
  }

  .authenticated-app .notification-card-action {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .authenticated-app .notification-all-link svg,
  .authenticated-app .notification-history summary > svg {
    transition: none;
  }
}

/* Item editor: a focused three-step workspace. */
.item-editor-page .page-shell { width: min(100%, 1160px); }
.item-editor-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 340px); gap: 24px; align-items: end; margin-bottom: 18px; }
.item-editor-heading { min-width: 0; }
.item-editor-heading .back-link { min-height: 32px; display: inline-flex; align-items: center; margin-bottom: 12px; color: var(--premium-blue-700); font-size: 11px; font-weight: 700; text-decoration: none; }
.item-editor-heading .back-link:hover { color: var(--premium-blue-500); }
.item-editor-eyebrow { display: block; margin-bottom: 5px; color: var(--premium-blue-600); font-size: 10px; font-weight: 780; letter-spacing: .09em; text-transform: uppercase; }
.item-editor-heading h1 { margin: 0; color: var(--premium-ink); font-size: clamp(28px, 4vw, 42px); letter-spacing: -.045em; line-height: 1.05; }
.item-editor-heading p { max-width: 630px; margin: 8px 0 0; color: var(--premium-muted); font-size: 13px; line-height: 1.5; }
.item-editor-project { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 2px 10px; align-items: center; padding: 14px 15px; border: 1px solid rgba(255, 255, 255, .82); border-radius: var(--premium-radius-lg); background: rgba(248, 251, 255, .8); box-shadow: var(--premium-shadow-sm); color: inherit; text-decoration: none; -webkit-backdrop-filter: blur(18px) saturate(145%); backdrop-filter: blur(18px) saturate(145%); transition: transform var(--premium-fast) var(--premium-ease), box-shadow var(--premium-fast) ease; }
.item-editor-project:hover { box-shadow: var(--premium-shadow-md); transform: translateY(-1px); }
.item-editor-project > span, .item-editor-project > strong, .item-editor-project > small { grid-column: 1; }
.item-editor-project > span { color: var(--premium-muted); font-size: 9px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; }
.item-editor-project > strong { overflow: hidden; color: var(--premium-blue-700); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.item-editor-project > small { overflow: hidden; color: var(--premium-ink-soft); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.item-editor-project > i { grid-column: 2; grid-row: 1 / 4; color: var(--premium-blue-500); font-size: 25px; font-style: normal; }
.item-editor-form { max-width: none; gap: 14px; }
.item-editor-section { gap: 18px; padding: clamp(18px, 2.5vw, 26px); border: 1px solid rgba(48, 63, 83, .1); border-radius: var(--premium-radius-lg); background: rgba(255, 255, 255, .96); box-shadow: var(--premium-shadow-sm); }
.item-editor-section-heading { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
.item-editor-step { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(180deg, #edf6ff, #e1efff); box-shadow: 0 1px 0 #fff inset; color: var(--premium-blue-700); font-size: 10px; font-weight: 820; }
.item-editor-section-heading h2 { margin: 0; color: var(--premium-ink); font-size: 17px; letter-spacing: -.02em; }
.item-editor-section-heading p { margin: 3px 0 0; color: var(--premium-muted); font-size: 11px; line-height: 1.45; }
.item-editor-page .item-type-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.item-editor-page .item-type-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.item-type-option { position: relative; min-height: 108px; display: grid; grid-template-columns: 42px minmax(0, 1fr) 24px; gap: 11px; align-items: center; padding: 15px; border: 1px solid var(--premium-line-strong); border-radius: 15px; background: #fff; box-shadow: var(--premium-shadow-xs); color: var(--premium-ink); cursor: pointer; transition: transform var(--premium-fast) var(--premium-ease), border-color var(--premium-fast) ease, background-color var(--premium-fast) ease, box-shadow var(--premium-fast) ease; }
.item-type-option:hover { border-color: rgba(8, 120, 249, .3); box-shadow: 0 9px 24px rgba(37, 72, 111, .08); transform: translateY(-1px); }
.item-type-option.is-selected, .item-type-option:has(input:checked) { border-color: var(--premium-blue-500); background: linear-gradient(145deg, rgba(240, 248, 255, .98), rgba(226, 240, 255, .92)); box-shadow: 0 10px 28px rgba(8, 120, 249, .13), 0 0 0 1px rgba(8, 120, 249, .12) inset, 0 1px 0 #fff inset; }
.item-type-option input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap; }
.item-type-option:has(input:focus-visible) { box-shadow: 0 10px 28px rgba(8, 120, 249, .13), var(--premium-focus); }
.item-type-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: var(--premium-slate-100); color: var(--premium-slate-600); transition: color var(--premium-fast) ease, background-color var(--premium-fast) ease, box-shadow var(--premium-fast) ease; }
.item-type-option.is-selected .item-type-icon, .item-type-option:has(input:checked) .item-type-icon { background: linear-gradient(180deg, #2f98ff, #0878f2); box-shadow: 0 7px 17px rgba(8, 120, 249, .2), 0 1px 0 rgba(255, 255, 255, .42) inset; color: #fff; }
.item-type-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.item-type-copy { min-width: 0; display: grid; gap: 4px; }
.item-type-copy strong { color: var(--premium-ink); font-size: 12px; letter-spacing: -.01em; }
.item-type-copy small { color: var(--premium-muted); font-size: 10px; line-height: 1.4; }
.item-type-check { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--premium-slate-300); border-radius: 50%; background: #fff; color: transparent; }
.item-type-option.is-selected .item-type-check, .item-type-option:has(input:checked) .item-type-check { border-color: var(--premium-blue-500); background: var(--premium-blue-500); color: #fff; }
.item-type-check svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.3; }
.item-type-current { width: fit-content; display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border-radius: var(--premium-radius-pill); background: var(--premium-blue-50); color: var(--premium-blue-700); font-size: 10px; }
.item-type-current span { color: var(--premium-muted); }
.item-type-current strong { font-weight: 760; }
.item-editor-page .item-form-grid { gap: 14px; }
.item-editor-page .field input, .item-editor-page .field select, .item-editor-page .field textarea { background: #fff; }
.item-editor-page .field-help { margin: 0; color: var(--premium-muted); font-size: 10px; line-height: 1.4; }
.item-editor-optional-grid { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--premium-line); }
.item-editor-page .item-recipient-field { padding: 12px; border: 1px solid rgba(8, 120, 249, .13); border-radius: 14px; background: linear-gradient(145deg, rgba(244, 249, 255, .96), rgba(255, 255, 255, .98)); }
.item-editor-page .item-recipient-field.field-invalid { border-color: rgba(180, 35, 24, .42); background: #fff8f7; }
.item-assignment-hint { grid-column: 1 / -1; margin: -2px 0 0; color: var(--premium-muted); font-size: 10px; }
.item-editor-actions { margin-top: 2px; }
.item-editor-actions .button-primary span { font-size: 17px; font-weight: 400; line-height: 1; }

@media (max-width: 820px) {
  .item-editor-hero { grid-template-columns: 1fr; gap: 14px; }
  .item-editor-page .item-type-options { grid-template-columns: 1fr; }
  .item-type-option { min-height: 88px; }
}

@media (max-width: 620px) {
  .item-editor-heading h1 { font-size: 30px; }
  .item-editor-project { padding: 12px 13px; }
  .item-editor-section { padding: 16px; }
  .item-editor-section-heading { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .item-editor-step { width: 32px; height: 32px; }
}

/* Keyboard-first date entry with an optional native calendar. */
.date-input-shell {
  position: relative;
  width: 100%;
  display: block;
}

.date-input-shell > .date-input-entry {
  width: 100%;
  padding-right: 82px !important;
  font-variant-numeric: tabular-nums;
}

.date-input-action {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: var(--premium-slate-500, #66758a);
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color var(--premium-fast, 160ms) ease, background-color var(--premium-fast, 160ms) ease, box-shadow var(--premium-fast, 160ms) ease;
}

.date-input-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.date-input-clear { right: 40px; }
.date-input-calendar {
  right: 5px;
  color: var(--premium-blue-700, #075fb8);
  background: var(--premium-blue-50, #edf6ff);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset;
}

.date-input-action:hover:not(:disabled) {
  color: var(--premium-blue-700, #075fb8);
  background: var(--premium-blue-100, #dceeff);
}

.date-input-action:focus-visible {
  outline: 0;
  box-shadow: var(--premium-focus, 0 0 0 3px rgba(8, 120, 249, .22));
}

.date-input-action:disabled { cursor: default; opacity: .45; }
.date-input-action[hidden] { display: none; }

.date-input-native-picker {
  position: absolute;
  right: 6px;
  bottom: 2px;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.field-invalid .date-input-calendar {
  color: #b42318;
  background: #fff1f0;
}

@media (max-width: 620px) {
  .date-input-action { width: 36px; height: 36px; }
  .date-input-clear { right: 44px; }
  .date-input-calendar { right: 4px; }
  .date-input-shell > .date-input-entry { padding-right: 90px !important; }
}

/* Personal profile and avatar editor. */
.profile-page .page-shell { max-width: 1240px; }
.profile-hero {
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 18px;
  padding: clamp(24px, 4vw, 42px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.94);
  border-radius: 24px;
  background: linear-gradient(118deg, rgba(253,254,255,.97), rgba(229,243,255,.9));
  box-shadow: var(--premium-shadow-md);
}
.profile-hero::after { content: ""; width: 360px; height: 240px; position: absolute; z-index: -1; top: -142px; right: -65px; border-radius: 50%; background: radial-gradient(circle, rgba(41,146,255,.24), transparent 70%); }
.profile-eyebrow, .profile-panel-kicker { display: block; color: var(--premium-blue-700); font-size: 9px; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; }
.profile-hero h1 { margin: 8px 0 0; color: var(--premium-ink); font-size: clamp(34px, 4vw, 48px); font-weight: 740; line-height: 1; letter-spacing: -.048em; }
.profile-hero p { margin: 10px 0 0; color: var(--premium-muted); font-size: 13px; line-height: 1.45; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(310px, .8fr); gap: 16px; align-items: start; }
.profile-panel { min-width: 0; padding: clamp(20px, 3vw, 28px); border: 1px solid rgba(255,255,255,.94); border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: var(--premium-shadow-sm); }
.profile-photo-panel { grid-column: 1 / -1; }
.profile-panel-heading { margin-bottom: 20px; }
.profile-panel-heading h2 { margin: 6px 0 0; color: var(--premium-ink); font-size: 20px; font-weight: 720; letter-spacing: -.025em; }
.profile-panel-heading p { margin: 6px 0 0; color: var(--premium-muted); font-size: 11px; line-height: 1.45; }
.profile-photo-workspace { display: grid; grid-template-columns: 164px minmax(0, 1fr); gap: clamp(22px, 4vw, 40px); align-items: center; }
.profile-avatar-preview { width: 164px; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 5px solid rgba(255,255,255,.96); border-radius: 50%; background: linear-gradient(145deg, #e8f4ff, #cce5ff); box-shadow: 0 18px 46px rgba(35,83,137,.17), 0 0 0 1px rgba(37,94,153,.09); color: var(--premium-blue-700); font-size: 38px; font-weight: 760; }
.profile-avatar-preview img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-avatar-preview img[hidden], .profile-avatar-preview span[hidden] { display: none; }
.profile-photo-controls { min-width: 0; }
.profile-avatar-form { display: grid; justify-items: start; gap: 11px; }
.profile-photo-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.profile-photo-actions .button { min-height: 44px; }
.profile-photo-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.profile-upload-help, .profile-upload-status { margin: 0; color: var(--premium-muted); font-size: 10.5px; line-height: 1.45; }
.profile-upload-status { color: var(--premium-ink-soft); font-weight: 620; }
.profile-avatar-error { padding: 9px 11px; border: 1px solid rgba(211,71,81,.2); border-radius: 10px; background: var(--premium-red-50); color: var(--premium-red-700); font-size: 11px; }
.profile-avatar-error ul { margin: 0; padding: 0; list-style: none; }
.profile-avatar-save { margin-top: 2px; }
.profile-avatar-save:disabled { cursor: not-allowed; filter: saturate(.55); opacity: .48; transform: none; }
.profile-avatar-remove { margin-top: 8px; }
.profile-remove-button { min-height: 36px; padding: 6px 0; border: 0; background: transparent; color: var(--premium-red-700); font-size: 11px; font-weight: 670; }
.profile-remove-button:hover { text-decoration: underline; text-underline-offset: 3px; }
.profile-personal-form { display: grid; justify-items: start; gap: 18px; }
.profile-name-fields { width: 100%; display: grid; gap: 12px; }
.profile-page .field input { min-height: 46px; background: #fff; }
.profile-page .field-invalid input { border-color: rgba(211,71,81,.54); box-shadow: 0 0 0 3px rgba(211,71,81,.08); }
.profile-account-list { display: grid; gap: 0; margin: 0; }
.profile-account-list > div { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr); gap: 16px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--premium-line); }
.profile-account-list > div:last-child { border-bottom: 0; }
.profile-account-list dt { color: var(--premium-muted); font-size: 10.5px; }
.profile-account-list dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--premium-ink); font-size: 12px; font-weight: 650; }
.profile-role-list { display: flex; flex-wrap: wrap; gap: 5px; }

@media (max-width: 840px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-photo-panel { grid-column: auto; }
}

@media (max-width: 620px) {
  .profile-page .page-shell { padding-inline: 12px; }
  .profile-hero { min-height: 124px; padding: 22px 20px; border-radius: 20px; }
  .profile-hero h1 { font-size: 34px; }
  .profile-panel { padding: 19px 16px; border-radius: 18px; }
  .profile-photo-workspace { grid-template-columns: 1fr; justify-items: center; gap: 20px; }
  .profile-avatar-preview { width: 138px; }
  .profile-photo-controls, .profile-avatar-form { width: 100%; }
  .profile-photo-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .profile-photo-actions .button, .profile-avatar-save { width: 100%; justify-content: center; }
  .profile-avatar-remove { width: 100%; text-align: center; }
}

/* Required employee contacts: registration, onboarding and profile. */
.registration-card { width: min(880px, calc(100% - 28px)); }
.registration-form-section { min-width: 0; margin: 0; padding: 20px 0; border: 0; border-top: 1px solid var(--premium-line); }
.registration-form-section:first-of-type { padding-top: 0; border-top: 0; }
.registration-form-section legend { margin-bottom: 12px; padding: 0; color: var(--premium-ink); font-size: 13px; font-weight: 720; letter-spacing: -.01em; }
.registration-section-help { margin: -5px 0 14px; color: var(--premium-muted); font-size: 11px; line-height: 1.5; }
.registration-name-grid,
.registration-contact-grid,
.registration-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.registration-name-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.registration-field-wide { grid-column: auto; }
.registration-form-section .field label small,
.profile-contact-form .field label small,
.contact-onboarding-form .field label small { margin-left: 5px; color: var(--premium-muted-soft); font-size: 9px; font-weight: 560; }
.registration-form-section .field input,
.registration-form-section .field select { min-height: 46px; background: #fff; }
.registration-form-section.has-error { margin-inline: -12px; padding-inline: 12px; border-radius: 14px; background: rgba(211,71,81,.035); }
.registration-submit { width: 100%; justify-content: center; }

.contact-onboarding-page .page-shell { max-width: 100%; min-height: calc(100dvh - var(--topbar-height)); display: grid; place-items: center; padding: clamp(18px, 4vw, 52px); }
.contact-onboarding { width: min(900px, 100%); display: grid; grid-template-columns: minmax(260px, .78fr) minmax(380px, 1.22fr); overflow: hidden; border: 1px solid rgba(255,255,255,.94); border-radius: 28px; background: rgba(255,255,255,.95); box-shadow: 0 28px 80px rgba(35,58,88,.14), 0 1px 0 #fff inset; }
.contact-onboarding-intro { min-height: 510px; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(30px, 5vw, 52px); position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(145deg, #e9f5ff, #f7fbff 62%, #eef2ff); }
.contact-onboarding-intro::before { content: ""; width: 320px; height: 320px; position: absolute; z-index: -1; top: -120px; right: -130px; border-radius: 50%; background: radial-gradient(circle, rgba(29,143,255,.26), transparent 68%); }
.contact-onboarding-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: auto; border: 1px solid rgba(255,255,255,.9); border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(233,245,255,.8)); box-shadow: 0 14px 35px rgba(33,96,161,.14), 0 1px 0 #fff inset; color: var(--premium-blue-600); }
.contact-onboarding-icon svg { width: 29px; height: 29px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.contact-onboarding-eyebrow { color: var(--premium-blue-700); font-size: 9px; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; }
.contact-onboarding-intro h1 { max-width: 360px; margin: 11px 0 0; color: var(--premium-ink); font-size: clamp(35px, 4vw, 48px); font-weight: 740; line-height: .98; letter-spacing: -.05em; }
.contact-onboarding-intro p { max-width: 390px; margin: 16px 0 0; color: var(--premium-muted); font-size: 13px; line-height: 1.55; }
.contact-onboarding-form { display: flex; flex-direction: column; justify-content: center; padding: clamp(30px, 5vw, 56px); }
.contact-onboarding-form fieldset,
.profile-contact-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.contact-onboarding-form legend { padding: 0; color: var(--premium-ink); font-size: 16px; font-weight: 720; letter-spacing: -.02em; }
.contact-onboarding-form fieldset > p { margin: 7px 0 20px; color: var(--premium-muted); font-size: 11px; line-height: 1.45; }
.contact-onboarding-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-onboarding-grid .field input,
.profile-contact-fields .field input { min-height: 47px; background: #fff; }
.contact-onboarding-form > .button { align-self: flex-start; margin-top: 22px; }
.contact-privacy-note { margin: 13px 0 0; color: var(--premium-muted-soft); font-size: 9.5px; line-height: 1.45; }
.contact-form-error { margin-bottom: 16px; padding: 11px 13px; border: 1px solid rgba(211,71,81,.2); border-radius: 12px; background: var(--premium-red-50); color: var(--premium-red-700); font-size: 11px; line-height: 1.45; }
.contact-form-error ul { margin: 0; padding: 0; list-style: none; }

.profile-contact-panel { grid-column: 1 / -1; }
.profile-contact-form { display: grid; justify-items: start; gap: 18px; }
.profile-contact-form fieldset { width: 100%; }
.profile-contact-help { margin: 0 0 12px; color: var(--premium-muted); font-size: 10.5px; }
.profile-contact-fields { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

@media (max-width: 760px) {
  .registration-name-grid { grid-template-columns: 1fr; }
  .contact-onboarding { grid-template-columns: 1fr; }
  .contact-onboarding-intro { min-height: 260px; padding: 28px 26px; }
  .contact-onboarding-icon { margin-bottom: 54px; }
  .profile-contact-fields { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
  .registration-contact-grid,
  .registration-access-grid,
  .contact-onboarding-grid,
  .profile-contact-fields { grid-template-columns: 1fr; }
  .contact-onboarding-page .page-shell { padding: 10px; }
  .contact-onboarding { border-radius: 21px; }
  .contact-onboarding-intro { min-height: 230px; padding: 24px 21px; }
  .contact-onboarding-intro h1 { font-size: 34px; }
  .contact-onboarding-icon { width: 50px; height: 50px; margin-bottom: 42px; border-radius: 16px; }
  .contact-onboarding-form { padding: 26px 21px; }
  .contact-onboarding-form > .button { width: 100%; justify-content: center; }
}

/* Counterparty directory -------------------------------------------------
 * Search is the primary task. Exact INN queries progressively enhance into
 * an automatic registry lookup while manual entry stays available in a compact dialog.
 */
.authenticated-app .counterparty-directory {
  display: grid;
  gap: 14px;
}

.authenticated-app .counterparty-directory [hidden] {
  display: none !important;
}

.authenticated-app .counterparty-directory-header {
  padding-block: 14px;
}

.authenticated-app .counterparty-primary-action {
  min-height: 44px;
  gap: 8px;
  padding-inline: 17px;
  box-shadow: 0 10px 26px rgba(8, 120, 249, .24), 0 1px 0 rgba(255, 255, 255, .26) inset;
}

.authenticated-app .counterparty-primary-action svg,
.authenticated-app .counterparty-search-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.authenticated-app .counterparty-search-workspace,
.authenticated-app .counterparty-list-section {
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--premium-shadow-sm);
}

.authenticated-app .counterparty-search-workspace {
  padding: clamp(17px, 2.5vw, 24px);
  background:
    radial-gradient(circle at 96% 4%, rgba(67, 160, 255, .1), transparent 22rem),
    rgba(255, 255, 255, .95);
}

.authenticated-app .counterparty-search-copy {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.authenticated-app .counterparty-search-symbol,
.authenticated-app .counterparty-dialog-symbol {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 14px;
  background: linear-gradient(145deg, #ecf6ff, #dceeff);
  box-shadow: 0 8px 22px rgba(32, 102, 177, .12), 0 1px 0 #fff inset;
  color: var(--premium-blue-600);
}

.authenticated-app .counterparty-search-symbol svg,
.authenticated-app .counterparty-dialog-symbol svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.authenticated-app .counterparty-search-copy h2,
.authenticated-app .counterparty-list-heading h2 {
  margin: 0;
  color: var(--premium-ink);
  font-size: 17px;
  font-weight: 740;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.authenticated-app .counterparty-search-copy p,
.authenticated-app .counterparty-list-heading p {
  margin: 4px 0 0;
  color: var(--premium-muted);
  font-size: 11px;
  line-height: 1.45;
}

.authenticated-app .counterparty-smart-search {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding: 6px;
  border: 1px solid rgba(57, 80, 108, .14);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 9px 26px rgba(36, 58, 84, .07), 0 1px 0 rgba(255, 255, 255, .9) inset;
  transition: border-color var(--premium-fast) ease, box-shadow var(--premium-fast) ease;
}

.authenticated-app .counterparty-smart-search:focus-within {
  border-color: rgba(8, 120, 249, .58);
  box-shadow: 0 12px 30px rgba(36, 84, 137, .1), 0 0 0 3px rgba(8, 120, 249, .12);
}

.authenticated-app .counterparty-smart-search.has-validation-error {
  border-color: rgba(211, 71, 81, .58);
  background: linear-gradient(180deg, #fff, rgba(255, 247, 248, .92));
  box-shadow: 0 10px 28px rgba(158, 47, 57, .08), 0 0 0 3px rgba(211, 71, 81, .1);
}

.authenticated-app .counterparty-search-validation {
  width: fit-content;
  margin: 8px 7px 0;
  padding: 6px 9px;
  border-radius: 9px;
  background: var(--premium-red-50);
  color: var(--premium-red-700);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.4;
}

.authenticated-app .counterparty-search-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #617389;
}

.authenticated-app .counterparty-search-icon svg,
.authenticated-app .counterparty-search-clear svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.authenticated-app .counterparty-smart-search input {
  min-width: 0;
  min-height: 46px;
  padding: 8px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--premium-ink);
  font-size: 15px;
  font-weight: 560;
}

.authenticated-app .counterparty-smart-search input:focus {
  outline: 0;
  box-shadow: none;
}

.authenticated-app .counterparty-smart-search input::placeholder {
  color: #8795a7;
  font-weight: 480;
}

.authenticated-app .counterparty-smart-search input::-webkit-search-cancel-button {
  display: none;
}

.authenticated-app .counterparty-search-clear {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #718196;
  text-decoration: none;
  transition: color var(--premium-fast) ease, background-color var(--premium-fast) ease;
}

.authenticated-app .counterparty-search-clear:hover {
  background: var(--premium-slate-100);
  color: var(--premium-ink);
}

.authenticated-app .counterparty-search-button {
  min-width: 112px;
  min-height: 46px;
  gap: 7px;
  border-radius: 14px;
}

.authenticated-app .counterparty-search-button.is-loading svg {
  opacity: .45;
}

.authenticated-app .counterparty-lookup {
  margin-top: 13px;
}

.authenticated-app .counterparty-lookup-loading,
.authenticated-app .counterparty-lookup-error {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(8, 120, 249, .14);
  border-radius: 15px;
  background: rgba(240, 247, 255, .72);
}

.authenticated-app .counterparty-lookup-loading > span:last-child,
.authenticated-app .counterparty-lookup-error > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.authenticated-app .counterparty-lookup-loading strong,
.authenticated-app .counterparty-lookup-error strong {
  color: var(--premium-ink);
  font-size: 12px;
}

.authenticated-app .counterparty-lookup-loading small,
.authenticated-app .counterparty-lookup-error p {
  margin: 0;
  color: var(--premium-muted);
  font-size: 10px;
  line-height: 1.4;
}

.authenticated-app .counterparty-spinner {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border: 3px solid rgba(8, 120, 249, .16);
  border-top-color: var(--premium-blue-500);
  border-radius: 50%;
  animation: counterparty-spin .75s linear infinite;
}

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

.authenticated-app .counterparty-lookup-error {
  border-color: rgba(211, 71, 81, .2);
  background: var(--premium-red-50);
}

.authenticated-app .counterparty-lookup-error > span {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255, 255, 255, .82);
  color: var(--premium-red-700);
}

.authenticated-app .counterparty-lookup-error svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.authenticated-app .counterparty-lookup-error .button {
  margin-left: auto;
}

.authenticated-app .counterparty-found-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 17px;
  border: 1px solid rgba(8, 120, 249, .22);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(246, 251, 255, .98), rgba(236, 246, 255, .9));
  box-shadow: 0 10px 30px rgba(37, 83, 133, .08), 0 1px 0 #fff inset;
  animation: counterparty-result-in 220ms var(--premium-ease) both;
}

@keyframes counterparty-result-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.authenticated-app .counterparty-found-card.is-existing {
  border-color: rgba(22, 148, 97, .2);
  background: linear-gradient(145deg, rgba(246, 253, 249, .98), rgba(236, 250, 243, .88));
}

.authenticated-app .counterparty-found-card.is-created {
  border-color: rgba(22, 148, 97, .28);
  background: var(--premium-green-50);
}

.authenticated-app .counterparty-found-card.is-liquidated {
  border-color: rgba(211, 71, 81, .38);
  background: linear-gradient(145deg, rgba(255, 250, 250, .98), rgba(255, 238, 240, .9));
  box-shadow: 0 10px 30px rgba(145, 40, 50, .09), 0 1px 0 #fff inset;
}

.authenticated-app .counterparty-found-card.has-error {
  border-color: rgba(211, 71, 81, .25);
}

.authenticated-app .counterparty-found-main {
  min-width: 0;
}

.authenticated-app .counterparty-found-heading,
.authenticated-app .counterparty-requisites {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.authenticated-app .counterparty-source-badge,
.authenticated-app .counterparty-state {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border-radius: var(--premium-radius-pill);
  background: rgba(8, 120, 249, .1);
  color: var(--premium-blue-700);
  font-size: 9px;
  font-weight: 760;
  line-height: 1;
}

.authenticated-app .counterparty-state.is-danger,
.authenticated-app .counterparty-state.is-warning {
  gap: 5px;
  box-shadow: 0 0 0 1px rgba(211, 71, 81, .13) inset;
}

.authenticated-app .counterparty-state.is-danger {
  background: var(--premium-red-50);
  color: var(--premium-red-700);
}

.authenticated-app .counterparty-state.is-warning {
  background: #fff5df;
  color: #8a5310;
  box-shadow: 0 0 0 1px rgba(186, 112, 20, .14) inset;
}

.authenticated-app .counterparty-state.is-danger::before,
.authenticated-app .counterparty-state.is-warning::before {
  width: 6px;
  height: 6px;
  content: "";
  border-radius: 50%;
  background: currentColor;
}

.authenticated-app .counterparty-state {
  background: rgba(255, 255, 255, .72);
  color: #557087;
}

.authenticated-app .counterparty-found-card.is-existing .counterparty-source-badge,
.authenticated-app .counterparty-found-card.is-created .counterparty-source-badge {
  background: rgba(22, 148, 97, .12);
  color: var(--premium-green-700);
}

.authenticated-app .counterparty-found-card h3 {
  margin: 9px 0 7px;
  color: var(--premium-ink);
  font-size: clamp(17px, 2vw, 20px);
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.2;
}

.authenticated-app .counterparty-requisites span {
  color: var(--premium-muted);
  font-size: 10px;
}

.authenticated-app .counterparty-requisites strong {
  color: #344a62;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
}

.authenticated-app .counterparty-found-address,
.authenticated-app .counterparty-found-message {
  max-width: 860px;
  margin: 7px 0 0;
  color: var(--premium-muted);
  font-size: 10.5px;
  line-height: 1.45;
}

.authenticated-app .counterparty-found-message {
  color: #375b7b;
}

.authenticated-app .counterparty-found-action {
  min-width: 190px;
  display: grid;
  justify-items: stretch;
  gap: 6px;
}

.authenticated-app .counterparty-found-action .button {
  min-height: 44px;
}

.authenticated-app .counterparty-found-action small {
  max-width: 220px;
  color: var(--premium-muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.authenticated-app .counterparty-list-section {
  overflow: hidden;
}

.authenticated-app .counterparty-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 19px 13px;
  border-bottom: 1px solid var(--premium-line);
}

.authenticated-app .counterparty-list-count {
  min-width: 32px;
  height: 28px;
  display: grid;
  place-items: center;
  padding-inline: 8px;
  border-radius: var(--premium-radius-pill);
  background: var(--premium-slate-100);
  color: #53667c;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 760;
}

.authenticated-app .counterparty-card-list {
  gap: 0;
}

.authenticated-app .counterparty-row {
  grid-template-columns: 42px minmax(0, 1fr) auto auto;
  gap: 12px;
  min-height: 82px;
  padding: 12px 15px;
  border: 0;
  border-bottom: 1px solid var(--premium-line);
  border-radius: 0;
  box-shadow: none;
  transition: background-color var(--premium-fast) ease, box-shadow var(--premium-fast) ease;
}

.authenticated-app .counterparty-row:last-child {
  border-bottom: 0;
}

.authenticated-app .counterparty-row:hover {
  background: rgba(246, 250, 254, .88);
}

.authenticated-app .counterparty-row.is-highlighted {
  background: var(--premium-blue-50);
  box-shadow: 4px 0 0 var(--premium-blue-500) inset;
}

.authenticated-app .counterparty-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #eff7ff, #e2effc);
  box-shadow: 0 1px 0 #fff inset;
  color: var(--premium-blue-700) !important;
  font-size: 13px !important;
  font-weight: 780;
}

.authenticated-app .counterparty-row-main {
  gap: 2px;
}

.authenticated-app .counterparty-row-main strong {
  overflow: hidden;
  color: var(--premium-ink);
  font-size: 12.5px;
  font-weight: 710;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.authenticated-app .counterparty-row-main span,
.authenticated-app .counterparty-row-main small {
  overflow: hidden;
  color: var(--premium-muted);
  font-size: 11px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.authenticated-app .counterparty-row > .badge {
  justify-self: end;
}

.authenticated-app .counterparty-edit-action {
  min-height: 38px;
  padding-inline: 13px;
}

.authenticated-app .counterparty-edit-action svg {
  display: none;
}

.authenticated-app .counterparty-empty-state {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.authenticated-app .counterparty-empty-state > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--premium-slate-100);
  color: #6c7f94;
}

.authenticated-app .counterparty-empty-state svg,
.authenticated-app .counterparty-manual-hint svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.authenticated-app .counterparty-empty-state p {
  margin: 3px 0 0;
  font-size: 11px;
}

/* Readability floor for dense business data. */
.authenticated-app .table-frame td small,
.authenticated-app .workspace-filter summary small,
.authenticated-app .directory-create-disclosure > summary small {
  font-size: 11px;
}

.authenticated-app .counterparty-create-dialog {
  width: min(760px, calc(100vw - 28px));
}

.authenticated-app .counterparty-create-card {
  max-height: min(760px, calc(100dvh - 32px));
  overflow: hidden;
}

.authenticated-app .counterparty-create-heading {
  grid-template-columns: 46px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
  padding: 17px 19px;
}

.authenticated-app .counterparty-create-heading > div {
  min-width: 0;
}

.authenticated-app .counterparty-create-heading h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: -.035em;
}

.authenticated-app .counterparty-create-heading p {
  margin: 4px 0 0;
  color: var(--premium-muted);
  font-size: 10px;
  line-height: 1.4;
}

.authenticated-app .counterparty-create-body {
  display: grid;
  gap: 14px;
  padding: 16px 19px 18px;
  overflow-y: auto;
  background: rgba(246, 249, 252, .74);
}

.authenticated-app .counterparty-manual-hint {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid rgba(8, 120, 249, .13);
  border-radius: 13px;
  background: rgba(237, 247, 255, .82);
  color: var(--premium-blue-700);
}

.authenticated-app .counterparty-manual-hint p {
  margin: 0;
  color: #4c6780;
  font-size: 10px;
  line-height: 1.45;
}

.authenticated-app .counterparty-manual-hint strong {
  color: #183f67;
}

.authenticated-app .counterparty-create-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.authenticated-app .counterparty-create-grid .field-wide {
  grid-column: 1 / -1;
}

.authenticated-app .counterparty-create-grid input,
.authenticated-app .counterparty-create-grid textarea {
  min-height: 45px;
  background: #fff;
}

.authenticated-app .counterparty-create-grid textarea {
  min-height: 70px;
  resize: vertical;
}

.authenticated-app .counterparty-extra-fields {
  overflow: hidden;
  border: 1px solid var(--premium-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .78);
}

.authenticated-app .counterparty-extra-fields > summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  list-style: none;
}

.authenticated-app .counterparty-extra-fields > summary::-webkit-details-marker {
  display: none;
}

.authenticated-app .counterparty-extra-fields > summary > span {
  display: grid;
  gap: 2px;
}

.authenticated-app .counterparty-extra-fields > summary strong {
  color: var(--premium-ink);
  font-size: 11px;
}

.authenticated-app .counterparty-extra-fields > summary small {
  color: var(--premium-muted);
  font-size: 9px;
}

.authenticated-app .counterparty-extra-fields > summary svg {
  width: 18px;
  height: 18px;
  margin-left: auto;
  fill: none;
  stroke: #64778d;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform var(--premium-fast) ease;
}

.authenticated-app .counterparty-extra-fields[open] > summary svg {
  transform: rotate(180deg);
}

.authenticated-app .counterparty-extra-fields > .counterparty-create-grid {
  grid-template-columns: 1fr 1fr;
  padding: 2px 12px 12px;
}

.authenticated-app .counterparty-create-actions {
  padding: 13px 19px;
}

@media (max-width: 820px) {
  .authenticated-app .counterparty-directory-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .authenticated-app .counterparty-directory-header .page-heading-actions {
    justify-content: flex-end;
  }

  .authenticated-app .counterparty-found-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .authenticated-app .counterparty-found-action {
    width: min(100%, 280px);
  }

  .authenticated-app .counterparty-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  .authenticated-app .counterparty-row > .badge {
    display: none;
  }
}

@media (max-width: 620px) {
  .authenticated-app .counterparty-directory-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .authenticated-app .counterparty-directory-header .page-heading-actions {
    justify-content: stretch;
  }

  .authenticated-app .counterparty-primary-action {
    width: 100%;
    justify-content: center;
  }

  .authenticated-app .counterparty-search-workspace {
    padding: 14px;
    border-radius: 18px;
  }

  .authenticated-app .counterparty-search-copy {
    align-items: flex-start;
  }

  .authenticated-app .counterparty-search-copy p {
    font-size: 11px;
  }

  .authenticated-app .counterparty-smart-search {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .authenticated-app .counterparty-search-button {
    width: 46px;
    min-width: 46px;
    padding: 0;
  }

  .authenticated-app .counterparty-search-button span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .authenticated-app .counterparty-search-button.is-loading span {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    font-size: 9px;
  }

  .authenticated-app .counterparty-search-button.is-loading svg {
    display: none;
  }

  .authenticated-app .counterparty-lookup-error {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .authenticated-app .counterparty-lookup-error .button {
    width: 100%;
    margin-left: 0;
  }

  .authenticated-app .counterparty-row {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    padding-inline: 12px;
  }

  .authenticated-app .counterparty-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .authenticated-app .counterparty-edit-action {
    width: 44px;
    padding: 0;
    color: var(--premium-blue-700);
  }

  .authenticated-app .counterparty-edit-action span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .authenticated-app .counterparty-edit-action svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
  }

  .authenticated-app .counterparty-create-card {
    max-height: calc(100dvh - 18px);
  }

  .authenticated-app .counterparty-create-heading {
    grid-template-columns: 42px minmax(0, 1fr) 44px;
    padding: 14px;
  }

  .authenticated-app .counterparty-create-heading h2 {
    font-size: 18px;
  }

  .authenticated-app .counterparty-create-heading p {
    display: none;
  }

  .authenticated-app .counterparty-create-body {
    padding: 14px;
  }

  .authenticated-app .counterparty-create-grid,
  .authenticated-app .counterparty-extra-fields > .counterparty-create-grid {
    grid-template-columns: 1fr;
  }

  .authenticated-app .counterparty-create-grid .field-wide {
    grid-column: auto;
  }

  .authenticated-app .counterparty-create-actions {
    padding: 12px 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .authenticated-app .counterparty-spinner {
    animation-duration: 1.5s;
  }

  .authenticated-app .counterparty-found-card {
    animation: none;
  }
}