/* Design System Oficial VIDA v1.0 */
* { box-sizing: border-box; }
html { color-scheme: var(--vida-color-scheme); scroll-behavior: smooth; }
body {
  background: var(--vida-canvas);
  color: var(--vida-text);
  font-family: var(--vida-font-family-sans);
  font-size: var(--vida-font-size-body);
  line-height: var(--vida-line-height-body);
  margin: 0;
}
body, button, input, select, textarea { font-family: var(--vida-font-family-sans); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img, video { max-width: 100%; }
h1, h2, h3, h4, p { overflow-wrap: anywhere; }
:where(a, button, input, select, textarea):focus-visible {
  outline: var(--vida-border-width-3) var(--vida-border-style-solid) var(--vida-focus-ring);
  outline-offset: 3px;
}
.sr-only {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.skip-link {
  background: var(--vida-text);
  border-radius: 0 0 var(--vida-radius-sm) var(--vida-radius-sm);
  color: var(--vida-on-brand);
  font-weight: var(--vida-font-weight-bold);
  left: 20px;
  padding: 10px 16px;
  position: fixed;
  text-decoration: none;
  top: -64px;
  transition: top var(--vida-motion) var(--vida-ease);
  z-index: var(--vida-z-skip-link);
}
.skip-link:focus { top: 0; }
.ui-icon { display: block; height: 20px; width: 20px; }

/* App shell */
.app-shell {
  display: grid;
  grid-template-columns: var(--vida-sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
}
.app-sidebar {
  background: var(--vida-surface);
  border-right: 1px solid var(--vida-border);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  padding: 24px 18px 20px;
  position: sticky;
  top: 0;
  z-index: var(--vida-z-sidebar);
}
.sidebar-header { align-items: center; display: flex; gap: 8px; }
.sidebar-brand {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
  padding: 4px 8px 28px;
  text-decoration: none;
}
.brand-mark {
  align-items: center;
  background: linear-gradient(135deg, var(--vida-primary), var(--vida-accent));
  border-radius: 14px;
  box-shadow: var(--vida-shadow-low);
  color: var(--vida-on-brand);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--vida-font-size-compact-lg);
  font-weight: var(--vida-font-weight-extra-bold);
  height: 42px;
  justify-content: center;
  width: 42px;
}
.sidebar-brand > span:last-child { display: grid; min-width: 0; }
.sidebar-brand strong { color: var(--vida-primary); font-size: var(--vida-font-size-brand); line-height: 1; }
.sidebar-brand small {
  color: var(--vida-muted);
  font-size: var(--vida-font-size-micro);
  font-weight: var(--vida-font-weight-extra-bold);
  letter-spacing: var(--vida-letter-spacing-brand);
  margin-top: 3px;
}
.sidebar-close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--vida-radius-sm);
  color: var(--vida-muted);
  display: none;
  height: 44px;
  justify-content: center;
  margin-left: auto;
  width: 44px;
}
.sidebar-nav { display: grid; gap: 5px; }
.nav-caption {
  color: var(--vida-subtle);
  font-size: var(--vida-font-size-overline);
  font-weight: var(--vida-font-weight-extra-bold);
  letter-spacing: var(--vida-letter-spacing-overline);
  margin: 20px 12px 8px;
  text-transform: uppercase;
}
.sidebar-nav > .nav-caption { margin-top: 0; }
.sidebar-nav a {
  align-items: center;
  border-radius: 14px;
  color: var(--vida-text-secondary);
  display: flex;
  font-size: var(--vida-font-size-body);
  font-weight: var(--vida-font-weight-bold);
  gap: 12px;
  min-height: 46px;
  padding: 11px 14px;
  text-decoration: none;
  transition: background var(--vida-motion) var(--vida-ease), color var(--vida-motion) var(--vida-ease);
}
.sidebar-nav a:hover, .sidebar-nav a.active {
  background: var(--vida-primary-light);
  color: var(--vida-primary-dark);
}
.nav-badge {
  align-items: center;
  background: var(--vida-danger);
  border-radius: var(--vida-radius-pill);
  color: var(--vida-on-brand);
  display: inline-flex;
  font-size: var(--vida-font-size-micro);
  height: 20px;
  justify-content: center;
  margin-left: auto;
  min-width: 20px;
  padding: 0 6px;
}
.nav-badge.hidden, [data-notification-count].hidden { display: none; }
.sidebar-quick { margin-top: 2px; }
.sidebar-quick h2 { line-height: 1.4; }
.sidebar-quick-links {
  background: var(--vida-surface);
  border: 1px solid var(--vida-border);
  border-radius: 16px;
  overflow: hidden;
}
.sidebar-quick-links a {
  align-items: center;
  border-bottom: 1px solid var(--vida-border);
  color: var(--vida-text-secondary);
  display: flex;
  font-size: var(--vida-font-size-body-sm);
  justify-content: space-between;
  min-height: 43px;
  padding: 10px 14px;
  text-decoration: none;
}
.sidebar-quick-links a:last-child { border-bottom: 0; }
.sidebar-quick-links a:hover { background: var(--vida-canvas); color: var(--vida-primary-dark); }
.sidebar-quick-links .ui-icon { height: 15px; width: 15px; }
.sidebar-empty { color: var(--vida-muted); display: block; font-size: var(--vida-font-size-caption); padding: 14px; }
.sidebar-brand-card {
  background: linear-gradient(135deg, var(--vida-primary), var(--vida-gradient-end));
  border-radius: 20px;
  box-shadow: var(--vida-shadow);
  color: var(--vida-on-brand);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: 28px;
  min-height: 138px;
  padding: 22px;
}
.sidebar-brand-card strong { font-size: var(--vida-font-size-promotional); }
.sidebar-brand-card p { font-size: var(--vida-font-size-caption); line-height: 1.5; margin: 7px 0 0; }
.sidebar-user {
  align-items: center;
  border-top: 1px solid var(--vida-border);
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding: 18px 8px 0;
}
.sidebar-user > span:last-child, .topbar-profile > span:last-child { display: grid; min-width: 0; }
.sidebar-user strong, .topbar-profile strong {
  font-size: var(--vida-font-size-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user small, .topbar-profile small { color: var(--vida-muted); font-size: var(--vida-font-size-overline); }
.profile-initials {
  align-items: center;
  background: var(--vida-primary);
  border-radius: var(--vida-radius-circle);
  color: var(--vida-on-brand);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--vida-font-size-caption);
  font-weight: var(--vida-font-weight-extra-bold);
  height: 40px;
  justify-content: center;
  width: 40px;
}
.profile-avatar { overflow: hidden; }
.profile-avatar img { height: 100%; object-fit: cover; width: 100%; }
.sidebar-backdrop { display: none; }

/* Header and content */
.app-stage { min-width: 0; }
.topbar {
  align-items: center;
  display: flex;
  gap: 20px;
  height: var(--vida-header-height);
  justify-content: space-between;
  padding: 0 36px;
}
.icon-button.mobile-menu { display: none; }
.global-search {
  align-items: center;
  background: var(--vida-surface);
  border: 1px solid var(--vida-border);
  border-radius: var(--vida-radius-control);
  display: flex;
  flex: 1;
  gap: 10px;
  max-width: 650px;
  padding: 0 14px;
  transition: border-color var(--vida-motion) var(--vida-ease), box-shadow var(--vida-motion) var(--vida-ease);
}
.global-search:focus-within {
  border-color: var(--vida-primary);
  box-shadow: var(--vida-shadow-focus);
}
.global-search .ui-icon { color: var(--vida-muted); flex: 0 0 auto; }
.global-search input {
  background: transparent;
  border: 0;
  color: var(--vida-text);
  height: 48px;
  min-width: 0;
  outline: 0;
  padding: 0;
  width: 100%;
}
.global-search input:focus-visible { outline: 0; }
.global-search kbd {
  background: var(--vida-canvas);
  border: 1px solid var(--vida-border);
  border-radius: 6px;
  color: var(--vida-muted);
  font-family: inherit;
  font-size: var(--vida-font-size-micro);
  padding: 3px 6px;
  white-space: nowrap;
}
.topbar-actions { align-items: center; display: flex; gap: 10px; }
.topbar-actions form { margin: 0; }
.icon-button {
  align-items: center;
  background: var(--vida-surface);
  border: 1px solid var(--vida-border);
  border-radius: var(--vida-radius-control);
  color: var(--vida-text-secondary);
  display: inline-flex;
  height: 44px;
  justify-content: center;
  padding: 0;
  text-decoration: none;
  transition: background var(--vida-motion) var(--vida-ease), color var(--vida-motion) var(--vida-ease);
  width: 44px;
}
.icon-button:hover { background: var(--vida-primary-light); color: var(--vida-primary-dark); }
.topbar-profile { align-items: center; color: var(--vida-text); display: flex; gap: 10px; margin-left: 4px; max-width: 220px; text-decoration: none; }
.logout-button { background: var(--vida-surface); color: var(--vida-text-secondary); }
.main-content {
  margin: 0 auto;
  max-width: var(--vida-container-max);
  min-height: calc(100vh - var(--vida-header-height) - 72px);
  min-width: 0;
  padding: 0 36px 48px;
}
.app-footer {
  align-items: center;
  border-top: 1px solid var(--vida-border);
  color: var(--vida-muted);
  display: flex;
  font-size: var(--vida-font-size-overline);
  justify-content: space-between;
  margin: 0 36px;
  padding: 18px 0 24px;
}
.bottom-nav { display: none; }

/* Typography and shared layout */
.eyebrow {
  color: var(--vida-primary);
  font-size: var(--vida-font-size-overline);
  font-weight: var(--vida-font-weight-extra-bold);
  letter-spacing: var(--vida-letter-spacing-overline);
  margin: 0 0 4px;
  text-transform: uppercase;
}
.section { padding-top: 22px; }
.section-heading h2, .section h1, .section h2 { margin-top: 0; }
.section-heading p, .section > p { color: var(--vida-muted); }
.grid { display: grid; gap: 18px; }
.cards, .links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; gap: 28px; grid-template-columns: minmax(240px, 360px) minmax(0, 1fr); }
.card, .panel, .quick-link, .news-item, .sidebar-block, .content-list, .notification-list, .access-list, .table-wrap {
  background: var(--vida-surface);
  border: 1px solid var(--vida-border);
  border-radius: var(--vida-radius-card);
  box-shadow: var(--vida-shadow-low);
}
.card { min-height: 168px; padding: 20px; text-decoration: none; }
.card:hover, .quick-link:hover { border-color: var(--vida-hover-border); }
.icon {
  align-items: center;
  background: var(--vida-primary-light);
  border-radius: 14px;
  color: var(--vida-primary);
  display: inline-flex;
  font-size: var(--vida-font-size-caption);
  font-weight: var(--vida-font-weight-extra-bold);
  height: 44px;
  justify-content: center;
  margin-bottom: 14px;
  width: 48px;
}
.card h3 { font-size: var(--vida-font-size-body-lg); margin: 0 0 7px; }
.card p, .news-item p { color: var(--vida-muted); font-size: var(--vida-font-size-body-sm); margin: 0; }
.quick-link { font-weight: var(--vida-font-weight-bold); padding: 16px 18px; text-decoration: none; }

