:root {
  --navy: #08255f;
  --blue: #1456d9;
  --blue-light: #5a8dff;
  --sky: #7da7ff;
  --green: #53b32f;
  --green-dark: #237719;
  --cream: #f5f2e7;
  --paper: #fffdf3;
  --line: #9ba7b5;
  --ink: #18243c;
  --muted: #5e6a7c;
  --gold: #f5b82c;
  --taskbar-height: 46px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: var(--ink);
  font-family: Tahoma, Verdana, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button,
input {
  font: inherit;
}

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

button {
  color: inherit;
}

[hidden] {
  display: none !important;
}

.login-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 30px 18px;
  background: #1645a5;
}

.login-screen::before {
  position: absolute;
  inset: -20px;
  content: '';
  background:
    linear-gradient(135deg, rgba(4, 25, 84, 0.72), rgba(53, 100, 216, 0.56)),
    url('/assets/salaryos-wallpaper.png?v=20260712-messenger') center / cover;
  filter: saturate(0.9) blur(3px);
  transform: scale(1.03);
}

.login-screen::after {
  position: absolute;
  inset: 0;
  content: '';
  background:
    radial-gradient(circle at 50% 38%, transparent 0 14%, rgba(4, 20, 62, 0.18) 72%),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 10, 60, 0.035) 3px 4px);
}

.login-orbit {
  position: absolute;
  z-index: 1;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 999px;
  pointer-events: none;
}

.login-orbit-one {
  width: 720px;
  height: 720px;
  transform: rotate(18deg);
}

.login-orbit-two {
  width: 900px;
  height: 360px;
  transform: rotate(-9deg);
}

.login-card {
  position: relative;
  z-index: 2;
  width: min(478px, 100%);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  background: rgba(244, 247, 255, 0.96);
  box-shadow:
    0 34px 90px rgba(1, 14, 58, 0.52),
    inset 0 1px 0 #fff;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  color: #fff;
  background: linear-gradient(180deg, #3e78e8, #164eb9 65%, #104196);
  border-bottom: 2px solid #f5ac28;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.4);
}

.login-brand img {
  width: 46px;
  height: 46px;
  border: 2px solid #fff;
  border-radius: 9px;
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(0, 20, 80, 0.35);
}

.login-brand div {
  display: grid;
  gap: 2px;
}

.login-brand span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.19em;
  opacity: 0.78;
}

.login-brand strong {
  font-size: 23px;
  letter-spacing: -0.04em;
  text-shadow: 0 1px 1px rgba(0, 0, 60, 0.5);
}

.login-copy {
  padding: 32px 34px 18px;
}

