/* ── 查手机 · 发现图鉴 (js/apps/phone-peek-dex.js) + 论坛小号登录 ── */

/* 选人页: 「✦ 图鉴 n/m」 next to 「换一台」 under the phone in the middle (.pkp-pill) */
.pk-dex-btn i{font-style:normal;font-size:11px;color:#d9a35c}
.pk-dex-btn b{font-weight:600;color:inherit}

/* the wall */
.pk-dex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px}
.pk-dc{position:relative;overflow:hidden;aspect-ratio:1;border-radius:18px;border:1px dashed color-mix(in srgb,var(--pk-t1) 22%,transparent);background:color-mix(in srgb,var(--pk-t1) 4%,transparent);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px;font:inherit;color:var(--pk-t3);text-align:center;cursor:default}
.pk-dc .q{font-size:20px;line-height:1;opacity:.6}
.pk-dc b{font-size:12.5px;font-weight:600;line-height:1.3}
.pk-dc small{font-size:10.5px;opacity:.8}
.pk-dc.on{cursor:pointer;border:1px solid color-mix(in srgb,#ffd9a8 55%,transparent);color:var(--pk-t1);
  background:radial-gradient(90% 80% at 30% 0%,color-mix(in srgb,#ffe9c4 45%,transparent),transparent 70%),color-mix(in srgb,var(--pk-you) 10%,var(--pk-gl))}
.pk-dc.on .q{opacity:1;color:#e8b26a}
.pk-dc.on small{color:var(--pk-t3)}
.pk-dc-sweep{position:absolute;top:0;bottom:0;left:0;width:60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);pointer-events:none;transform:translateX(-120%)}

/* ✦ 新发现 - over his phone, the moment it is found (A + C: the place lights up, a star rises, a banner opens into a card).
   Colour by kind (PEEK_DEX_KIND): you 关于你 = warm gold, us 你们之间 = rose, his TA 自己 = moonlight silver-blue, rare = shimmer */
.pk-disc{position:absolute;inset:0;z-index:60;pointer-events:none;
  --dc-a:#fff8ec;--dc-b:#ffe6cc;--dc-ink:#3a2a18;--dc-sub:#8a6a48;--dc-star:#d99a4e;--dc-glow:240,195,125;--dc-bar:linear-gradient(90deg,#e7b56a,#d99a4e)}
.pk-disc[data-t="us"]{--dc-a:#fff3f3;--dc-b:#fadcdf;--dc-ink:#46242b;--dc-sub:#93606a;--dc-star:#d77a8a;--dc-glow:236,150,165;--dc-bar:linear-gradient(90deg,#eba0ad,#d77a8a)}
.pk-disc[data-t="his"]{--dc-a:#f4f7fb;--dc-b:#dbe4ef;--dc-ink:#23303e;--dc-sub:#66788c;--dc-star:#7f9bbb;--dc-glow:170,200,235;--dc-bar:linear-gradient(90deg,#a9c0da,#7f9bbb)}
.pk-disc[data-t="rare"]{--dc-a:#f7f2ff;--dc-b:#ffe9f2;--dc-ink:#2e2440;--dc-sub:#7a6a94;--dc-star:#b48ae0;--dc-glow:200,170,240;--dc-bar:linear-gradient(90deg,#9ad0e6,#c8a2ef,#f2a7c4)}
.pk-disc svg{width:100%;height:100%;fill:currentColor}
.pk-disc-glow{position:absolute;border-radius:18px;border:1.5px solid rgba(var(--dc-glow),.95);box-shadow:0 0 22px 2px rgba(var(--dc-glow),.5),inset 0 0 18px rgba(var(--dc-glow),.25)}
.pk-disc-star{position:absolute;width:22px;height:22px;color:var(--dc-star);filter:drop-shadow(0 0 8px rgba(var(--dc-glow),.95))}
.pk-disc-spark{position:absolute;width:5px;height:5px;border-radius:50%;background:rgb(var(--dc-glow));box-shadow:0 0 8px 2px rgba(var(--dc-glow),.8)}
.pk-disc-pill{position:absolute;left:50%;top:calc(22px + env(safe-area-inset-top,0px));transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:11px 22px 11px 16px;border-radius:30px;white-space:nowrap;overflow:hidden;
  color:var(--dc-ink);background:linear-gradient(135deg,var(--dc-a),var(--dc-b));box-shadow:0 18px 40px -14px rgba(0,0,0,.55),inset 0 1px 0 #fff}
.pk-disc-pill .s{width:20px;height:20px;color:var(--dc-star);flex-shrink:0}
.pk-disc-pill small{display:block;font-size:11px;letter-spacing:.16em;color:var(--dc-sub)}
.pk-disc-pill b{display:block;font-size:17px;font-weight:700;letter-spacing:.04em}
.pk-disc-sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.85) 50%,transparent 65%);transform:translateX(-120%)}
.pk-disc-card{position:absolute;left:22px;right:22px;top:calc(22px + env(safe-area-inset-top,0px));pointer-events:auto;border-radius:26px;padding:20px 20px 16px;overflow:hidden;
  color:var(--dc-ink);background:linear-gradient(160deg,var(--dc-a),var(--dc-b));box-shadow:0 30px 60px -20px rgba(0,0,0,.7),inset 0 1px 0 #fff}
.pk-disc-card .k{display:flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.16em;color:var(--dc-sub)}
.pk-disc-card .k .s{width:15px;height:15px;color:var(--dc-star)}
.pk-disc-card h3{margin:9px 0 5px;font-size:22px;font-weight:700;letter-spacing:.04em;line-height:1.3}
.pk-disc-card p{margin:0;font-size:13px;line-height:1.7;color:color-mix(in srgb,var(--dc-ink) 78%,transparent)}
.pk-disc-card q{display:block;margin:10px 0 0;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,var(--dc-star) 12%,transparent);font-size:13px;line-height:1.6;quotes:none}
.pk-disc-card .pr{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:11.5px;color:var(--dc-sub)}
.pk-disc-card .tr{flex:1;height:4px;border-radius:2px;background:color-mix(in srgb,var(--dc-star) 18%,transparent);overflow:hidden}
.pk-disc-card .tr i{display:block;height:100%;border-radius:2px;background:var(--dc-bar);transition:width 1s cubic-bezier(.3,1,.4,1)}
.pk-disc-card .pr b{font-variant-numeric:tabular-nums;color:var(--dc-ink)}
.pk-disc-card .bt{display:flex;gap:8px;margin-top:14px}
.pk-disc-card .bt button{flex:1;border:0;border-radius:999px;padding:10px;font:inherit;font-size:14px;cursor:pointer;background:color-mix(in srgb,var(--dc-star) 14%,transparent);color:var(--dc-ink)}
.pk-disc-card .bt button.on{background:var(--dc-ink);color:var(--dc-a);font-weight:600}
.pk-disc-card .bt button:focus-visible{outline:2px solid var(--dc-star);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.pk-disc-card .tr i{transition:none}}
/* the wall takes the same colours */
.pk-dc.on[data-t="us"]{border-color:color-mix(in srgb,#f4b6c0 60%,transparent);background:radial-gradient(90% 80% at 30% 0%,color-mix(in srgb,#ffd6dc 45%,transparent),transparent 70%),color-mix(in srgb,var(--pk-you) 10%,var(--pk-gl))}
.pk-dc.on[data-t="us"] .q{color:#d77a8a}
.pk-dc.on[data-t="his"]{border-color:color-mix(in srgb,#b9cde4 65%,transparent);background:radial-gradient(90% 80% at 30% 0%,color-mix(in srgb,#dbe6f3 45%,transparent),transparent 70%),var(--pk-gl)}
.pk-dc.on[data-t="his"] .q{color:#7f9bbb}
.pk-dc.on[data-t="rare"]{border-color:color-mix(in srgb,#d4b8f2 65%,transparent);background:linear-gradient(135deg,color-mix(in srgb,#cfe8f3 35%,transparent),color-mix(in srgb,#ead6fb 35%,transparent),color-mix(in srgb,#ffd8e6 35%,transparent)),var(--pk-gl)}
.pk-dc.on[data-t="rare"] .q{color:#b48ae0}

/* 密码 → 论坛: shows the account and the password, nothing more */
.pk-pw-kv{display:flex;align-items:baseline;gap:10px;padding:10px 6px;border-top:1px solid var(--pk-hair);font-size:14px}
.pk-pw-kv span{width:36px;color:var(--pk-t3);font-size:12.5px}.pk-pw-kv b{flex:1;font-weight:500;word-break:break-all}
.pk-pw-eye{border:0;background:none;font:inherit;font-size:12.5px;color:var(--pk-acc);cursor:pointer}
.pk-pw-tip{font-size:12px!important;margin:10px 4px 14px!important}
.pk-modal-btns:has(>:only-child){grid-template-columns:1fr}

/* 论坛 → ＋ 添加账号: she types both by hand */
.pk-in{display:block;width:100%;box-sizing:border-box;height:42px;margin:0 0 8px;padding:0 14px;border-radius:12px;border:1px solid var(--pk-edge);background:var(--pk-gl2);color:var(--pk-t1);font:inherit;font-size:14px;outline:none}
.pk-in:focus{border-color:var(--pk-acc)}
.pk-lg-err{min-height:18px;margin:0 4px 8px!important;font-size:12px!important;color:var(--pk-you)!important}

/* 测试模式 (?peekdev=1) */
.pk-dev-chip{display:inline-block;margin:4px 0 6px;padding:3px 10px;border-radius:999px;font-size:11px;letter-spacing:.06em;color:#8a5a12;background:#ffe9c4}
.pk-dev-reset{display:block;margin:18px auto 8px}