/* Live mode: sign-in, first-run setup, password links and the saving indicator. */
.srvgate { position: fixed; inset: 0; z-index: 400; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); background: #f4f4ef; font-family: Inter, 'Noto Sans Arabic', system-ui, sans-serif; color: #1c1c1c; }
.srvgate .art { background: #15170f; color: #f1efe3; padding: 56px 60px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.srvgate .art img { width: 170px; margin-bottom: 18px; }
.srvgate .art h1 { font: 700 34px/1.15 'Plus Jakarta Sans', Inter, sans-serif; margin: 0; color: #fff; }
.srvgate .art p { margin: 0; color: rgba(241, 239, 227, .72); font-size: 15px; line-height: 1.6; max-width: 460px; }
.srvgate .box { display: flex; align-items: center; justify-content: center; padding: 32px 20px; }
.srvgate form { width: 100%; max-width: 380px; background: #fff; border: 1px solid #e3e4dc; border-radius: 18px; padding: 30px 28px; box-shadow: 0 18px 40px -28px rgba(0, 0, 0, .35); }
.srvgate h2 { font: 700 22px/1.2 'Plus Jakarta Sans', Inter, sans-serif; margin: 0 0 6px; }
.srvgate .sub { color: #5c6154; font-size: 13.5px; line-height: 1.5; margin: 0 0 18px; }
.srvgate label { display: block; font-size: 12.5px; font-weight: 600; color: #4b5045; margin: 12px 0 0; }
.srvgate input { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 11px 12px; border: 1px solid #d5d7cc; border-radius: 10px; font: 15px Inter, sans-serif; background: #fff; color: #1c1c1c; }
.srvgate input:focus { outline: 2px solid #8d8c5e; outline-offset: 1px; border-color: #8d8c5e; }
.srvgate button { width: 100%; margin-top: 20px; padding: 12px; border: 0; border-radius: 10px; background: #15170f; color: #fff; font: 600 15px Inter, sans-serif; cursor: pointer; }
.srvgate button:disabled { opacity: .55; cursor: default; }
.srvgate .err { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #fdecea; color: #a12d22; font-size: 13px; line-height: 1.45; }
.srvgate .note { margin: 16px 0 0; font-size: 12px; color: #6a6e61; line-height: 1.5; }
.srvgate .spin { text-align: center; color: #5c6154; font-size: 14px; }
.srvstat { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #3f7d55; white-space: nowrap; padding: 4px 9px; border-radius: 20px; background: rgba(63, 125, 85, .1); }
.srvstat::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.srvstat.busy { color: #8a6a10; background: rgba(208, 138, 23, .12); }
.srvstat.off { color: #a12d22; background: rgba(161, 45, 34, .1); }
.srvlink { display: block; margin-top: 6px; font-size: 11.5px; word-break: break-all; color: #5c6154; }
.srvpw { display: grid; gap: 6px; margin-top: 8px; }
html[data-theme=dark] .srvgate { background: #12140e; color: #ecede4; }
html[data-theme=dark] .srvgate form { background: #1b1e15; border-color: #33372a; }
html[data-theme=dark] .srvgate input { background: #12140e; color: #ecede4; border-color: #3a3f2f; }
html[data-theme=dark] .srvgate label, html[data-theme=dark] .srvgate .sub, html[data-theme=dark] .srvgate .note { color: #b4b8a6; }
html[data-theme=dark] .srvgate button { background: #a5a472; color: #12140e; }
html[dir=rtl] .srvgate { direction: rtl; }
@media (max-width: 820px) { .srvgate { grid-template-columns: 1fr; overflow-y: auto; } .srvgate .art { padding: 28px 22px; } .srvgate .art h1 { font-size: 24px; } .srvgate .art img { width: 120px; margin-bottom: 4px; } .srvgate .art ul, .srvgate .art p.long { display: none; } }
@media print { .srvgate, .srvstat { display: none !important; } }

.srvme { display: grid; gap: 2px; color: rgba(255, 255, 255, .9); font-size: 13px; padding: 4px 2px 6px; }
.srvme small { color: rgba(255, 255, 255, .55); }
.srvme .link { color: rgba(255, 255, 255, .7); text-align: left; padding: 4px 0 0; font-size: 12px; }
.srvname { font-size: 13px; }

.srvgate .qr { display: block; width: 200px; height: 200px; margin: 6px auto 4px; image-rendering: pixelated; border: 1px solid #e3e4dc; border-radius: 12px; background: #fff; padding: 6px; }
.srvgate .key { font: 600 13px/1.5 ui-monospace, Consolas, monospace; letter-spacing: .06em; word-break: break-all; }
.srvgate .codein { font: 600 22px/1 ui-monospace, Consolas, monospace; letter-spacing: .3em; text-align: center; }
.srvgate .codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 4px; }
.srvgate .codes b { font: 600 15px/1 ui-monospace, Consolas, monospace; letter-spacing: .08em; text-align: center; padding: 10px 6px; border: 1px dashed #c9cbbf; border-radius: 8px; background: #fafaf6; }
.srvgate button.plain { background: transparent; color: #4b5045; margin-top: 8px; }
.srvmfa { background: rgba(21, 23, 15, .55); grid-template-columns: 1fr; }
.srvmfa .box { align-items: center; }
.srvme small { display: block; }