/* Implemented from output/imagegen/online-ui-design-v1.png. */
:root { --online-white:#e7e7e7; --online-muted:#aaa; --online-line:#bdbdbd65; }
body { padding-bottom:48px; }
#error { color:#eee;background:#111 url('../public/ui/online-panel.webp') center/cover;border-color:#777;font-family:GameChinese,serif; }
#buttons button:focus-visible { outline-color:#ddd; }
#stage { width:min(100vw,calc((100dvh - 48px)*1.6));max-height:calc(100dvh - 48px); }
.online-bar { position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,1060px);min-height:44px;display:flex;align-items:center;gap:24px;padding:8px 20px calc(8px + env(safe-area-inset-bottom));font:700 17px/1.4 GameChinese,'Songti SC',SimSun,serif;color:var(--online-white);background:#080808; }
.online-bar::before,.online-head::after,.online-footer::before { content:'';position:absolute;height:2px;background:url('../public/ui/rule.png') center/100% 100% no-repeat;opacity:.7; }
.online-bar::before { top:0;left:20px;right:20px; }
.online-bar span { margin-right:auto;color:var(--online-muted);font-size:13px; }
.online-bar button { border:0;background:none;color:inherit;font:inherit;cursor:pointer;white-space:nowrap;padding:4px 0; }
.online-bar button+button { border-left:1px solid #aaa6;padding-left:24px; }
.online-bar button:hover { color:#fff;text-shadow:0 0 4px #ffffff60; }
dialog { background:#111 url('../public/ui/online-panel.webp') center/cover;color:var(--online-white);border:0;border-radius:0;font:600 18px/1.8 GameChinese,'Songti SC',SimSun,serif;box-shadow:0 12px 80px #000; }
dialog::backdrop { background:#000c; }
dialog h2 { font-family:GameChinese,'Songti SC',SimSun,serif;font-size:32px; }
dialog button { border:1px solid var(--online-line);border-radius:0;background:#0005;color:var(--online-white);font:700 22px/1.5 GameChinese,'Songti SC',SimSun,serif;cursor:pointer; }
.online-dialog { width:960px;max-width:calc(100vw - 24px);min-height:min(570px,calc(100dvh - 64px));max-height:calc(100dvh - 32px);overflow:auto;padding:32px 52px 26px;scrollbar-color:#666 #141414; }
.online-head { display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;padding-bottom:12px; }
.online-head::after { bottom:2px;left:0;right:0; }
.online-head h2 { margin:0;white-space:nowrap;font-size:50px;line-height:1.5;letter-spacing:2px;font-weight:800; }
.online-dialog button { padding:8px 24px;transition:color .12s,background-color .12s; }
.online-dialog button:hover { background-color:#ffffff12;color:#fff; }
.online-dialog button.secondary { background:none; }
.online-head button.secondary { border:0;padding:4px 0;font-size:19px;white-space:nowrap;align-self:flex-start;margin-top:9px; }
.online-dialog button:disabled { opacity:.45;cursor:wait; }
.online-dialog button:focus-visible,.online-bar button:focus-visible,.online-dialog input:focus-visible { outline:1px solid #ddd;outline-offset:5px; }
.online-dialog p { margin:12px 0;font-size:16px;line-height:1.85; }
.online-dialog .online-intro { font-size:23px;letter-spacing:1px;margin:8px 0 30px; }
.online-dialog form { max-width:690px;margin:38px auto 8px; }
.online-dialog label { display:flex;align-items:center;gap:24px;margin:22px 0;font-size:26px;letter-spacing:2px;white-space:nowrap; }
.online-dialog input { width:100%;min-width:0;padding:10px 16px;border:1px solid #bdbdbd90;border-radius:0;background:#0006;color:#eee;font:500 21px/1.6 GameChinese,'Songti SC',SimSun,serif; }
.online-dialog input::placeholder { color:#8a8a8a;font-size:14px;letter-spacing:0; }
.online-actions { display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:22px 0 10px; }
.online-dialog form .online-actions { justify-content:space-between;margin-top:44px;gap:24px; }
.online-dialog form .online-actions button { flex:1;font-size:32px;letter-spacing:3px;padding:9px 16px; }
.online-dialog .account-name { font-size:23px;letter-spacing:1px;margin:12px 0 20px; }
.online-columns { display:grid;grid-template-columns:1fr 1fr;min-height:270px; }
.online-columns section { padding:12px 32px 24px 0; }
.online-columns section+section { padding:12px 0 24px 32px;border-left:1px solid var(--online-line); }
.online-dialog h3 { font-size:33px;font-weight:800;letter-spacing:2px;line-height:1.5;margin:0 0 14px; }
.online-dialog .online-caption { color:#bbb;font-size:15px; }
.online-dialog .online-detail { font-size:17px;line-height:2;margin:20px 0;color:#d1d1d1; }
.online-columns .online-actions button { font-size:23px; }
.backup-section .online-actions { display:grid;justify-content:start;gap:20px;margin-top:26px; }
.backup-section .online-actions button { text-align:left;border:0;border-bottom:1px solid var(--online-line);padding:0 0 6px; }
.online-footer { position:relative;text-align:right;padding-top:14px;margin-top:18px; }
.online-footer::before { top:0;left:0;right:0; }
.online-footer button { border:0;padding:2px 0;font-size:20px; }
.online-feedback { color:#ccc; }
.online-feedback:empty { display:none; }
.online-feedback.bad { color:#fff;border-left:2px solid #aaa;padding-left:12px; }
.online-dialog .online-empty { text-align:center;padding:80px 35px;color:#bdbdbd;font-size:21px;line-height:2.3; }
.online-dialog table { width:100%;border-collapse:collapse;margin:30px 0;font-size:23px; }
.online-dialog td,.online-dialog th { padding:12px 14px;text-align:left;border-bottom:1px solid var(--online-line);font-weight:600; }
.online-dialog th { font-size:25px;font-weight:700; }
.online-dialog td:first-child,.online-dialog th:first-child { width:15%; }
.online-dialog td:nth-child(2) { overflow-wrap:anywhere; }
.online-dialog[data-view=rank] > .online-actions { justify-content:center;gap:70px;margin-top:34px; }
.online-dialog[data-view=rank] > .online-actions button { border:0; }
@media(max-width:650px) {
  body { padding-bottom:54px; }
  #stage { width:min(100vw,calc((100dvh - 54px)*1.6));max-height:calc(100dvh - 54px); }
  .online-bar { gap:16px;padding:8px 12px;font-size:15px;flex-wrap:wrap;justify-content:flex-end; }
  .online-bar span { font-size:11px; }
  .online-bar button+button { padding-left:16px; }
  .online-dialog { padding:24px;min-height:0; }
  .online-head { gap:12px; }
  .online-head h2 { font-size:34px;letter-spacing:0; }
  .online-head button.secondary { font-size:14px; }
  .online-dialog .online-intro { font-size:17px;margin:12px 0 24px; }
  .online-dialog form { margin:22px 0; }
  .online-dialog label { font-size:20px;gap:16px;margin:20px 0; }
  .online-dialog input { font-size:17px;padding:9px 10px; }
  .online-dialog input::placeholder { font-size:11px; }
  .online-dialog form .online-actions { gap:16px;margin-top:28px; }
  .online-dialog form .online-actions button { font-size:23px;padding:8px 4px;letter-spacing:1px; }
  .online-columns { grid-template-columns:1fr; }
  .online-columns section { padding:12px 0 18px; }
  .online-columns section+section { padding:22px 0 12px;border-left:0;border-top:1px solid var(--online-line); }
  .online-dialog h3 { font-size:28px; }
  .online-dialog .online-detail { font-size:15px;margin:12px 0; }
  .backup-section .online-actions { display:flex;gap:22px;margin-top:18px; }
  .online-columns .online-actions button { font-size:20px; }
  .online-dialog .online-empty { padding:50px 5px;font-size:18px; }
  .online-dialog table { font-size:15px; }
  .online-dialog td,.online-dialog th { padding:10px 5px;font-size:15px; }
}
@media(max-height:540px) and (min-width:651px) {
  .online-dialog { padding:18px 36px;min-height:0; }
  .online-head h2 { font-size:32px; }
  .online-dialog .online-intro { font-size:17px;margin:8px 0; }
  .online-dialog form { margin:10px auto; }
  .online-dialog label { font-size:20px;margin:12px 0; }
  .online-dialog input { font-size:17px;padding:6px 12px; }
  .online-dialog form .online-actions { margin-top:20px; }
  .online-dialog form .online-actions button { font-size:24px; }
  .online-dialog h3 { font-size:25px; }
  .online-columns { min-height:0; }
}