/* =========================================================
   IDN-IT Survey - Redesign layer
   Target: trust-first internal survey UI with clear forms
   ========================================================= */

:root {
  --bg: #F7FAF5;
  --bg-2: #ECF7EF;
  --surface: #FFFFFF;
  --surface-soft: #EEF7F0;
  --surface-tint: #EAFBF2;
  --ink: #172033;
  --ink-soft: #334155;
  --muted: #5A6675;
  --line: #DCE7DD;
  --line-strong: #AFC3B4;
  --brand: #0F8B6F;
  --brand-strong: #0B6B59;
  --brand-soft: #DDF8EC;
  --brand-rgb: 15, 139, 111;
  --brand-legacy: #F59E0B;
  --orange: #B45309;
  --orange-2: #92400E;
  --orange-soft: #FEF3C7;
  --gold: #F59E0B;
  --energy: #F59E0B;
  --energy-strong: #B45309;
  --energy-soft: #FFF4C7;
  --coral: #E4572E;
  --coral-strong: #B42318;
  --coral-soft: #FFE4DE;
  --sky: #2563EB;
  --sky-soft: #DBEAFE;
  --success: #0F766E;
  --warning: #D97706;
  --danger: #DC2626;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 18px 45px rgba(15, 139, 111, .13);
  --shadow-soft: 0 10px 26px rgba(15, 23, 42, .08);
  --motion-fast: 190ms;
  --motion-med: 300ms;
  --motion-slow: 540ms;
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --admin-bg: #F5F7FA;
  --admin-line: #D7DEE8;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 11% 7%, rgba(var(--brand-rgb), .12), transparent 29%),
    radial-gradient(circle at 91% 9%, rgba(245, 158, 11, .12), transparent 31%),
    radial-gradient(circle at 75% 78%, rgba(228, 87, 46, .06), transparent 27%),
    linear-gradient(180deg, var(--bg), #FFFFFF 76%);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: 0;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(rgba(var(--brand-rgb), .032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 158, 11, .030) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 62%);
}

body.is-ready .motion-reveal {
  opacity: 0;
  transform: translateY(14px);
}

body.is-ready .motion-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity var(--motion-slow) var(--ease-enter),
    transform var(--motion-slow) var(--ease-enter);
  transition-delay: var(--reveal-delay, 0ms);
}

.js-motion body:not(.is-ready) .header .brand,
.js-motion body:not(.is-ready) .header-link,
.js-motion body:not(.is-ready) .hero-copy .eyebrow,
.js-motion body:not(.is-ready) .hero-copy h1,
.js-motion body:not(.is-ready) .hero-copy .lead,
.js-motion body:not(.is-ready) .hero-stats > span,
.js-motion body:not(.is-ready) .survey-visual,
.js-motion body:not(.is-ready) .hero-side .card {
  opacity: 0;
  pointer-events: none;
}

.js-motion body:not(.is-ready) .header .brand,
.js-motion body:not(.is-ready) .header-link {
  transform: translateY(-10px);
}

.js-motion body:not(.is-ready) .hero-copy .eyebrow,
.js-motion body:not(.is-ready) .hero-copy h1,
.js-motion body:not(.is-ready) .hero-copy .lead,
.js-motion body:not(.is-ready) .hero-stats > span,
.js-motion body:not(.is-ready) .hero-side .card {
  transform: translateY(18px);
}

.js-motion body:not(.is-ready) .survey-visual {
  transform: translateX(24px) translateY(8px);
}

