/* The web version's own pieces: sign-in pages, the account pill, live-update notice. Same colours and font as the program. */
@font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

.nw-auth { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: #EEF2F4; font-family: Barlow, 'Segoe UI', sans-serif; color: #102436; padding: 16px; box-sizing: border-box; }
.nw-card { background: #fff; border: 1px solid #D5DEE3; border-radius: 8px; padding: 28px 28px 20px; width: min(380px, 100%); box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; }
.nw-card.nw-wide { width: min(620px, 100%); }
.nw-card h1 { margin: 6px 0 0; font-size: 24px; font-weight: 700; }
.nw-sub { margin: 0 0 8px; color: #3B5161; font-size: 15px; }
.nw-card form { display: flex; flex-direction: column; gap: 12px; }
.nw-card label { display: flex; flex-direction: column; gap: 5px; font-size: 14px; color: #3B5161; }
.nw-card input { min-height: 40px; padding: 0 10px; border: 1px solid #CBD5DA; border-radius: 4px; font: 16px Barlow, 'Segoe UI', sans-serif; color: #102436; }
.nw-card input:focus-visible, .nw-btn:focus-visible, .nw-bar button:focus-visible { outline: 3px solid #1D5B87; outline-offset: 2px; }
.nw-btn { min-height: 40px; padding: 0 18px; border: 1px solid #1D5B87; border-radius: 4px; background: #1D5B87; color: #fff; font: 600 15px Barlow, 'Segoe UI', sans-serif; cursor: pointer; }
.nw-btn:disabled { background: #B9C6CE; border-color: #B9C6CE; cursor: not-allowed; }
.nw-btn.nw-ghost { background: #fff; color: #1D5B87; align-self: flex-start; }
.nw-btn.nw-sm { min-height: 32px; padding: 0 12px; font-size: 14px; }
.nw-msg { margin: 0; min-height: 20px; font-size: 14px; color: #3B5161; }
.nw-msg.err { color: #8E1B25; font-weight: 600; }
.nw-foot { margin: 10px 0 0; font-size: 13px; color: #6B7F8C; }
.nw-tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.nw-tbl th, .nw-tbl td { text-align: left; padding: 7px 8px; border-bottom: 1px solid #E3E9EC; }
.nw-tbl th { color: #3B5161; font-weight: 600; }

.nw-bar { position: fixed; top: 10px; right: 14px; z-index: var(--z-menu, 300); display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 12px; background: #fff;
  border: 1px solid #D5DEE3; border-radius: 18px; box-shadow: 0 2px 8px rgba(16, 36, 54, .12); font: 14px Barlow, 'Segoe UI', sans-serif; color: #102436; }
.nw-bar button { min-height: 28px; padding: 0 12px; border: 1px solid #CBD5DA; border-radius: 14px; background: #F6F8F9; color: #102436; font: 600 13px Barlow, 'Segoe UI', sans-serif; cursor: pointer; }
.nw-bar.nw-support { background: #FFF4E0; border-color: #E69F00; }
.nw-menu { position: absolute; top: 40px; right: 0; min-width: 260px; background: #fff; border: 1px solid #D5DEE3; border-radius: 8px; box-shadow: 0 6px 20px rgba(16, 36, 54, .16);
  padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.nw-menu[hidden] { display: none; }
.nw-menu-h { padding: 4px 8px 8px; color: #3B5161; font-size: 13px; border-bottom: 1px solid #E3E9EC; overflow-wrap: anywhere; }
.nw-menu button { text-align: left; border: 0; border-radius: 4px; background: none; padding: 8px; font-weight: 500; }
.nw-menu button:hover { background: #EEF2F4; }
.nw-switch { display: flex; gap: 8px; align-items: center; padding: 8px; font-size: 14px; cursor: pointer; }
.nw-live { position: fixed; top: 54px; right: 14px; z-index: var(--z-toast, 400); background: #102436; color: #fff; padding: 10px 12px; border-radius: 6px; font: 14px Barlow, 'Segoe UI', sans-serif; display: flex; gap: 10px; align-items: center; }
.nw-live button { min-height: 28px; padding: 0 10px; border: 0; border-radius: 4px; background: #fff; color: #102436; font-weight: 600; cursor: pointer; }
.nw-dlg-back { position: fixed; inset: 0; z-index: var(--z-dialog, 500); background: rgba(16, 36, 54, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.nw-dlg { background: #fff; border-radius: 8px; padding: 22px 24px; width: min(640px, 100%); max-height: 86vh; overflow: auto; font: 15px Barlow, 'Segoe UI', sans-serif; color: #102436; display: flex; flex-direction: column; gap: 10px; }
.nw-dlg h2 { margin: 0; font-size: 20px; } .nw-dlg h3 { margin: 8px 0 0; font-size: 16px; }
.nw-dlg .nw-btn { align-self: flex-end; }