/* ──────────────────────────────────────────────────────────────────
   Pyrus Forms Prototype — styling matched to contract-system
   (shadcn / neutral OKLCH palette / Geist font / subtle shadows)
   ────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* Neutral palette — derived from contract-system globals.css (oklch → rgb approx) */
  --background:        #ffffff;
  --foreground:        #171717;
  --card:              #ffffff;
  --card-foreground:   #0a0a0a;
  --popover:           #ffffff;
  --popover-foreground:#0a0a0a;
  --primary:           #18181b;
  --primary-foreground:#fafafa;
  --secondary:         #f5f5f5;
  --secondary-foreground:#18181b;
  --muted:             #f5f5f5;
  --muted-foreground:  #737373;
  --accent:            #f5f5f5;
  --accent-foreground: #18181b;
  --destructive:       #dc2626;
  --warning:           #ca8a04;
  --success:           #16a34a;
  --border:            #e5e5e5;
  --input:             #e5e5e5;
  --ring:              #a1a1aa;
  --focus:             hsla(212, 100%, 48%, 1);
  --focus-soft:        hsla(212, 100%, 48%, 0.12);

  --sidebar:                    #fafafa;
  --sidebar-foreground:         #0a0a0a;
  --sidebar-border:             #e5e5e5;

  --radius:        0.5rem;       /* 8px */
  --radius-sm:     calc(var(--radius) * 0.6);
  --radius-md:     calc(var(--radius) * 0.8);
  --radius-lg:     var(--radius);
  --radius-xl:     calc(var(--radius) * 1.4);

  --shadow-card:        rgba(0,0,0,0.08) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 2px, #fafafa 0px 0px 0px 1px;
  --shadow-card-hover:  rgba(0,0,0,0.10) 0px 0px 0px 1px, rgba(0,0,0,0.06) 0px 4px 8px, #fafafa 0px 0px 0px 1px;
  --shadow-pop:         rgba(0,0,0,0.12) 0px 4px 16px, rgba(0,0,0,0.04) 0px 1px 2px;
  --shadow-border:      0px 0px 0px 1px rgba(0,0,0,0.08);

  --transition: 150ms cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing: antialiased;
  color: var(--foreground);
  background: var(--background);
  font-size: 14px;
  line-height: 1.5;
}
a { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #000; }
button { font-family: inherit; cursor: pointer; }

/* ─────────────── Top bar ─────────────── */
header.top {
  background: var(--background);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  height: 56px;
  display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 20;
}
header.top .logo {
  width: 28px; height: 28px;
  background: var(--primary);
  color: var(--primary-foreground);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  letter-spacing: -0.02em;
}
header.top h1 {
  font-size: 14px; margin: 0; font-weight: 600;
  letter-spacing: -0.01em;
}
header.top .crumb { color: var(--muted-foreground); font-size: 13px; }
header.top .crumb a { color: var(--muted-foreground); text-decoration: none; }
header.top .crumb a:hover { color: var(--foreground); }
header.top .spacer { flex: 1; }

header.top .top-search {
  width: 280px;
  padding: 6px 12px 6px 32px;
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: var(--background) url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat 11px center;
  font-size: 13px;
  font-family: inherit;
  transition: var(--transition);
}
.top-search:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px var(--focus-soft);
}

/* ─────────────── Index (form list) ─────────────── */
main.index {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}
.index h2 {
  font-size: 24px; font-weight: 600; margin: 0 0 4px;
  letter-spacing: -0.025em;
}
.index .sub { color: var(--muted-foreground); margin-bottom: 24px; font-size: 14px; }

.group { margin: 28px 0; }
.group-title {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted-foreground);
  font-weight: 600;
  margin-bottom: 10px;
}
.group-title::after {
  content: ''; flex: 1; height: 1px;
  background: var(--border);
  margin-left: 6px;
}

.grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 8px;
  transition: var(--transition);
  text-decoration: none; color: inherit;
  cursor: pointer;
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
.card .name {
  font-weight: 600; font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--foreground);
}
.card .pills { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pill {
  background: var(--secondary);
  color: var(--secondary-foreground);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
}
.pill.muted { background: transparent; border-color: var(--border); color: var(--muted-foreground); }
.pill.ok { background: #f0fdf4; color: var(--success); border-color: #bbf7d0; }
.pill.warn { background: #fefce8; color: var(--warning); border-color: #fef08a; }

/* ─────────────── Form view layout ─────────────── */
main.form-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 20px;
  max-width: 1280px;
  margin: 24px auto;
  padding: 0 24px 60px;
}
@media (max-width: 1024px) {
  main.form-page { grid-template-columns: 1fr; }
}

.form-shell {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 24px 28px 28px;
}
.form-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.form-title {
  font-size: 22px; font-weight: 600; margin: 0 0 4px;
  letter-spacing: -0.025em;
}
.form-sub {
  color: var(--muted-foreground); font-size: 13px;
  display: flex; gap: 10px; align-items: center;
}
.form-sub .dot { width: 3px; height: 3px; border-radius: 50%; background: #d4d4d4; }

/* Stepper */
.stepper {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--secondary);
  border-radius: var(--radius);
  overflow-x: auto;
  margin-bottom: 16px;
}
.stepper .step {
  padding: 6px 12px;
  font-size: 13px;
  color: var(--muted-foreground);
  background: transparent;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition);
  font-weight: 500;
  display: flex; align-items: center; gap: 6px;
}
.stepper .step:hover { color: var(--foreground); }
.stepper .step.active {
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-border);
  font-weight: 500;
}
.stepper .step .num {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  background: var(--muted);
  color: var(--muted-foreground);
  border-radius: 4px;
  font-size: 10px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stepper .step.active .num { background: var(--primary); color: var(--primary-foreground); }

/* Fields */
.field { margin-bottom: 16px; }
.field-label {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.field-label .req { color: var(--destructive); text-transform: none; }
.field-label .badge {
  background: var(--muted); color: var(--muted-foreground);
  padding: 1px 6px; border-radius: 3px;
  font-size: 9px; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
}
.field-label .badge.lock { background: #fef3c7; color: #92400e; }
.tooltip {
  color: var(--muted-foreground); font-size: 12px;
  margin-bottom: 6px; white-space: pre-wrap; line-height: 1.4;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}

.input, .textarea, .select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background: var(--background);
  font-size: 14px;
  font-family: inherit;
  color: var(--foreground);
  transition: var(--transition);
}
.input::placeholder, .textarea::placeholder { color: #a3a3a3; }
.input:hover, .textarea:hover, .select:hover { border-color: #d4d4d4; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--ring);
  box-shadow: 0 0 0 3px var(--focus-soft);
}
.textarea { min-height: 72px; resize: vertical; line-height: 1.5; }

.input-wrap { position: relative; }
.input-wrap .suffix {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--muted-foreground); font-size: 13px; pointer-events: none;
}
.input.money { padding-right: 30px; }

/* Note / Title block */
.note {
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: #78350f;
}
.title-block {
  font-size: 13px; font-weight: 600;
  padding: 0;
  margin: 18px 0 10px;
  color: var(--foreground);
  text-transform: uppercase;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

/* Placeholders (catalog/file/form_link) */
.placeholder {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--muted-foreground);
  font-size: 13px;
  cursor: pointer;
  transition: var(--transition);
}
.placeholder:hover { border-color: #d4d4d4; color: var(--foreground); }
.placeholder svg { flex-shrink: 0; color: var(--muted-foreground); }

/* Person picker */
.person-picker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 36px;
  padding: 4px 6px;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background: var(--background);
  cursor: text;
  position: relative;
  transition: var(--transition);
}
.person-picker:hover { border-color: #d4d4d4; }
.person-picker.focused { border-color: var(--ring); box-shadow: 0 0 0 3px var(--focus-soft); }

.person-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--secondary);
  color: var(--foreground);
  padding: 3px 4px 3px 3px;
  border-radius: 4px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 500;
}
.person-chip .av {
  width: 18px; height: 18px;
  background: var(--primary); color: var(--primary-foreground);
  border-radius: 3px;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 600;
  text-transform: uppercase;
}
.person-chip .x {
  cursor: pointer; font-size: 14px; line-height: 1;
  color: var(--muted-foreground); padding: 0 4px 0 2px;
}
.person-chip .x:hover { color: var(--destructive); }

.person-picker input.picker-input {
  flex: 1; min-width: 60px;
  border: none; outline: none;
  padding: 4px 4px;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
}
.picker-dropdown {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 260px;
  overflow-y: auto;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  z-index: 30;
  display: none;
  padding: 4px;
}
.picker-dropdown.open { display: block; }
.picker-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  cursor: pointer;
  transition: background .1s;
  border-radius: 4px;
}
.picker-item:hover, .picker-item.hl { background: var(--accent); }
.picker-item .av {
  width: 26px; height: 26px;
  background: var(--primary); color: var(--primary-foreground);
  border-radius: 4px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}