.login-kicker {
  display: block;
  margin-bottom: 10px;
  color: #3561a8;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.login-copy h1 {
  margin: 0;
  color: #15316e;
  font-family: 'Trebuchet MS', Tahoma, sans-serif;
  font-size: clamp(36px, 8vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

.login-copy h1 em {
  color: #55a934;
  font-style: normal;
}

.login-copy p {
  max-width: 380px;
  margin: 16px 0 0;
  color: #657187;
  font-size: 13px;
  line-height: 1.55;
}

.login-form {
  padding: 7px 34px 27px;
}

.login-form label,
.wallet-entry label {
  display: block;
  margin: 0 0 7px;
  color: #324463;
  font-size: 11px;
  font-weight: 700;
}

.address-input {
  display: flex;
  align-items: center;
  height: 48px;
  overflow: hidden;
  border: 1px solid #91a1ba;
  border-radius: 7px;
  background: #fff;
  box-shadow: inset 0 1px 3px rgba(31, 53, 96, 0.12);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.address-input:focus-within {
  border-color: #2b63cf;
  box-shadow: 0 0 0 3px rgba(55, 111, 220, 0.15), inset 0 1px 2px rgba(31, 53, 96, 0.08);
}

.address-input > span {
  align-self: stretch;
  display: grid;
  place-items: center;
  width: 48px;
  color: #2e61bc;
  font-size: 12px;
  font-weight: 700;
  background: #edf3ff;
  border-right: 1px solid #bfcae0;
}

.address-input input {
  min-width: 0;
  flex: 1;
  height: 100%;
  padding: 0 13px;
  border: 0;
  outline: 0;
  color: #172946;
  background: transparent;
  font-size: 13px;
}

.field-message {
  min-height: 32px;
  margin: 7px 0 0;
  color: #727d8e;
  font-size: 10px;
  line-height: 1.45;
}

.field-message.is-error {
  color: #c02f30;
}

.login-primary,
.login-guest {
  width: 100%;
  border: 0;
  cursor: pointer;
}

.login-primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin-top: 6px;
  padding: 0 17px;
  border: 1px solid #1d7624;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(180deg, #73ca45, #3d9e2b 54%, #2a7d21);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48), 0 5px 14px rgba(37, 122, 32, 0.22);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.login-primary b {
  font-size: 19px;
}

.login-primary:hover {
  filter: brightness(1.06);
}

.login-guest {
  margin-top: 14px;
  color: #335487;
  background: transparent;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.login-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  color: #5f6c81;
  background: #e9eef8;
  border-top: 1px solid #c4cee0;
  font-size: 9px;
}

.login-foot span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.login-foot i,
.secure-read i,
.window-statusbar i,
.tray-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #47ad38;
  box-shadow: 0 0 0 2px rgba(71, 173, 56, 0.14);
}

.employment-screen {
  position: fixed;
  inset: 0;
  z-index: 195;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 14px;
  background: #2458aa;
}

.employment-wallpaper {
  position: absolute;
  inset: -18px;
  background:
    linear-gradient(rgba(18, 59, 149, 0.62), rgba(7, 34, 104, 0.72)),
    url('/assets/salaryos-wallpaper.png?v=20260712-messenger') center / cover;
  filter: saturate(0.82) blur(2px);
  transform: scale(1.025);
}

.employment-program {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(1120px, 100%);
  max-height: calc(100vh - 28px);
  overflow: hidden;
  border: 2px solid #1450b7;
  border-radius: 8px 8px 3px 3px;
  background: #ece9d8;
  box-shadow: 0 28px 90px rgba(2, 19, 66, 0.58);
  animation: application-open 0.2s ease-out;
}

@keyframes application-open {
  from { transform: scale(0.975) translateY(8px); opacity: 0.5; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

.employment-titlebar {
  display: flex;
  flex: 0 0 34px;
  align-items: center;
  justify-content: space-between;
  padding: 4px 5px 4px 7px;
  color: #fff;
  background: linear-gradient(180deg, #5795f6 0%, #1c66d5 17%, #0744aa 73%, #0a388c 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.62);
  text-shadow: 1px 1px #092a72;
}

.employment-titlebar > div:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.employment-titlebar img {
  width: 23px;
  height: 23px;
  border: 1px solid #fff;
  border-radius: 4px;
  object-fit: cover;
}

.employment-titlebar strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.employment-window-controls {
  display: flex;
  gap: 3px;
}

.employment-window-controls span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 22px;
  padding-bottom: 2px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: linear-gradient(145deg, #83b0fa, #1d5dce);
  box-shadow: inset 0 0 0 1px rgba(5, 42, 138, 0.42);
  font-size: 12px;
  font-weight: 700;
}

.employment-window-controls span:last-child {
  background: linear-gradient(145deg, #ef9b7e, #bd301e);
}

.employment-menubar {
  display: flex;
  flex: 0 0 25px;
  align-items: center;
  gap: 19px;
  padding: 0 10px;
  border-bottom: 1px solid #aaa79e;
  color: #263046;
  font-size: 10px;
}

.employment-menubar span::first-letter {
  text-decoration: underline;
}

.employment-body {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 18px;
  border-top: 1px solid #fff;
  background: #f5f5f0;
}

.employment-heading {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 13px;
  margin-bottom: 16px;
  padding: 14px 16px;
  border: 1px solid #8da3c3;
  background: linear-gradient(90deg, #e9f1ff, #fff 62%);
  box-shadow: inset 0 1px #fff;
}

.employment-document-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 54px;
  border: 1px solid #6782ad;
  color: #2c5da8;
  background: #fff;
  box-shadow: 3px 3px 0 #b7c9e5;
  font-family: 'Courier New', monospace;
  font-size: 17px;
  font-weight: 700;
}

.employment-document-icon::after {
  position: absolute;
  right: 5px;
  bottom: 7px;
  left: 5px;
  height: 2px;
  content: '';
  background: repeating-linear-gradient(90deg, #8ea8d0 0 7px, transparent 7px 9px);
}

.employment-heading > div:nth-child(2) {
  min-width: 0;
}

.employment-heading > div:nth-child(2) > span {
  display: block;
  margin-bottom: 3px;
  color: #5573a3;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.employment-heading h1 {
  margin: 0;
  color: #1c4e96;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: clamp(21px, 3vw, 31px);
  letter-spacing: -0.04em;
}

.employment-heading p {
  margin: 4px 0 0;
  color: #6d7784;
  font-size: 10px;
  line-height: 1.4;
}

.employment-badge {
  padding: 7px 10px;
  border: 2px solid #b8463f;
  border-radius: 3px;
  color: #b8463f;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transform: rotate(-2deg);
}

.employment-badge.is-prelaunch {
  border-color: #a06b22;
  color: #a06b22;
}

.employment-badge.is-checking {
  border-color: #3967aa;
  color: #3967aa;
}

.employment-badge.is-eligible {
  border-color: #2f8742;
  color: #2f8742;
}

.employment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(285px, 0.72fr);
  gap: 16px;
  align-items: start;
}

.application-form,
.employment-sidebar > section {
  border: 1px solid #a9adb1;
  background: #fff;
  box-shadow: inset 0 1px #fff, 0 2px 5px rgba(29, 44, 77, 0.08);
}

.application-form {
  padding: 14px;
}

.form-section-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 11px;
  padding-bottom: 7px;
  border-bottom: 1px solid #c9ced4;
}

.form-section-title:not(:first-child) {
  margin-top: 17px;
}

.form-section-title > span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #1d5aaf;
  border-radius: 50%;
  color: #fff;
  background: #3472c8;
  font-size: 10px;
  font-weight: 700;
}

.form-section-title > div {
  display: grid;
  gap: 1px;
}

.form-section-title strong {
  color: #294f86;
  font-size: 11px;
}

.form-section-title small {
  color: #79818a;
  font-size: 8px;
}

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

.application-field {
  min-width: 0;
}

.full-field {
  margin-bottom: 10px;
}

.application-field label,
.direct-buy-card > label {
  display: block;
  margin-bottom: 4px;
  color: #44536a;
  font-size: 9px;
  font-weight: 700;
}

.application-field input,
.application-field select {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid #7f9db9;
  border-radius: 0;
  outline: 0;
  color: #20304a;
  background: #fff;
  font-size: 9px;
}

.application-field input:focus,
.application-field select:focus {
  border-color: #2862c4;
  box-shadow: 0 0 0 2px rgba(40, 98, 196, 0.12);
}

.application-field input[readonly] {
  color: #59677a;
  background: #eeeee9;
}

.application-radio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0 10px;
  padding: 10px;
  border: 1px solid #b9bdc1;
  color: #4d596b;
}

.application-radio legend {
  padding: 0 5px;
  color: #3c4e6a;
  font-size: 9px;
  font-weight: 700;
}

.application-radio label,
.application-check {
  font-size: 8px;
  line-height: 1.4;
}

.application-radio input,
.application-check input {
  vertical-align: -2px;
}

.application-check {
  display: block;
  margin: 5px 0;
  color: #626b78;
}

.qualification-card {
  overflow: hidden;
  border: 1px solid #8f9caa;
  background:
    linear-gradient(90deg, rgba(41, 104, 87, 0.035) 1px, transparent 1px) 0 0 / 12px 12px,
    #f8fbf7;
}

.qualification-card.is-prelaunch {
  background: #fbf6e9;
}

.qualification-top {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.qualification-top > div {
  padding: 11px 13px;
  border-right: 1px solid #b7c0c2;
}

.qualification-top > div:last-child {
  border-right: 0;
}

.qualification-top span {
  display: block;
  color: #6f7c84;
  font-family: 'Courier New', monospace;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.qualification-top strong {
  color: #1f5c4a;
  font-family: Georgia, serif;
  font-size: 27px;
  letter-spacing: -0.04em;
}

.qualification-top small {
  margin-left: 4px;
  color: #60736c;
  font-size: 8px;
}

.qualification-progress {
  height: 17px;
  margin: 0 12px;
  padding: 2px;
  border: 1px inset #a1a8aa;
  background: #fff;
}

.qualification-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, #3bb54a 0 8px, #79d37e 8px 10px);
  transition: width 0.35s ease;
}

.qualification-foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px 10px;
  color: #65726e;
  font-size: 8px;
}

.employment-sidebar {
  display: grid;
  gap: 11px;
}

.employment-help-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  color: #2e4e7a;
  background: linear-gradient(90deg, #e8f0ff, #fff) !important;
}

.employment-help-card img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border: 1px solid #7f93b4;
  border-radius: 7px;
  object-fit: cover;
}

.employment-help-card div {
  display: grid;
  align-content: center;
  gap: 4px;
}

.employment-help-card strong {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 12px;
}

.employment-help-card p {
  margin: 0;
  color: #68758a;
  font-size: 8px;
  line-height: 1.45;
}

.direct-buy-card {
  padding: 12px;
}

.buy-card-heading {
  margin-bottom: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid #c4c9ce;
}

.buy-card-heading > span {
  color: #4d71a9;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.buy-card-heading strong {
  display: block;
  margin-top: 2px;
  color: #174c97;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 20px;
  letter-spacing: -0.035em;
}

.buy-card-heading p {
  margin: 4px 0 0;
  color: #6b7582;
  font-size: 8px;
  line-height: 1.45;
}

.eth-amount-field {
  display: flex;
  align-items: center;
  height: 39px;
  overflow: hidden;
  border: 1px solid #7f9db9;
  background: #fff;
}

.eth-amount-field > span {
  display: grid;
  place-items: center;
  align-self: stretch;
  width: 38px;
  color: #fff;
  background: #3671c7;
  font-family: Georgia, serif;
  font-size: 18px;
}

.eth-amount-field input {
  min-width: 0;
  flex: 1;
  height: 100%;
  padding: 0 9px;
  border: 0;
  outline: 0;
  color: #1f3049;
  background: transparent;
  font-size: 12px;
}

.eth-amount-field em {
  padding-right: 9px;
  color: #53657d;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.quick-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 5px;
}

.quick-amounts button {
  min-height: 25px;
  border: 1px solid #a6adb5;
  color: #466084;
  background: linear-gradient(#fff, #e7e9ea);
  cursor: pointer;
  font-size: 8px;
}

.quick-amounts button:hover {
  border-color: #4976b3;
  background: #edf4ff;
}

.employment-buy-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 42px;
  margin-top: 9px;
  padding: 0 12px;
  border: 1px solid #1b6a20;
  border-radius: 3px;
  color: #fff;
  background: linear-gradient(180deg, #72ca4a, #3d9a2d 56%, #2b7623);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.56);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  text-shadow: 0 1px #275e21;
}

.employment-buy-button b {
  font-size: 17px;
}

.employment-buy-button:disabled,
.employment-screen.is-prelaunch .employment-buy-button {
  border-color: #9a9a91;
  color: #73736e;
  background: #d7d6cf;
  box-shadow: inset 0 1px #f0efe9;
  cursor: not-allowed;
  text-shadow: none;
}

.buy-safety {
  margin: 7px 0 0;
  color: #777f8a;
  font-size: 7px;
  line-height: 1.4;
}

.buy-status {
  min-height: 34px;
  margin-top: 9px;
  padding: 7px 8px;
  border: 1px solid #b5b9bd;
  color: #606d7f;
  background: #f4f4f0;
  font-size: 8px;
  line-height: 1.4;
}

.buy-status.is-working {
  border-color: #7a99c4;
  color: #2d5f9e;
  background: #edf4ff;
}

.buy-status.is-error {
  border-color: #c68a88;
  color: #a33134;
  background: #fff0ef;
}

.buy-status.is-success {
  border-color: #79ad82;
  color: #28723a;
  background: #eef9ef;
}

.quote-summary {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 7px;
  padding: 7px 8px;
  border: 1px dashed #8497ad;
  color: #52647a;
  font-size: 8px;
}

.quote-summary strong {
  color: #235e47;
}

.buy-transaction,
.trade-fallback {
  display: block;
  margin-top: 7px;
  color: #1c58ad;
  font-size: 8px;
  text-align: center;
}

.application-address-card {
  display: grid;
  gap: 3px;
  padding: 10px;
  color: #fff;
  background: linear-gradient(180deg, #477fca, #245da9) !important;
  text-shadow: 0 1px #194780;
}

.application-address-card span {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.76;
}

.application-address-card strong {
  font-family: 'Courier New', monospace;
  font-size: 12px;
}

.application-address-card small {
  font-size: 8px;
  opacity: 0.8;
}

.employment-actions {
  display: flex;
  flex: 0 0 49px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border-top: 1px solid #aaa79e;
  background: #ece9d8;
}

.employment-actions > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #656b72;
  font-size: 8px;
}

.employment-actions > span i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4aa83f;
}

.employment-actions > div {
  display: flex;
  gap: 7px;
}

.employment-secondary,
.employment-primary {
  min-height: 33px;
  padding: 0 13px;
  border: 1px solid #73849a;
  border-radius: 3px;
  color: #263b5b;
  background: linear-gradient(#fff, #e1e5e8);
  box-shadow: inset 0 0 0 1px #fff;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
}

.employment-primary {
  border-color: #245b9f;
  color: #fff;
  background: linear-gradient(#6599e4, #2d6cbe);
  text-shadow: 0 1px #1d4d8a;
}

.employment-secondary:disabled,
.employment-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.desktop {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #549acb url('/assets/salaryos-wallpaper.png?v=20260712-messenger') center / cover no-repeat;
  isolation: isolate;
}

.desktop-vignette {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 28, 87, 0.06), transparent 35%, rgba(3, 20, 58, 0.15)),
    radial-gradient(circle at center, transparent 44%, rgba(13, 34, 92, 0.12));
}

.desktop-brand {
  position: absolute;
  top: 18px;
  right: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 10px;
  color: #fff;
  background: rgba(12, 53, 137, 0.66);
  box-shadow: 0 6px 22px rgba(8, 31, 95, 0.18), inset 0 1px rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  text-shadow: 0 1px 2px rgba(0, 23, 83, 0.7);
}

.desktop-brand img {
  width: 35px;
  height: 35px;
  border-radius: 7px;
  object-fit: cover;
}

.desktop-brand div {
  display: grid;
  gap: 2px;
}

.desktop-brand strong {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 15px;
}

.desktop-brand span {
  font-size: 9px;
  opacity: 0.78;
}

.desktop-ca {
  position: absolute;
  right: 18px;
  top: 78px;
  display: grid;
  justify-items: end;
  gap: 4px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 23, 83, 0.65);
}

