.login-page{
      width:100%;
      max-width:560px;
      min-width:0;
      margin:20px auto 0;
    }

    [hidden],
    .login-native-face-btn[hidden]{
      display:none !important;
    }

    .login-topbar{
      margin-bottom:12px;
    }

    .login-chip{
      margin-top:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:12px;
      flex-wrap:wrap;
    }

    .login-chip-item{
      min-width:110px;
      text-align:center;
    }

    .login-chip-sep{
      width:1px;
      height:36px;
      background:rgba(255,255,255,.14);
    }

    .login-card{
      padding:18px;
      width:100%;
      max-width:100%;
      min-width:0;
      overflow:hidden;
    }

    .login-form{
      display:grid;
      gap:12px;
      margin-top:10px;
      min-width:0;
    }

    .login-form input,
    .login-form button,
    .login-methods,
    .login-method-panel{
      min-width:0;
      max-width:100%;
    }

    .login-methods{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
      margin:12px 0;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.1);
      border-radius:14px;
      padding:6px;
    }

    .login-method-tab{
      border:0;
      border-radius:10px;
      background:transparent;
      color:var(--muted);
      font-weight:800;
      cursor:pointer;
      padding:10px;
    }

    .login-method-tab.is-active{
      background:rgba(255,255,255,.12);
      color:var(--text);
    }

    .login-method-panel[hidden]{
      display:none;
    }

    .login-face-shell{
      display:grid;
      gap:12px;
      margin-top:10px;
    }

    .login-face-camera{
      position:relative;
      aspect-ratio:4/3;
      overflow:hidden;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.12);
      background:#f8fafc url("../../../images/face-camera-placeholder.png") center / min(54%, 300px) auto no-repeat;
    }

    .login-face-camera video,
    .login-face-camera canvas{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
    }

    .login-face-camera video{
      transform:none;
      transform-origin:center center;
      opacity:0;
      transition:opacity .18s ease;
    }

    .login-face-camera.is-camera-active video{
      opacity:1;
    }

    .login-face-result{
      display:grid;
      gap:6px;
      padding:12px;
      border-radius:12px;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.1);
      text-align:center;
    }

    .login-face-result strong{
      font-size:18px;
    }

    .login-face-actions{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
    }

    .login-btn{
      width:100%;
    }

    .login-native-face-status{
      border:1px solid rgba(255,255,255,.12);
      border-radius:12px;
      padding:10px 12px;
      color:var(--muted);
      font-size:13px;
      line-height:1.7;
      text-align:center;
      background:rgba(255,255,255,.05);
    }

    .login-native-face-status.is-error{
      color:#fecaca;
      border-color:rgba(248,113,113,.35);
      background:rgba(127,29,29,.2);
    }

    .login-native-face-status.is-success{
      color:#bbf7d0;
      border-color:rgba(34,197,94,.3);
      background:rgba(20,83,45,.18);
    }

    .login-note{
      margin-top:10px;
      text-align:center;
      color:var(--muted);
      font-size:12px;
      line-height:1.9;
    }

    .login-footer{
      margin-top:18px;
    }

    .device-attendance-launcher{
      position:fixed;
      z-index:80;
      left:50%;
      bottom:92px;
      bottom:calc(92px + env(safe-area-inset-bottom,0px));
      transform:translateX(-50%);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      width:calc(100vw - 28px);
      max-width:340px;
      min-width:0;
      min-height:52px;
      border-radius:999px;
      padding:12px 18px;
      background:linear-gradient(135deg,#38bdf8,#2563eb);
      border:1px solid rgba(255,255,255,.28);
      box-shadow:0 18px 42px rgba(14,165,233,.35);
      color:#fff;
      text-decoration:none;
      font-weight:900;
      text-align:center;
    }

    @media (orientation:landscape) and (max-height:900px){
      .login-page{
        max-width:620px;
        margin-top:10px;
      }

      .login-topbar{
        margin-bottom:8px;
      }

      .login-topbar .headline{
        margin-bottom:8px;
      }

      .login-topbar .headline h1{
        font-size:28px;
        font-size:clamp(24px,2.3vw,30px);
        line-height:1.25;
        margin-bottom:6px;
        white-space:nowrap;
        overflow-wrap:normal;
      }

      .login-topbar .headline p{
        font-size:13px;
        line-height:1.55;
      }

      .login-card{
        padding:16px;
      }

      .device-attendance-launcher{
        left:24px;
        right:auto;
        bottom:24px;
        bottom:calc(24px + env(safe-area-inset-bottom,0px));
        transform:none;
        width:240px;
        max-width:calc(100vw - 48px);
        min-height:48px;
        padding:10px 14px;
      }
    }

    .device-attendance-launcher[hidden]{
      display:none;
    }

    .device-attendance-launcher::before{
      content:"";
      width:10px;
      height:10px;
      border-radius:999px;
      background:#22c55e;
      box-shadow:0 0 0 5px rgba(34,197,94,.16);
    }

    @media (max-width:768px){
      .login-page{
        width:100%;
        margin-top:12px;
      }

      .login-card{
        padding:14px;
      }

      .login-chip{
        gap:8px;
      }

      .login-chip-item{
        min-width:96px;
      }

      .login-chip-sep{
        height:28px;
      }
    }

    @media (orientation:landscape) and (max-height:560px){
      .login-page{
        margin-top:8px;
        padding-bottom:12px;
      }

      .device-attendance-launcher{
        position:static;
        transform:none;
        width:100%;
        max-width:340px;
        min-height:44px;
        margin:12px auto 0;
        padding:10px 16px;
      }
    }

    @media (max-width:480px){
      .login-chip{
        display:grid;
        grid-template-columns:1fr 1fr;
      }

      .login-chip-sep{
        display:none;
      }

      .login-methods,
      .login-face-actions{
        grid-template-columns:1fr;
      }
    }