.picker-item .av.role { background: #4b5563; }
.picker-item .name { font-size: 13px; font-weight: 500; color: var(--foreground); }
.picker-item .sub { font-size: 11px; color: var(--muted-foreground); }

/* Multi-choice */
.multi-choice {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 36px;
  padding: 4px 6px;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background: var(--background);
  cursor: text;
  position: relative;
  transition: var(--transition);
}
.multi-choice:hover { border-color: #d4d4d4; }
.multi-choice.focused { border-color: var(--ring); box-shadow: 0 0 0 3px var(--focus-soft); }
.multi-choice input.picker-input {
  flex: 1; min-width: 80px;
  border: none; outline: none;
  padding: 4px 4px;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
}
.multi-choice .picker-dropdown {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 260px; overflow-y: auto;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  z-index: 30;
  display: none;
  padding: 4px;
}
.multi-choice .picker-dropdown.open { display: block; }
.multi-choice .picker-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
}
.multi-choice .picker-item:hover, .multi-choice .picker-item.hl { background: var(--accent); }
.multi-choice .picker-item .check {
  width: 14px; height: 14px;
  border: 1.5px solid var(--input);
  border-radius: 3px;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: var(--transition);
  background: var(--background);
}
.multi-choice .picker-item.selected .check { background: var(--primary); border-color: var(--primary); }
.multi-choice .picker-item.selected .check::after {
  content: ''; display: block;
  width: 4px; height: 7px;
  border: solid var(--primary-foreground);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.multi-choice .person-chip {
  background: var(--secondary); border: 1px solid var(--border);
  color: var(--foreground); padding: 3px 4px 3px 8px;
  border-radius: 4px; font-size: 12px; font-weight: 500;
}

/* Tables */
table.tbl {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin-top: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--background);
}
table.tbl th, table.tbl td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 8px 10px;
  vertical-align: top;
  font-size: 13px;
}
table.tbl th:last-child, table.tbl td:last-child { border-right: none; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl th {
  background: var(--secondary);
  font-weight: 600; color: var(--muted-foreground);
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  text-align: left;
}
table.tbl td .input, table.tbl td .select { padding: 6px 8px; font-size: 13px; }
.tbl-add {
  margin-top: 6px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  color: var(--muted-foreground);
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  transition: var(--transition);
}
.tbl-add:hover { color: var(--foreground); border-color: var(--ring); background: var(--secondary); }

.tbl-empty {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 28px;
  text-align: center;
  color: var(--muted-foreground);
  font-size: 13px;
  background: var(--secondary);
}
.tbl-empty button {
  margin-top: 10px;
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  padding: 7px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
}
.tbl-empty button:hover { filter: brightness(.9); }

.row-del {
  background: none; border: none; cursor: pointer;
  color: #a3a3a3;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 16px; line-height: 1;
}
.row-del:hover { color: var(--destructive); background: #fef2f2; }

/* Visibility condition marker */
.hidden-cond {
  border-left: 2px dashed var(--border);
  padding-left: 12px;
  margin-left: -14px;
  position: relative;
}
.hidden-cond::before {
  display: inline-block;
  content: "видно при условии";
  font-size: 9px;
  color: var(--muted-foreground);
  background: var(--muted);
  padding: 1px 6px;
  border-radius: 3px;
  margin-bottom: 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Print forms */
.print-forms {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.print-forms h3 {
  font-size: 11px; color: var(--muted-foreground); margin: 0 0 10px;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.print-forms ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 4px;
}
.print-forms li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: var(--secondary);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.print-forms li::before { content: '📄'; font-size: 14px; }

/* Buttons */
.btn {
  background: var(--primary);
  color: var(--primary-foreground);
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: var(--transition);
  font-family: inherit;
}
.btn:hover { filter: brightness(.92); }
.btn.secondary {
  background: var(--background); color: var(--foreground);
  border: 1px solid var(--border);
}
.btn.secondary:hover { background: var(--secondary); }
.btn.ghost {
  background: transparent; color: var(--muted-foreground);
}
.btn.ghost:hover { background: var(--secondary); color: var(--foreground); }

/* Empty state */
.empty {
  padding: 60px 20px; text-align: center; color: var(--muted-foreground);
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

/* ─────────────── Sidebar ─────────────── */
.side {
  display: flex; flex-direction: column; gap: 12px;
  position: sticky; top: 80px;
  align-self: start;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}
.side-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
}
.side-card h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted-foreground); font-weight: 600; margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}

/* Route timeline */
.timeline { display: flex; flex-direction: column; gap: 0; position: relative; }
.tl-step {
  display: flex; gap: 12px;
  padding-bottom: 16px;
  position: relative;
}
.tl-step:last-child { padding-bottom: 0; }
.tl-step::before {
  content: ''; position: absolute;
  left: 11px; top: 24px; bottom: 0;
  width: 1px; background: var(--border);
}
.tl-step:last-child::before { display: none; }
.tl-dot {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--secondary);
  color: var(--muted-foreground);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
  border: 2px solid var(--background);
  box-shadow: 0 0 0 1px var(--border);
  position: relative; z-index: 1;
  transition: var(--transition);
  font-variant-numeric: tabular-nums;
}
.tl-step.active .tl-dot {
  background: var(--primary); color: var(--primary-foreground);
  box-shadow: 0 0 0 1px var(--primary), 0 0 0 4px var(--focus-soft);
}
.tl-step.done .tl-dot { background: var(--success); color: #fff; box-shadow: 0 0 0 1px var(--success); }
.tl-body { flex: 1; min-width: 0; padding-top: 1px; }
.tl-name {
  font-size: 12px; font-weight: 600; margin-bottom: 6px;
  letter-spacing: -0.005em;
  color: var(--foreground);
}
.tl-approvers { display: flex; flex-direction: column; gap: 4px; }
.tl-approver {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--foreground);
}
.tl-approver.role { color: var(--foreground); }
.tl-approver .av {
  width: 22px; height: 22px; flex-shrink: 0;
  background: var(--primary); color: var(--primary-foreground);
  border-radius: 4px;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 600;
  text-transform: uppercase;
}
.tl-approver .av.role {
  background: #4b5563;
  font-size: 11px;
}
.tl-empty { font-size: 11px; color: var(--muted-foreground); font-style: italic; }

.tl-extra {
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted-foreground);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tl-extra-list {
  display: none;
  padding: 4px 0 0 0;
  border-top: 1px dashed var(--border);
  margin-top: 6px;
}
.tl-extra-list.open { display: flex; flex-direction: column; gap: 4px; }
.tl-extra-list .tl-approver { color: var(--muted-foreground); font-size: 11px; }
.tl-extra-list .tl-approver .av { background: var(--muted); color: var(--muted-foreground); }

/* Subscribers list */
.subs { display: flex; flex-direction: column; gap: 6px; }
.subs .person {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
}
.subs .av {
  width: 26px; height: 26px; flex-shrink: 0;
  background: var(--primary); color: var(--primary-foreground);
  border-radius: 4px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase;
}
.subs .av.role { background: #4b5563; }
.subs .info { flex: 1; min-width: 0; }
.subs .info .nm { font-size: 13px; font-weight: 500; color: var(--foreground); }
.subs .info .pos { font-size: 11px; color: var(--muted-foreground); }

.kv {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 12px;
  padding: 4px 0;
}
.kv .k { color: var(--muted-foreground); }
.kv .v { color: var(--foreground); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ─────────────── Form filling: sections, toolbar, sticky bar ─────────────── */

.section {
  margin: 12px 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  background: var(--card);
  overflow: hidden;
}
.section.legacy { opacity: 0.7; }
.section-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.section-head:hover { color: var(--foreground); }
.section.collapsed .section-head { border-bottom-color: transparent; }
.section.collapsed .section-body { display: none; }
.section-head .chevron {
  transition: transform var(--transition);
  color: var(--muted-foreground);
  flex-shrink: 0;
}
.section.collapsed .section-head .chevron { transform: rotate(-90deg); }
.section-head .count {
  margin-left: auto;
  font-size: 10px; color: var(--muted-foreground); font-weight: 500;
  background: var(--muted); padding: 2px 8px; border-radius: 999px;
  text-transform: none; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.section-head .count.ok { background: #f0fdf4; color: var(--success); }
.section-head .count.warn { background: #fefce8; color: var(--warning); }

.section-body {
  padding: 16px 14px 6px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
}
.field { grid-column: span 1; }
.field.full { grid-column: 1 / -1; }
@media (max-width: 640px) { .section-body { grid-template-columns: 1fr; } }

.field.cond-hidden, .field.step-hidden, .field.author-hidden { display: none; }
.show-all .field.step-hidden { display: block; opacity: .7; }
.show-all .field.step-hidden .field-label::after {
  content: '  · доступно на след. этапе';
  color: #a3a3a3; font-weight: 400; font-size: 11px;
  text-transform: none; letter-spacing: 0;
}

.help {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--muted);
  color: var(--muted-foreground);
  font-size: 9px; font-weight: 700;
  cursor: help;
  transition: var(--transition);
  text-transform: none;
}
.help:hover { background: var(--accent); color: var(--foreground); }

/* Form toolbar */
.form-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.form-toolbar .toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted-foreground);
  background: var(--background);
  border: 1px solid var(--border);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
  font-family: inherit;
}
.form-toolbar .toggle:hover { color: var(--foreground); }
.form-toolbar .toggle.on {
  background: var(--primary); color: var(--primary-foreground);
  border-color: var(--primary);
  font-weight: 500;
}
.form-toolbar .toggle .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted-foreground);
}
.form-toolbar .toggle.on .dot { background: var(--primary-foreground); }
.form-toolbar .grow { flex: 1; }
.form-toolbar .ffind {
  width: 220px;
  padding: 5px 10px 5px 28px;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background: var(--background) url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") no-repeat 9px center;
  font-size: 12px;
  font-family: inherit;
}
.ffind:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px var(--focus-soft); }

