@font-face{
  font-family:"Press Start 2P";
  src:
    url("fonts/PressStart2P-Regular.woff") format("woff"),
    url("fonts/PressStart2P-Regular.ttf") format("truetype");
  font-display:swap;
}

@font-face{
  font-family:"Zpix";
  src:
    url("fonts/Zpix.ttf") format("truetype");
  font-display:swap;
}

:root{
  --px-sky:#66b7ff;
  --px-sky-deep:#3a8de8;
  --px-cloud:#fffef2;
  --px-ground:#48c14f;
  --px-ground-dark:#2e8b33;
  --px-brick:#e46a2a;
  --px-brick-dark:#b44a1f;
  --px-coin:#ffd23c;
  --px-coin-dark:#e0a829;
  --px-bg:#66b7ff;
  --px-card:#fff2c2;
  --px-text:#18130d;
  --px-muted:#3f3a34;
  --px-border:#2b160c;
  --px-shadow:#1b0f09;
  --px-primary:#ff4b2b;
  --px-primary-dark:#d63a22;
  --px-accent:#2f6bff;
  --px-accent-dark:#204ed6;
  --px-warn:#f39c18;
  --px-radius:3px;
  --px-grid:rgba(0,0,0,.08);
}

body.ui-skin{
  margin:0;
  font-family:"Zpix","Press Start 2P","ZCOOL QingKe HuangYou","Noto Sans SC","Microsoft YaHei",monospace;
  font-size:16px;
  line-height:1.7;
  letter-spacing:.3px;
  font-weight:500;
  color:var(--px-text);
  --bg:var(--px-bg);
  --card:var(--px-card);
  --text:var(--px-text);
  --muted:var(--px-muted);
  --border:rgba(42,27,18,.55);
  --primary:var(--px-primary);
  --primary-dark:var(--px-primary-dark);
  --accent:var(--px-accent);
  --radius:var(--px-radius);
  --shadow:5px 5px 0 var(--px-shadow);
  --pixel-border:var(--px-border);
  --pixel-bg:#fff7da;
  --pixel-grid:rgba(0,0,0,.08);
  --pixel-shadow:rgba(26,18,13,.45);
  --warn-bg:#fff1c2;
  --warn-text:#7a3f00;
  --info-bg:#e6f2ff;
  --info-text:#1b3f6b;
  --success-bg:#e6f7e2;
  --success-text:#1f6a2d;
  --error-bg:#ffe5e5;
  --error-text:#8b1d1d;
  background:
    linear-gradient(180deg, var(--px-sky) 0%, var(--px-sky) 38%, #bfe5ff 65%, #ffe7b5 100%),
    linear-gradient(90deg, var(--px-grid) 1px, transparent 1px),
    linear-gradient(0deg, var(--px-grid) 1px, transparent 1px);
  background-size:auto, 12px 12px, 12px 12px;
  background-attachment:fixed;
  min-height:100vh;
  image-rendering:pixelated;
  text-rendering:optimizeSpeed;
  -webkit-font-smoothing:none;
  -moz-osx-font-smoothing:grayscale;
  font-smooth:never;
  position:relative;
}

body.ui-skin *{ box-sizing:border-box; }
body.ui-skin img,
body.ui-skin svg,
body.ui-skin canvas,
body.ui-skin video{ max-width:100%; height:auto; }

body.ui-skin::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 12% 16%, rgba(255,255,255,.96) 0 22px, transparent 23px),
    radial-gradient(circle at 18% 17%, rgba(255,255,255,.96) 0 18px, transparent 19px),
    radial-gradient(circle at 24% 16%, rgba(255,255,255,.96) 0 22px, transparent 23px),
    radial-gradient(circle at 76% 12%, rgba(255,255,255,.96) 0 20px, transparent 21px),
    radial-gradient(circle at 82% 13%, rgba(255,255,255,.96) 0 16px, transparent 17px),
    radial-gradient(circle at 88% 12%, rgba(255,255,255,.96) 0 22px, transparent 23px),
    radial-gradient(260px 140px at 16% 92%, rgba(83,179,84,.55) 0 60%, transparent 61%),
    radial-gradient(320px 160px at 86% 94%, rgba(60,143,64,.55) 0 60%, transparent 61%),
    radial-gradient(20px 20px at 12% 42%, rgba(255,210,60,.9) 0 8px, transparent 9px),
    radial-gradient(20px 20px at 86% 34%, rgba(255,210,60,.9) 0 8px, transparent 9px);
  opacity:.96;
}