.js-motion.js-motion-fallback body:not(.is-ready) .header .brand,
.js-motion.js-motion-fallback body:not(.is-ready) .header-link,
.js-motion.js-motion-fallback body:not(.is-ready) .hero-copy .eyebrow,
.js-motion.js-motion-fallback body:not(.is-ready) .hero-copy h1,
.js-motion.js-motion-fallback body:not(.is-ready) .hero-copy .lead,
.js-motion.js-motion-fallback body:not(.is-ready) .hero-stats > span,
.js-motion.js-motion-fallback body:not(.is-ready) .survey-visual,
.js-motion.js-motion-fallback body:not(.is-ready) .hero-side .card {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.js-motion body.is-ready .header .brand {
  animation: load-header-drop 640ms var(--ease-enter) backwards;
}

.js-motion body.is-ready .header-link {
  animation: load-header-drop 640ms var(--ease-enter) 90ms backwards;
}

.js-motion body.is-ready .hero-copy .eyebrow {
  animation: load-fade-up 620ms var(--ease-enter) 100ms backwards;
}

.js-motion body.is-ready .hero-copy h1 {
  animation: load-fade-up 760ms var(--ease-enter) 180ms backwards;
}

.js-motion body.is-ready .hero-copy .lead {
  animation: load-fade-up 760ms var(--ease-enter) 280ms backwards;
}

.js-motion body.is-ready .hero-stats > span {
  animation: load-fade-up 680ms var(--ease-enter) backwards;
}

.js-motion body.is-ready .hero-stats > span:nth-child(1) {
  animation-delay: 360ms;
}

.js-motion body.is-ready .hero-stats > span:nth-child(2) {
  animation-delay: 430ms;
}

.js-motion body.is-ready .hero-stats > span:nth-child(3) {
  animation-delay: 500ms;
}

.js-motion body.is-ready .survey-visual {
  animation: load-slide-right 820ms var(--ease-enter) 280ms backwards;
}

.js-motion body.is-ready .hero-side .card {
  animation: load-fade-up 800ms var(--ease-enter) 460ms backwards;
}

.js-motion body.is-ready .hero-side .card .btn-primary .app-icon {
  animation: cta-arrow-nudge 860ms var(--ease-enter) 1160ms;
}

.js-motion body.admin:not(.is-ready) .login-card,
.js-motion body.admin:not(.is-ready) .login-card .brand,
.js-motion body.admin:not(.is-ready) .login-card h1,
.js-motion body.admin:not(.is-ready) .login-card .sub,
.js-motion body.admin:not(.is-ready) .login-card .flash,
.js-motion body.admin:not(.is-ready) .login-card .field,
.js-motion body.admin:not(.is-ready) .login-card .btn,
.js-motion body.admin:not(.is-ready) .login-card .login-back,
.js-motion body.admin:not(.is-ready) .sidebar,
.js-motion body.admin:not(.is-ready) .admin-main > h1,
.js-motion body.admin:not(.is-ready) .admin-main > .sub,
.js-motion body.admin:not(.is-ready) .dashboard-filter-bar,
.js-motion body.admin:not(.is-ready) .admin-main > .flash,
.js-motion body.admin:not(.is-ready) .stat-grid > .stat,
.js-motion body.admin:not(.is-ready) .panel-grid > .panel,
.js-motion body.admin:not(.is-ready) .admin-main > .panel,
.js-motion body.admin:not(.is-ready) .admin-main > p,
.js-motion body.admin:not(.is-ready) .admin-footer {
  opacity: 0;
  pointer-events: none;
}

.js-motion body.admin:not(.is-ready) .login-card,
.js-motion body.admin:not(.is-ready) .login-card .brand,
.js-motion body.admin:not(.is-ready) .login-card h1,
.js-motion body.admin:not(.is-ready) .login-card .sub,
.js-motion body.admin:not(.is-ready) .login-card .flash,
.js-motion body.admin:not(.is-ready) .login-card .field,
.js-motion body.admin:not(.is-ready) .login-card .btn,
.js-motion body.admin:not(.is-ready) .login-card .login-back,
.js-motion body.admin:not(.is-ready) .admin-main > h1,
.js-motion body.admin:not(.is-ready) .admin-main > .sub,
.js-motion body.admin:not(.is-ready) .dashboard-filter-bar,
.js-motion body.admin:not(.is-ready) .admin-main > .flash,
.js-motion body.admin:not(.is-ready) .stat-grid > .stat,
.js-motion body.admin:not(.is-ready) .panel-grid > .panel,
.js-motion body.admin:not(.is-ready) .admin-main > .panel,
.js-motion body.admin:not(.is-ready) .admin-main > p,
.js-motion body.admin:not(.is-ready) .admin-footer {
  transform: translateY(20px);
}

.js-motion body.admin:not(.is-ready) .sidebar {
  transform: translateX(-18px);
}

.js-motion body.admin:not(.is-ready) .admin-shell,
.js-motion body.admin:not(.is-ready) .admin-main,
.js-motion body.admin:not(.is-ready) .panel-grid,
.js-motion body.admin:not(.is-ready) .stat-grid,
.js-motion body.admin:not(.is-ready) .login-shell {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.js-motion.js-motion-fallback body.admin:not(.is-ready) .login-card,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .login-card .brand,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .login-card h1,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .login-card .sub,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .login-card .flash,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .login-card .field,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .login-card .btn,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .login-card .login-back,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .sidebar,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .admin-main > h1,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .admin-main > .sub,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .dashboard-filter-bar,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .admin-main > .flash,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .stat-grid > .stat,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .panel-grid > .panel,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .admin-main > .panel,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .admin-main > p,
.js-motion.js-motion-fallback body.admin:not(.is-ready) .admin-footer {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.js-motion body.admin.is-ready .login-card {
  animation: load-scale-up 780ms var(--ease-enter) 20ms backwards;
}

.js-motion body.admin.is-ready .login-card .brand {
  animation: load-fade-up 680ms var(--ease-enter) 90ms backwards;
}

.js-motion body.admin.is-ready .login-card h1 {
  animation: load-fade-up 700ms var(--ease-enter) 150ms backwards;
}

.js-motion body.admin.is-ready .login-card .sub {
  animation: load-fade-up 700ms var(--ease-enter) 210ms backwards;
}

.js-motion body.admin.is-ready .login-card .flash {
  animation: load-fade-up 680ms var(--ease-enter) 240ms backwards;
}

.js-motion body.admin.is-ready .login-card .field:nth-of-type(1) {
  animation: load-fade-up 700ms var(--ease-enter) 280ms backwards;
}

.js-motion body.admin.is-ready .login-card .field:nth-of-type(2) {
  animation: load-fade-up 700ms var(--ease-enter) 350ms backwards;
}

.js-motion body.admin.is-ready .login-card .btn {
  animation: load-fade-up 700ms var(--ease-enter) 440ms backwards;
}

.js-motion body.admin.is-ready .login-card .login-back {
  animation: load-fade-up 700ms var(--ease-enter) 540ms backwards;
}

.js-motion body.admin.is-ready .login-card .btn-primary .app-icon {
  animation: cta-arrow-nudge 860ms var(--ease-enter) 1040ms;
}

.js-motion body.admin.is-ready .sidebar {
  animation: load-slide-left 720ms var(--ease-enter) 120ms backwards;
}

.js-motion body.admin.is-ready .admin-main > h1 {
  animation: load-fade-up 640ms var(--ease-enter) 160ms backwards;
}

.js-motion body.admin.is-ready .admin-main > .sub {
  animation: load-fade-up 640ms var(--ease-enter) 230ms backwards;
}

.js-motion body.admin.is-ready .dashboard-filter-bar {
  animation: load-fade-up 640ms var(--ease-enter) 275ms backwards;
}

.js-motion body.admin.is-ready .admin-main > .flash {
  animation: load-fade-up 640ms var(--ease-enter) 280ms backwards;
}

.js-motion body.admin.is-ready .stat-grid > .stat {
  animation: load-fade-up 660ms var(--ease-enter) backwards;
}

.js-motion body.admin.is-ready .stat-grid > .stat:nth-child(1) {
  animation-delay: 320ms;
}

.js-motion body.admin.is-ready .stat-grid > .stat:nth-child(2) {
  animation-delay: 390ms;
}

.js-motion body.admin.is-ready .stat-grid > .stat:nth-child(3) {
  animation-delay: 460ms;
}

.js-motion body.admin.is-ready .stat-grid > .stat:nth-child(4) {
  animation-delay: 530ms;
}

.js-motion body.admin.is-ready .stat-grid > .stat:nth-child(5) {
  animation-delay: 600ms;
}

.js-motion body.admin.is-ready .stat-grid > .stat:nth-child(n+6) {
  animation-delay: 670ms;
}

.js-motion body.admin.is-ready .stat-grid > .stat.stat-alert {
  animation: load-fade-up 660ms var(--ease-enter) 600ms backwards;
}

.js-motion body.admin.is-ready .panel-grid > .panel,
.js-motion body.admin.is-ready .admin-main > .panel,
.js-motion body.admin.is-ready .admin-main > p {
  animation: load-fade-up 700ms var(--ease-enter) backwards;
}

.js-motion body.admin.is-ready .panel-grid > .panel:nth-child(1) {
  animation-delay: 620ms;
}

.js-motion body.admin.is-ready .panel-grid > .panel:nth-child(2) {
  animation-delay: 700ms;
}

.js-motion body.admin.is-ready .admin-main > .panel:nth-child(3) {
  animation-delay: 360ms;
}

.js-motion body.admin.is-ready .admin-main > .panel:nth-child(4) {
  animation-delay: 460ms;
}

.js-motion body.admin.is-ready .admin-main > .panel:nth-child(5) {
  animation-delay: 760ms;
}

.js-motion body.admin.is-ready .admin-main > .panel:nth-child(6) {
  animation-delay: 860ms;
}

.js-motion body.admin.is-ready .admin-main > .panel:nth-child(n+7),
.js-motion body.admin.is-ready .admin-main > p {
  animation-delay: 960ms;
}

.js-motion body.admin.is-ready .admin-footer {
  animation: load-fade-up 700ms var(--ease-enter) 980ms backwards;
}

a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

img { border-radius: inherit; }

.app-icon {
  display: inline-block;
  width: 1.08em;
  height: 1.08em;
  flex: 0 0 auto;
  color: currentColor;
  vertical-align: -0.16em;
}

.container {
  width: min(100% - 40px, 1180px);
  max-width: none;
  padding: 0;
}

/* Header */
.header {
  background: rgba(245, 247, 250, .88);
  border-bottom: 1px solid rgba(215, 222, 232, .88);
  backdrop-filter: blur(18px) saturate(140%);
  transition: background-color var(--motion-med) var(--ease-standard), box-shadow var(--motion-med) var(--ease-standard), border-color var(--motion-med) var(--ease-standard);
}

.header.is-scrolled {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: rgba(174, 188, 204, .72);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.header-inner {
  width: min(100% - 40px, 1180px);
  max-width: none;
  min-height: 72px;
  padding: 0;
  gap: 18px;
}

.brand {
  min-width: 0;
  color: var(--ink);
}

.brand-mark {
  position: relative;
  width: 48px;
  height: 44px;
  border-radius: 6px;
  background: #252525;
  color: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .20);
  transition: transform var(--motion-med) var(--ease-standard), box-shadow var(--motion-med) var(--ease-standard);
}

.brand-mark .brand-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.brand-mark .app-icon,
.brand-mark i {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
  line-height: 1;
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
}

.brand-mark span {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  color: var(--brand-legacy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.brand-mark-sm {
  width: 39px;
  height: 36px;
  box-shadow: none;
}

.brand-mark-sm .app-icon {
  width: 29px;
  height: 29px;
}

.brand:hover .brand-mark {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, .20);
}

.brand-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}

.brand-sub {
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--muted);
  text-transform: uppercase;
}

.header-link,
.admin-userbar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-weight: 700;
  white-space: nowrap;
  transition:
    color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.header-link:hover,
.admin-userbar a:hover {
  color: var(--brand-strong);
  background: rgba(var(--brand-rgb), .09);
  border-color: rgba(var(--brand-rgb), .20);
}

.header-link:active,
.admin-userbar a:active,
.btn:active {
  transform: translateY(1px);
}

.header-link:focus-visible,
.brand:focus-visible,
.btn:focus-visible,
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid rgba(var(--brand-rgb), .28);
  outline-offset: 3px;
}

/* Public landing */
.hero {
  min-height: auto;
  grid-template-columns: minmax(0, .96fr) minmax(420px, .82fr);
  gap: clamp(34px, 4.8vw, 68px);
  padding: clamp(30px, 4.2vw, 54px) 0 clamp(42px, 5.6vw, 72px);
  align-items: start;
}

.hero-copy {
  align-self: start;
  padding-top: clamp(8px, 2.2vw, 28px);
}

.hero-side {
  display: grid;
  gap: 14px;
  align-items: start;
}

.index-main .hero-side .card {
  order: 2;
}

.index-main .survey-visual {
  order: 1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, var(--brand-soft), var(--energy-soft));
  color: var(--brand-strong);
  border: 1px solid rgba(var(--brand-rgb), .18);
  border-radius: 999px;
  padding: 7px 12px;
  letter-spacing: .13em;
}