.field.search-hit { background: #fef9c3; border-radius: 6px; padding: 8px; margin: -8px -8px 16px; }
.field.search-out { display: none; }
.section.has-search-hit .section-head { background: #fef9c3; color: #713f12; }

/* Validation */
.input.invalid, .textarea.invalid, .person-picker.invalid, .multi-choice.invalid, .select.invalid {
  border-color: var(--destructive);
}
.input.invalid:focus, .textarea.invalid:focus { box-shadow: 0 0 0 3px #fee2e2; }
.field-error { font-size: 11px; color: var(--destructive); margin-top: 4px; }

/* Sticky bar */
.sticky-bar {
  position: sticky; bottom: 16px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 8px 8px 16px;
  margin: 16px 0 0;
  box-shadow: var(--shadow-pop);
  z-index: 5;
}
.sticky-bar .progress-text {
  font-size: 12px; color: var(--muted-foreground);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.sticky-bar .progress-bar {
  flex: 1; max-width: 240px;
  height: 4px;
  background: var(--muted);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.sticky-bar .progress-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--primary);
  border-radius: 999px;
  transition: width .3s ease;
}

/* ─────────────── Wizard ─────────────── */

.form-intro {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  background: var(--secondary);
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--foreground);
  line-height: 1.5;
}
.form-intro-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }

.cat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted-foreground);
  font-weight: 600;
  margin: 0 0 10px;
}

