/* PIXEL STYLE v3 - 明亮浅色双色调 */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f5f7ff;--panel:#ffffff;--panel2:#eef1fb;
  --border:#c8cde8;--border2:#d8dcf0;
  --c1:#0057ff;   /* 宝蓝 主色 */
  --c2:#00c853;   /* 翠绿 成功 */
  --text:#1a1a2e;--dim:#8890b5;--text2:#6670a8;
  --red:#e53935;--yellow:#f57f17;
}
body{
  background-color:var(--bg);
  color:var(--text);
  font-family:'Press Start 2P','Courier New',monospace;
  font-size:10px;line-height:2;min-height:100vh;
  image-rendering:pixelated;-webkit-font-smoothing:none;
}
body::after{
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(transparent 0,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);
  pointer-events:none;z-index:9999;
}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:var(--panel)}
::-webkit-scrollbar-thumb{background:var(--c1)}
::-webkit-scrollbar-thumb:hover{background:var(--c2)}
::selection{background:var(--c1);color:var(--bg)}

/* ---- 外层 ---- */
.pixel-wrapper{max-width:860px;margin:0 auto;padding:20px 14px;display:flex;flex-direction:column;gap:14px;min-height:100vh}

/* ---- 面板 ---- */
.p-box{background:var(--panel);border:2px solid var(--border);padding:14px;position:relative}
.p-box--hot{border-color:var(--c1);box-shadow:0 0 0 1px var(--c1),inset 0 0 20px rgba(0,87,255,0.06)}
.p-box--ok{border-color:var(--c2)}

/* 面板标题 */
.p-hdr{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--border2);margin-bottom:12px}
.p-hdr-title{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--c1);letter-spacing:1px}
.p-hdr-sub{font-size:10px;color:var(--dim)}

/* 角落装饰 */
.c1,.c2,.c3,.c4{position:absolute;width:5px;height:5px;border-color:var(--c1);border-style:solid}
.c1{top:-2px;left:-2px;border-width:2px 0 0 2px}
.c2{top:-2px;right:-2px;border-width:2px 2px 0 0}
.c3{bottom:-2px;left:-2px;border-width:0 0 2px 2px}
.c4{bottom:-2px;right:-2px;border-width:0 2px 2px 0}