.hero h1 {
  max-width: 12.2ch;
  margin: 16px 0 14px;
  color: var(--ink);
  font-size: clamp(40px, 4.35vw, 62px);
  font-weight: 800;
  line-height: 1.01;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.hero h1 .accent {
  color: var(--brand-strong);
}

.hero p.lead {
  max-width: 510px;
  margin-bottom: 20px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap: 10px;
  margin-top: 14px;
  color: var(--ink-soft);
}

.hero-stats > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  font-weight: 700;
}

.hero-stats .dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--brand);
}

.survey-visual {
  position: relative;
  align-self: stretch;
  min-height: 160px;
  max-height: 210px;
  border-radius: calc(var(--radius) + 8px);
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, .10);
  background:
    linear-gradient(145deg, rgba(23, 32, 51, .94), rgba(15, 139, 111, .80) 58%, rgba(245, 158, 11, .52)),
    url("../it-survey-hero.svg") center / cover no-repeat;
  box-shadow: var(--shadow);
  transform: translateZ(0);
  transition: transform var(--motion-slow) var(--ease-standard), box-shadow var(--motion-slow) var(--ease-standard);
}

.survey-visual:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 56px rgba(var(--brand-rgb), .17);
}

.survey-visual + .card {
  margin-top: 0;
  margin-inline: 0;
  z-index: 2;
}

.survey-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0 48%, rgba(17, 24, 39, .78) 100%),
    radial-gradient(circle at 72% 20%, rgba(245, 158, 11, .34), transparent 30%),
    radial-gradient(circle at 21% 14%, rgba(var(--brand-rgb), .32), transparent 34%);
}

.visual-panel {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  display: block;
  gap: 18px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .13);
  color: #FFFFFF;
  backdrop-filter: blur(18px) saturate(150%);
}

.visual-panel strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  letter-spacing: -.01em;
}

.visual-panel span {
  color: rgba(255, 255, 255, .74);
  font-size: 12px;
  line-height: 1.5;
  display: block;
  max-width: 46ch;
}

/* Cards and forms */
.card,
.panel,
.login-card,
.stat {
  border: 1px solid rgba(216, 224, 234, .90);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--motion-med) var(--ease-standard),
    border-color var(--motion-med) var(--ease-standard),
    box-shadow var(--motion-med) var(--ease-standard),
    background-color var(--motion-med) var(--ease-standard);
}

.card {
  position: relative;
  padding: clamp(22px, 3vw, 32px);
}

.card:hover,
.login-card:hover {
  border-color: rgba(var(--brand-rgb), .28);
  box-shadow: 0 16px 38px rgba(15, 23, 42, .10);
}

.card h2,
.login-card h1,
.admin-main h1 {
  color: var(--ink);
  letter-spacing: -.025em;
}