.cat-group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted-foreground);
  font-weight: 600;
  margin: 18px 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.cat-group-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
.cat-group-title:first-of-type { margin-top: 0; }

.cat-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
  margin-bottom: 4px;
}
@media (min-width: 640px) {
  .cat-grid { grid-template-columns: 1fr 1fr; }
}

.cat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: var(--transition);
  position: relative;
}
.cat-card:hover {
  border-color: var(--ring);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}
.cat-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--secondary);
  border-radius: var(--radius-sm);
}
.cat-body { flex: 1; min-width: 0; }
.cat-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--foreground);
  margin-bottom: 2px;
  letter-spacing: -0.005em;
}
.cat-desc {
  font-size: 12px;
  color: var(--muted-foreground);
  line-height: 1.4;
}
.cat-examples {
  font-size: 11px;
  color: var(--muted-foreground);
  margin-top: 6px;
  font-style: italic;
  opacity: 0.85;
}
.cat-arrow {
  color: var(--muted-foreground);
  font-size: 18px;
  flex-shrink: 0;
  transition: var(--transition);
}
.cat-card:hover .cat-arrow {
  color: var(--foreground);
  transform: translateX(2px);
}

.cat-selected {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--secondary);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.cat-selected-icon {
  font-size: 24px; line-height: 1; flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: var(--background);
  border-radius: var(--radius-sm);
}
.cat-selected-body { flex: 1; min-width: 0; }
.cat-selected-title {
  font-size: 14px; font-weight: 600;
  color: var(--foreground);
}
.cat-selected-desc {
  font-size: 12px; color: var(--muted-foreground);
}

