/*
 * VARI Contemporary Institute — authoritative presentation layer.
 * Visual-only: loaded last, preserving routes, content, JS hooks and workflows.
 */
:root {
  color-scheme: light;
  --vi-canvas: #f2f3ee;
  --vi-paper: #fbfcf8;
  --vi-paper-muted: #f5f6f1;
  --vi-ink: #17211d;
  --vi-body: #46534d;
  --vi-muted: #56635d;
  --vi-line: #d9deda;
  --vi-line-strong: #bcc7c1;
  --vi-green: #145a50;
  --vi-green-hover: #0f493f;
  --vi-green-soft: #e3eeea;
  --vi-blue: #315f78;
  --vi-blue-soft: #e6eef2;
  --vi-amber: #9a642f;
  --vi-amber-soft: #f6ecdf;
  --vi-red: #9a4e48;
  --vi-red-soft: #f6e7e4;
  --vi-success: #2f705d;
  --vi-radius-sm: 4px;
  --vi-radius: 8px;
  --vi-radius-lg: 12px;
  --vi-shadow: 0 18px 42px rgba(23, 33, 29, .09);
  --vi-font: "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --vi-serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", SimSun, serif;

  /* Existing component aliases. */
  --bg: var(--vi-canvas); --void: var(--vi-canvas);
  --paper: var(--vi-paper); --card: var(--vi-paper); --panel: var(--vi-paper);
  --surface: var(--vi-paper); --surface-2: var(--vi-paper-muted);
  --soft: var(--vi-paper-muted); --ink: var(--vi-ink); --text: var(--vi-ink);
  --muted: var(--vi-muted); --line: var(--vi-line); --border: var(--vi-line);
  --blue: var(--vi-blue); --cyan: var(--vi-green); --green: var(--vi-success);
  --orange: var(--vi-amber); --amber: var(--vi-amber); --red: var(--vi-red);
}