.card .muted,
.login-card .sub,
.admin-main .sub {
  color: var(--muted);
  line-height: 1.6;
}

.field {
  margin-bottom: 17px;
}

.field label,
.field-label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}

.field input,
.field select,
.field textarea,
.toolbar input,
.toolbar select,
.form-control {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55);
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.field select,
.toolbar select,
select.form-control {
  appearance: none;
  cursor: pointer;
  padding-right: 44px;
  background-color: #FFFFFF;
  background-image:
    linear-gradient(135deg, rgba(var(--brand-rgb), .07), rgba(255, 255, 255, 0) 44%),
    url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%230E7490' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: inset 0 0, right 14px center;
  background-size: auto, 18px 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    0 8px 18px rgba(15, 61, 84, .06);
  transform: translateY(0);
}

.field select:hover,
.toolbar select:hover,
select.form-control:hover {
  border-color: rgba(var(--brand-rgb), .42);
  background-color: #FBFEFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 12px 24px rgba(15, 61, 84, .10);
  transform: translateY(-1px);
}

.field select:active,
.toolbar select:active,
select.form-control:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, .08),
    0 6px 14px rgba(15, 61, 84, .08);
}

.field select:disabled,
.toolbar select:disabled,
select.form-control:disabled {
  cursor: not-allowed;
  color: #8A988F;
  border-color: rgba(216, 224, 234, .78);
  background-color: #F4F7FA;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
  opacity: .86;
  transform: none;
}

.field select.is-refreshing,
.toolbar select.is-refreshing {
  animation: select-refresh 420ms var(--ease-enter);
}

.select-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ui-select {
  position: relative;
  width: 100%;
  min-width: 0;
  z-index: 1;
}

.toolbar .ui-select {
  width: auto;
  min-width: 196px;
}

.toolbar .ui-select[data-source-name="entity"] {
  min-width: 148px;
}

.toolbar .ui-select[data-source-name="department"] {
  min-width: 220px;
}

.ui-select-trigger {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 42px 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, rgba(var(--brand-rgb), .07), rgba(255, 255, 255, 0) 44%),
    #FFFFFF;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    0 8px 18px rgba(15, 61, 84, .06);
  transform: translateY(0) scale(1);
  transition:
    border-color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-med) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard);
}

.ui-select-trigger:hover {
  border-color: rgba(var(--brand-rgb), .42);
  background-color: #FBFEFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 12px 24px rgba(15, 61, 84, .10);
  transform: translateY(-1px);
}

.ui-select-trigger:focus-visible {
  outline: none;
  border-color: var(--brand);
  box-shadow:
    0 0 0 4px rgba(var(--brand-rgb), .16),
    0 12px 24px rgba(15, 61, 84, .10);
}

.ui-select.is-open {
  z-index: 30;
}

.ui-select.is-open .ui-select-trigger {
  border-color: rgba(var(--brand-rgb), .56);
  background-color: #F8FCFF;
  box-shadow:
    0 0 0 4px rgba(var(--brand-rgb), .14),
    0 16px 32px rgba(15, 61, 84, .14);
  transform: translateY(-1px) scale(1.005);
}

.ui-select.is-refreshing .ui-select-trigger {
  animation: select-refresh 360ms var(--ease-enter);
}

.ui-select.is-disabled .ui-select-trigger,
.ui-select-trigger:disabled {
  cursor: not-allowed;
  color: #8A988F;
  border-color: rgba(216, 224, 234, .78);
  background: #F4F7FA;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
  opacity: .86;
  transform: none;
}

.ui-select.is-invalid .ui-select-trigger {
  border-color: rgba(220, 38, 38, .54);
  box-shadow:
    0 0 0 4px rgba(220, 38, 38, .12),
    0 12px 24px rgba(127, 29, 29, .08);
}

.ui-select.is-invalid .ui-select-icon {
  color: var(--danger);
}

.ui-select-value {
  min-width: 0;
  overflow: hidden;
  color: currentColor;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-select-icon {
  position: absolute;
  right: 15px;
  top: 50%;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  color: #64748B;
  transform: translateY(-50%) rotate(0deg);
  transition:
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-med) var(--ease-enter);
}

.ui-select-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.ui-select-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ui-select-trigger:hover .ui-select-icon,
.ui-select.is-open .ui-select-icon {
  color: var(--brand);
}

.ui-select.is-open .ui-select-icon {
  transform: translateY(-50%) rotate(180deg);
}

.ui-select-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  max-height: min(300px, 46vh);
  padding: 6px;
  overflow: auto;
  border: 1px solid rgba(var(--brand-rgb), .18);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 252, 255, .98));
  box-shadow:
    0 22px 46px rgba(15, 61, 84, .18),
    inset 0 1px 0 rgba(255, 255, 255, .78);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(.976);
  transform-origin: top center;
  transition:
    opacity 240ms var(--ease-enter),
    transform 260ms var(--ease-enter);
}

.ui-select.is-open .ui-select-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.ui-select-option {
  display: flex;
  width: 100%;
  min-height: 38px;
  align-items: center;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 220ms var(--ease-enter),
    transform 220ms var(--ease-enter),
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
  transition-delay: calc(min(var(--option-index), 8) * 18ms);
}

.ui-select.is-open .ui-select-option {
  opacity: 1;
  transform: translateY(0);
}

.ui-select-option:hover,
.ui-select-option:focus-visible {
  outline: none;
  background: rgba(var(--brand-rgb), .09);
  color: var(--brand-strong);
}

.ui-select-option[aria-selected="true"] {
  background:
    linear-gradient(135deg, rgba(var(--brand-rgb), .14), rgba(15, 118, 110, .08));
  color: var(--brand-strong);
  font-weight: 800;
}