/* Hero and dashboard */
.welcome-strip, .hero {
  align-items: center;
  background:
    radial-gradient(circle at 85% 30%, var(--vida-alpha-white-32), transparent 24%),
    linear-gradient(135deg, var(--vida-gradient-start), var(--vida-gradient-end));
  border-radius: var(--vida-radius-hero);
  box-shadow: var(--vida-shadow);
  color: var(--vida-on-brand);
  display: flex;
  justify-content: space-between;
  min-height: 160px;
  overflow: hidden;
  padding: 32px;
  position: relative;
}
.welcome-strip .eyebrow, .hero .eyebrow {
  background: var(--vida-primary-light);
  border-radius: var(--vida-radius-pill);
  color: var(--vida-primary-dark);
  display: inline-flex;
  padding: 6px 10px;
}
.welcome-strip h1, .hero h1 {
  font-size: var(--vida-font-size-display);
  font-weight: var(--vida-font-weight-extra-bold);
  letter-spacing: var(--vida-letter-spacing-heading);
  line-height: 1.25;
  margin: 8px 0 5px;
}
.welcome-strip p, .hero p { color: var(--vida-alpha-white-93); font-size: var(--vida-font-size-body); margin: 0; }
.welcome-profile {
  align-items: center;
  background: var(--vida-alpha-white-13);
  border: var(--vida-border-width-1) var(--vida-border-style-solid) var(--vida-alpha-white-28);
  border-radius: 16px;
  display: flex;
  gap: 10px;
  min-width: 245px;
  padding: 12px 14px;
}
.welcome-profile .profile-initials { background: var(--vida-surface); color: var(--vida-primary-dark); }
.welcome-profile > div { display: grid; min-width: 0; }
.welcome-profile strong { font-size: var(--vida-font-size-body-sm); }
.welcome-profile span { color: var(--vida-alpha-white-80); font-size: var(--vida-font-size-overline); }
.dashboard-section { padding-top: 22px; }
.section-title-row {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-title-row h2 { font-size: var(--vida-font-size-heading-3); margin: 2px 0 0; }
.text-link {
  align-items: center;
  color: var(--vida-primary);
  display: inline-flex;
  font-size: var(--vida-font-size-body-sm);
  font-weight: var(--vida-font-weight-extra-bold);
  gap: 6px;
  text-decoration: none;
}
.text-link .ui-icon { height: 16px; width: 16px; }
.shortcut-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.shortcut-card {
  align-items: center;
  background: var(--vida-surface);
  border: 1px solid var(--vida-border);
  border-radius: var(--vida-radius-card);
  box-shadow: var(--vida-shadow-low);
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 96px;
  padding: 18px;
  text-decoration: none;
  transition: transform var(--vida-motion) var(--vida-ease), box-shadow var(--vida-motion) var(--vida-ease);
}
.shortcut-card:hover { box-shadow: var(--vida-shadow); transform: translateY(var(--vida-motion-lift)); }
.shortcut-icon, .result-icon {
  align-items: center;
  background: var(--vida-surface);
  border: var(--vida-border-width-1) var(--vida-border-style-solid) var(--vida-border);
  border-radius: 15px;
  color: var(--vida-primary-dark);
  display: inline-flex;
  height: 48px;
  justify-content: center;
  width: 48px;
}
.shortcut-card > span:nth-child(2) { display: grid; min-width: 0; }
.shortcut-card strong { font-size: var(--vida-font-size-body); }
.shortcut-card small { color: var(--vida-muted); font-size: var(--vida-font-size-caption); line-height: 1.4; margin-top: 3px; }
.shortcut-arrow { color: var(--vida-muted); height: 16px; width: 16px; }

/* Feed and widgets */
.social-layout {
  align-items: start;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) 360px;
  margin-top: 22px;
  min-width: 0;
}
.feed-column { min-width: 0; }
.feed-heading {
  align-items: end;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.feed-heading h2 { font-size: var(--vida-font-size-heading-3); margin: 0; }
.feed-heading > span { color: var(--vida-muted); font-size: var(--vida-font-size-caption); }
.social-feed { display: grid; gap: 14px; }
.social-post {
  background: var(--vida-surface);
  border: 1px solid var(--vida-border);
  border-radius: var(--vida-radius-card);
  box-shadow: var(--vida-shadow-low);
  overflow: hidden;
}
.social-post.post-notice { border-left: 4px solid var(--vida-primary); }
.social-post.post-notice.priority-important { border-left-color: var(--vida-warning); }
.social-post.post-notice.priority-urgent { border-left-color: var(--vida-danger); }
.post-header { align-items: center; display: flex; gap: 12px; padding: 18px 22px 8px; }
.post-avatar {
  align-items: center;
  background: var(--vida-primary-light);
  border-radius: var(--vida-radius-circle);
  color: var(--vida-primary);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: var(--vida-font-size-overline);
  font-weight: var(--vida-font-weight-extra-bold);
  height: 42px;
  justify-content: center;
  width: 42px;
}
.post-author { display: grid; min-width: 0; }
.post-author strong { font-size: var(--vida-font-size-body-sm); }
.post-author span { color: var(--vida-muted); font-size: var(--vida-font-size-caption); }
.post-priority {
  border-radius: var(--vida-radius-pill);
  font-size: var(--vida-font-size-overline);
  font-weight: var(--vida-font-weight-extra-bold);
  margin-left: auto;
  padding: 5px 9px;
  text-transform: uppercase;
}
.post-priority.priority-important { background: var(--vida-warning-strong-surface); color: var(--vida-warning-text); }
.post-priority.priority-urgent { background: var(--vida-danger-strong-surface); color: var(--vida-danger-strong-text); }
.post-body { padding: 6px 22px 16px 76px; }
.post-body h2 { font-size: var(--vida-font-size-compact-lg); margin: 0 0 7px; }
.post-body p { color: var(--vida-text-secondary); font-size: var(--vida-font-size-body); margin: 0; }
.post-action { color: var(--vida-primary); display: inline-flex; font-size: var(--vida-font-size-body-sm); font-weight: var(--vida-font-weight-extra-bold); margin-top: 10px; text-decoration: none; }
.post-attachment {
  align-items: center;
  background: var(--vida-primary-light);
  border: var(--vida-border-width-1) var(--vida-border-style-solid) var(--vida-primary-border);
  border-radius: 14px;
  display: grid;
  gap: 12px;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  margin-top: 16px;
  padding: 14px;
  text-decoration: none;
}
.post-attachment > span {
  align-items: center;
  background: var(--vida-primary-light);
  border-radius: 10px;
  color: var(--vida-primary);
  display: flex;
  font-size: var(--vida-font-size-nano);
  font-weight: var(--vida-font-weight-extra-bold);
  height: 38px;
  justify-content: center;
}
.post-attachment div { display: grid; min-width: 0; }
.post-attachment strong { font-size: var(--vida-font-size-body-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-attachment small { color: var(--vida-muted); font-size: var(--vida-font-size-overline); }
.post-attachment b { color: var(--vida-primary-dark); font-size: var(--vida-font-size-caption); white-space: nowrap; }
.reaction-bar { border-top: 1px solid var(--vida-border); display: flex; flex-wrap: wrap; gap: 7px; padding: 9px 18px; }
.reaction-button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--vida-text-secondary);
  display: inline-flex;
  font-size: var(--vida-font-size-caption);
  font-weight: var(--vida-font-weight-bold);
  gap: 5px;
  min-height: 36px;
  padding: 7px 10px;
}
.reaction-button:hover, .reaction-button.selected { background: var(--vida-primary-light); color: var(--vida-primary-dark); }
.reaction-button strong {
  align-items: center;
  background: var(--vida-surface-muted);
  border-radius: var(--vida-radius-pill);
  display: inline-flex;
  font-size: var(--vida-font-size-micro);
  justify-content: center;
  min-height: 18px;
  min-width: 18px;
  padding: 0 5px;
}
.reaction-button strong:empty { display: none; }
.reaction-button:disabled { cursor: wait; opacity: .6; }
.social-sidebar { display: grid; gap: 18px; position: sticky; top: 18px; }
.sidebar-block { overflow: hidden; }
.sidebar-block > h2 { border-bottom: 1px solid var(--vida-border); font-size: var(--vida-font-size-heading-3); margin: 0; padding: 18px 22px; }
.area-list, .sidebar-links { display: grid; }
.area-list a, .sidebar-links a {
  align-items: center;
  border-bottom: 1px solid var(--vida-border);
  display: flex;
  gap: 12px;
  min-height: 64px;
  padding: 12px 18px;
  text-decoration: none;
}
.area-list a:last-child, .sidebar-links a:last-child { border-bottom: 0; }
.area-list a:hover, .area-list a.active, .sidebar-links a:hover { background: var(--vida-primary-light); }
.area-list a > span {
  align-items: center;
  background: var(--vida-primary-light);
  border-radius: 12px;
  color: var(--vida-primary);
  display: flex;
  flex: 0 0 auto;
  font-size: var(--vida-font-size-micro);
  font-weight: var(--vida-font-weight-extra-bold);
  height: 42px;
  justify-content: center;
  width: 46px;
}
.area-list a div { display: grid; min-width: 0; }
.area-list a strong, .sidebar-links strong { font-size: var(--vida-font-size-body-sm); }
.area-list a small, .sidebar-links span, .muted { color: var(--vida-muted); font-size: var(--vida-font-size-overline); }
.area-list a small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-links a { justify-content: space-between; min-height: 48px; }

/* Forms, buttons and feedback */
label {
  color: var(--vida-text-secondary);
  display: grid;
  font-size: var(--vida-font-size-body-sm);
  font-weight: var(--vida-font-weight-extra-bold);
  gap: 7px;
  margin-bottom: 14px;
}
input, select, textarea {
  background: var(--vida-surface);
  border: 1px solid var(--vida-border);
  border-radius: var(--vida-radius-control);
  color: var(--vida-text);
  min-height: 48px;
  padding: 12px 14px;
  width: 100%;
}
textarea { min-height: 112px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--vida-primary); }
button, .panel button, .login-card button {
  background: var(--vida-primary);
  border: 0;
  border-radius: var(--vida-radius-control);
  color: var(--vida-on-brand);
  font-weight: var(--vida-font-weight-extra-bold);
  min-height: 44px;
  padding: 10px 16px;
}
button:hover { background: var(--vida-primary-dark); }
button:disabled { cursor: not-allowed; opacity: .55; }
.button-secondary {
  align-items: center;
  background: var(--vida-surface);
  border: 1px solid var(--vida-border);
  border-radius: var(--vida-radius-control);
  color: var(--vida-text-secondary);
  display: inline-flex;
  font-size: var(--vida-font-size-body-sm);
  font-weight: var(--vida-font-weight-extra-bold);
  justify-content: center;
  min-height: 44px;
  padding: 9px 14px;
  text-decoration: none;
}
.button-secondary:hover { border-color: var(--vida-primary); color: var(--vida-primary-dark); }
.button-danger { background: var(--vida-danger-strong-surface); color: var(--vida-danger-strong-text); }
.button-danger:hover { background: var(--vida-danger-hover); }
.form-row { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.alert, .notice {
  border: 1px solid;
  border-radius: var(--vida-radius-control);
  margin: 16px 0;
  padding: 12px 14px;
}
.alert { background: var(--vida-danger-surface); border-color: var(--vida-danger-border); color: var(--vida-danger-text); }
.notice.success { background: var(--vida-surface); border-color: var(--vida-success); color: var(--vida-text); }
.empty, .empty-state {
  background: var(--vida-surface);
  border: 1px dashed var(--vida-border);
  border-radius: var(--vida-radius-card);
  color: var(--vida-muted);
  padding: 24px;
}
.empty-state { align-items: center; display: flex; flex-direction: column; margin-top: 18px; padding: 48px 24px; text-align: center; }
.empty-state .ui-icon { color: var(--vida-primary); height: 30px; width: 30px; }
.empty-state h2 { color: var(--vida-text); font-size: var(--vida-font-size-compact-lg); margin: 14px 0 4px; }
.empty-state p { font-size: var(--vida-font-size-body-sm); margin: 0; }
.current-file { background: var(--vida-canvas); border-radius: 10px; color: var(--vida-muted); font-size: var(--vida-font-size-body-sm); padding: 10px 12px; }

/* Search */
.page-heading, .admin-title, .admin-heading { align-items: flex-end; display: flex; justify-content: space-between; }
.page-heading h1, .admin-title h1, .area-heading h1 { letter-spacing: var(--vida-letter-spacing-heading); }
.search-page-heading { align-items: flex-start; }
.search-page-heading > div { max-width: 760px; }
.search-page-heading h1 { font-size: var(--vida-font-size-display); margin: 4px 0 8px; }
.search-page-heading p:last-child { color: var(--vida-muted); margin: 0; }
.search-page-form {
  align-items: center;
  background: var(--vida-surface);
  border: 1px solid var(--vida-border);
  border-radius: var(--vida-radius-control);
  box-shadow: var(--vida-shadow-low);
  display: flex;
  gap: 12px;
  margin-top: 22px;
  padding: 7px 7px 7px 16px;
}
.search-page-form .ui-icon { color: var(--vida-muted); flex: 0 0 auto; }
.search-page-form input { border: 0; min-width: 0; outline: 0; }
.search-page-form input:focus-visible { outline: 0; }
.result-summary { color: var(--vida-muted); font-size: var(--vida-font-size-body-sm); margin: 20px 0 10px; }
.search-results { display: grid; gap: 12px; }
.search-result-card {
  align-items: center;
  background: var(--vida-surface);
  border: 1px solid var(--vida-border);
  border-radius: var(--vida-radius-card);
  display: grid;
  gap: 14px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 16px 18px;
  text-decoration: none;
  transition: box-shadow var(--vida-motion) var(--vida-ease), transform var(--vida-motion) var(--vida-ease);
}
.search-result-card:hover { box-shadow: var(--vida-shadow); transform: translateY(-2px); }
.result-content { display: grid; min-width: 0; }
.result-meta { color: var(--vida-primary); font-size: var(--vida-font-size-overline); font-weight: var(--vida-font-weight-extra-bold); text-transform: uppercase; }
.result-content strong { font-size: var(--vida-font-size-body); margin-top: 3px; }
.result-content small { color: var(--vida-muted); font-size: var(--vida-font-size-caption); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.result-arrow { color: var(--vida-muted); height: 18px; width: 18px; }

/* Areas, notices, notifications and media */
.area-heading { align-items: end; border-bottom: 1px solid var(--vida-border); display: flex; justify-content: space-between; padding: 8px 0 16px; }
.area-heading h1 { font-size: var(--vida-font-size-heading-1); margin: 0; }
.area-heading > p { color: var(--vida-muted); font-size: var(--vida-font-size-body-sm); margin: 0; max-width: 520px; text-align: right; }
.home-notices { display: grid; gap: 10px; padding-top: 22px; }
.notice-banner {
  align-items: center;
  background: var(--vida-surface);
  border: 1px solid var(--vida-border);
  border-left: 4px solid var(--vida-primary);
  border-radius: var(--vida-radius-control);
  display: grid;
  gap: 14px;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  padding: 14px 16px;
  text-decoration: none;
}
.notice-banner > span { color: var(--vida-primary-dark); font-size: var(--vida-font-size-caption); font-weight: var(--vida-font-weight-extra-bold); text-transform: uppercase; }
.notice-banner strong { display: block; font-size: var(--vida-font-size-compact-sm); }
.notice-banner p { color: var(--vida-muted); font-size: var(--vida-font-size-body-sm); margin: 0; }
.notice-banner time { color: var(--vida-muted); font-size: var(--vida-font-size-caption); }
.notice-banner.priority-important { background: var(--vida-warning-surface); border-left-color: var(--vida-warning); }
.notice-banner.priority-urgent { background: var(--vida-danger-surface); border-left-color: var(--vida-danger); }
.notice-detail { background: var(--vida-surface); border-left: var(--vida-border-width-5) var(--vida-border-style-solid) var(--vida-primary); border-radius: var(--vida-radius-card); box-shadow: var(--vida-shadow-low); margin-top: 22px; padding: clamp(24px, 5vw, 52px); }
.notice-detail.priority-important { border-left-color: var(--vida-warning); }
.notice-detail.priority-urgent { border-left-color: var(--vida-danger); }
.notice-detail h1 { font-size: var(--vida-font-size-display); margin: 0 0 20px; }
.notice-body { font-size: var(--vida-font-size-body-lg); max-width: 820px; }
.notice-meta { border-top: 1px solid var(--vida-border); color: var(--vida-muted); display: flex; font-size: var(--vida-font-size-caption); gap: 18px; margin-top: 30px; padding-top: 14px; }
.notification-list { margin-top: 22px; overflow: hidden; }
.notification-list > .empty { border: 0; border-radius: 0; margin: 0; }
.notification-item {
  align-items: center;
  border-bottom: 1px solid var(--vida-border);
  display: grid;
  gap: 14px;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  padding: 16px 18px;
}
.notification-item:last-child { border-bottom: 0; }
.notification-item.unread { background: var(--vida-primary-light); }
.notification-state { background: transparent; border-radius: var(--vida-radius-circle); height: 8px; width: 8px; }
.notification-item.unread .notification-state { background: var(--vida-primary); }
.notification-content { min-width: 0; }
.notification-meta { color: var(--vida-muted); display: flex; font-size: var(--vida-font-size-overline); gap: 12px; }
.notification-content h2 { font-size: var(--vida-font-size-compact-sm); margin: 4px 0; }
.notification-content p { color: var(--vida-muted); font-size: var(--vida-font-size-body-sm); margin: 0; }
.notification-item form { margin: 0; }
.video-player { background: var(--vida-color-black); border-radius: var(--vida-radius-card); box-shadow: var(--vida-shadow); margin-top: 18px; max-height: 70vh; width: 100%; }

/* Administration and tables */
.admin-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.panel { padding: 22px; }
.panel h2 { margin-top: 0; }
.admin-title > div > p:last-child { color: var(--vida-muted); margin: 5px 0 0; }
.admin-tabs { border-bottom: 1px solid var(--vida-border); display: flex; gap: 22px; margin-top: 22px; overflow-x: auto; }
.admin-tabs a { border-bottom: 3px solid transparent; color: var(--vida-muted); font-size: var(--vida-font-size-body); font-weight: var(--vida-font-weight-bold); padding: 12px 2px 10px; text-decoration: none; white-space: nowrap; }
.admin-tabs a:hover, .admin-tabs a.active { color: var(--vida-primary-dark); }
.admin-tabs a.active { border-bottom-color: var(--vida-primary); }
.admin-stats { border: 1px solid var(--vida-border); border-radius: var(--vida-radius-card); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.admin-stat { background: var(--vida-surface); border-right: 1px solid var(--vida-border); display: grid; gap: 8px; min-height: 112px; padding: 20px; text-decoration: none; }
.admin-stat:last-child { border-right: 0; }
.admin-stat:hover { background: var(--vida-primary-light); }
.admin-stat span { color: var(--vida-muted); font-size: var(--vida-font-size-body-sm); font-weight: var(--vida-font-weight-bold); }
.admin-stat strong { font-size: var(--vida-font-size-heading-1); line-height: 1; }
.editor-layout { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); }
.editor-form { position: sticky; top: 18px; }
.content-column { min-width: 0; }
.content-list { overflow: hidden; }
.content-list > .empty { border: 0; border-radius: 0; margin: 0; }
.content-row {
  align-items: center;
  border-bottom: 1px solid var(--vida-border);
  display: grid;
  gap: 14px;
  grid-template-columns: 86px minmax(0, 1fr) 110px auto;
  min-height: 92px;
  padding: 14px 16px;
}
.content-row:last-child { border-bottom: 0; }
.content-kind { color: var(--vida-primary-dark); font-size: var(--vida-font-size-caption); font-weight: var(--vida-font-weight-extra-bold); text-transform: uppercase; }
.content-main { min-width: 0; }
.content-main h3 { font-size: var(--vida-font-size-compact-sm); margin: 0 0 4px; }
.content-main p { color: var(--vida-muted); font-size: var(--vida-font-size-body-sm); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-date { display: grid; }
.content-date span { color: var(--vida-muted); font-size: var(--vida-font-size-overline); }
.content-date strong { font-size: var(--vida-font-size-caption); }
.edit-form { margin-top: 22px; max-width: 760px; }
.directory-status { border: 1px solid var(--vida-border); border-radius: var(--vida-radius-card); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 16px; overflow: hidden; }
.directory-status div { background: var(--vida-surface); border-right: 1px solid var(--vida-border); display: grid; padding: 16px; }
.directory-status div:last-child { border-right: 0; }
.directory-status span { color: var(--vida-muted); font-size: var(--vida-font-size-caption); }
.directory-status strong { font-size: var(--vida-font-size-body-sm); overflow-wrap: anywhere; }
.directory-sync-card {
  align-items: center;
  display: grid;
  gap: var(--vida-space-5);
  grid-template-columns: minmax(0, 1fr) auto;
  margin: var(--vida-space-5) 0;
}
.directory-sync-card h3 { margin: var(--vida-space-1) 0; }
.directory-sync-card p { color: var(--vida-muted); margin-bottom: 0; }
.directory-sync-result {
  display: grid;
  gap: var(--vida-space-3);
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.directory-sync-result div {
  background: var(--vida-surface-muted);
  border: var(--vida-border-width-1) var(--vida-border-style-solid) var(--vida-border);
  border-radius: var(--vida-radius-card);
  padding: var(--vida-space-3);
}
.directory-sync-result span, .directory-sync-result strong { display: block; }
.directory-sync-result span { color: var(--vida-muted); font-size: var(--vida-font-size-caption); }
.directory-sync-result strong { font-size: var(--vida-font-size-heading-2); }
.directory-sync-result > p { grid-column: 1 / -1; }
.access-list { margin-top: 16px; overflow: hidden; }
.access-row {
  align-items: end;
  border-bottom: 1px solid var(--vida-border);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(190px, 1.35fr) minmax(170px, .9fr) minmax(280px, 1.5fr) 72px auto;
  padding: 16px;
}
.access-row:last-child { border-bottom: 0; }
.access-row label, .access-row fieldset { margin: 0; min-width: 0; }
.access-row fieldset { border: 0; padding: 0; }
.access-row legend { color: var(--vida-muted); font-size: var(--vida-font-size-body-sm); font-weight: var(--vida-font-weight-bold); margin-bottom: 7px; padding: 0; }
.check-list { align-items: center; display: flex; flex-wrap: wrap; gap: 8px 12px; min-height: 44px; }
.check-option { align-items: center; display: inline-flex; gap: 7px; white-space: nowrap; }
.check-option input { height: 17px; margin: 0; min-height: 0; width: 17px; }
.check-option span { font-size: var(--vida-font-size-body-sm); font-weight: var(--vida-font-weight-semibold); }
.active-option { align-self: center; min-height: 44px; }
.access-actions { display: flex; gap: 8px; }
.table-wrap { max-height: 440px; overflow: auto; }
table { border-collapse: collapse; font-size: var(--vida-font-size-body); min-width: 680px; width: 100%; }
th, td { border-bottom: 1px solid var(--vida-border); padding: 14px; text-align: left; vertical-align: top; }
th { background: var(--vida-surface); color: var(--vida-muted); font-size: var(--vida-font-size-caption); font-weight: var(--vida-font-weight-bold); position: sticky; text-transform: uppercase; top: 0; }

/* Login */
.auth-body { min-height: 100vh; }
.auth-main { align-items: center; display: flex; min-height: calc(100vh - 62px); justify-content: center; padding: 28px; }
.login-shell { align-items: center; display: flex; justify-content: center; width: 100%; }
.login-card {
  background: var(--vida-surface);
  border: 1px solid var(--vida-border);
  border-radius: 24px;
  box-shadow: var(--vida-shadow);
  max-width: 430px;
  padding: 34px;
  width: 100%;
}
.login-card::before {
  align-items: center;
  background: linear-gradient(135deg, var(--vida-primary), var(--vida-accent));
  border-radius: 14px;
  color: var(--vida-on-brand);
  content: "V";
  display: flex;
  font-size: var(--vida-font-size-heading-3);
  font-weight: var(--vida-font-weight-extra-bold);
  height: 46px;
  justify-content: center;
  margin-bottom: 22px;
  width: 46px;
}
.login-card h1 { font-size: var(--vida-font-size-heading-1); margin: 4px 0 22px; }
.auth-footer {
  color: var(--vida-muted);
  display: flex;
  font-size: var(--vida-font-size-overline);
  justify-content: space-between;
  padding: 18px 28px;
}

/* Future component contracts */
.badge {
  align-items: center;
  border-radius: var(--vida-radius-pill);
  display: inline-flex;
  font-size: var(--vida-font-size-caption);
  font-weight: var(--vida-font-weight-extra-bold);
  padding: 6px 10px;
}
.badge-success { background: var(--vida-surface); border: var(--vida-border-width-1) var(--vida-border-style-solid) var(--vida-success); color: var(--vida-success-text); }
.badge-info { background: var(--vida-info-surface); color: var(--vida-info-text); }
.badge-warning { background: var(--vida-warning-strong-surface); color: var(--vida-warning-text); }
.badge-danger { background: var(--vida-danger-strong-surface); color: var(--vida-danger-strong-text); }
.badge-neutral { background: var(--vida-surface-muted); color: var(--vida-neutral-text); }
.modal-backdrop { background: var(--vida-overlay); inset: 0; position: fixed; z-index: var(--vida-z-modal-backdrop); }
.modal {
  background: var(--vida-surface);
  border-radius: var(--vida-radius-card);
  box-shadow: var(--vida-shadow);
  left: 50%;
  max-height: calc(100vh - 32px);
  max-width: min(640px, calc(100vw - 24px));
  overflow: auto;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: var(--vida-z-modal);
}
.skeleton {
  animation: skeleton var(--vida-duration-skeleton) ease-in-out infinite;
  background: linear-gradient(90deg, var(--vida-color-neutral-150) 25%, var(--vida-surface-subtle) 50%, var(--vida-color-neutral-150) 75%);
  background-size: 200% 100%;
  border-radius: 8px;
}
@keyframes skeleton { to { background-position-x: -200%; } }
@keyframes notification-pulse { 50% { transform: scale(1.2); } }
[data-notification-count].updated { animation: notification-pulse .7s ease-out; }

/* Responsive */
@media (max-width: 1320px) and (min-width: 1201px) {
  .shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; }
  .topbar, .main-content { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 1200px) {
  body.sidebar-open { overflow: hidden; }
  .app-shell { display: block; }
  .app-sidebar {
    box-shadow: var(--vida-shadow);
    left: 0;
    position: fixed;
    transform: translateX(var(--vida-motion-drawer-hidden));
    transition: transform var(--vida-motion-slow) var(--vida-ease);
    width: min(var(--vida-sidebar-width), calc(100vw - 42px));
  }
  body.sidebar-open .app-sidebar { transform: translateX(0); }
  .sidebar-close { display: inline-flex; }
  .sidebar-backdrop {
    background: var(--vida-overlay);
    border: 0;
    border-radius: 0;
    display: block;
    inset: 0;
    min-height: 0;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: fixed;
    transition: opacity var(--vida-motion) var(--vida-ease);
    z-index: var(--vida-z-backdrop);
  }
  body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
  .icon-button.mobile-menu { display: inline-flex; flex: 0 0 auto; }
  .topbar { height: auto; min-height: var(--vida-header-height); padding: 15px 18px; }
  .main-content { padding: 0 18px 112px; }
  .app-footer { display: none; }
  .bottom-nav {
    align-items: stretch;
    background: var(--vida-navigation-surface);
    border: 1px solid var(--vida-border);
    border-radius: 22px;
    bottom: 12px;
    box-shadow: var(--vida-shadow);
    display: grid;
    grid-template-columns: repeat(var(--bottom-items, 5), minmax(0, 1fr));
    left: 12px;
    overflow: hidden;
    padding: 4px;
    position: fixed;
    right: 12px;
    z-index: var(--vida-z-navigation);
  }
  .bottom-nav a, .bottom-nav button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 14px;
    color: var(--vida-neutral-text);
    display: flex;
    flex-direction: column;
    font-size: var(--vida-font-size-micro);
    font-weight: var(--vida-font-weight-bold);
    gap: 3px;
    justify-content: center;
    min-height: 58px;
    min-width: 0;
    padding: 5px 2px;
    text-decoration: none;
  }
  .bottom-nav a:hover, .bottom-nav a.active, .bottom-nav button:hover { background: var(--vida-primary-light); color: var(--vida-primary-dark); }
  .bottom-icon { position: relative; }
  .bottom-icon .ui-icon { height: 20px; width: 20px; }
  .bottom-icon strong {
    align-items: center;
    background: var(--vida-danger);
    border: var(--vida-border-width-2) var(--vida-border-style-solid) var(--vida-surface);
    border-radius: var(--vida-radius-pill);
    color: var(--vida-on-brand);
    display: flex;
    font-size: var(--vida-font-size-indicator);
    height: 17px;
    justify-content: center;
    min-width: 17px;
    padding: 0 3px;
    position: absolute;
    right: -10px;
    top: -7px;
  }
  .bottom-icon strong.hidden { display: none; }
  .shortcut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .social-layout { grid-template-columns: 1fr; }
  .social-sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; }
  .editor-layout { grid-template-columns: 1fr; }
  .editor-form { position: static; }
  .access-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .access-row fieldset { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .topbar-profile > span:last-child { display: none; }
  .topbar-profile { margin: 0; }
  .global-search kbd { display: none; }
  .welcome-strip { align-items: flex-start; flex-direction: column; gap: 18px; }
  .welcome-profile { min-width: 0; width: 100%; }
  .cards, .links, .admin-grid, .admin-stats, .directory-status, .form-row { grid-template-columns: 1fr; }
  .admin-stat, .directory-status div { border-bottom: 1px solid var(--vida-border); border-right: 0; }
  .directory-sync-card { align-items: stretch; grid-template-columns: 1fr; }
  .directory-sync-card form button { width: 100%; }
  .directory-sync-result { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-stat:last-child, .directory-status div:last-child { border-bottom: 0; }
  .social-sidebar { grid-template-columns: 1fr; }
  .page-heading, .admin-title, .admin-heading, .area-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .area-heading > p { text-align: left; }
  .content-row { align-items: start; grid-template-columns: 1fr auto; }
  .content-kind { grid-column: 1 / -1; }
  .content-date { display: none; }
}
@media (max-width: 640px) {
  .topbar { align-items: center; flex-wrap: wrap; gap: 10px; }
  .global-search { flex-basis: 100%; max-width: none; order: 3; }
  .topbar-actions { margin-left: auto; }
  .topbar-notifications { display: inline-flex; }
  .main-content { padding-left: 16px; padding-right: 16px; }
  .welcome-strip, .hero { border-radius: 20px; min-height: 0; padding: 26px; }
  .welcome-strip h1, .hero h1 { font-size: var(--vida-font-size-heading-1); }
  .welcome-strip p, .hero p { font-size: var(--vida-font-size-body-sm); }
  .section-title-row { align-items: flex-start; }
  .text-link { display: none; }
  .shortcut-grid { grid-template-columns: 1fr; }
  .shortcut-card { min-height: 88px; padding: 15px; }
  .post-header { padding: 16px 16px 8px; }
  .post-body { padding: 6px 16px 14px; }
  .post-attachment { grid-template-columns: 44px minmax(0, 1fr); }
  .post-attachment b { grid-column: 2; }
  .reaction-bar { flex-wrap: nowrap; overflow-x: auto; }
  .reaction-button { flex: 0 0 auto; }
  .search-page-form { padding-left: 12px; }
  .search-page-form button { padding-left: 14px; padding-right: 14px; }
  .result-content small { white-space: normal; }
  .result-arrow { display: none; }
  .notice-banner { align-items: start; grid-template-columns: 1fr; }
  .notice-meta { flex-direction: column; gap: 5px; }
  .notification-item { align-items: start; grid-template-columns: 8px minmax(0, 1fr); }
  .notification-item form { grid-column: 2; }
  .access-row { grid-template-columns: 1fr; }
  .access-row fieldset { grid-column: auto; }
  .access-actions { flex-wrap: wrap; }
  .login-card { padding: 26px; }
  .auth-main { padding: 16px; }
  .auth-footer { padding: 16px; }
}
@media (max-width: 380px) {
  .bottom-nav a, .bottom-nav button { font-size: var(--vida-font-size-nano); }
  .shortcut-icon, .result-icon { height: 44px; width: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}