html { background: var(--vi-canvas) !important; scroll-behavior: smooth; }
body,
body.vari-ui,
body.vari-login,
body.vari-register,
body.vari-landing,
body.subscribe-page,
body.identity-workspace,
body.publication-workspace,
body.cocreation-workspace,
body.chat-workspace {
  min-height: 100vh;
  color: var(--vi-body) !important;
  background: var(--vi-canvas) !important;
  font-family: var(--vi-font) !important;
  font-size: 15px;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
body::before, body::after, .vari-ui::before, .vari-ui::after { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
::selection { color: #fff; background: var(--vi-green); }
:focus-visible { outline: 2px solid var(--vi-green) !important; outline-offset: 3px !important; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--vi-canvas); }
::-webkit-scrollbar-thumb { border: 2px solid var(--vi-canvas); border-radius: 8px; background: #a7b3ad; }
::-webkit-scrollbar-thumb:hover { background: var(--vi-green); }

body h1, body h2, body h3, body h4, body h5, body h6,
body b, body strong, body legend, body th { color: var(--vi-ink) !important; text-shadow: none !important; }
body h1, body h2, body h3 { letter-spacing: -.025em; text-wrap: balance; }
body h1 { line-height: 1.12; }
body p, body li, body td, body label, body .lead, body .description, body .summary {
  color: var(--vi-body) !important; line-height: 1.68;
}
body small, body .muted, body .meta, body [class*="-meta"], body [class*="-hint"], body [class*="-note"] {
  color: var(--vi-muted) !important; line-height: 1.5;
}
body a { color: var(--vi-green); text-underline-offset: 3px; }
body a:hover { color: var(--vi-green-hover); }
body .eyebrow, body .kicker, body .overline, body [class*="eyebrow"] {
  color: var(--vi-muted) !important; font-family: var(--vi-font) !important;
  font-size: 11px !important; font-weight: 700; letter-spacing: .08em !important;
}

/* Institution-wide masthead. */
body.vari-ui .topbar,
body.vari-ui .project-topbar,
body.vari-ui .obs-topbar,
body.vari-ui .community-topbar,
body.vari-ui .broadcast-topbar,
body.vari-ui .studio-top,
body.vari-ui .compare-topbar,
body.vari-ui .app-topbar,
body.vari-ui > header.top,
.private-top, .entry-topbar, .global-header {
  position: sticky !important; top: 0; z-index: 100;
  min-height: 68px !important; color: var(--vi-ink) !important;
  background: rgba(251, 252, 248, .97) !important;
  border: 0 !important; border-bottom: 1px solid var(--vi-line) !important;
  box-shadow: none !important; backdrop-filter: blur(14px) saturate(115%);
}
body.vari-ui .topbar-inner, body.vari-ui .top-inner {
  width: 100%; max-width: none !important; min-height: 68px !important; padding: 0 32px !important;
}
body .brand, body .brand-lockup, body .compare-brand, body .entry-brand, .private-top > a {
  color: var(--vi-green) !important; text-decoration: none; font-weight: 850;
}
body.vari-ui .brand-mark, body.vari-ui .obs-topbar .brand > span,
body.vari-ui .studio-top .brand > span, body.vari-ui .compare-brand > span {
  width: auto !important; min-width: 74px !important; height: auto !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.vari-ui .brand-mark::after, body.vari-ui .obs-topbar .brand > span::after,
body.vari-ui .studio-top .brand > span::after, body.vari-ui .compare-brand > span::after {
  content: "VARI"; color: var(--vi-green) !important; text-shadow: none !important;
  font: 900 27px/1 var(--vi-font) !important; letter-spacing: -.045em;
}
body header nav.product-nav { gap: 10px !important; }
body .product-nav .nav-root {
  min-height: 68px !important; height: 68px !important; padding: 0 12px !important;
  border: 0 !important; border-radius: 0 !important; background: transparent !important;
  color: var(--vi-body) !important; font: 700 14px/1 var(--vi-font) !important;
  transform: none !important;
}
body .product-nav .nav-root::after { display: none !important; }
body .product-nav .nav-group.active .nav-root,
body .product-nav .nav-group.open .nav-root,
body .product-nav .nav-root:hover { color: var(--vi-green) !important; background: transparent !important; }
body .product-nav .nav-group.active .nav-root::before {
  left: 10px !important; right: 10px !important; bottom: 0 !important; height: 3px !important;
  border-radius: 3px 3px 0 0 !important; background: var(--vi-green) !important;
}
body .product-nav .nav-menu {
  top: calc(100% - 4px) !important; padding: 8px !important; border: 1px solid var(--vi-line) !important;
  border-radius: var(--vi-radius) !important; background: var(--vi-paper) !important; box-shadow: var(--vi-shadow) !important;
  backdrop-filter: none !important;
}
body .product-nav .nav-menu::before { display: none !important; }
body .product-nav .nav-menu header { border-color: var(--vi-line) !important; }
body .product-nav .nav-menu a { border-radius: var(--vi-radius-sm) !important; color: var(--vi-body) !important; }
body .product-nav .nav-menu a:hover, body .product-nav .nav-menu a.current {
  color: var(--vi-green) !important; border-color: transparent !important; background: var(--vi-green-soft) !important;
}
body .product-context-rail {
  top: 68px !important; height: 44px !important; color: var(--vi-body) !important;
  background: rgba(242, 243, 238, .96) !important; border-color: var(--vi-line) !important;
  backdrop-filter: blur(12px) !important;
}
body .product-context-inner { max-width: none !important; padding: 0 32px !important; }
body .product-context-home, body .product-context-link {
  border-radius: 0 !important; color: var(--vi-body) !important; font-family: var(--vi-font) !important;
}
body .product-context-home:hover, body .product-context-link:hover,
body .product-context-home.current, body .product-context-link.current {
  color: var(--vi-green) !important; background: transparent !important;
}
body .product-context-link.current::after, body .product-context-home.current::before {
  bottom: -5px !important; height: 2px !important; background: var(--vi-green) !important;
}

/* Controls: familiar, compact, unambiguous. */
body button, body input, body select, body textarea { font: inherit; }
body input, body select, body textarea {
  color: var(--vi-ink) !important; background: var(--vi-paper) !important;
  border: 1px solid var(--vi-line-strong) !important; border-radius: var(--vi-radius-sm) !important;
  box-shadow: none !important;
}
body input:hover, body select:hover, body textarea:hover { border-color: #8fa198 !important; }
body input:focus, body select:focus, body textarea:focus {
  border-color: var(--vi-green) !important; box-shadow: 0 0 0 3px rgba(20, 90, 80, .10) !important;
}
body input::placeholder, body textarea::placeholder { color: #59665f !important; opacity: 1; }
body button, body [role="button"], body .primary-btn, body .secondary-btn,
body .primary-action, body .secondary-action, body .outline-btn, body .solid-btn {
  border-radius: var(--vi-radius-sm) !important; box-shadow: none !important; transition: color .16s, background .16s, border-color .16s;
}
body button.primary, body .primary-btn, body .primary-action, body .solid-btn,
body .studio-btn.primary, body .identity-btn.primary, body .chat-btn.primary, body .cc-btn.primary {
  color: #fff !important; background: var(--vi-green) !important; border-color: var(--vi-green) !important;
}
body button.primary:hover, body .primary-btn:hover, body .primary-action:hover, body .solid-btn:hover,
body .studio-btn.primary:hover, body .identity-btn.primary:hover, body .chat-btn.primary:hover, body .cc-btn.primary:hover {
  color: #fff !important; background: var(--vi-green-hover) !important; border-color: var(--vi-green-hover) !important;
}
body button:not(.primary):not(.primary-btn):not(.primary-action):not(.solid-btn),
body .secondary-btn, body .secondary-action, body .outline-btn {
  color: var(--vi-ink); background: var(--vi-paper); border-color: var(--vi-line-strong);
}
body button:disabled, body input:disabled, body select:disabled, body textarea:disabled {
  cursor: not-allowed !important; opacity: .58 !important; filter: saturate(.45);
}
body .danger, body .danger-btn, body .confirm-danger { color: var(--vi-red) !important; }

/* Content surfaces use rules and spacing before containers. */
body .card, body .panel, body .workspace-card, body .module-panel,
body .detail-panel, body .table-card, body .editor-card, body .publication-card,
body .identity-card, body .cc-card, body .chat-card, body .chat-view,
body .auth-card, body .settings-card, body .admin-card, body .studio-card,
body [class*="empty"], body [class*="loading"] {
  background: var(--vi-paper) !important; border-color: var(--vi-line) !important;
  border-radius: var(--vi-radius) !important; box-shadow: none !important;
}
body table { width: 100%; border-collapse: collapse; color: var(--vi-body); font-variant-numeric: tabular-nums; }
body th { background: var(--vi-paper-muted) !important; font-size: 12px; font-weight: 700; text-align: left; }
body th, body td { border-color: var(--vi-line) !important; }
body tbody tr:hover { background: rgba(227, 238, 234, .55) !important; }
body .tag, body .chip, body [class*="-chip"], body [class*="-pill"], body [class*="badge"] {
  border-radius: var(--vi-radius-sm) !important; box-shadow: none !important;
}
body dialog { color: var(--vi-body); background: transparent; border: 0; }
body dialog::backdrop { background: rgba(23, 33, 29, .42); backdrop-filter: blur(2px); }
body dialog > form, body dialog > article, body dialog > section {
  background: var(--vi-paper) !important; border: 1px solid var(--vi-line) !important;
  border-radius: var(--vi-radius-lg) !important; box-shadow: var(--vi-shadow) !important;
}
body .form-message, body [class*="-notice"] { border-radius: var(--vi-radius-sm) !important; }

/* Account, administration, onboarding and auth support surfaces. */
.account-shell, .admin-shell, .onboarding-shell { width: min(1180px, calc(100% - 48px)) !important; margin-inline: auto !important; }
.workspace-head { padding: 54px 0 25px !important; border-bottom: 1px solid var(--vi-line); }
.workspace-head h1 { margin: 4px 0 10px !important; font-size: clamp(34px, 4vw, 56px) !important; }
.account-grid { gap: 1px !important; margin-top: 28px; background: var(--vi-line); border: 1px solid var(--vi-line); }
.account-grid > * { border: 0 !important; border-radius: 0 !important; }
.admin-shell .workspace-card { border-radius: 0 !important; border-width: 0 0 1px !important; background: transparent !important; }
.auth-shell { background: var(--vi-canvas) !important; }
.auth-aside { color: var(--vi-ink) !important; background: var(--vi-green) !important; }
.auth-aside-copy { position: relative; z-index: 2; }
.auth-aside-copy h1, .auth-aside-copy h2, .auth-aside-copy p,
.auth-aside-copy .eyebrow, .auth-aside-copy span { color: #f7faf7 !important; }
.auth-scene { opacity: .16 !important; filter: grayscale(1); }
.auth-main { background: var(--vi-canvas) !important; }
.auth-card { border-radius: var(--vi-radius-lg) !important; box-shadow: var(--vi-shadow) !important; }
.portal-tabs { padding: 3px !important; border: 1px solid var(--vi-line) !important; border-radius: var(--vi-radius-sm) !important; background: var(--vi-paper-muted) !important; }
.portal-tabs button { border: 0 !important; }
.portal-tabs button.active { color: var(--vi-green) !important; background: var(--vi-paper) !important; }
.onboarding-progress span.active { background: var(--vi-green) !important; }

@media (max-width: 1050px) {
  body header nav.product-nav { overflow-x: auto !important; justify-content: flex-start !important; scrollbar-width: none; }
  body .product-nav .nav-root { min-height: 62px !important; height: 62px !important; }
  body .product-context-rail { top: 62px !important; }
  body.vari-ui .topbar, body.vari-ui .project-topbar, body.vari-ui .obs-topbar,
  body.vari-ui .community-topbar, body.vari-ui .broadcast-topbar, body.vari-ui .studio-top,
  body.vari-ui .compare-topbar, body.vari-ui .app-topbar, body.vari-ui > header.top { min-height: 62px !important; }
}

@media (max-width: 700px) {
  body { font-size: 14px; }
  body.vari-ui .topbar-inner, body.vari-ui .top-inner { padding: 0 14px !important; }
  body .brand small, body .brand-lockup small, body .entry-institute { display: none !important; }
  body .product-context-inner { padding: 0 14px !important; }
  body .product-context-title { display: none !important; }
  .account-shell, .admin-shell, .onboarding-shell { width: min(100% - 28px, 1180px) !important; }
  .workspace-head { padding-top: 34px !important; }
  .workspace-head h1 { font-size: 34px !important; }
  .account-grid { display: grid !important; grid-template-columns: 1fr !important; }
  body dialog { width: calc(100% - 20px) !important; max-width: none !important; }
}

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

/* Small V is a contextual product control, not a decorative mascot. */
body .rai-root .rai-launcher {
  width: 52px !important; height: 52px !important; border: 1px solid var(--vi-line-strong) !important;
  border-radius: var(--vi-radius) !important; background: var(--vi-paper) !important;
  box-shadow: 0 10px 28px rgba(23,33,29,.10) !important;
}
body .rai-root .rai-orb { display: none !important; }
body .rai-root .rai-launcher::after {
  content: "小 V"; position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--vi-green); font: 800 13px/1 var(--vi-font); letter-spacing: -.02em;
}
body .rai-root .rai-ocean-bubbles, body .rai-root .rai-greeting { display: none !important; }
body .rai-root .rai-panel {
  border: 1px solid var(--vi-line) !important; border-radius: var(--vi-radius-lg) !important;
  background: var(--vi-paper) !important; box-shadow: var(--vi-shadow) !important;
}