/* WP Vuln Live — 全画面ライブ画面（ダーク単一テーマ） */
:root{
  --bg:#070b10;--bg2:#0b121a;--panel:rgba(13,21,30,.82);--line:rgba(120,160,190,.16);--fg:#dfe9f1;--muted:#7f93a3;
  --cyan:#22d3ee;--cyan-soft:rgba(34,211,238,.12);
  --crit:#ff3b5c;--high:#ff8a3d;--med:#ffd43b;--low:#4cc9f0;--unk:#8da2b5;--kev:#ff1744;--cta:#ff6b2c;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;--sans:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body.wpvl-body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:14px;line-height:1.5;overflow:hidden}
.wpvl-app{position:relative;height:100%;width:100%;display:grid;grid-template-rows:56px minmax(0,1fr) 36px;grid-template-columns:340px minmax(0,1fr) 300px;grid-template-areas:"head head head" "feed map stats" "tick tick tick";
  background:radial-gradient(1200px 700px at 60% 40%,rgba(34,211,238,.07),transparent 60%),radial-gradient(800px 500px at 10% 100%,rgba(255,107,44,.06),transparent 60%),var(--bg)}
.wpvl-embedded{height:100%}
a{color:var(--cyan)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* header */
.wpvl-head{grid-area:head;display:flex;align-items:center;gap:14px;padding:0 max(16px,env(safe-area-inset-left,0px)) 0 max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(13,21,30,.95),rgba(13,21,30,.7));backdrop-filter:blur(8px)}
.wpvl-logo{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.02em;font-size:16px;white-space:nowrap}
.wpvl-logo .wp{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid var(--cyan);color:var(--cyan);font-family:var(--mono);font-weight:600;font-size:13px}
.wpvl-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--crit);padding:3px 8px;border:1px solid rgba(255,59,92,.4);border-radius:3px}
.wpvl-live i{width:7px;height:7px;border-radius:50%;background:var(--crit);box-shadow:0 0 0 0 rgba(255,59,92,.7);animation:wpvl-pulse 1.6s infinite}
.wpvl-live.offline{color:var(--muted);border-color:var(--line)}.wpvl-live.offline i{background:var(--muted);animation:none;box-shadow:none}
@keyframes wpvl-pulse{0%{box-shadow:0 0 0 0 rgba(255,59,92,.7)}70%{box-shadow:0 0 0 8px rgba(255,59,92,0)}100%{box-shadow:0 0 0 0 rgba(255,59,92,0)}}
.wpvl-updated{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
.wpvl-win{display:flex;gap:2px;margin-left:auto;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:6px;padding:2px}
.wpvl-win button{padding:4px 10px;border-radius:4px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.wpvl-win button.on{background:var(--cyan-soft);color:var(--cyan)}
.wpvl-tools{display:flex;gap:6px;align-items:center}
.wpvl-icon{width:34px;height:34px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;color:var(--muted);font-size:15px}
.wpvl-icon.on{color:var(--cyan);border-color:rgba(34,211,238,.5)}
/* ライブ／止める の切り替え（目立つ 2 分割スイッチ） */
.wpvl-toggle{display:inline-flex;height:36px;padding:3px;gap:2px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.wpvl-toggle button{display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:999px;font-weight:900;font-size:13px;letter-spacing:.02em;color:var(--muted);transition:background .15s,color .15s,box-shadow .15s}
.wpvl-toggle button i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.5}
.wpvl-toggle button:hover{color:var(--fg)}
.wpvl-toggle[data-paused="0"] button[data-p="0"]{background:var(--cyan);color:#06262b;box-shadow:0 0 14px rgba(34,211,238,.55)}
.wpvl-toggle[data-paused="0"] button[data-p="0"] i{opacity:1;background:#06262b;animation:wpvl-blink 1.2s infinite}
.wpvl-toggle[data-paused="1"] button[data-p="1"]{background:var(--cta);color:#140800;box-shadow:0 0 14px rgba(255,107,44,.55)}
.wpvl-toggle[data-paused="1"]{border-color:rgba(255,107,44,.6)}
.wpvl-toggle[data-paused="0"] button[data-p="1"]{color:#ffd6c4;border:1px solid rgba(255,107,44,.45)}
.wpvl-toggle[data-paused="1"] button[data-p="0"]{color:#bdefff;border:1px solid rgba(34,211,238,.45)}
@keyframes wpvl-blink{0%,100%{opacity:1}50%{opacity:.25}}
.wpvl-cta{display:inline-flex;align-items:center;gap:8px;background:var(--cta);color:#140800;font-weight:900;padding:8px 14px;border-radius:6px;text-decoration:none;white-space:nowrap;box-shadow:0 0 18px rgba(255,107,44,.35)}
.wpvl-cta:hover{filter:brightness(1.08)}
.wpvl-cta small{font-weight:500;opacity:.8}

/* feed */
.wpvl-feed{grid-area:feed;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:var(--panel)}
.wpvl-ph{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.wpvl-ph b{color:var(--fg);font-family:var(--sans);letter-spacing:0;font-size:12px}
.wpvl-list{overflow-y:auto;min-height:0;padding:8px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:rgba(120,160,190,.3) transparent}
.wpvl-card{position:relative;display:grid;gap:4px;padding:10px 12px 10px 16px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.025);animation:wpvl-in .5s ease-out}
.wpvl-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:6px 0 0 6px;background:var(--unk)}
.wpvl-card.r-critical::before{background:var(--crit)}.wpvl-card.r-high::before{background:var(--high)}.wpvl-card.r-medium::before{background:var(--med)}.wpvl-card.r-low::before{background:var(--low)}
.wpvl-card.fresh{box-shadow:0 0 0 1px rgba(34,211,238,.6),0 0 24px rgba(34,211,238,.25)}
@keyframes wpvl-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.wpvl-card .top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wpvl-card .sw{font-weight:700;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.wpvl-card .sc{font-family:var(--mono);font-size:12px;font-weight:600}
.sc.r-critical{color:var(--crit)}.sc.r-high{color:var(--high)}.sc.r-medium{color:var(--med)}.sc.r-low{color:var(--low)}.sc.r-unknown{color:var(--unk)}
.wpvl-card .meta{display:flex;flex-wrap:wrap;gap:6px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.wpvl-tag{padding:1px 6px;border-radius:3px;border:1px solid var(--line);font-size:10.5px;font-family:var(--sans);color:var(--fg)}
.wpvl-tag.kev{border-color:var(--kev);color:var(--kev);font-weight:700}.wpvl-tag.unauth{border-color:#c084fc;color:#c084fc}.wpvl-tag.nofix{border-color:var(--fg);color:var(--fg)}
.wpvl-card .sum{font-size:12.5px;color:#b9c7d3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wpvl-card .act{display:flex;justify-content:space-between;gap:8px;font-size:12px}
.wpvl-card .act a{text-decoration:none}
.wpvl-card .act .fix{color:var(--cta)}

/* map */
.wpvl-map{grid-area:map;position:relative;min-width:0;min-height:0}
.wpvl-map canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wpvl-legend{position:absolute;left:16px;bottom:12px;display:flex;gap:12px;font-family:var(--mono);font-size:11px;color:var(--muted);background:rgba(7,11,16,.6);padding:6px 10px;border:1px solid var(--line);border-radius:4px}
.wpvl-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.wpvl-maptitle{position:absolute;left:16px;top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.wpvl-maptitle b{display:block;font-family:var(--sans);font-size:15px;letter-spacing:0;color:var(--fg);text-transform:none;font-weight:700}
.wpvl-hover{position:absolute;pointer-events:none;background:rgba(7,11,16,.95);border:1px solid rgba(34,211,238,.5);border-radius:6px;padding:8px 10px;font-size:12px;max-width:260px;display:none;z-index:4}
.wpvl-hover b{display:block;font-size:13px}
.wpvl-hover .mono{font-family:var(--mono);color:var(--muted);font-size:11px}
.wpvl-demo{position:absolute;right:16px;top:12px;font-family:var(--mono);font-size:11px;color:var(--med);border:1px dashed rgba(255,212,59,.5);padding:3px 8px;border-radius:3px;background:rgba(7,11,16,.6)}
.wpvl-replay{position:absolute;right:16px;bottom:14px;display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--muted);background:rgba(7,11,16,.6);padding:6px 10px;border:1px solid var(--line);border-radius:4px}
.wpvl-replay .bar{width:120px;height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.wpvl-replay .bar i{display:block;height:100%;width:0;background:var(--cyan)}
.wpvl-replay label{display:flex;align-items:center;gap:4px;cursor:pointer}

/* stats */
.wpvl-stats{grid-area:stats;border-left:1px solid var(--line);background:var(--panel);overflow-y:auto;min-height:0;display:flex;flex-direction:column;scrollbar-width:thin}
.wpvl-sec{padding:12px 14px;border-bottom:1px solid var(--line);display:grid;gap:8px}
.wpvl-sec h3{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;font-weight:500}
.wpvl-nums{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wpvl-num{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.wpvl-num b{display:block;font-family:var(--mono);font-size:22px;font-weight:600;color:var(--cyan);line-height:1.1}
.wpvl-num span{font-size:11px;color:var(--muted)}
.wpvl-bar{display:grid;grid-template-columns:70px 1fr 34px;align-items:center;gap:8px;font-size:12px}
.wpvl-bar .t{height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
.wpvl-bar .t i{display:block;height:100%;width:0;transition:width .6s ease}
.wpvl-bar .n{font-family:var(--mono);text-align:right;color:var(--muted)}
.wpvl-top{display:grid;gap:5px;font-size:12px}
.wpvl-top div{display:flex;justify-content:space-between;gap:8px;min-width:0}
.wpvl-top span:first-child{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpvl-top .n{flex:0 0 auto;font-family:var(--mono);color:var(--muted);white-space:nowrap}
.wpvl-alert{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wpvl-alert div{border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-size:11px;color:var(--muted)}
.wpvl-alert b{display:block;font-family:var(--mono);font-size:20px;line-height:1.1}
.wpvl-alert .kev b{color:var(--kev)}.wpvl-alert .un b{color:#c084fc}
.wpvl-promo{margin-top:auto;padding:12px 14px 14px;background:linear-gradient(180deg,rgba(255,107,44,.12),rgba(255,107,44,.04));border-top:1px solid rgba(255,107,44,.35)}
.wpvl-promo p{margin:0 0 10px;font-size:12.5px}
.wpvl-promo .wpvl-cta{display:flex;justify-content:center}
.wpvl-links{padding:10px 14px;font-size:11px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}

/* ticker */
.wpvl-tick{grid-area:tick;border-top:1px solid var(--line);background:rgba(13,21,30,.95);overflow:hidden;position:relative;display:flex;align-items:center;font-family:var(--mono);font-size:12px}
.wpvl-tick .lbl{flex:0 0 auto;padding:0 12px;height:100%;display:flex;align-items:center;background:var(--crit);color:#fff;font-weight:600;letter-spacing:.1em;font-size:11px}
.wpvl-tick .run{flex:1;overflow:hidden;white-space:nowrap}
.wpvl-tick .run span{display:inline-block;padding-left:100%;animation:wpvl-marq 60s linear infinite}
.wpvl-tick .run em{font-style:normal;color:var(--cyan);margin:0 18px 0 0}
@keyframes wpvl-marq{to{transform:translateX(-100%)}}

/* help overlay */
.wpvl-helpbox{position:absolute;inset:0;z-index:20;background:rgba(3,6,10,.72);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:16px}
.wpvl-helpbox[hidden]{display:none}
.wpvl-helpcard{position:relative;width:min(760px,100%);max-height:100%;overflow:auto;background:#0d151e;border:1px solid rgba(34,211,238,.4);border-radius:10px;padding:22px 24px;display:grid;gap:12px;box-shadow:0 20px 60px rgba(0,0,0,.6);font-size:14px}
.wpvl-helpcard h2{margin:0;font-size:20px;font-weight:900}
.wpvl-helpcard h3{margin:0 0 4px;font-size:13px;color:var(--cyan);font-family:var(--mono);letter-spacing:.06em}
.wpvl-helpcard p{margin:0;line-height:1.7}
.wpvl-helpgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.wpvl-helpgrid>div{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:6px;padding:10px 12px}
.wpvl-helplegend{font-size:12px;color:var(--muted)}.wpvl-helplegend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;vertical-align:-1px}
.wpvl-helpnote{font-size:12px;color:var(--muted)}
.wpvl-helpclose{position:absolute;top:8px;right:10px;font-size:22px;color:var(--muted);line-height:1}
.wpvl-helpclose:hover{color:var(--fg)}

/* toasts */
.wpvl-toasts{position:absolute;right:16px;top:66px;display:flex;flex-direction:column;gap:8px;z-index:5;width:min(340px,calc(100% - 32px))}
.wpvl-toast{background:rgba(7,11,16,.96);border:1px solid var(--line);border-left:4px solid var(--unk);border-radius:6px;padding:10px 12px;box-shadow:0 10px 30px rgba(0,0,0,.5);animation:wpvl-in .4s ease-out}
.wpvl-toast.r-critical{border-left-color:var(--crit)}.wpvl-toast.r-high{border-left-color:var(--high)}.wpvl-toast.r-medium{border-left-color:var(--med)}.wpvl-toast.r-low{border-left-color:var(--low)}
.wpvl-toast b{display:block;font-size:13px}.wpvl-toast small{font-family:var(--mono);color:var(--muted)}
.wpvl-toast.out{opacity:0;transform:translateX(20px);transition:all .4s}

@media (max-width:1100px){.wpvl-app{grid-template-columns:300px minmax(0,1fr) 260px}}
@media (max-width:860px){
  html,body.wpvl-body{height:auto;min-height:100%;overflow:visible}
  .wpvl-app{height:auto;min-height:100vh;grid-template-rows:auto 48vh auto auto 36px;grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "map" "stats" "feed" "tick"}
  .wpvl-head{flex-wrap:wrap;height:auto;padding-block:8px;gap:8px}
  .wpvl-win{margin-left:0}.wpvl-updated{display:none}
  .wpvl-tools{flex-wrap:wrap;width:100%}.wpvl-tools .wpvl-icon,.wpvl-toggle button{white-space:nowrap;flex-shrink:0}
  .wpvl-tools .wpvl-cta{flex:1 1 100%;justify-content:center}
  .wpvl-feed{border-right:0;border-top:1px solid var(--line);max-height:70vh}
  .wpvl-stats{border-left:0;border-top:1px solid var(--line)}
  .wpvl-toasts{top:auto;bottom:48px}
  .wpvl-legend{display:none}
}
@media (prefers-reduced-motion:reduce){.wpvl-live i{animation:none}.wpvl-toggle button i{animation:none}.wpvl-tick .run span{animation:none;padding-left:0}}