body.employee-portal {
  background: #0b1725 url('/assets/cnc-workshop-bg-v1.png') center center / cover fixed no-repeat;
}

body.employee-portal .app {
  min-height: 100vh;
  background: linear-gradient(135deg, rgba(5, 15, 28, .82), rgba(10, 31, 48, .62));
}

body.employee-portal header,
body.employee-portal nav {
  background: rgba(10, 23, 39, .86);
  color: #fff;
  border-color: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

body.employee-portal nav button { color: #dbeafe; }
body.employee-portal nav button.active { color: #fff; background: rgba(52, 211, 153, .2); }
body.employee-portal .content { background: transparent; }
body.employee-portal .title-row h1 { color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
body.employee-portal .title-row p { color: #dbeafe; }

body.employee-portal .card {
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(2, 8, 23, .22);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

body.employee-portal label {
  display: grid;
  gap: 7px;
  color: #334155;
  font-weight: 700;
}

body.employee-portal input,
body.employee-portal select,
body.employee-portal textarea {
  width: 100%;
  min-height: 54px;
  box-sizing: border-box;
  padding: 12px 46px 12px 15px;
  border: 1px solid #cbd5e1;
  border-radius: 15px;
  background-color: rgba(255, 255, 255, .98);
  color: #0f172a;
  font: inherit;
  font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 1px 3px rgba(15, 23, 42, .08);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

body.employee-portal select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 7.5 5 5 5-5' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 20px;
}

body.employee-portal textarea { min-height: 92px; padding-right: 15px; resize: vertical; }
body.employee-portal input:focus,
body.employee-portal select:focus,
body.employee-portal textarea:focus {
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .16), 0 2px 8px rgba(15, 23, 42, .08);
}

body.employee-portal button {
  min-height: 50px;
  border-radius: 15px;
  touch-action: manipulation;
}

@media (max-width: 720px) {
  body.employee-portal { background-position: 60% center; background-attachment: scroll; }
  body.employee-portal .content { padding: 14px; }
  body.employee-portal .title-row { align-items: flex-start; }
  body.employee-portal .title-row h1 { font-size: 26px; }
  body.employee-portal .card { padding: 16px; border-radius: 20px; }
  body.employee-portal .form-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body.employee-portal .form-grid .wide { grid-column: auto; }
  body.employee-portal form button[type='submit'] { width: 100%; min-height: 56px; font-size: 17px; }
  body.employee-portal nav { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.employee-portal nav button { min-width: max-content; }
}