.wiz-section { margin-bottom: 24px; }
.wiz-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

.wizard-form .section-body { display: block; }
.wizard-form .field { margin-bottom: 16px; }

.advanced-block {
  margin-top: 16px;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}
.advanced-block summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: .05em;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.advanced-block summary::-webkit-details-marker { display: none; }
.advanced-block summary::before {
  content: '▸';
  font-size: 10px;
  color: var(--muted-foreground);
  transition: transform .2s;
}
.advanced-block[open] summary::before { transform: rotate(90deg); }
.advanced-block summary:hover { color: var(--foreground); }
.advanced-content {
  padding: 6px 14px 14px;
}
.advanced-content .field { margin-bottom: 12px; }

/* Submissions table */
.subs-table {
  width: 100%;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  border-collapse: collapse;
  overflow: hidden;
}
.subs-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted-foreground);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--secondary);
}
.subs-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: middle;
}
.subs-table tr:last-child td { border-bottom: none; }
.subs-table tbody tr {
  cursor: pointer;
  transition: var(--transition);
}
.subs-table tbody tr:hover { background: var(--secondary); }
.sub-id {
  font-family: 'Geist Mono', monospace;
  font-size: 12px;
  color: var(--muted-foreground);
  background: var(--muted);
  padding: 2px 6px;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
}
.sub-author {
  display: inline-flex; align-items: center; gap: 8px;
}
.sub-author .av {
  width: 24px; height: 24px;
  background: var(--primary); color: var(--primary-foreground);
  border-radius: 4px;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase;
}

/* Submission detail page — approver card and route timeline */