/* ---- 按钮 ---- */
.p-btn{font-family:'Press Start 2P',monospace;font-size:10px;padding:10px 14px;border:2px solid transparent;cursor:pointer;letter-spacing:0.5px;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1;user-select:none}
.p-btn:active:not(:disabled){transform:translate(2px,2px);box-shadow:none!important}
.p-btn:disabled{opacity:0.3;cursor:not-allowed}
.p-btn-a{background:var(--c1);color:#fff;border-color:var(--c1);box-shadow:3px 3px 0 rgba(0,87,255,0.35)}
.p-btn-a:hover:not(:disabled){background:#003ddb;border-color:#003ddb;box-shadow:3px 3px 0 rgba(0,87,255,0.5)}
.p-btn-b{background:var(--c2);color:#fff;border-color:var(--c2);box-shadow:3px 3px 0 rgba(0,200,83,0.35)}
.p-btn-b:hover:not(:disabled){background:#00a844}
.p-btn-c{background:transparent;color:var(--text2);border-color:var(--border2);box-shadow:2px 2px 0 var(--border2)}
.p-btn-c:hover:not(:disabled){border-color:var(--c1);color:var(--c1);box-shadow:2px 2px 0 rgba(0,212,255,0.3)}
.p-btn-d{background:transparent;color:var(--dim);border-color:var(--border);box-shadow:2px 2px 0 var(--border)}
.p-btn-d:hover:not(:disabled){border-color:var(--red);color:var(--red);box-shadow:2px 2px 0 rgba(255,68,102,0.3)}
.p-btn-block{width:100%}
.p-btn-sm{font-size:10px;padding:8px 12px}

/* ---- 输入框 ---- */
.p-input{font-family:'Press Start 2P',monospace;font-size:10px;background:var(--panel2);color:var(--c1);border:2px solid var(--border2);padding:10px 12px;width:100%;outline:none;letter-spacing:1px}
.p-input:focus{border-color:var(--c1);color:var(--c1)}
.p-input::placeholder{color:var(--dim)}

/* ---- 标签 ---- */
.p-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:3px 7px;border:1px solid}
.p-tag-c1{color:var(--c1);border-color:var(--c1);background:rgba(0,212,255,0.07)}
.p-tag-c2{color:var(--c2);border-color:var(--c2);background:rgba(0,255,157,0.07)}
.p-tag-dim{color:var(--dim);border-color:var(--border2);background:transparent}
.p-tag-yel{color:var(--yellow);border-color:var(--yellow);background:rgba(255,204,0,0.07)}
.p-tag-red{color:var(--red);border-color:var(--red);background:rgba(255,68,102,0.07)}

/* ---- 数字展示 ---- */
.p-n{font-size:18px;letter-spacing:2px;text-shadow:0 0 6px currentColor}
.p-n-c1{color:var(--c1)}
.p-n-c2{color:var(--c2)}
.p-n-red{color:var(--red)}
.p-n-dim{color:var(--dim)}

/* ---- Toast ---- */
#toast-container{position:fixed;top:14px;right:14px;z-index:1000;display:flex;flex-direction:column;gap:7px;pointer-events:none}
.p-toast{font-family:'Press Start 2P',monospace;font-size:10px;padding:10px 14px;border:2px solid;background:var(--panel2);pointer-events:auto;display:flex;align-items:center;gap:8px;animation:ti .1s steps(2) forwards;max-width:270px;line-height:1.8;word-break:break-all}
.p-toast-c1{border-color:var(--c1);color:var(--c1)}
.p-toast-c2{border-color:var(--c2);color:var(--c2)}
.p-toast-red{border-color:var(--red);color:var(--red)}
.p-toast-yel{border-color:var(--yellow);color:var(--yellow)}
@keyframes ti{from{transform:translateX(16px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ---- 指示灯 ---- */
.dot{width:7px;height:7px;background:var(--dim);border:1px solid var(--text2);display:inline-block;flex-shrink:0}
.dot-on{background:var(--c2);box-shadow:0 0 4px var(--c2)}

/* ---- 历史条目 ---- */
.p-log{border:1px solid var(--border2);background:var(--panel2);padding:8px 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.p-log:hover{border-color:var(--c1)}
.p-log+*+p-log{margin-top:5px}

/* ---- 开关 ---- */
.p-sw{position:relative;width:34px;height:16px;background:var(--panel2);border:2px solid var(--border2);cursor:pointer;flex-shrink:0}
.p-sw::after{content:'';position:absolute;top:0;left:0;width:8px;height:8px;background:var(--dim);display:block;margin:2px}
.p-sw-on{border-color:var(--c1)}
.p-sw-on::after{left:18px;background:var(--c1);box-shadow:0 0 4px var(--c1)}

/* ---- 动画 ---- */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes pborder{0%,100%{border-color:var(--c1)}50%{border-color:#0037c1}}
.p-blink{animation:blink .8s steps(1) infinite}
.p-pulse{border-color:var(--c1);animation:pborder 2.5s ease-in-out infinite}

/* ---- 工具 ---- */
.d-flex{display:flex}.a-center{align-items:center}.j-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.pt-3{padding-top:12px}
.bt{border-top:1px solid var(--border2)}
.hide{display:none!important}
.sa{user-select:all}
.t-center{text-align:center}
.f-col{flex-direction:column}
.footer{border-top:2px solid var(--border);padding-top:12px;margin-top:auto;text-align:center;color:var(--dim);font-size:10px;display:flex;flex-direction:column;align-items:center;gap:6px}
.footer a{color:var(--c1);text-decoration:none}

@media(max-width:600px){
  .p-n{font-size:13px}
  .pixel-wrapper{padding:14px 10px;gap:12px}
}