.desktop-ca > span {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.desktop-ca button {
  max-width: 180px;
  overflow: hidden;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 4px;
  color: #fff;
  background: rgba(5, 35, 108, 0.56);
  cursor: pointer;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-ca button:disabled {
  cursor: default;
  opacity: 0.72;
}

.desktop-icons {
  position: absolute;
  top: 16px;
  left: 13px;
  bottom: calc(var(--taskbar-height) + 12px);
  display: flex;
  flex-flow: column wrap;
  align-content: flex-start;
  gap: 8px 10px;
}

.desktop-icon {
  width: 82px;
  min-height: 78px;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #fff;
  background: transparent;
  cursor: default;
  text-align: center;
  text-shadow: 0 1px 3px #11356f, 1px 1px 0 #11356f;
}

.desktop-icon:hover,
.desktop-icon:focus-visible {
  border-color: rgba(255, 255, 255, 0.55);
  outline: 0;
  background: rgba(43, 93, 191, 0.3);
}

.desktop-icon strong {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.2;
}

.icon-tile,
.mini-app {
  display: inline-grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #69a1ff, #174cb4);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 0 0 1px rgba(0, 23, 91, 0.28), 0 2px 4px rgba(4, 25, 72, 0.35);
  text-shadow: 0 1px 1px rgba(0, 0, 70, 0.45);
}

.icon-tile {
  width: 46px;
  height: 46px;
  border-radius: 9px;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 25px;
  font-weight: 700;
}

.mini-app {
  width: 19px;
  height: 19px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}

.icon-pay { background: linear-gradient(145deg, #f9d85a, #d9930c); color: #42320a; text-shadow: none; }
.icon-mouse { background: linear-gradient(145deg, #70c6ff, #2d6ec4); }
.icon-meeting { background: linear-gradient(145deg, #ff8a78, #bc2e36); }
.icon-lunch { background: linear-gradient(145deg, #f0ab67, #a95622); }
.icon-sheet { background: linear-gradient(145deg, #77cf69, #2e8a35); }
.icon-ooo { background: linear-gradient(145deg, #b68bff, #6541b5); }
.icon-messenger { background: linear-gradient(145deg, #84dfff, #2683ca 58%, #44a83c); }

.window {
  position: absolute;
  left: var(--x, 24vw);
  top: var(--y, 10vh);
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: min(704px, calc(100vw - 135px));
  max-height: calc(100vh - var(--taskbar-height) - 24px);
  overflow: hidden;
  border: 2px solid #1f55b8;
  border-radius: 7px 7px 2px 2px;
  background: #ece9d8;
  box-shadow: 4px 8px 24px rgba(7, 24, 73, 0.42);
  animation: window-open 0.16s ease-out;
}

.window.is-active {
  border-color: #0b47bb;
  box-shadow: 5px 11px 30px rgba(5, 20, 69, 0.46);
}

.window.is-minimized {
  display: none;
}

@keyframes window-open {
  from { transform: scale(0.97); opacity: 0.65; }
  to { transform: scale(1); opacity: 1; }
}

.window-titlebar {
  display: flex;
  flex: 0 0 31px;
  align-items: center;
  justify-content: space-between;
  padding: 4px 4px 4px 7px;
  color: #fff;
  background: linear-gradient(180deg, #4989f4 0%, #1661db 18%, #0644b6 70%, #0b3a92 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.58);
  cursor: move;
  user-select: none;
  text-shadow: 1px 1px 1px #08276c;
}

.window-titlebar > div:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.window-titlebar strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-controls {
  display: flex;
  align-items: center;
  gap: 3px;
}

.window-controls button {
  display: grid;
  place-items: center;
  width: 23px;
  height: 22px;
  padding: 0 0 2px;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #fff;
  background: linear-gradient(145deg, #7eabfa, #1d5dce);
  box-shadow: inset 0 0 0 1px rgba(5, 42, 138, 0.48);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
}

.window-controls button:last-child {
  background: linear-gradient(145deg, #ef9b7e, #bd301e);
}

.window-menubar {
  display: flex;
  flex: 0 0 25px;
  align-items: center;
  gap: 18px;
  padding: 0 10px;
  border-bottom: 1px solid #a8a49b;
  color: #263046;
  font-size: 10px;
}

.window-menubar span:first-letter {
  text-decoration: underline;
}

.window-toolbar {
  display: flex;
  flex: 0 0 38px;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #aaa79e;
  background: #ece9d8;
}

.window-toolbar button,
.window-toolbar a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 27px;
  padding: 0 8px;
  border: 1px solid transparent;
  color: #28344a;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
  text-decoration: none;
}

.window-toolbar button:hover,
.window-toolbar a:hover {
  border-color: #aca89e;
  background: #f7f5eb;
}

.window-toolbar b {
  color: #2261bf;
  font-size: 17px;
}

.toolbar-spacer {
  flex: 1;
}

.secure-read {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-right: 5px;
  color: #5e6b72;
  font-size: 9px;
}

.window-content {
  min-height: 0;
  overflow: auto;
  padding: 15px;
  background: #f7f7f2;
}

.paycheck-content {
  display: grid;
  gap: 11px;
}

.paycheck-paper {
  overflow: hidden;
  border: 1px solid #9a9b86;
  color: #18352d;
  background:
    linear-gradient(90deg, rgba(35, 105, 79, 0.03) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(rgba(35, 105, 79, 0.03) 1px, transparent 1px) 0 0 / 14px 14px,
    var(--paper);
  box-shadow: 0 2px 7px rgba(25, 41, 38, 0.16);
}

.paper-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 13px 16px 9px;
  border-bottom: 2px solid #2b735c;
}

.paper-topline > div {
  display: grid;
  gap: 2px;
}

.paper-topline span,
.pay-amount > span,
.pay-grid span,
.pay-stub,
.break-label {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.paper-topline > div span {
  color: #527269;
  font-size: 8px;
}

.paper-topline strong {
  color: #1e5f4e;
  font-family: Georgia, serif;
  font-size: 17px;
  letter-spacing: 0.04em;
}

.payroll-stamp {
  padding: 5px 7px;
  border: 2px solid #b45243;
  border-radius: 3px;
  color: #b45243;
  font-size: 9px;
  transform: rotate(-2deg);
}

.payroll-stamp.is-live {
  border-color: #2c8558;
  color: #2c8558;
}

.pay-amount {
  padding: 16px;
  text-align: center;
}

.pay-amount > span {
  color: #688078;
  font-size: 8px;
}

.pay-amount > strong {
  display: block;
  margin-top: 3px;
  color: #153f35;
  font-family: Georgia, serif;
  font-size: clamp(30px, 5vw, 44px);
  letter-spacing: -0.04em;
}

.pay-amount > strong small {
  font-size: 15px;
  letter-spacing: 0;
}

.pay-amount p {
  margin: 5px 0 0;
  color: #658078;
  font-size: 10px;
}

.pay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #9bb1a9;
  border-bottom: 1px solid #9bb1a9;
}

.pay-grid > div {
  min-width: 0;
  padding: 9px 12px;
  border-right: 1px solid #9bb1a9;
}

.pay-grid > div:last-child {
  border-right: 0;
}

.pay-grid span {
  display: block;
  overflow: hidden;
  color: #728a83;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pay-grid strong {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: #2a554a;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  text-overflow: ellipsis;
}

.pay-stub {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  color: #647a73;
  font-size: 6px;
}

.wallet-entry {
  padding: 11px;
  border: 1px solid #b4b5ae;
  background: #ecebe3;
  box-shadow: inset 0 1px #fff;
}

.wallet-entry > div {
  display: flex;
  gap: 5px;
}

.wallet-entry input {
  min-width: 0;
  flex: 1;
  height: 32px;
  padding: 0 9px;
  border: 1px solid #7f9db9;
  outline: 0;
  background: #fff;
  font-size: 11px;
}

.wallet-entry input:focus {
  border-color: #2962c2;
}

.wallet-entry button,
.utility-button {
  border: 1px solid #73849a;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #e2e5e8);
  box-shadow: inset 0 0 0 1px #fff;
  cursor: pointer;
  font-weight: 700;
}

.wallet-entry button {
  padding: 0 13px;
  font-size: 9px;
}

.wallet-entry small {
  display: block;
  margin-top: 6px;
  color: #747c87;
  font-size: 8px;
}

.pay-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.claim-button {
  display: flex;
  flex: 0 0 218px;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 13px;
  border: 1px solid #1c6e21;
  border-radius: 4px;
  color: #fff;
  background: linear-gradient(180deg, #70c94a, #3e9b2e 56%, #2d7a25);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-shadow: 0 1px #2d6725;
}

.claim-button b {
  font-size: 18px;
}

.claim-button:disabled {
  border-color: #9a9a91;
  color: #72726e;
  background: #d5d4cc;
  box-shadow: inset 0 1px #efeee8;
  cursor: not-allowed;
  text-shadow: none;
}

.claim-note {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #68737c;
  font-size: 9px;
  line-height: 1.35;
}

.claim-note .is-error { color: #b82f31; }
.claim-note .is-success { color: #2a8a3e; }
.claim-note a { color: #1251aa; }

.window-statusbar {
  display: flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 7px;
  border-top: 1px solid #a8a59b;
  color: #62666b;
  background: #ece9d8;
  font-size: 8px;
}

.window-statusbar span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.small-window {
  width: min(420px, calc(100vw - 130px));
}

.utility-content {
  display: grid;
  gap: 13px;
  padding: 17px;
}

.utility-content h2 {
  margin: 0;
  color: #254a87;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 20px;
  letter-spacing: -0.03em;
}

.utility-content p {
  margin: -6px 0 0;
  color: #657083;
  font-size: 11px;
  line-height: 1.5;
}

.utility-content > small {
  color: #6d7480;
  font-size: 9px;
  text-align: center;
}

.utility-hero {
  position: relative;
  display: grid;
  place-items: center;
  height: 102px;
  overflow: hidden;
  border: 1px inset #9ba4af;
  color: #fff;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px) 0 0 / 16px 16px,
    #2f6ab4;
  font-size: 11px;
  text-shadow: 0 1px #12356e;
}

.fake-cursor {
  position: absolute;
  top: 23px;
  left: 25px;
  color: #fff;
  filter: drop-shadow(1px 2px #132d55);
  font-size: 28px;
  transform: rotate(-32deg);
}

.mouse-pad.is-running .fake-cursor {
  animation: cursor-work 2.4s ease-in-out infinite alternate;
}

@keyframes cursor-work {
  0% { transform: translate(0, 0) rotate(-32deg); }
  34% { transform: translate(280px, 18px) rotate(-32deg); }
  68% { transform: translate(148px, 52px) rotate(-32deg); }
  100% { transform: translate(322px, 3px) rotate(-32deg); }
}

.utility-button {
  min-height: 38px;
  padding: 0 14px;
  color: #203b66;
  font-size: 10px;
}

.utility-button:hover {
  border-color: #315f9c;
  background: linear-gradient(180deg, #fff, #d9e8fb);
}

.utility-button.danger {
  color: #8e2929;
}

.meeting-list {
  display: grid;
  border: 1px solid #aab0ba;
  background: #fff;
}

.meeting-list article {
  display: grid;
  grid-template-columns: 45px 1fr 20px;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border-bottom: 1px solid #d6d9dd;
}

.meeting-list article:last-child { border-bottom: 0; }
.meeting-list article > span { color: #3d5f90; font-size: 9px; font-weight: 700; }
.meeting-list article div { display: grid; gap: 2px; }
.meeting-list article strong { font-size: 10px; }
.meeting-list article small { color: #777f8a; font-size: 8px; }
.meeting-list article b { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: #fff; background: #d14d45; font-size: 10px; }
.meeting-list.is-cleared article { opacity: 0.25; text-decoration: line-through; }

.centered-content {
  justify-items: center;
  text-align: center;
}

.lunch-clock {
  padding: 10px 18px;
  border: 2px inset #9aa5b0;
  color: #68f17d;
  background: #15231d;
  box-shadow: inset 0 0 12px rgba(83, 255, 120, 0.12);
  font-family: 'Courier New', monospace;
  font-size: 29px;
  letter-spacing: 0.06em;
  text-shadow: 0 0 7px rgba(83, 255, 120, 0.35);
}

.break-label { color: #697689; font-size: 8px; }

.progress-shell {
  width: 100%;
  height: 16px;
  padding: 2px;
  border: 1px inset #a2a4a3;
  background: #fff;
}

.progress-shell i {
  display: block;
  width: 62%;
  height: 100%;
  background: repeating-linear-gradient(90deg, #3ab640 0 8px, transparent 8px 10px);
  transition: width 0.3s;
}

.timesheet-table {
  display: grid;
  border: 1px solid #9ca8b3;
  background: #fff;
}

.timesheet-table > div {
  display: grid;
  grid-template-columns: 1fr 58px;
  padding: 8px 9px;
  border-bottom: 1px solid #d4d9dc;
  font-size: 10px;
}

.timesheet-table > div:first-child { color: #fff; background: #3972bd; font-size: 8px; font-weight: 700; }
.timesheet-table > div:last-child { border-bottom: 0; }
.timesheet-table span:last-child,
.timesheet-table b { text-align: right; }
.timesheet-table .total { color: #275f38; background: #ebf5eb; }

.ooo-card {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid #b0a8ca;
  background: #f3efff;
}

.ooo-card span { color: #6a5799; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.ooo-card strong { color: #413365; font-family: Georgia, serif; font-size: 17px; line-height: 1.25; }
.ooo-card small { color: #7c7198; font-size: 9px; }

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  cursor: pointer;
}

.switch-row > span { display: grid; gap: 2px; }
.switch-row strong { font-size: 10px; }
.switch-row small { color: #727b86; font-size: 8px; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row > i { position: relative; flex: 0 0 40px; width: 40px; height: 21px; border: 1px inset #9da4ab; border-radius: 12px; background: #c9c9c3; }
.switch-row > i::after { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border: 1px solid #888; border-radius: 50%; content: ''; background: #fff; transition: left 0.15s; }
.switch-row input:checked + i { background: #52ad3e; }
.switch-row input:checked + i::after { left: 20px; }

.messenger-desktop-icon,
.start-messenger-entry,
.window-titlebar > div:first-child {
  position: relative;
}

.app-unread-badge,
.title-unread-badge,
.contact-unread-badge {
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border: 1px solid #fff;
  border-radius: 9px;
  color: #fff;
  background: #e33d38;
  box-shadow: 0 1px 3px rgba(74, 8, 8, 0.42);
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px #8e1818;
}

.messenger-desktop-icon > .app-unread-badge {
  position: absolute;
  top: 0;
  right: 7px;
}

.start-messenger-entry > .app-unread-badge {
  margin-left: auto;
}

.title-unread-badge {
  margin-left: 2px;
}

.messenger-window {
  width: min(790px, calc(100vw - 135px));
  height: min(610px, calc(100vh - var(--taskbar-height) - 24px));
}

.messenger-menubar {
  flex: 0 0 25px;
}

.messenger-locked,
.messenger-auth {
  min-height: 0;
  flex: 1;
  overflow: auto;
  background:
    radial-gradient(circle at 85% 12%, rgba(121, 190, 255, 0.3), transparent 31%),
    linear-gradient(135deg, #edf6ff, #fff 56%, #e9f5ea);
}

.messenger-locked {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 30px;
  text-align: center;
}

.messenger-lock-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 76px;
  border: 1px solid #5e80ad;
  color: #2d5f9f;
  background: #fff;
  box-shadow: 5px 5px 0 #b8cae2;
  font-family: 'Courier New', monospace;
  font-size: 21px;
  font-weight: 700;
}

.messenger-locked h2 {
  margin: 10px 0 0;
  color: #24528e;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 25px;
}

.messenger-locked p {
  max-width: 390px;
  margin: 0;
  color: #687789;
  font-size: 10px;
  line-height: 1.55;
}

.messenger-locked button {
  min-height: 35px;
  margin-top: 7px;
  padding: 0 17px;
  border: 1px solid #3f6c9e;
  border-radius: 3px;
  color: #244f82;
  background: linear-gradient(#fff, #dce9f6);
  box-shadow: inset 0 0 0 1px #fff;
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
}

.messenger-auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 0.82fr);
  align-items: center;
  gap: 30px;
  padding: 35px;
}

.messenger-auth-brand {
  display: flex;
  align-items: center;
  gap: 17px;
}

.messenger-people-logo {
  position: relative;
  flex: 0 0 94px;
  width: 94px;
  height: 94px;
}

.messenger-people-logo span {
  position: absolute;
  display: grid;
  place-items: center;
  width: 61px;
  height: 72px;
  border: 2px solid #fff;
  border-radius: 48% 48% 35% 35%;
  color: #fff;
  background: linear-gradient(145deg, #74caf7, #2f7dc1);
  box-shadow: 0 5px 15px rgba(23, 74, 129, 0.25);
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 29px;
  font-weight: 700;
}

.messenger-people-logo span:first-child {
  top: 3px;
  left: 0;
  z-index: 2;
}

.messenger-people-logo span:last-child {
  right: 0;
  bottom: 1px;
  background: linear-gradient(145deg, #94da6d, #3e9a39);
}

.messenger-auth-brand > div:last-child > span {
  color: #4c79ab;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.messenger-auth-brand h2 {
  margin: 3px 0 4px;
  color: #23629f;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: clamp(26px, 3.5vw, 38px);
  letter-spacing: -0.05em;
}

.messenger-auth-brand p {
  margin: 0;
  color: #6e7c8c;
  font-size: 10px;
  line-height: 1.5;
}

.messenger-signin-card {
  padding: 18px;
  border: 1px solid #93a9bd;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 5px 15px rgba(31, 61, 94, 0.12), inset 0 1px #fff;
}

.messenger-signin-card label {
  display: block;
  margin: 0 0 4px;
  color: #40546e;
  font-size: 8px;
  font-weight: 700;
}

.messenger-signin-card label:not(:first-child) {
  margin-top: 10px;
}

.messenger-readonly-address,
.messenger-signin-card input {
  width: 100%;
  min-height: 34px;
  padding: 8px 9px;
  border: 1px solid #7f9db9;
  color: #243750;
  background: #fff;
  font-size: 9px;
}

.messenger-readonly-address {
  overflow: hidden;
  color: #627085;
  background: #efefea;
  font-family: 'Courier New', monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messenger-signin-card input {
  outline: 0;
}

.messenger-signin-card input:focus {
  border-color: #2b68bd;
  box-shadow: 0 0 0 2px rgba(43, 104, 189, 0.12);
}

.messenger-signin-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  margin-top: 11px;
  padding: 0 11px;
  border: 1px solid #286194;
  border-radius: 3px;
  color: #fff;
  background: linear-gradient(180deg, #6eb8e8, #3185c5 55%, #246aa7);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  text-shadow: 0 1px #245c8b;
}

.messenger-signin-button b {
  font-size: 17px;
}

.messenger-signin-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.messenger-status {
  min-height: 30px;
  margin-top: 9px;
  padding: 7px;
  border: 1px solid #bac3ca;
  color: #687685;
  background: #f4f5f3;
  font-size: 8px;
  line-height: 1.4;
}

.messenger-status.is-working {
  border-color: #83a6cc;
  color: #2f66a2;
  background: #edf5ff;
}

.messenger-status.is-error {
  border-color: #cb8e8b;
  color: #a33335;
  background: #fff0ef;
}

.messenger-status.is-success {
  border-color: #7cad83;
  color: #2d7a3d;
  background: #effaef;
}

.messenger-identity-note,
.messenger-privacy-note {
  margin: 9px 0 0;
  color: #747d87;
  font-size: 7px;
  line-height: 1.45;
}

.messenger-app {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  background: #f6f7f5;
}

.messenger-profilebar {
  display: flex;
  flex: 0 0 58px;
  align-items: center;
  gap: 9px;
  padding: 6px 10px;
  border-bottom: 1px solid #91a9c3;
  background: linear-gradient(90deg, #e6f3ff, #fff 62%, #edf8ee);
}

.messenger-avatar,
.messenger-conversation-avatar {
  display: grid;
  place-items: center;
  border: 1px solid #5e80a8;
  border-radius: 6px;
  color: #fff;
  background: linear-gradient(145deg, #6ec2ed, #3483bd);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5);
  font-family: 'Trebuchet MS', sans-serif;
  font-weight: 700;
}

.messenger-avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  font-size: 18px;
}

.messenger-profilebar > div:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.messenger-profilebar > div:nth-child(2) > strong {
  overflow: hidden;
  color: #26578e;
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messenger-profilebar > div:nth-child(2) > span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #6f7a87;
  font-size: 8px;
}

.messenger-profilebar > div:nth-child(2) > span i,
.messenger-contact-state.is-online,
.messenger-statusbar i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #43ac3f;
  box-shadow: 0 0 0 2px rgba(67, 172, 63, 0.13);
}

.messenger-profilebar > div:nth-child(2) > span b {
  max-width: 125px;
  overflow: hidden;
  font-weight: 400;
  text-overflow: ellipsis;
}

.messenger-profile-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
}

.messenger-profile-actions > span {
  color: #56718e;
  font-size: 8px;
}

.messenger-profile-actions button {
  min-height: 27px;
  padding: 0 9px;
  border: 1px solid #8193a5;
  color: #41556f;
  background: linear-gradient(#fff, #e2e8eb);
  cursor: pointer;
  font-size: 8px;
}

.messenger-main {
  display: grid;
  grid-template-columns: 225px minmax(0, 1fr);
  min-height: 0;
  flex: 1;
}

.messenger-sidebar {
  display: flex;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid #9daebb;
  background: #eef5fb;
}

.messenger-sidebar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  padding: 8px 9px;
  border-bottom: 1px solid #b7c6d1;
  color: #365d88;
  background: #dcebf7;
}

.messenger-sidebar-title strong {
  font-size: 9px;
}

.messenger-sidebar-title span {
  color: #6b7d8d;
  font-size: 7px;
}

.messenger-group-contact,
.messenger-contact {
  position: relative;
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-height: 47px;
  padding: 5px 7px;
  border: 0;
  border-bottom: 1px solid #c6d2da;
  color: #2f4662;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.messenger-group-contact:hover,
.messenger-contact:hover,
.messenger-group-contact.is-selected,
.messenger-contact.is-selected {
  color: #fff;
  background: linear-gradient(90deg, #4c8dcc, #65a4d6);
}

.messenger-group-icon,
.messenger-contact-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid #6686a1;
  border-radius: 5px;
  color: #fff;
  background: linear-gradient(145deg, #79c9ed, #3880b7);
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.messenger-group-contact > div,
.messenger-contact > div:nth-child(2) {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.messenger-group-contact strong,
.messenger-contact strong {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messenger-group-contact small,
.messenger-contact small {
  overflow: hidden;
  color: #748494;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messenger-group-contact:hover small,
.messenger-contact:hover small,
.messenger-group-contact.is-selected small,
.messenger-contact.is-selected small {
  color: #e6f3ff;
}

.messenger-contact-state {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #9aa4ad;
}

.messenger-contact-list {
  min-height: 0;
  flex: 1;
  overflow: auto;
}

.messenger-contact-empty {
  padding: 18px 10px;
  color: #71808d;
  font-size: 8px;
  line-height: 1.45;
  text-align: center;
}

.messenger-new-dm {
  padding: 8px;
  border-top: 1px solid #b3c2cd;
  background: #e2edf5;
}

.messenger-new-dm label {
  display: block;
  margin-bottom: 4px;
  color: #45617e;
  font-size: 8px;
  font-weight: 700;
}

.messenger-new-dm > div {
  display: flex;
  gap: 3px;
}

.messenger-new-dm input {
  min-width: 0;
  flex: 1;
  height: 28px;
  padding: 0 6px;
  border: 1px solid #7f9db9;
  outline: 0;
  font-size: 8px;
}

.messenger-new-dm button {
  padding: 0 9px;
  border: 1px solid #6282a3;
  color: #315577;
  background: linear-gradient(#fff, #dce8f1);
  cursor: pointer;
  font-size: 8px;
  font-weight: 700;
}

.messenger-new-dm small {
  display: block;
  min-height: 11px;
  margin-top: 3px;
  color: #77838d;
  font-size: 7px;
}

.messenger-new-dm small.is-error {
  color: #ac3235;
}

.messenger-conversation {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: #fff;
}

.messenger-conversation-head {
  display: flex;
  flex: 0 0 51px;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border-bottom: 1px solid #b7c5cf;
  background: linear-gradient(90deg, #f4f9ff, #fff);
}

.messenger-conversation-avatar {
  flex: 0 0 35px;
  width: 35px;
  height: 35px;
  font-size: 15px;
}

.messenger-conversation-head > div:last-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.messenger-conversation-head strong {
  overflow: hidden;
  color: #2f5f93;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messenger-conversation-head span {
  overflow: hidden;
  color: #778491;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messenger-message-list {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 10px;
  background:
    linear-gradient(rgba(84, 133, 180, 0.025) 1px, transparent 1px) 0 0 / 18px 18px,
    #fff;
}

.messenger-message {
  display: grid;
  grid-template-columns: 29px minmax(0, 1fr);
  gap: 7px;
  margin-bottom: 10px;
}

.messenger-message-avatar {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 1px solid #7690a8;
  border-radius: 4px;
  color: #fff;
  background: linear-gradient(145deg, #75bee5, #367caf);
  font-size: 10px;
  font-weight: 700;
}

.messenger-message.is-own .messenger-message-avatar {
  background: linear-gradient(145deg, #85cf70, #42943d);
}

.messenger-message-content {
  min-width: 0;
}

.messenger-message-meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.messenger-message-meta strong {
  overflow: hidden;
  color: #28639b;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.messenger-message.is-own .messenger-message-meta strong {
  color: #387d38;
}

.messenger-message-meta time {
  color: #9aa1a8;
  font-size: 7px;
}

.messenger-message-body {
  margin: 2px 0 0;
  color: #344353;
  font-size: 9px;
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.messenger-message-empty {
  display: grid;
  place-items: center;
  min-height: 0;
  flex: 1;
  padding: 25px;
  color: #82909d;
  background: #fff;
  font-size: 9px;
  text-align: center;
}

.messenger-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px;
  gap: 5px;
  padding: 7px;
  border-top: 1px solid #aebbc4;
  background: #edf2f5;
}

.messenger-composer textarea {
  min-width: 0;
  min-height: 44px;
  resize: none;
  padding: 6px;
  border: 1px solid #7f9db9;
  outline: 0;
  color: #27394d;
  font: 9px Tahoma, sans-serif;
}

.messenger-composer textarea:focus {
  border-color: #3473ba;
}

.messenger-composer button {
  border: 1px solid #2f719f;
  color: #fff;
  background: linear-gradient(#69b5df, #3485bb);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5);
  cursor: pointer;
  font-size: 9px;
  font-weight: 700;
  text-shadow: 0 1px #286286;
}

.messenger-composer button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.messenger-privacy-note {
  flex: 0 0 auto;
  margin: 0;
  padding: 5px 8px;
  border-top: 1px solid #d1d7da;
  background: #f5f5f1;
}

.messenger-statusbar span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notification.is-hired {
  border-color: #38994c;
  background: linear-gradient(180deg, #f7fff5, #dff4dc);
  box-shadow: 0 8px 28px rgba(24, 105, 45, 0.34);
}

.notification.is-hired strong {
  color: #2b7e39;
}

.notification.is-messenger {
  border-color: #3486bd;
  background: linear-gradient(180deg, #f7fcff, #dceffc);
}

.notification.is-messenger strong {
  color: #286d9d;
}

.start-menu {
  position: absolute;
  z-index: 110;
  left: 0;
  bottom: var(--taskbar-height);
  width: 340px;
  overflow: hidden;
  border: 2px solid #1450b7;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: #fff;
  box-shadow: 4px -8px 28px rgba(2, 19, 61, 0.38);
}

.start-menu header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  color: #fff;
  background: linear-gradient(180deg, #4a88ed, #1760ca);
  text-shadow: 0 1px #174284;
}

.start-menu header img {
  width: 48px;
  height: 48px;
  border: 2px solid #fff;
  border-radius: 6px;
  object-fit: cover;
}

.start-menu header div { display: grid; gap: 3px; min-width: 0; }
.start-menu header strong { font-family: 'Trebuchet MS', sans-serif; font-size: 15px; }
.start-menu header span { overflow: hidden; max-width: 235px; font-size: 9px; opacity: 0.82; text-overflow: ellipsis; }

.start-apps {
  display: grid;
  gap: 2px;
  padding: 8px;
}

.start-apps button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.start-apps button:hover { color: #fff; background: #3473d4; }
.start-apps button > div { display: grid; gap: 2px; }
.start-apps strong { font-size: 11px; }
.start-apps small { color: #717985; font-size: 8px; }
.start-apps button:hover small { color: #dbe8ff; }

.start-menu footer {
  display: flex;
  justify-content: flex-end;
  padding: 8px 10px;
  background: linear-gradient(180deg, #4a87e1, #2166c8);
}

.start-menu footer button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
  font-size: 10px;
}

.start-menu footer span { display: grid; place-items: center; width: 21px; height: 21px; border: 1px solid #fff; border-radius: 4px; background: #e27834; }

.taskbar {
  position: absolute;
  z-index: 100;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: var(--taskbar-height);
  color: #fff;
  background: linear-gradient(180deg, #2c78e5 0%, #125ed0 12%, #0a47b2 78%, #0b3c92 100%);
  box-shadow: inset 0 2px rgba(113, 172, 255, 0.7), 0 -2px 10px rgba(8, 27, 76, 0.24);
}

.start-button {
  display: flex;
  flex: 0 0 112px;
  align-items: center;
  gap: 8px;
  padding: 0 13px 0 8px;
  border: 0;
  border-radius: 0 15px 15px 0;
  color: #fff;
  background: linear-gradient(180deg, #75c84e 0%, #3f9b32 14%, #257922 80%, #1c6319 100%);
  box-shadow: inset 0 2px rgba(195, 246, 170, 0.6), 2px 0 4px rgba(4, 35, 84, 0.42);
  cursor: pointer;
  text-shadow: 1px 1px #165313;
}

.start-button img {
  width: 27px;
  height: 27px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 5px;
  object-fit: cover;
}

.start-button strong {
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 18px;
  font-style: italic;
}

.task-apps {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 3px;
  min-width: 0;
  padding: 5px 7px;
  overflow: hidden;
}

.task-app {
  display: flex;
  align-items: center;
  gap: 6px;
  width: min(162px, 21vw);
  height: 34px;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid rgba(1, 43, 129, 0.5);
  border-radius: 3px;
  color: #fff;
  background: rgba(45, 119, 224, 0.8);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.18);
  cursor: pointer;
  font-size: 10px;
  text-shadow: 0 1px #0f3d85;
  white-space: nowrap;
}

.task-app.is-active {
  background: rgba(20, 77, 176, 0.92);
  box-shadow: inset 1px 1px 3px rgba(0, 30, 101, 0.55);
}

.task-app .mini-app { flex: 0 0 19px; }

.system-tray {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 13px;
  padding: 0 13px;
  border-left: 1px solid rgba(0, 84, 157, 0.68);
  background: linear-gradient(180deg, #28a5e9, #1188d2);
  box-shadow: inset 1px 0 rgba(102, 209, 255, 0.48);
  font-size: 10px;
}

.tray-state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 8px;
  font-weight: 700;
}

.tray-state i { background: #8be66d; }

.system-tray time {
  min-width: 40px;
  text-align: right;
}

.notification-stack {
  position: absolute;
  z-index: 130;
  right: 13px;
  bottom: calc(var(--taskbar-height) + 12px);
  display: grid;
  gap: 8px;
  width: min(315px, calc(100vw - 26px));
  pointer-events: none;
}

.notification {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 10px;
  border: 1px solid #0f53b8;
  border-radius: 8px;
  color: #20324e;
  background: linear-gradient(180deg, #fff, #e8f2ff);
  box-shadow: 0 8px 25px rgba(8, 32, 91, 0.34);
  animation: notify-in 0.22s ease-out;
}

.notification img { width: 42px; height: 42px; border-radius: 6px; object-fit: cover; }
.notification div { display: grid; gap: 3px; }
.notification strong { color: #1d4c96; font-size: 10px; }
.notification span { color: #5e6b7e; font-size: 9px; line-height: 1.3; }
.notification b { color: #398432; font-size: 14px; }

@keyframes notify-in {
  from { transform: translateX(40px); opacity: 0; }
}

@media (max-width: 760px) {
  :root { --taskbar-height: 43px; }

  .login-card { border-radius: 12px; }
  .login-copy { padding: 27px 24px 16px; }
  .login-form { padding: 6px 24px 24px; }

  .employment-screen { padding: 4px; }
  .employment-program { max-height: calc(100vh - 8px); border-radius: 6px 6px 2px 2px; }
  .employment-menubar { display: none; }
  .employment-window-controls span:not(:last-child) { display: none; }
  .employment-body { padding: 8px; }
  .employment-heading { grid-template-columns: 38px 1fr; gap: 8px; margin-bottom: 8px; padding: 9px; }
  .employment-document-icon { width: 34px; height: 41px; font-size: 13px; }
  .employment-heading h1 { font-size: 19px; }
  .employment-heading p { font-size: 8px; }
  .employment-badge { grid-column: 1 / -1; justify-self: start; padding: 4px 7px; font-size: 9px; }
  .employment-layout { grid-template-columns: 1fr; gap: 9px; }
  .application-form { padding: 10px; }
  .application-fields { grid-template-columns: 1fr; gap: 7px; }
  .application-radio { grid-template-columns: 1fr; }
  .qualification-top strong { font-size: 22px; }
  .employment-sidebar { gap: 8px; }
  .employment-help-card { order: 2; }
  .direct-buy-card { order: 1; }
  .application-address-card { order: 3; }
  .employment-actions { flex: 0 0 auto; align-items: stretch; flex-direction: column; padding: 6px; }
  .employment-actions > span { display: none; }
  .employment-actions > div { display: grid; grid-template-columns: 0.65fr 1.35fr; }
  .employment-secondary, .employment-primary { padding: 0 7px; font-size: 8px; }

  .messenger-window { height: auto; }
  .messenger-menubar { display: none; }
  .messenger-auth { grid-template-columns: 1fr; gap: 16px; padding: 18px; }
  .messenger-auth-brand { justify-content: center; }
  .messenger-people-logo { flex-basis: 70px; width: 70px; height: 70px; }
  .messenger-people-logo span { width: 46px; height: 55px; font-size: 22px; }
  .messenger-auth-brand h2 { font-size: 26px; }
  .messenger-main { grid-template-columns: 150px minmax(0, 1fr); }
  .messenger-profilebar { flex-basis: 51px; }
  .messenger-profile-actions > span { display: none; }
  .messenger-sidebar-title { display: grid; }
  .messenger-group-contact, .messenger-contact { grid-template-columns: 29px minmax(0, 1fr) auto; padding: 4px; }
  .messenger-group-icon, .messenger-contact-avatar { width: 28px; height: 28px; font-size: 12px; }
  .messenger-conversation-head { flex-basis: 45px; }
  .messenger-composer { grid-template-columns: minmax(0, 1fr) 52px; padding: 4px; }
  .messenger-privacy-note { font-size: 6px; }

  .desktop-brand { top: 10px; right: 10px; }
  .desktop-brand span { display: none; }
  .desktop-ca { display: none; }

  .desktop-icons {
    top: 10px;
    left: 7px;
    right: 95px;
    bottom: auto;
    flex-flow: row nowrap;
    gap: 1px;
    overflow-x: auto;
  }

  .desktop-icon { flex: 0 0 66px; width: 66px; min-height: 68px; }
  .desktop-icon:nth-child(n + 5) { display: none; }
  .desktop-icon strong { font-size: 8px; }
  .icon-tile { width: 38px; height: 38px; font-size: 20px; }

  .window,
  .small-window {
    right: 5px;
    bottom: calc(var(--taskbar-height) + 5px);
    left: 5px !important;
    top: 86px !important;
    width: auto;
    max-height: none;
  }

  .window-titlebar { cursor: default; }
  .window-menubar { display: none; }
  .window-toolbar { flex: 0 0 35px; }
  .secure-read { display: none; }
  .window-content { padding: 10px; }
  .pay-grid strong { font-size: 10px; }
  .pay-stub span:first-child { display: none; }
  .pay-actions { align-items: stretch; flex-direction: column; gap: 7px; }
  .claim-button { flex-basis: 40px; width: 100%; }
  .claim-note { min-height: 26px; }
  .window-statusbar { flex: 0 0 20px; }

  .start-button { flex-basis: 84px; padding-left: 6px; }
  .start-button img { width: 24px; height: 24px; }
  .start-button strong { font-size: 15px; }
  .task-apps { padding: 4px; }
  .task-app { width: 42px; padding: 0 10px; }
  .task-app > span:last-child { display: none; }
  .system-tray { gap: 5px; padding: 0 8px; }
  .tray-state { display: none; }
  .start-menu { width: min(340px, 92vw); }
}

@media (max-height: 650px) and (min-width: 761px) {
  .window { top: 2vh !important; }
  .paycheck-paper .pay-amount { padding: 9px 16px; }
  .pay-amount > strong { font-size: 31px; }
  .wallet-entry { padding: 8px; }
}

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