.approver-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.approver-card-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted-foreground);
  font-weight: 600;
  margin-bottom: 10px;
}
.approver-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.approver-row:last-of-type { border-bottom: none; }
.approver-row .av {
  width: 36px; height: 36px;
  background: var(--primary); color: var(--primary-foreground);
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  flex-shrink: 0;
}
.approver-row .av.role { background: #4b5563; }
.approver-name { font-size: 14px; font-weight: 500; color: var(--foreground); }
.approver-tag { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }

.approver-actions { display: flex; gap: 8px; margin: 14px 0 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.approver-actions .btn:disabled { opacity: .5; cursor: not-allowed; }
.approver-note {
  background: var(--secondary);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted-foreground);
  line-height: 1.5;
  margin-top: 12px;
}
.approver-note code {
  background: var(--background);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  font-family: 'Geist Mono', monospace;
}

.route-timeline {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 0;
}
.route-step {
  display: flex; gap: 14px;
  padding: 12px 18px;
  border-left: 3px solid transparent;
  position: relative;
}
.route-step.current { border-left-color: var(--accent); background: linear-gradient(90deg, var(--accent-soft) 0%, transparent 60%); }
.route-step.past .route-dot { background: var(--success); color: #fff; }
.route-step.future { opacity: .6; }
.route-dot {
  width: 26px; height: 26px;
  background: var(--secondary);
  color: var(--muted-foreground);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.route-step.current .route-dot { background: var(--accent); color: var(--primary-foreground); }
.route-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: var(--foreground); }
.route-step.future .route-name { font-weight: 500; color: var(--muted-foreground); }
.route-approvers { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; }
.role-chip, .user-chip {
  display: inline-block;
  background: var(--secondary);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--foreground);
}
.role-chip { color: #4b5563; font-weight: 500; }
.route-empty { font-size: 11px; color: var(--muted-foreground); font-style: italic; }

/* Submission detail page */
.status-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.status-dot.pulsing { animation: pulse 2s infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .35); }
  70%      { box-shadow: 0 0 0 8px rgba(37, 99, 235, 0); }
}
.status-title { font-size: 14px; font-weight: 600; color: var(--foreground); letter-spacing: -0.005em; }
.status-sub   { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; }

.sub-fields {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.sub-field {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  align-items: start;
}
.sub-field:last-child { border-bottom: none; }
.sub-field-label {
  color: var(--muted-foreground);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 500;
  padding-top: 2px;
}
.sub-field-value {
  color: var(--foreground);
  word-wrap: break-word;
  white-space: pre-wrap;
}

/* Avatar stack (for role members) */
.av-stack {
  --size: 26px;
  display: inline-flex;
  align-items: center;
}
.av-stack-item {
  width: var(--size); height: var(--size);
  background: var(--primary); color: var(--primary-foreground);
  border: 2px solid var(--card);
  border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: calc(var(--size) * 0.4);
  font-weight: 600;
  text-transform: uppercase;
  margin-left: calc(var(--size) * -0.35);
  cursor: default;
  font-variant-numeric: tabular-nums;
}
.av-stack-item:first-child { margin-left: 0; }
.av-stack-more {
  height: var(--size);
  padding: 0 8px;
  background: var(--secondary);
  border: 1px solid var(--border);
  border-radius: var(--size);
  display: inline-flex; align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted-foreground);
  margin-left: 4px;
}