.ui-select-option[aria-selected="true"]::after {
  content: "";
  width: 7px;
  height: 11px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.field input::placeholder,
.field textarea::placeholder,
.toolbar input::placeholder,
.form-control::placeholder {
  color: #8A988F;
  opacity: 1;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.toolbar input:focus,
.toolbar select:focus,
.form-control:focus {
  border-color: var(--brand);
  background: #fff;
  box-shadow:
    0 0 0 4px rgba(var(--brand-rgb), .16),
    0 12px 24px rgba(15, 61, 84, .10);
}

.form-help {
  margin: -8px 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.language-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin: 18px 0;
  padding: 12px;
  border: 1px solid rgba(var(--brand-rgb), .14);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(var(--brand-rgb), .06), rgba(255, 255, 255, .84));
}

.language-help {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.language-switch {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(48px, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65);
}

.language-switch label {
  position: relative;
  display: block;
  cursor: pointer;
}

.language-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.language-switch span {
  display: flex;
  min-height: 32px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--radius-sm) - 4px);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.language-switch input:checked + span {
  background: var(--brand);
  color: #FFFFFF;
  box-shadow: 0 8px 16px rgba(var(--brand-rgb), .18);
}

.language-switch input:focus-visible + span {
  outline: 3px solid rgba(var(--brand-rgb), .26);
  outline-offset: 2px;
}

.row {
  gap: 16px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 42px;
  border-radius: var(--radius-sm);
  font-weight: 800;
  white-space: nowrap;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn[disabled] {
  cursor: wait;
  opacity: .78;
  transform: none;
}

.btn[data-loading="1"]::after {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin var(--motion-slow) linear infinite;
}

.btn-primary {
  background: var(--brand);
  color: #FFFFFF;
  box-shadow: 0 12px 24px rgba(var(--brand-rgb), .24);
}

.btn-primary:hover {
  background: var(--brand-strong);
  box-shadow: 0 16px 30px rgba(var(--brand-rgb), .28);
}

.btn-orange {
  background: var(--energy-strong);
  color: #FFFFFF;
  box-shadow: 0 12px 24px rgba(180, 83, 9, .23);
}

.btn-orange:hover {
  background: var(--orange-2);
}

.btn-outline {
  border: 1px solid var(--line-strong);
  background: #FFFFFF;
  color: var(--ink);
}

.btn-outline:hover {
  border-color: var(--ink);
  background: #fff;
}

.btn-ghost {
  color: var(--ink-soft);
}

.btn-ghost:hover {
  background: rgba(23, 32, 51, .06);
  color: var(--ink);
}

.btn-sm {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 13px;
}

/* Survey */
.survey-main {
  padding: 34px 0 72px;
  background:
    radial-gradient(circle at 0% 16%, rgba(var(--brand-rgb), .08), transparent 26%),
    radial-gradient(circle at 100% 22%, rgba(245, 158, 11, .10), transparent 24%);
}

.survey-wrap {
  width: min(100%, 820px);
  margin: 0 auto;
}

.progress-wrap {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  margin-bottom: 14px;
  color: var(--brand-strong);
  font-weight: 800;
}

.progress-bar {
  height: 8px;
  background: #E8EFE8;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
  overflow: hidden;
}

.progress-bar > i {
  position: relative;
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), #22C55E 48%, var(--energy));
  transition: width var(--motion-slow) var(--ease-enter);
}

.progress-bar > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
  transform: translateX(-100%);
  animation: progress-sheen 2.8s var(--ease-standard) infinite;
}

.cat-head {
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 18px;
  border: 1px solid rgba(var(--brand-rgb), .14);
  border-radius: var(--radius);
  background:
    linear-gradient(120deg, rgba(var(--brand-rgb), .075), rgba(245, 158, 11, .075)),
    #FFFFFF;
}

.cat-icon {
  flex: 0 0 auto;
  background: linear-gradient(145deg, var(--brand-strong), var(--brand));
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 24px rgba(var(--brand-rgb), .18);
}

.cat-code {
  color: var(--energy-strong);
}

.cat-name {
  margin-top: 3px;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.08;
  text-transform: none;
}

.cat-desc {
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.q {
  padding: 22px 0;
  border-top: 1px solid var(--line);
  transition: background-color var(--motion-med) var(--ease-standard), border-color var(--motion-med) var(--ease-standard);
}

.q:hover {
  border-top-color: rgba(var(--brand-rgb), .24);
  background: linear-gradient(90deg, rgba(var(--brand-rgb), .035), transparent 62%);
}

.q:first-of-type {
  padding-top: 8px;
}

.q-head {
  gap: 12px;
  margin-bottom: 14px;
}

.q-num {
  min-width: 46px;
  border-radius: 999px;
  background: var(--sky-soft);
  color: #1D4ED8;
  text-align: center;
  letter-spacing: .08em;
}

.q-text {
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.55;
}

.q-text .req {
  color: var(--danger);
}

.star-row {
  gap: 12px;
}

.stars label {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: #8EA19A;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.stars label .app-icon {
  width: 22px;
  height: 22px;
  opacity: .42;
  transform: scale(.96);
  transition: opacity var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}

.stars label[data-active="1"] {
  border-color: rgba(245, 158, 11, .44);
  background: var(--energy-soft);
  color: var(--warning);
}

.stars label[data-active="1"] .app-icon {
  opacity: 1;
  transform: scale(1);
}

.stars label:hover {
  border-color: rgba(var(--brand-rgb), .44);
  background: var(--surface-tint);
  transform: translateY(-1px) scale(1.03);
}

.stars label.is-focus,
.option-item input:focus-visible + .option-box,
.yesno-item input:focus-visible + .yesno-box,
.choice-item input:focus-visible + .choice-box {
  outline: 3px solid rgba(var(--brand-rgb), .24);
  outline-offset: 3px;
}

.star-row .picked {
  min-width: 92px;
  color: var(--ink-soft);
  font-weight: 800;
}

.option-grid,
.yesno-grid,
.choice-list {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.option-grid {
  grid-template-columns: repeat(auto-fit, minmax(56px, max-content));
  align-items: start;
}

.yesno-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.choice-list {
  grid-template-columns: 1fr;
}

.option-item,
.choice-item,
.yesno-item {
  cursor: pointer;
}

.option-item input,
.choice-item input,
.yesno-item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.option-box,
.yesno-box,
.choice-box {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: var(--ink);
  font-weight: 800;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard);
}

.option-item:hover .option-box,
.yesno-item:hover .yesno-box,
.choice-item:hover .choice-box {
  border-color: rgba(var(--brand-rgb), .34);
  background: var(--surface-tint);
  transform: translateY(-1px);
}

.option-box {
  min-width: 48px;
  padding: 10px 14px;
  text-align: center;
}

.yesno-box {
  padding: 14px;
  text-align: center;
}

.choice-box {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 13px 14px;
}

.choice-box::before {
  content: "";
  width: 10px;
  height: 10px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
}

.option-item input:checked + .option-box,
.yesno-item input:checked + .yesno-box,
.choice-item input:checked + .choice-box {
  border-color: var(--brand);
  background: linear-gradient(135deg, var(--brand-strong), var(--brand));
  color: #FFFFFF;
  box-shadow: 0 10px 20px rgba(var(--brand-rgb), .20);
}

.choice-item input:checked + .choice-box::before {
  border-color: #FFFFFF;
  background: #FFFFFF;
}

.option-label {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  text-align: center;
}

.textarea-control {
  width: 100%;
  min-height: 112px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: var(--ink);
  font: inherit;
  resize: vertical;
}

.textarea-control:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(var(--brand-rgb), .16);
}

