:root {
      --navy: #082a48;
      --muted: #6f7d8b;
      --line: #dbe3ea;
      --pressed: #f1f6fa;
      --blue: #0b6ca8;
      --blue-dark: #075b8f;
      --blue-soft: #f2f8fc;
      --danger: #b84444;
      --danger-soft: #fff1f1;
      --success: #178650;
      --success-soft: #eaf8f0;
    }

    * { box-sizing: border-box; }

    html, body {
      width: 100%;
      min-height: 100%;
      margin: 0;
      background: #fff;
      color: var(--navy);
      font-family: Arial, Helvetica, sans-serif;
      -webkit-font-smoothing: antialiased;
      -webkit-tap-highlight-color: transparent;
    }

    body { overscroll-behavior-y: none; }
    button, input { font: inherit; }

    .screen {
      display: flex;
      flex-direction: column;
      width: 100%;
      min-height: 100vh;
      min-height: 100dvh;
      padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom));
      background: #fff;
    }

    .topbar {
      position: relative;
      display: flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      min-height: 42px;
      margin-bottom: 20px;
    }

    .logo {
      display: flex;
      align-items: baseline;
      font-size: 21px;
      font-weight: 800;
      font-style: italic;
      letter-spacing: -1.2px;
      user-select: none;
    }

    .logo .pay { color: #111f31; }
    .logo .pos { color: var(--blue); }
    .logo sup { margin-left: 2px; font-size: 6px; font-style: normal; letter-spacing: 0; }

    .menu-button {
      position: absolute;
      top: 0;
      right: -4px;
      display: grid;
      width: 42px;
      height: 42px;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--navy);
      cursor: pointer;
    }

    .menu-button:active,
    .menu-button[aria-expanded="true"] { background: var(--pressed); }

    .app-menu {
      position: absolute;
      z-index: 20;
      top: 46px;
      right: 0;
      width: 196px;
      padding: 6px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 10px 28px rgba(8, 42, 72, .18);
    }

    .app-menu[hidden] { display: none; }

    .menu-item {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 42px;
      padding: 8px 10px;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--navy);
      font-size: 13px;
      font-weight: 600;
      text-align: left;
      cursor: pointer;
    }

    .menu-item:active { background: var(--pressed); }

    .intro {
      margin: 0 2px 16px;
      text-align: center;
    }

    h1 {
      margin: 0 0 5px;
      font-size: 22px;
      line-height: 1.2;
      font-weight: 800;
      letter-spacing: -.35px;
    }

    .subtitle {
      margin: 0;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.45;
    }

    .secure-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 9px;
      padding: 5px 9px;
      border-radius: 999px;
      background: var(--success-soft);
      color: var(--success);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: .25px;
      text-transform: uppercase;
    }

    .login-form {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
    }

    .field {
      position: relative;
      display: block;
      margin-bottom: 10px;
    }

    .field-label {
      display: block;
      margin: 0 2px 5px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .35px;
      text-transform: uppercase;
    }

    .input-wrap {
      position: relative;
      display: flex;
      align-items: center;
      min-height: 52px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: #fff;
      transition: border-color .16s ease, box-shadow .16s ease;
    }

    .input-wrap:focus-within {
      border-color: var(--blue);
      box-shadow: 0 0 0 3px rgba(11, 108, 168, .10);
    }

    .field-icon {
      display: grid;
      flex: 0 0 42px;
      width: 42px;
      place-items: center;
      color: var(--muted);
    }

    .text-input {
      min-width: 0;
      flex: 1;
      height: 50px;
      padding: 0 10px 0 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--navy);
      font-size: 14px;
      font-weight: 650;
    }

    .text-input::placeholder { color: #9aa8b4; font-weight: 500; opacity: 1; }

    .toggle-password {
      display: grid;
      flex: 0 0 44px;
      width: 44px;
      height: 44px;
      place-items: center;
      margin-right: 3px;
      padding: 0;
      border: 0;
      border-radius: 9px;
      background: transparent;
      color: var(--blue);
      cursor: pointer;
    }

    .toggle-password:active { background: var(--pressed); }

    .toggle-password svg[hidden] { display: none !important; }

    .form-meta {
      display: flex;
      min-height: 25px;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin: -2px 1px 10px;
    }

    .caps-warning {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding-top: 4px;
      color: #9a6810;
      font-size: 9px;
      font-weight: 700;
    }

    .caps-warning[hidden] { display: none; }

    .text-link {
      padding: 4px 0;
      border: 0;
      background: transparent;
      color: var(--blue);
      font-size: 11px;
      font-weight: 750;
      text-decoration: none;
      cursor: pointer;
    }

    .text-link:active { color: var(--blue-dark); }

    .error-message {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      min-height: 38px;
      margin: 0 0 10px;
      padding: 9px 10px;
      border: 1px solid #f0cccc;
      border-radius: 10px;
      background: var(--danger-soft);
      color: var(--danger);
      font-size: 10px;
      font-weight: 650;
      line-height: 1.35;
    }

    .error-message[hidden] { display: none; }

    .notice-message {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      min-height: 38px;
      margin: 0 0 10px;
      padding: 9px 10px;
      border: 1px solid #bfe2cf;
      border-radius: 10px;
      background: var(--success-soft);
      color: var(--success);
      font-size: 10px;
      font-weight: 650;
      line-height: 1.35;
    }

    .notice-message[hidden] { display: none; }

    .login-button,
    .create-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 50px;
      padding: 11px 16px;
      border-radius: 12px;
      font-size: 14px;
      font-weight: 750;
      cursor: pointer;
    }

    .login-button {
      border: 1px solid var(--blue);
      background: var(--blue);
      color: #fff;
      box-shadow: 0 4px 11px rgba(11, 108, 168, .19);
    }

    .login-button:active:not(:disabled) { background: var(--blue-dark); transform: scale(.992); }
    .login-button:disabled {
      border-color: #c9d4dc;
      background: #dbe3e9;
      color: #8494a1;
      box-shadow: none;
      cursor: default;
    }

    .button-spinner {
      width: 16px;
      height: 16px;
      margin-right: 8px;
      border: 2px solid rgba(255, 255, 255, .45);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin .75s linear infinite;
    }

    .button-spinner[hidden] { display: none; }

    .divider {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 14px 0 12px;
      color: var(--muted);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .35px;
      text-transform: uppercase;
    }

    .divider::before,
    .divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: var(--line);
    }

    .create-button {
      text-decoration: none;
      border: 1px solid #bfd3e1;
      background: var(--blue-soft);
      color: var(--blue);
    }

    .create-button:active { background: #e5f1f8; transform: scale(.992); }

    .footer {
      flex: 0 0 auto;
      margin: 0 0 10px;
      color: var(--muted);
      font-size: 9px;
      line-height: 1.4;
      text-align: center;
    }

    .footer a {
      color: var(--blue);
      font-size: inherit;
      font-weight: 700;
      text-decoration: none;
    }

    .footer { margin-top: auto; padding-top: 14px; }

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

    @media (max-height: 650px) {
      .topbar { margin-bottom: 10px; }
      .intro { margin-bottom: 10px; }
      .secure-badge { margin-top: 6px; }
      .input-wrap { min-height: 48px; }
      .text-input { height: 46px; }
      .field { margin-bottom: 7px; }
      .form-meta { margin-bottom: 7px; }
      .login-button, .create-button { min-height: 46px; }
      .divider { margin: 10px 0; }
      .login-action-dock { padding-top: 9px; }
      .footer { margin-bottom: 7px; }
    }

    @media (min-width: 430px) {
      .screen { width: min(100%, 430px); margin: 0 auto; }
    }

    @media (prefers-reduced-motion: reduce) {
      .input-wrap, .login-button, .create-button { transition: none; }
      .button-spinner { animation: none; }
    }
.login-form .pos-serial-hint{display:block;font-size:12px;line-height:1.5;color:var(--muted,#6a7c88);margin:8px 2px 2px;font-weight:400;max-width:100%}
.field[for=posSerialInput] .text-input,.field[for=resetSerial] .text-input{padding-inline:16px;width:100%}
.login-form .input-wrap{overflow:hidden}