body.ui-skin::after{
  content:"";
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:180px;
  pointer-events:none;
  z-index:0;
  background:
    repeating-linear-gradient(90deg, #e46a2a 0 22px, #c84f21 22px 26px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #e46a2a 0 58px, #c84f21 58px 62px, #4ccc55 62px 100%);
  background-size:88px 58px, 88px 58px, 100% 100%;
  background-position:0 0, 0 0, 0 0;
  box-shadow:inset 0 6px 0 rgba(255,255,255,.4), inset 0 -4px 0 rgba(0,0,0,.18);
}

body.ui-skin > *{
  position:relative;
  z-index:1;
}

/* 协议弹窗需要脱离常规文档流，防止被通用层级规则压成页面内元素 */
body.ui-skin > .agreement-mask{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
}

body.ui-skin a{ color:var(--px-text); }
body.ui-skin ::selection{ background:var(--px-coin); color:#1b1a15; }

body.ui-skin .ui-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}

body.ui-skin h1,
body.ui-skin h2,
body.ui-skin h3,
body.ui-skin .nav-title{
  font-weight:800;
  letter-spacing:.6px;
}

body.ui-skin strong{
  font-weight:900;
}

body.ui-skin .top-nav{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
  padding:12px 14px;
  background:
    linear-gradient(180deg, #fff5c6 0%, #ffd86a 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 12px);
  border-bottom:3px solid var(--px-border);
  box-shadow:4px 4px 0 var(--px-shadow);
  flex-wrap:wrap;
}

body.ui-skin .top-nav .nav-left{
  display:flex;
  align-items:center;
  gap:8px;
}

body.ui-skin .top-nav .nav-title{
  font-weight:700;
}

body.ui-skin .top-nav .nav-meta{
  font-size:11px;
  color:var(--px-muted);
}

body.ui-skin .top-nav .nav-links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  flex:1 1 auto;
}

body.ui-skin .top-nav .nav-actions{
  margin-left:auto;
  display:flex;
  gap:8px;
}

body.ui-skin .top-nav a{
  color:var(--px-text);
  text-decoration:none;
  padding:8px 12px;
  border:2px solid var(--px-border);
  border-radius:var(--px-radius);
  background:linear-gradient(180deg, #fffef3 0%, #ffe39a 100%);
  box-shadow:2px 2px 0 var(--px-shadow), inset 0 2px 0 rgba(255,255,255,.55);
  font-weight:700;
  transition:transform .08s ease, box-shadow .12s ease;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
  white-space:nowrap;
}

body.ui-skin .top-nav a:hover{
  transform:translate(-1px, -1px);
  box-shadow:3px 3px 0 var(--px-shadow);
}

body.ui-skin .top-nav a.active{
  background:linear-gradient(180deg, var(--px-primary) 0%, var(--px-primary-dark) 100%);
  color:#fff;
  border-color:var(--px-border);
  box-shadow:2px 2px 0 var(--px-shadow), inset 0 2px 0 rgba(255,255,255,.25);
}

body.ui-skin .top-nav .nav-links.secondary{
  width:100%;
  margin-top:6px;
}

body.ui-skin .top-nav .nav-links.secondary a{
  font-size:10px;
  background:#fffdf4;
}

body.ui-skin .top-nav .nav-toggle-input{ display:none; }

body.ui-skin .top-nav .nav-toggle{
  display:none;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:var(--px-radius);
  border:2px solid var(--px-border);
  background:#ffffff;
  font-weight:700;
  cursor:pointer;
  box-shadow:2px 2px 0 var(--px-shadow);
}

@media (max-width: 720px){
  body.ui-skin .top-nav{ align-items:center; gap:8px; }
  body.ui-skin .top-nav .nav-left{ flex:1 1 auto; min-width:0; }
  body.ui-skin .top-nav .nav-toggle{ display:inline-flex; margin-left:auto; }
  body.ui-skin .top-nav .nav-links{
    display:none;
    width:100%;
    gap:8px;
    padding-top:4px;
    max-height:min(68vh, 480px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.ui-skin .top-nav .nav-toggle-input:checked ~ .nav-links{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:stretch;
  }
  body.ui-skin .top-nav .nav-actions{ margin-left:0; flex:0 0 auto; }
  body.ui-skin .top-nav a{
    width:100%;
    min-height:40px;
    justify-content:flex-start;
    white-space:normal;
    text-align:left;
    line-height:1.35;
  }
  body.ui-skin .top-nav .nav-links.secondary{
    display:grid;
    grid-column:1 / -1;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    width:100%;
    margin-top:0;
  }
  body.ui-skin .top-nav .nav-actions a{ width:auto; }
}

body.ui-skin .card,
body.ui-skin section{
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 12px),
    linear-gradient(180deg, #fff8d8 0%, var(--px-card) 100%);
  border:3px solid var(--px-border);
  border-radius:var(--px-radius);
  box-shadow:6px 6px 0 var(--px-shadow);
}

body.ui-skin button{
  border-radius:var(--px-radius);
  border:2px solid var(--px-border);
  background:linear-gradient(180deg, var(--px-primary) 0%, var(--px-primary-dark) 100%);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:4px 4px 0 var(--px-shadow);
  transition:transform .08s ease, box-shadow .12s ease;
  font-family:inherit;
}

body.ui-skin button:hover{
  transform:translate(-1px, -1px);
  box-shadow:5px 5px 0 var(--px-shadow);
}

body.ui-skin button.secondary{
  background:linear-gradient(180deg, #fffef2 0%, #ffe9b0 100%);
  color:var(--px-text);
}

body.ui-skin button:disabled{
  opacity:.6;
  cursor:not-allowed;
  transform:none;
}

body.ui-skin input,
body.ui-skin select,
body.ui-skin textarea{
  border:2px solid var(--px-border);
  border-radius:var(--px-radius);
  background:#ffffff;
  color:var(--px-text);
  box-shadow:2px 2px 0 var(--px-shadow);
  max-width:100%;
  font-family:"Plus Jakarta Sans","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px;
  line-height:1.5;
  letter-spacing:0;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:auto;
}

body.ui-skin input:focus,
body.ui-skin select:focus,
body.ui-skin textarea:focus{
  outline:none;
  border-color:var(--px-accent-dark);
  box-shadow:2px 2px 0 var(--px-shadow), 0 0 0 3px rgba(46,119,255,.25);
}

body.ui-skin .result{
  border:2px solid var(--px-border);
  border-radius:var(--px-radius);
  box-shadow:3px 3px 0 var(--px-shadow);
  background:#fffef6;
}
body.ui-skin .result.success{ color:#065f46; }
body.ui-skin .result.error{ color:#b42318; }

body.ui-skin .notice{
  border:2px solid var(--px-border);
  border-radius:var(--px-radius);
  box-shadow:3px 3px 0 var(--px-shadow);
  background:var(--pixel-bg);
  color:var(--px-text);
}

body.ui-skin .notice.warn{
  background:var(--warn-bg);
  color:var(--warn-text);
}

body.ui-skin .notice.tutorial{
  background:var(--info-bg);
  color:var(--info-text);
}

body.ui-skin .toast{
  border:2px solid var(--px-border);
  border-radius:var(--px-radius);
  box-shadow:4px 4px 0 var(--px-shadow);
  background:var(--px-card);
  color:var(--px-text);
}

body.ui-skin .pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  border:2px solid var(--px-border);
  background:linear-gradient(180deg, var(--px-coin) 0%, var(--px-coin-dark) 100%);
  color:#2a160c;
  box-shadow:2px 2px 0 var(--px-shadow), inset 0 2px 0 rgba(255,255,255,.45);
}

body.ui-skin .pill.on{ background:linear-gradient(180deg, #7cf37d 0%, #39b24a 100%); color:#0f3b1c; }
body.ui-skin .pill.off{ background:linear-gradient(180deg, #ffb3b3 0%, #e46464 100%); color:#4a1111; }

body.ui-skin .ui-hero{
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 16px),
    linear-gradient(180deg, #fff7d9 0%, var(--px-card) 100%);
  border:3px solid var(--px-border);
  border-radius:var(--px-radius);
  padding:18px 20px;
  box-shadow:6px 6px 0 var(--px-shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

body.ui-skin .ui-hero .note{
  margin:6px 0 0;
  color:var(--px-muted);
  font-size:11px;
}

body.ui-skin pre,
body.ui-skin code{
  white-space:pre-wrap;
  word-break:break-word;
}

body.ui-skin table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  background:#ffffff;
  color:#1c1b1a;
  font-family:"Plus Jakarta Sans","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:13px;
  line-height:1.45;
  letter-spacing:0;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:auto;
}

body.ui-skin th,
body.ui-skin td{
  padding:10px 12px;
  border:1px solid rgba(15,23,42,.14);
  word-break:normal;
  overflow-wrap:anywhere;
  white-space:normal;
  vertical-align:top;
}

body.ui-skin th{
  background:#f8fafc;
  font-weight:700;
  color:#0f172a;
}

body.ui-skin td{
  font-weight:500;
  color:#1c1b1a;
}

body.ui-skin table tbody tr:nth-child(even){
  background:rgba(15,61,62,.03);
}

body.ui-skin .table-wrapper{
  overflow:auto;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}

body.ui-skin .row{
  flex-wrap:wrap;
}

body.ui-plain{
  margin:0;
  font-family:"Plus Jakarta Sans","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:500;
  color:var(--text, #1c1b1a);
  background:var(--bg, #f6f1ea);
  min-height:100vh;
}

body.ui-plain h1,
body.ui-plain h2,
body.ui-plain h3,
body.ui-plain .nav-title{
  font-weight:800;
}

body.ui-plain .top-nav{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
  padding:12px 14px;
  background:var(--card, #ffffff);
  border-bottom:1px solid var(--border, rgba(28,27,26,.12));
  box-shadow:0 10px 24px rgba(17,16,15,.08);
  flex-wrap:wrap;
}

body.ui-plain .top-nav .nav-left{
  display:flex;
  align-items:center;
  gap:8px;
}

body.ui-plain .top-nav .nav-title{
  font-weight:700;
}

body.ui-plain .top-nav .nav-meta{
  font-size:12px;
  color:var(--muted, #7a7168);
}

body.ui-plain .top-nav .nav-links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  flex:1 1 auto;
}

body.ui-plain .top-nav .nav-actions{
  margin-left:auto;
  display:flex;
  gap:8px;
}

body.ui-plain .top-nav a{
  color:var(--text, #1c1b1a);
  text-decoration:none;
  padding:8px 12px;
  border:1px solid var(--border, rgba(28,27,26,.12));
  border-radius:10px;
  background:#ffffff;
  font-weight:600;
  transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}

body.ui-plain .top-nav a:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(15,61,62,.12);
}

body.ui-plain .top-nav a.active{
  background:var(--primary, #0f3d3e);
  color:#fff;
  border-color:var(--primary, #0f3d3e);
  box-shadow:0 10px 24px rgba(15,61,62,.2);
}

body.ui-plain .top-nav .nav-links.secondary{
  width:100%;
  margin-top:6px;
}

body.ui-plain .top-nav .nav-links.secondary a{
  font-size:12px;
  background:var(--card, #ffffff);
}

body.ui-plain .top-nav .nav-toggle-input{ display:none; }

body.ui-plain .top-nav .nav-toggle{
  display:none;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid var(--border, rgba(28,27,26,.12));
  background:#ffffff;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(15,61,62,.12);
}

@media (max-width: 720px){
  body.ui-plain .top-nav{ align-items:center; gap:8px; }
  body.ui-plain .top-nav .nav-left{ flex:1 1 auto; min-width:0; }
  body.ui-plain .top-nav .nav-toggle{ display:inline-flex; margin-left:auto; }
  body.ui-plain .top-nav .nav-links{
    display:none;
    width:100%;
    gap:8px;
    padding-top:4px;
    max-height:min(68vh, 480px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.ui-plain .top-nav .nav-toggle-input:checked ~ .nav-links{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-items:stretch;
  }
  body.ui-plain .top-nav .nav-actions{ margin-left:0; flex:0 0 auto; }
  body.ui-plain .top-nav a{
    width:100%;
    min-height:40px;
    justify-content:flex-start;
    white-space:normal;
    text-align:left;
    line-height:1.35;
  }
  body.ui-plain .top-nav .nav-links.secondary{
    display:grid;
    grid-column:1 / -1;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:8px;
    width:100%;
    margin-top:0;
  }
  body.ui-plain .top-nav .nav-actions a{ width:auto; }
}

body.ui-plain .pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid var(--border, rgba(28,27,26,.12));
  background:var(--card, #ffffff);
  color:var(--text, #1c1b1a);
  box-shadow:0 6px 14px rgba(15,61,62,.08);
}

body.ui-plain .pill.on{ background:#d1fae5; color:#065f46; }
body.ui-plain .pill.off{ background:#fee2e2; color:#991b1b; }

body.ui-plain .ui-hero{
  background:var(--card, #ffffff);
  border:1px solid var(--border, rgba(28,27,26,.12));
  border-radius:var(--radius, 16px);
  padding:18px 20px;
  box-shadow:var(--shadow, 0 16px 36px rgba(17,16,15,.12));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

body.ui-plain .ui-hero .note{
  margin:6px 0 0;
  color:var(--muted, #7a7168);
  font-size:12px;
}

body.ui-plain .table-wrapper{
  overflow:auto;
  max-width:100%;
  -webkit-overflow-scrolling:touch;
}

body.ui-plain table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  font-size:13px;
  line-height:1.45;
}

body.ui-plain th,
body.ui-plain td{
  font-size:13px !important;
  line-height:1.45;
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  word-break:break-word;
  overflow-wrap:anywhere;
}

body.ui-plain th{
  font-weight:700;
}

body.ui-plain td{
  font-weight:600;
  color:var(--text, #1c1b1a);
}

body.ui-plain table tbody tr:nth-child(even){
  background:rgba(15,61,62,.03);
}

body.ui-plain code,
body.ui-plain td.code,
body.ui-plain th.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}

body.ui-plain code{
  display:inline-block;
  padding:2px 8px;
  border-radius:8px;
  border:1px solid #334155;
  background:#0f172a;
  color:#f8fafc;
  font-size:12px;
  font-weight:700;
  white-space:normal;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}