.actions-row {
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.q.is-missing,
.form-attention .q:has(.stars[data-required="1"]) {
  animation: attention-pulse var(--motion-slow) var(--ease-standard) 1;
}

/* Thank you */
.thanks {
  min-height: calc(100dvh - 154px);
}

.thanks-panel {
  max-width: 620px;
  margin: 0 auto;
  padding: 40px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow);
}

.thanks .mark {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: 0 auto 18px;
  background: linear-gradient(145deg, var(--brand-strong), var(--brand));
  color: #FFFFFF;
  border-radius: var(--radius);
  box-shadow: 0 18px 34px rgba(var(--brand-rgb), .20);
}

.thanks .mark .app-icon {
  width: 42px;
  height: 42px;
}

.thanks h1 {
  color: var(--ink);
  letter-spacing: -.035em;
}

.thanks p {
  color: var(--ink-soft);
  line-height: 1.7;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .76);
}

.site-footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  min-height: 82px;
}

.site-footer-brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.footer-brand-title {
  color: var(--ink);
  font-weight: 800;
}

.footer-brand-sub {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.site-footer-copy {
  color: var(--muted);
  font-size: 13px;
}

/* Admin */
body.admin {
  background: var(--admin-bg);
  background-image: none;
}

body.admin::before {
  display: none;
}

.admin .header {
  background: rgba(255, 255, 255, .90);
  border-bottom-color: var(--admin-line);
}

.admin-userbar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.admin-user {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.admin-user strong {
  color: var(--ink);
}

.admin-shell {
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: calc(100vh - 72px);
}

.sidebar {
  position: sticky;
  top: 72px;
  align-self: start;
  min-height: calc(100vh - 72px);
  padding: 22px 14px;
  background: #111827;
  color: #DDE6F3;
}

.sidebar .nav-title {
  color: #93A4B8;
}

.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: #DDE6F3;
}

.sidebar a:hover {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .08);
}

.sidebar a.active {
  background: var(--brand);
  color: #FFFFFF;
}

.sidebar .app-icon,
.admin-userbar .app-icon,
.header-link .app-icon {
  width: 17px;
  height: 17px;
}

.admin-main {
  min-width: 0;
  padding: 32px;
}

.admin-main h1 {
  margin-bottom: 4px;
  font-size: 30px;
}

.admin-main .sub {
  margin-bottom: 24px;
}

.dashboard-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: -6px 0 20px;
  padding: 14px 16px;
  border: 1px solid rgba(216, 224, 234, .86);
  border-radius: var(--radius-md);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(248, 252, 255, .86));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 10px 24px rgba(15, 23, 42, .045);
}

.dashboard-filter-summary {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.dashboard-filter-summary strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.dashboard-filter-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.stat-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.stat {
  border-color: var(--admin-line);
  background: #fff;
  box-shadow: none;
}

.stat:hover,
.panel:hover {
  border-color: rgba(var(--brand-rgb), .24);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
  transform: translateY(-1px);
}

.stat .label {
  color: var(--muted);
  letter-spacing: .08em;
}

.stat .value {
  color: var(--ink);
}

.stat .value-accent {
  color: var(--brand-strong);
}

.stat .unit {
  color: var(--muted);
  font-size: 16px;
}

.stat .delta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--success);
}

.stat .delta .app-icon {
  width: 15px;
  height: 15px;
}

.stat-alert {
  position: relative;
  overflow: hidden;
  border-color: rgba(220, 38, 38, .18);
  background:
    linear-gradient(135deg, rgba(254, 242, 242, .82), #FFFFFF 60%);
}

.stat-alert::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--danger), rgba(220, 38, 38, .28));
  opacity: .72;
}

.stat-alert .value,
.stat-alert .delta {
  color: var(--danger);
}

.stat-alert.has-alert {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 12px 28px rgba(220, 38, 38, .08);
}

.panel {
  border-color: var(--admin-line);
  background: #fff;
  box-shadow: none;
}

.panel h3 {
  color: var(--ink);
  letter-spacing: -.01em;
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.panel-head h3 {
  margin: 0 0 4px;
}

.panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.range-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.dashboard-filter {
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.dashboard-filter-bar .dashboard-filter {
  margin-left: auto;
}

.dashboard-filter-field {
  display: grid;
  gap: 6px;
}

.range-filter label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.range-filter select {
  min-height: 38px;
  min-width: 124px;
  border: 1px solid var(--admin-line);
  border-radius: var(--radius-sm);
  background: #FFFFFF;
  color: var(--ink);
  font-weight: 700;
}

.dashboard-filter .ui-select,
.dashboard-filter select {
  min-width: 132px;
}

.dashboard-filter .ui-select[data-source-name="entity"],
.dashboard-filter select[name="entity"] {
  min-width: 158px;
}

.dashboard-filter-bar .ui-select-trigger {
  min-height: 40px;
  padding: 8px 38px 8px 13px;
}

.chart-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dashboard-chart-grid {
  align-items: stretch;
}

.dashboard-chart-grid .chart-panel {
  min-height: 390px;
}

.panel-head-simple {
  min-height: 57px;
  margin-bottom: 16px;
}

.chart-canvas {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
}

.chart-empty-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px dashed rgba(var(--brand-rgb), .28);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .82);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.chart-canvas-line {
  height: 280px;
}

.chart-canvas-bar {
  height: 280px;
}

.chart-canvas canvas {
  width: 100% !important;
  height: 100% !important;
}

.panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  gap: 18px;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.table {
  min-width: 100%;
}

.table th,
.table td {
  border-bottom-color: #EDF2EE;
  vertical-align: middle;
}

.table th {
  background: #f8fafc;
  color: var(--muted);
  letter-spacing: .10em;
}

.table tr:hover td {
  background: #F6FBF7;
}

.table tbody tr {
  transition: background-color var(--motion-fast) var(--ease-standard);
}

.table .row-low-rating td,
.table tr.row-low-rating:hover td {
  background: #FFF7F7;
}

.low-rating-panel {
  border-color: rgba(220, 38, 38, .14);
  background:
    linear-gradient(135deg, rgba(255, 247, 247, .62), #FFFFFF 36%);
}

.low-rating-panel .table th {
  background: rgba(255, 247, 247, .72);
}

.low-rating-panel .panel-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.low-rating-panel .panel-head .app-icon {
  width: 18px;
  height: 18px;
  color: var(--danger);
}

.low-rating-table td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.low-rating-table {
  min-width: 960px;
}

.low-rating-list {
  display: grid;
  gap: 10px;
}

.low-rating-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(220, 38, 38, .12);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .82);
}

