*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--bg:#05070d;--card:#0e1422;--line:#1f2a44;--blue:#00a8ff;--cyan:#00e5ff;--red:#ff2e4d;--gold:#c9a227;--txt:#e8eefc;--mut:#8a97b5}
body{font-family:"Noto Sans TC","PingFang HK","Microsoft JhengHei",system-ui,sans-serif;background:radial-gradient(circle at 20% 0%,#0a2a55 0,transparent 45%),radial-gradient(circle at 100% 100%,#3a0614 0,transparent 40%),var(--bg);color:var(--txt);min-height:100vh}
body:before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(0,168,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,168,255,.06) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:-1}
.wrap{max-width:760px;margin:0 auto;padding:20px 16px 60px}
header.top{display:flex;justify-content:space-between;align-items:center;padding:6px 0 18px;border-bottom:1px solid var(--line);margin-bottom:22px}
.brand{font-weight:900;letter-spacing:3px;font-size:14px}.brand b{color:var(--blue)}
a{color:var(--cyan);text-decoration:none}
h1{font-size:clamp(28px,6vw,44px);font-weight:900;line-height:1.15}
.en{color:var(--blue);letter-spacing:3px;font-size:13px;font-weight:700;margin:6px 0 14px}
.red{color:var(--red)}.gold{color:var(--gold)}
.card{background:linear-gradient(160deg,#111a2e,#0a0f1b);border:1px solid var(--line);border-radius:16px;padding:20px;margin:14px 0;position:relative;overflow:hidden}
.btn{display:inline-block;border:none;cursor:pointer;font:inherit;font-weight:800;font-size:17px;padding:14px 26px;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--cyan));color:#001;box-shadow:0 0 24px rgba(0,168,255,.4);transition:.15s}
.btn:active{transform:scale(.96)}.btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line);box-shadow:none}
.btn.redb{background:linear-gradient(90deg,var(--red),#ff6a3d);color:#fff;box-shadow:0 0 24px rgba(255,46,77,.4)}
.btn:disabled{opacity:.4}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.opt{background:#0b1220;border:1px solid var(--line);color:var(--txt);border-radius:14px;padding:18px 12px;font:inherit;font-size:17px;cursor:pointer;text-align:center;transition:.15s}
.opt .e{font-size:30px;display:block;margin-bottom:6px}
.opt:hover,.opt.sel{border-color:var(--blue);background:#0d2140;box-shadow:0 0 18px rgba(0,168,255,.35)}
.bar{height:6px;background:var(--line);border-radius:9px;overflow:hidden;margin:10px 0}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--red));transition:.4s}
.hidden{display:none!important}
.center{text-align:center}.mut{color:var(--mut);font-size:14px}
.scan{width:150px;height:150px;margin:24px auto;border-radius:50%;border:3px solid var(--line);border-top-color:var(--cyan);border-right-color:var(--red);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.log{font-family:ui-monospace,monospace;font-size:13px;color:var(--cyan);min-height:110px;text-align:left;max-width:420px;margin:0 auto}
.tag{display:inline-block;padding:4px 12px;border-radius:999px;border:1px solid var(--blue);color:var(--cyan);font-size:13px;margin:3px}
input,textarea{width:100%;background:#070c17;border:1px solid var(--line);border-radius:10px;color:var(--txt);font:inherit;font-size:16px;padding:12px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
table{width:100%;border-collapse:collapse}td,th{padding:8px;border-bottom:1px solid var(--line);text-align:left}
footer{margin-top:30px;color:var(--mut);font-size:12px;text-align:center}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;background:#1a2740;border:1px solid var(--gold);color:var(--gold);font-size:12px;font-weight:700;letter-spacing:1px}

/* —— ProArt P16 KV / product —— */
body.proart-bg{background-color:#05070d;background-image:
  linear-gradient(180deg,rgba(5,7,13,.72) 0%,rgba(5,7,13,.88) 55%,rgba(5,7,13,.96) 100%),
  url("assets/web/kv-bg.jpg");
background-size:cover;background-position:center top;background-attachment:fixed}
body.proart-bg:before{opacity:.35}
.kv-hero{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--line);margin:0 0 22px;min-height:220px;
background:#0a0f1b url("assets/web/kv-hero.jpg") center 40%/cover no-repeat}
.kv-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,13,.92) 0%,rgba(5,7,13,.55) 55%,rgba(5,7,13,.25) 100%)}
.kv-hero .kv-inner{position:relative;z-index:1;padding:28px 22px;max-width:520px}
.kv-hero .kv-product{position:absolute;right:-10px;bottom:-20px;width:min(48%,340px);z-index:2;pointer-events:none;filter:drop-shadow(0 12px 28px rgba(0,0,0,.55))}
@media(max-width:820px){
.kv-hero{
  min-height:auto;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  background-image:none !important;
  background-color:#0a0f1b;
}
.kv-hero:after{display:none}
.kv-hero .kv-inner{position:relative;z-index:2;max-width:100%;padding:22px 18px 4px}
.kv-hero .kv-product{
  position:relative !important;
  z-index:2;
  inset:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  top:auto !important;
  width:min(70%,260px) !important;
  max-width:260px;
  height:auto !important;
  margin:8px auto 18px !important;
  display:block;
  opacity:1;
  float:none !important;
}
}
.prod-badge{display:flex;align-items:center;gap:10px}
.prod-badge img{height:42px;width:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}
.tie-prod{display:flex;gap:14px;align-items:center}
.tie-prod img{width:110px;height:auto;flex-shrink:0;filter:drop-shadow(0 6px 14px rgba(0,0,0,.45))}

/* —— Homepage stats + leaderboards —— */
.home-stats h2{font-size:22px}
.home-counts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.home-count{background:#070c17;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.home-count b{font-size:28px;font-weight:900;color:var(--cyan);margin:0 4px}
.home-lb .card h3{font-size:18px;margin:0}
.home-lb-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.home-lb-mini{background:#070c17;border:1px solid var(--line);border-radius:12px;padding:12px}
.home-lb-mini h4{font-size:14px;font-weight:800;color:var(--gold);margin:0 0 8px}
.home-lb-mini table{font-size:13px}
.home-lb-mini td,.home-lb-mini th{padding:6px 4px}
@media(max-width:560px){
  .home-counts,.home-lb-grid{grid-template-columns:1fr}
}