/* Gx404 neutral skin. PairDrop keeps peers, dialogs, pairing, rooms and transfers. */
body {
  --primary-color: #4b78a0;
  --paired-device-color: #5e9b7e;
  --public-room-color: #b78c43;
  --dt-text-color: 228,233,243;
  --dt-dialog-bg-color: #161b23;
  --dt-bg-color: 21,26,33;
  --dt-bg-color-secondary: #252c36;
  --dt-border-color: #596473;
  --dt-badge-color: #3a4656;
  --lt-text-color: 39,48,58;
  --lt-dialog-bg-color: #ffffff;
  --lt-bg-color: 244,245,247;
  --lt-bg-color-secondary: #eef0f3;
  --lt-border-color: #9aa3ad;
  --lt-badge-color: #697586;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
}
body:not(.light-theme) { color: #e4e9f3; }
body.light-theme { color: #27303a; --primary-color: #426a91; }
body.dark-theme, body:not(.light-theme) { background: #151a21 !important; }
body.light-theme { background: #f4f5f7 !important; }
body > header { flex-shrink: 0; width: min(1120px,100%); margin: 0 auto; padding-top: 12px; }
body > header .icon-button { border: 1px solid #ffffff24; border-radius: 50%; background: #1c232dcc; color: #dee5f1; }
body.light-theme > header .icon-button { border-color: #d8dee6; background: #ffffffd9; color: #526071; }
body > header #pair-device, body > header #join-public-room { border-radius: 999px; }
body > header .gx-action-label { font-size: 12px; white-space: nowrap; padding: 0 9px 0 5px; }
body > header #pair-device, body > header #join-public-room { flex-direction: row; width: auto; padding: 0 9px; gap: 3px; align-items: center; }
.gx-intro { position: relative; text-align: center; padding: 24px 16px 20px; flex-shrink: 0; }
.gx-brand { display: inline-block; font: 700 clamp(36px,5vw,60px)/1.1 "Trebuchet MS",sans-serif; letter-spacing: -.055em; color: currentColor; }
.gx-intro h1 { font-size: 15px; line-height: 1.6; font-weight: 400; letter-spacing: .3em; margin: 12px 0 0; color: inherit; }
.gx-intro p { margin: 8px 0 0; font-size: 13px; opacity: .65; }
body #center { width: min(980px,calc(100% - 40px)); box-sizing: border-box; margin: 0 auto; flex-direction: column; justify-content: center; min-height: 190px; flex-shrink: 0; }
body x-no-peers { box-sizing: border-box; width: 100%; min-height: 205px; height: auto; flex-grow: 0; padding: 30px 20px; border-radius: 22px; border: 1px solid #ffffff26; background: #1c232dcc; backdrop-filter: blur(18px); }
body x-no-peers h2 { color: #e9edf7; font-size: 22px; font-weight: 500; margin: 0 0 12px; }
body x-no-peers div { color: #aab5c8; line-height: 1.8; }
body x-peers:not(:empty) { box-sizing: border-box; width: 100%; max-width: 100%; flex: 0 0 auto; gap: 16px; padding: 16px 0; overflow: visible; }
body x-peer { border: 1px solid #ffffff26; border-radius: 22px; background: #1c232dcc; backdrop-filter: blur(18px); padding: 28px 22px; color: #e9edf7; }
body x-peer .icon-wrapper { border-radius: 18px; background: #2d4056; color: #c0ccff; }
body x-instructions { flex-grow: 0; min-height: 28px; margin: 12px 0; opacity: .7; }
body > footer { width: min(540px,calc(100% - 40px)); box-sizing: border-box; margin: 20px auto 16px; padding: 18px 16px; border: 1px solid #ffffff26; border-radius: 22px; background: #1c232dcc; color: #e4e9f3; backdrop-filter: blur(18px); }
body > footer .logo { --icon-size: 36px; margin: 0 0 12px; }
body > footer .discovery-wrapper { background: #ffffff07; border: 1px solid #ffffff1f; padding: 7px; margin-top: 12px; }
body > footer .badge { background: #34415a; color: #eef2ff; }
.gx-registration { z-index: 1; position: relative; text-align: center; font-size: 11px; color: #8d99ab; padding: 10px 12px max(16px,env(safe-area-inset-bottom)); flex-shrink: 0; }
.gx-registration a { margin-left: 12px; }
body canvas.circles { display: none; }
body x-dialog x-paper { border-radius: 22px; border: 1px solid #ffffff2b; }
body.dark-theme x-paper > .row:first-of-type { background: #242f45; }
body .btn { border-radius: 12px; }
body.light-theme .gx-registration { color: #52637b; }
body.light-theme x-no-peers, body.light-theme x-peer, body.light-theme > footer { background: #fffffff0; color: #273650; border-color: #c9d2e1; }
body.light-theme x-no-peers h2 { color: #273650; }
body.light-theme x-no-peers div { color: #52637b; }
body.light-theme x-peer { color: #273650; }
body.light-theme > header .icon-button { border-color: #d8dee6; background: #ffffffd9; color: #526071; }
body.light-theme > footer { color: #273650; }
@media(max-width:600px) { .gx-intro { padding-top: 18px; padding-bottom: 18px; } .gx-intro p { font-size: 12px; } body #center { width: calc(100% - 28px); } body > footer { width: calc(100% - 28px); margin-top: 14px; } body x-no-peers { min-height: 180px; padding: 24px 14px; } body x-no-peers h2 { font-size: 18px; } body x-peer { padding: 20px 16px; } body > header .gx-action-label { display: none; } }
@media(max-height:760px) { html,body { overflow-y: auto; height: auto; min-height: 100%; } }
#theme-auto { display: none !important; }