.low-rating-item strong {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}

.score-meter {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #EDF2EE;
}

.score-meter > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand), #22C55E, var(--energy));
  transition: width var(--motion-slow) var(--ease-enter);
}

.badge {
  border-radius: 999px;
}

.badge.orange {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.badge.green {
  background: #DDF8EC;
  color: var(--success);
}

.badge.red {
  background: #FEE2E2;
  color: var(--danger);
}

.toolbar {
  align-items: flex-start;
}

.toolbar-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.toolbar input,
.toolbar select {
  min-width: 180px;
}

.toolbar select {
  min-width: 196px;
}

.toolbar select[data-testid="filter-entity"] {
  min-width: 148px;
}

.toolbar select[data-testid="filter-department"] {
  min-width: 220px;
}

.toolbar {
  transition: border-color var(--motion-med) var(--ease-standard), background-color var(--motion-med) var(--ease-standard);
}

.login-shell {
  background:
    radial-gradient(circle at 26% 14%, rgba(var(--brand-rgb), .11), transparent 30%),
    linear-gradient(145deg, rgba(245, 158, 11, .08), transparent 34%),
    var(--admin-bg);
}

.login-card {
  border-color: var(--admin-line);
  background: #fff;
  box-shadow: var(--shadow);
}

.login-brand {
  justify-content: flex-start;
  margin-bottom: 18px;
}

.login-back {
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.login-back a:hover {
  color: var(--brand-strong);
}

.compact-head {
  margin-bottom: 18px;
}

.compact-head .sub {
  max-width: 62ch;
  margin-bottom: 0;
}

.compact-head + .flash {
  max-width: 1040px;
  margin: 0 0 16px;
}

.translation-tools {
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
}

.translation-tools h3 {
  margin-bottom: 4px;
}

.translation-tools p {
  margin: 0;
  line-height: 1.55;
}

.password-panel,
.security-panel {
  max-width: 1040px;
}

.password-panel {
  padding: 0;
  overflow: hidden;
}

.password-panel-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-bottom: 1px solid var(--admin-line);
  background: linear-gradient(180deg, #FFFFFF, #F8FBF9);
}

.password-panel-head h3 {
  margin: 0 0 3px;
  color: var(--ink);
  font-size: 18px;
  letter-spacing: -.01em;
}

.password-panel-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.security-layout {
  display: grid;
  grid-template-columns: minmax(250px, .72fr) minmax(360px, 1.28fr);
  gap: 0;
  align-items: start;
}

.security-copy {
  height: 100%;
  padding: 24px;
  border-right: 1px solid var(--admin-line);
  background: #F7FAF8;
}

.security-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.security-icon .app-icon {
  width: 25px;
  height: 25px;
}

.security-copy p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.security-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.security-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.security-list .app-icon {
  margin-top: 1px;
  width: 18px;
  height: 18px;
  color: var(--brand-strong);
}

.password-form {
  display: grid;
  gap: 18px;
  width: 100%;
  max-width: none;
  padding: 24px;
}

.password-fields {
  display: grid;
  gap: 2px;
  max-width: 560px;
}

.password-form .field {
  margin-bottom: 14px;
}

.password-actions {
  display: flex;
  justify-content: flex-start;
  max-width: 560px;
  margin-top: 0;
  padding-top: 2px;
}

.password-actions .btn {
  width: 100%;
  min-height: 46px;
}

.admin-footer {
  border-top: 1px solid var(--admin-line);
  background: #fff;
}

.empty-state {
  padding: 24px;
  color: var(--muted);
  text-align: center;
}

@keyframes load-fade-up {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes load-slide-right {
  from {
    opacity: 0;
    transform: translateX(24px) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes load-slide-left {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes load-header-drop {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes load-scale-up {
  from {
    opacity: 0;
    transform: translateY(22px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cta-arrow-nudge {
  0%, 100% {
    transform: translateX(0);
  }
  42% {
    transform: translateX(5px);
  }
}

@keyframes select-refresh {
  0% {
    opacity: .74;
    transform: translateY(2px) scale(.99);
  }
  62% {
    opacity: 1;
    transform: translateY(-1px) scale(1.01);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes progress-sheen {
  0% { transform: translateX(-100%); opacity: 0; }
  16% { opacity: .9; }
  52% { opacity: .9; }
  100% { transform: translateX(100%); opacity: 0; }
}

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

@keyframes mark-pop {
  0% { transform: scale(.92); opacity: .35; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes attention-pulse {
  0%, 100% {
    background: transparent;
  }
  35% {
    background: rgba(217, 119, 6, .08);
  }
}

body.is-ready .thanks .mark {
  animation: mark-pop var(--motion-slow) var(--ease-enter) both;
}

.answer-note {
  color: var(--muted);
  font-size: 12px;
}

.table .answer-note {
  font-weight: 700;
}

.suggestion-box {
  padding: 14px;
  border: 1px solid rgba(var(--brand-rgb), .18);
  border-radius: var(--radius-sm);
  background: linear-gradient(120deg, var(--surface-tint), #FFFFFF);
  color: var(--ink-soft);
  line-height: 1.6;
}

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

.qform-actions,
.question-actions,
.choice-row,
.question-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.qform-actions {
  margin-top: 16px;
  gap: 14px;
}

.question-row {
  align-items: flex-start;
  margin-bottom: 10px;
}

.question-text-input {
  flex: 1;
}

.answer-type-control {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(170px, auto);
  gap: 10px;
  align-items: stretch;
}

.answer-type-control-compact {
  grid-template-columns: minmax(132px, 150px) minmax(152px, auto);
}

.answer-type-preview {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(var(--brand-rgb), .16);
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, rgba(var(--brand-rgb), .08), rgba(245, 158, 11, .06));
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .68);
  transition: transform var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard);
}

.answer-type-preview.is-updating {
  transform: translateY(-1px);
  border-color: rgba(var(--brand-rgb), .28);
}

.answer-type-icon {
  display: grid;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--brand);
  box-shadow: 0 8px 18px rgba(var(--brand-rgb), .14);
}

.answer-type-icon .app-icon {
  width: 17px;
  height: 17px;
}

.answer-type-preview strong,
.answer-type-preview small {
  display: block;
  white-space: nowrap;
}

.answer-type-preview strong {
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.1;
}

.answer-type-preview small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
}

.option-panel {
  margin-top: 14px;
}

.scale-labels {
  margin-top: 10px;
}

.scale-label-item {
  display: inline-block;
  margin: 4px 8px 4px 0;
}

.scale-label-item small,
.small-muted {
  color: var(--muted);
  font-size: 12px;
}

.question-editor {
  margin-bottom: 12px;
  border-color: #EDF2EE;
  background: #fafbfc;
  box-shadow: none;
}

@media (max-width: 1040px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .index-main .hero {
    gap: 28px;
    padding-top: 30px;
  }

  .index-main .hero-copy {
    padding-top: 0;
  }

  .index-main .hero h1 {
    max-width: 13.5ch;
  }

  .index-main .hero-side {
    grid-template-columns: minmax(0, 1.04fr) minmax(280px, .72fr);
    gap: 18px;
    align-items: stretch;
  }

  .survey-visual {
    min-height: 320px;
    max-height: none;
  }

  .index-main .survey-visual {
    min-height: 100%;
    max-height: none;
  }

  .index-main .survey-visual + .card {
    order: 2;
  }

  .panel-grid {
    grid-template-columns: 1fr;
  }

  .security-layout {
    grid-template-columns: 1fr;
  }

  .security-copy {
    border-right: 0;
    border-bottom: 1px solid var(--admin-line);
  }

  .password-form {
    max-width: none;
  }

  .admin-userbar {
    gap: 6px;
  }
}

@media (max-width: 960px) {
  .container,
  .header-inner {
    width: min(100% - 28px, 1180px);
  }

  .header-inner {
    min-height: 68px;
  }

  .hero {
    padding: 28px 0 54px;
  }

  .index-main .hero {
    padding: 26px 0 48px;
  }

  .hero h1 {
    max-width: 10ch;
    font-size: clamp(42px, 11.5vw, 56px);
    line-height: 1.02;
  }

  .hero-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-stats > span {
    width: 100%;
    justify-content: flex-start;
  }

  .survey-visual {
    min-height: 300px;
  }

  .index-main .hero-side {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .index-main .survey-visual {
    min-height: 230px;
  }

  .survey-visual + .card {
    margin: 16px 0 0;
  }

  .index-main .survey-visual + .card {
    margin: 0;
  }

  .admin-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    min-height: auto;
    padding: 10px;
  }

  .admin-main {
    padding: 24px 14px;
  }

  .sidebar a {
    flex: 1 1 140px;
  }

  .site-footer-inner {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 18px 0;
  }
}

@media (max-width: 720px) {
  .container,
  .header-inner {
    width: calc(100% - 28px);
  }

  .header-inner {
    gap: 12px;
  }

  .brand {
    flex: 1 1 auto;
  }

  .brand-mark {
    width: 46px;
    height: 42px;
  }

  .brand-title {
    font-size: 14px;
  }

  .header-link {
    max-width: none;
    padding: 0 8px;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
  }

  .header-link i {
    display: none;
  }

  .header-link[data-testid="admin-login-link"] {
    font-size: 0;
  }

  .header-link[data-testid="admin-login-link"]::before {
    content: "Admin";
    font-size: 13px;
  }

  .hero {
    width: 100%;
    min-width: 0;
    gap: 24px;
  }

  .index-main .hero {
    gap: 20px;
    padding-top: 22px;
    padding-bottom: 42px;
  }

  .index-main .hero h1 {
    max-width: 11ch;
  }

  .hero-copy,
  .hero-side,
  .survey-visual,
  .hero-side .card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .hero p.lead {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .index-main .hero p.lead {
    margin-bottom: 18px;
  }

  .hero-stats {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
  }

  .hero-stats > span {
    justify-content: flex-start;
    min-width: 0;
  }

  .card {
    padding: 22px;
  }

  .language-field {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .language-switch {
    width: 100%;
  }

  .hero-side .card {
    order: 1;
  }

  .hero-side .survey-visual {
    order: 2;
    min-height: 210px;
  }

  .index-main .hero-side .card {
    order: 2;
  }

  .index-main .hero-side .survey-visual {
    order: 1;
    min-height: 190px;
  }

  .visual-panel {
    left: 16px;
    right: 16px;
    bottom: 16px;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px;
  }

  .visual-panel strong {
    font-size: 16px;
  }

  .visual-panel span {
    max-width: 29ch;
    font-size: 12px;
  }

  .progress-wrap {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .yesno-grid {
    grid-template-columns: 1fr;
  }

  .actions-row {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .actions-row .btn {
    width: 100%;
  }

  .stat-grid,
  .qform-grid {
    grid-template-columns: 1fr;
  }

  .translation-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .translation-tools .btn {
    width: 100%;
  }

  .admin-user {
    display: none;
  }

  .admin-userbar .header-link span {
    display: none;
  }

  .question-row,
  .question-actions,
  .qform-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .question-text-input {
    width: 100%;
  }

  .answer-type-control,
  .answer-type-control-compact {
    grid-template-columns: 1fr;
  }

  .answer-type-preview {
    width: 100%;
  }

  .toolbar {
    gap: 14px;
  }

  .low-rating-item {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .dashboard-filter-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    margin-top: -4px;
    padding: 14px;
  }

  .dashboard-filter-bar .dashboard-filter {
    margin-left: 0;
    width: 100%;
  }

  .dashboard-filter-field,
  .dashboard-filter .ui-select,
  .dashboard-filter select {
    width: 100%;
  }

  .panel-head,
  .range-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .range-filter select {
    width: 100%;
  }

  .chart-canvas-line,
  .chart-canvas-bar {
    height: 260px;
  }

  .toolbar-group,
  .toolbar input,
  .toolbar select,
  .toolbar .ui-select,
  .toolbar .btn {
    width: 100%;
  }

  .password-actions,
  .password-actions .btn {
    width: 100%;
  }

  .password-panel-head {
    align-items: flex-start;
    padding: 18px;
  }

  .security-copy,
  .password-form {
    padding: 18px;
  }

  .thanks-panel {
    padding: 28px 22px;
  }
}

@media (max-width: 430px) {
  .container,
  .header-inner {
    width: calc(100% - 24px);
  }

  .hero h1 {
    max-width: 9.5ch;
    font-size: clamp(34px, 10.5vw, 44px);
  }

  .hero p.lead {
    font-size: 15.5px;
    line-height: 1.65;
  }

  .eyebrow {
    max-width: 100%;
    font-size: 11px;
    letter-spacing: .11em;
  }

  .card {
    padding: 20px;
  }
}