/* login.css — หน้าเข้าสู่ระบบ
 *
 * แยกออกจาก login.html เพราะนโยบายความปลอดภัยของเนื้อหา (CSP) ของระบบ
 * ตั้งเป็น style-src 'self' ซึ่งบล็อกสไตล์ที่เขียนฝังในหน้า
 * การผ่อนนโยบายลงเพื่อความสะดวกไม่คุ้มกับความเสี่ยง จึงแยกไฟล์แทน
 */
/* หน้านี้ยืนอยู่ได้ด้วยตัวเอง ไม่ต้องรอสคริปต์โหลดจึงจะอ่านออก */
      .login-wrap {
        min-height: 100dvh;
        display: grid;
        place-items: center;
        padding: 24px;
      }
      .login-card {
        width: min(420px, 100%);
        background: var(--c-bg-raised);
        border: 1px solid var(--c-border);
        border-radius: 14px;
        padding: 28px 26px;
        box-shadow: 0 10px 30px rgb(0 0 0 / 6%);
      }
      .login-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 6px;
        font-weight: 700;
        font-size: 20px;
      }
      .login-mark {
        width: 34px;
        height: 34px;
        border-radius: 8px;
        background: var(--c-brand);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 15px;
      }
      .login-sub {
        color: var(--c-text-mute);
        margin-bottom: 20px;
        line-height: 1.6;
      }
      .login-room {
        background: var(--c-bg-inset);
        border-radius: 10px;
        padding: 12px 14px;
        margin-bottom: 18px;
        line-height: 1.7;
      }
      .login-room b {
        letter-spacing: 3px;
        font-size: 18px;
      }
      .fld {
        margin-bottom: 14px;
      }
      .fld label {
        display: block;
        margin-bottom: 6px;
        font-weight: 600;
      }
      .fld input {
        width: 100%;
        padding: 11px 12px;
        border: 1px solid var(--c-border-strong);
        border-radius: 9px;
        font: inherit;
        background: var(--c-bg-raised);
        color: inherit;
      }
      .fld input:focus-visible {
        outline: 2px solid var(--c-border-focus);
        outline-offset: 1px;
      }
      .login-btn {
        width: 100%;
        padding: 12px;
        border: 0;
        border-radius: 9px;
        background: var(--c-brand);
        color: #fff;
        font: inherit;
        font-weight: 700;
        cursor: pointer;
      }
      .login-btn:disabled {
        opacity: 0.6;
        cursor: progress;
      }
      .login-msg {
        margin-top: 14px;
        padding: 11px 13px;
        border-radius: 9px;
        line-height: 1.6;
        display: none;
      }
      .login-msg.show {
        display: block;
      }
      /* สีของสองสถานะนี้มาจาก token ซึ่งสลับตามธีมให้อยู่แล้ว
         จึงไม่ต้องเขียนชุดสีของธีมมืดซ้ำอีกชุดเหมือนเดิม */
      .login-msg.bad {
        background: var(--c-danger-soft);
        color: var(--c-danger);
      }
      .login-msg.ok {
        background: var(--c-ok-soft);
        color: var(--c-ok);
      }
      .login-help {
        margin-top: 18px;
        font-size: 14px;
        color: var(--c-text-mute);
        line-height: 1.7;
      }