.approver-role-icon {
  width: 36px; height: 36px;
  background: #f3e8ff;
  color: #7c3aed;
  border-radius: 6px;
  display: grid; place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.approver-main { flex: 1; min-width: 0; }
.approver-members { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.approver-members-names {
  font-size: 12px;
  color: var(--muted-foreground);
  line-height: 1.4;
}

.route-role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Claim bar — "Взять в работу" / "В работе у X" */
.claim-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin: 14px 0 0;
}
.claim-bar.out {
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.claim-bar.in {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}
.claim-bar .av {
  width: 32px; height: 32px;
  border-radius: 50%;
  font-size: 11px;
}

/* Discussion thread */
.thread {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 4px;
  display: flex; flex-direction: column;
  gap: 2px;
}
.thread-msg {
  display: flex; gap: 10px;
  padding: 10px 14px;
}
.thread-msg .av {
  width: 32px; height: 32px;
  background: var(--primary); color: var(--primary-foreground);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
  flex-shrink: 0;
  text-transform: uppercase;
}
.thread-body { flex: 1; min-width: 0; }
.thread-head {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
  font-size: 13px;
}
.thread-head b { font-weight: 600; }
.thread-time {
  color: var(--muted-foreground);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}
.thread-bubble {
  background: var(--secondary);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--foreground);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.thread-sys {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px;
  font-size: 12px;
  color: var(--muted-foreground);
}
.thread-sys-dot {
  width: 6px; height: 6px;
  background: var(--border);
  border-radius: 50%;
  flex-shrink: 0;
}

.thread-input {
  margin-top: 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  display: flex; align-items: flex-end; gap: 8px;
}
.thread-input .textarea {
  flex: 1;
  border: none;
  resize: none;
  background: transparent;
  min-height: 36px;
}
.thread-input .textarea:focus { outline: none; box-shadow: none; }
.thread-input .btn { flex-shrink: 0; }

/* Event log on submission detail */
.events {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px 0;
}
.event {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  align-items: start;
}
.event:last-child { border-bottom: none; }
.event-time {
  color: var(--muted-foreground);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.event-body { color: var(--foreground); line-height: 1.5; }
.event-comment {
  background: var(--secondary);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  margin-top: 6px;
  color: var(--muted-foreground);
  border-left: 2px solid var(--border);
}

/* Post-submit confirmation modal */
.confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .5);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.confirm-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  max-width: 480px;
  width: 100%;
  padding: 28px;
  text-align: center;
  animation: pop .25s cubic-bezier(.4, 0, .2, 1);
}
@keyframes pop {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.confirm-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #dcfce7;
  color: var(--success);
  display: grid; place-items: center;
  margin: 0 auto 16px;
  font-size: 28px;
  font-weight: 700;
}
.confirm-title { font-size: 20px; font-weight: 600; margin-bottom: 8px; letter-spacing: -0.01em; }
.confirm-sub   { font-size: 14px; color: var(--muted-foreground); margin-bottom: 20px; line-height: 1.5; }
.confirm-info {
  background: var(--secondary);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 18px;
  text-align: left;
  font-size: 13px;
}
.confirm-info .kv { padding: 3px 0; }
.confirm-actions { display: flex; gap: 8px; justify-content: center; }

/* User switcher in header */
.user-switch { position: relative; }
.user-switch-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--secondary);
  border: 1px solid var(--border);
  padding: 5px 10px 5px 5px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  color: var(--foreground);
  cursor: pointer;
  transition: var(--transition);
}
.user-switch-btn:hover { background: var(--background); border-color: #d4d4d4; }
.us-av {
  width: 24px; height: 24px;
  background: var(--primary); color: var(--primary-foreground);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
}
.us-name { font-weight: 500; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.user-switch-dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  width: 320px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  z-index: 50;
  padding: 8px;
  display: none;
}
.user-switch[data-open='1'] .user-switch-dropdown { display: block; }
.us-dd-head {
  font-size: 11px;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
  padding: 4px 8px 8px;
}
.us-search {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--secondary);
  font-size: 13px;
  font-family: inherit;
  margin-bottom: 8px;
}
.us-list {
  max-height: 320px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
}
.us-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  text-align: left;
  font-family: inherit;
}
.us-item:hover { background: var(--secondary); }
.us-item.sel { background: var(--accent-soft); }
.us-item .us-av { width: 28px; height: 28px; font-size: 10px; flex-shrink: 0; }
.us-item-name { font-size: 13px; font-weight: 500; color: var(--foreground); }
.us-item-sub { font-size: 11px; color: var(--muted-foreground); }

/* Top nav link */
header.top .nav-link {
  font-size: 13px;
  color: var(--muted-foreground);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
}
header.top .nav-link:hover { background: var(--secondary); color: var(--foreground); }
header.top .nav-link.active { background: var(--secondary); color: var(--foreground); font-weight: 500; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #e5e5e5; border-radius: 5px; border: 2px solid var(--background); }
::-webkit-scrollbar-thumb:hover { background: #d4d4d4; }