:root {
            --bg:#050505;--card:#121212;--border:#282828;--text:#ffffff;--sub-text:#888888;
            --accent:#007aff;--S-color:#ff3b30;--A-color:#ff9500;--B-color:#34c759;
            --C-color:#007aff;--D-color:#8e8e93;--st-ok:#007aff;--st-warn:#ffcc00;--st-bad:#ff3b30;
        }
        body { background-color:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,""Segoe UI"",Roboto,Helvetica,Arial,""Hiragino Sans"",sans-serif;margin:0;padding:20px;line-height:1.4;-webkit-font-smoothing:antialiased; }
        .app { max-width:900px;margin:0 auto;background-color:var(--bg);padding-bottom:40px; }
        .main-rank-card { background:var(--card);border:1px solid var(--border);padding:35px;border-radius:24px;display:flex;align-items:center;margin-bottom:25px; }
        #rank-letter { font-size:5rem;font-weight:900;width:130px;height:130px;display:flex;align-items:center;justify-content:center;border-radius:28px;background:#000;margin-right:35px;border:4px solid var(--border);transition:all 0.6s cubic-bezier(0.19,1,0.22,1);flex-shrink:0; }
        .rank-S { color:var(--S-color);border-color:var(--S-color)!important;box-shadow:0 0 40px rgba(255,59,48,0.3); }
        .rank-A { color:var(--A-color);border-color:var(--A-color)!important;box-shadow:0 0 30px rgba(255,149,0,0.2); }
        .rank-B { color:var(--B-color);border-color:var(--B-color)!important; }
        .rank-C { color:var(--C-color);border-color:var(--C-color)!important; }
        .rank-D { color:var(--D-color);border-color:var(--D-color)!important; }
        .rank-info { flex:1; }
        #status-title { font-size:1.8rem;font-weight:800;margin:0;letter-spacing:-0.02em; }
        #eval-msg { color:var(--sub-text);font-size:0.95rem;margin-top:8px;line-height:1.7; }
        .browser-info-area { display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:30px; }
        .info-panel { background:var(--card);border:1px solid var(--border);padding:22px;border-radius:20px; }
        .info-panel.full-width { grid-column:span 2; }
        .info-panel label { display:block;color:var(--sub-text);font-size:0.8rem;font-weight:800;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.1em; }
        .info-panel .val { font-size:1.2rem;font-weight:800;color:var(--accent);word-break:break-all; }
        .spec-list { display:flex;flex-direction:column;gap:12px; }
        .spec-row { background:var(--card);border:1px solid var(--border);padding:20px 25px;border-radius:18px;display:flex;justify-content:space-between;align-items:center;border-left:8px solid transparent;transition:border-color 0.4s,background 0.4s; }
        .spec-row .label { color:var(--sub-text);font-size:0.95rem;font-weight:600; }
        .spec-row .val   { font-size:1rem;font-weight:700;text-align:right;margin-left:20px;word-break:break-all; }
        .st-ok   { border-left-color:var(--st-ok);  background:rgba(0,122,255,0.08); }
        .st-good { border-left-color:#34c759; background:rgba(52,199,89,0.08); }
        .st-warn { border-left-color:var(--st-warn); background:rgba(255,204,0,0.08); }
        .st-bad  { border-left-color:var(--st-bad);  background:rgba(255,59,48,0.08); }
        .capture-mode .spec-list { display:grid;grid-template-columns:repeat(3,1fr);gap:10px; }
        .capture-mode .spec-row { flex-direction:column;align-items:flex-start;justify-content:space-between;padding:14px 16px 12px;border-radius:14px;border-left:none;border-top:4px solid transparent;min-height:76px;gap:6px; }
        .capture-mode .spec-row .label { font-size:0.72rem;line-height:1.3;white-space:normal; }
        .capture-mode .spec-row .val   { font-size:0.88rem;text-align:left;margin-left:0;word-break:break-all;white-space:normal; }
        .capture-mode .st-ok   { border-top-color:var(--st-ok);  border-left-color:transparent; }
        .capture-mode .st-good { border-top-color:#34c759; border-left-color:transparent; background:rgba(52,199,89,0.08); }
        .capture-mode .st-warn { border-top-color:var(--st-warn); border-left-color:transparent; }
        .capture-mode .st-bad  { border-top-color:var(--st-bad);  border-left-color:transparent; }
        .action-zone { max-width:900px;margin:0 auto;padding:0 0 80px; }
        #save-btn { display:none;width:100%;padding:22px;border-radius:22px;background:var(--accent);color:#fff;border:none;font-size:1.2rem;font-weight:800;cursor:pointer;box-shadow:0 12px 35px rgba(0,122,255,0.3);transition:transform 0.2s,opacity 0.2s; }
        #save-btn:active { transform:scale(0.98); }
        #save-btn:disabled { opacity:0.5;cursor:not-allowed; }
        #share-x-btn {
            width:100%;padding:18px;border-radius:22px;
            background:transparent;color:#fff;
            border:2px solid #ffffff;
            font-size:1.1rem;font-weight:800;cursor:pointer;
            transition:transform 0.2s,background 0.2s;
            margin-bottom:12px;
            display:none;
            align-items:center;justify-content:center;gap:10px;
        }
        #share-x-btn:hover  { background:rgba(255,255,255,0.08); }
        #share-x-btn:active { transform:scale(0.98); }
        #ai-btn {
            display:none;width:100%;padding:18px;border-radius:22px;
            background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;
            font-size:1.1rem;font-weight:800;cursor:pointer;
            box-shadow:0 12px 35px rgba(99,102,241,0.35);
            transition:transform 0.2s;margin-top:12px;
        }
        #ai-btn:active { transform:scale(0.98); }
        #ai-modal {
            display:none;position:fixed;top:0;left:0;width:100%;height:100%;
            background:rgba(0,0,0,0.95);z-index:99999;
            flex-direction:column;align-items:center;justify-content:center;
            padding:20px;box-sizing:border-box;
        }
        #ai-modal-box {
            background:var(--card);border:1px solid #6366f1;border-radius:24px;
            width:100%;max-width:620px;display:flex;flex-direction:column;
            height:85vh;overflow:hidden;
        }
        #ai-header { padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-shrink:0; }
        #ai-header h2 { margin:0;font-size:1.1rem;font-weight:800;background:linear-gradient(135deg,#6366f1,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent; }
        #ai-close { background:none;border:none;color:var(--sub-text);font-size:1.4rem;cursor:pointer;padding:4px 8px; }
        #ai-messages { flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px; }
        .ai-msg { max-width:85%;padding:12px 16px;border-radius:16px;font-size:0.9rem;line-height:1.6;white-space:pre-wrap; }
        .ai-msg.user { background:#6366f1;color:#fff;align-self:flex-end;border-bottom-right-radius:4px; }
        .ai-msg.assistant { background:#1e1e2e;color:var(--text);align-self:flex-start;border:1px solid var(--border);border-bottom-left-radius:4px; }
        #ai-input-area { padding:14px;border-top:1px solid var(--border);display:flex;gap:10px;flex-shrink:0; }
        #ai-input { flex:1;background:#1a1a1a;border:1px solid var(--border);border-radius:14px;padding:12px 16px;color:#fff;font-size:0.95rem;outline:none;resize:none;font-family:inherit; }
        #ai-input:focus { border-color:#6366f1; }
        #ai-send { background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none;border-radius:14px;padding:12px 20px;font-weight:800;cursor:pointer;font-size:0.95rem; }
        #ai-send:disabled { opacity:0.5;cursor:not-allowed; }
        #retry-btn {
            display:none;width:100%;padding:18px;border-radius:22px;
            background:#ff9500;color:#fff;border:none;
            font-size:1.1rem;font-weight:800;cursor:pointer;
            box-shadow:0 12px 35px rgba(255,149,0,0.3);
            transition:transform 0.2s,opacity 0.2s;
            margin-top:12px;
        }
        #retry-btn:active { transform:scale(0.98); }
        #modal-overlay { display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);z-index:99999;justify-content:center;align-items:center;flex-direction:column;padding:20px;box-sizing:border-box;overflow-y:auto; }
        #result-img-wrap { padding:10px;background:#000;border-radius:28px;border:1px solid var(--border);box-shadow:0 0 60px rgba(255,255,255,0.1);max-width:650px;width:100%; }
        #result-img-wrap img { width:100%;border-radius:20px;display:block; }
        .modal-footer { margin-top:20px;text-align:center;width:100%;max-width:650px; }
        .modal-hint { color:var(--sub-text);font-size:0.9rem;margin-bottom:16px;font-weight:600; }
        .modal-actions { display:flex;gap:12px;justify-content:center; }
        #dl-btn { background:var(--accent);color:#fff;border:none;padding:14px 32px;border-radius:14px;cursor:pointer;font-weight:800;font-size:1rem;box-shadow:0 8px 24px rgba(0,122,255,0.3);transition:transform 0.2s; }
        #dl-btn:active { transform:scale(0.97); }
        .close-btn { background:#333;color:#fff;border:none;padding:14px 32px;border-radius:14px;cursor:pointer;font-weight:800;font-size:1rem; }

        #history-btn {
            display:none;width:100%;padding:18px;border-radius:22px;
            background:#ff2d78;color:#fff;border:none;
            font-size:1.1rem;font-weight:800;cursor:pointer;
            box-shadow:0 12px 35px rgba(255,45,120,0.3);
            transition:transform 0.2s;margin-top:12px;
        }
        #history-btn:active { transform:scale(0.98); }
        #speed-btn {
            display:none;width:100%;padding:18px;border-radius:22px;
            background:#7c3aed;color:#fff;border:none;
            font-size:1.1rem;font-weight:800;cursor:pointer;
            box-shadow:0 12px 35px rgba(124,58,237,0.3);
            transition:transform 0.2s;margin-top:12px;
        }
        #speed-btn:active { transform:scale(0.98); }

        /* 共通モーダル追加スタイル */
        .extra-modal {
            display:none;position:fixed;top:0;left:0;width:100%;height:100%;
            background:rgba(0,0,0,0.95);z-index:99999;
            justify-content:center;align-items:flex-start;
            padding:20px;box-sizing:border-box;overflow-y:auto;
        }
        .extra-modal-box {
            background:var(--card);border:1px solid var(--border);
            border-radius:24px;padding:28px;width:100%;max-width:600px;
            margin-top:20px;
        }
        .extra-modal-box h2 { margin:0 0 20px;font-size:1.2rem;font-weight:800; }
        .modal-close-btn {
            margin-top:20px;width:100%;padding:13px;border-radius:14px;
            background:#333;color:#fff;border:none;font-size:0.95rem;font-weight:800;cursor:pointer;
        }

        /* 色の基準ボタン */
        #legend-btn {
            display:block;max-width:900px;margin:0 auto 18px;width:100%;
            padding:13px;border-radius:16px;
            background:var(--card);color:var(--sub-text);
            border:1px solid var(--border);
            font-size:0.9rem;font-weight:700;cursor:pointer;
            text-align:center;letter-spacing:0.05em;
            transition:background 0.2s,color 0.2s;
        }
        #legend-btn:hover { background:#1e1e1e;color:var(--text); }

        /* 色の基準モーダル */
        #legend-overlay {
            display:none;position:fixed;top:0;left:0;width:100%;height:100%;
            background:rgba(0,0,0,0.92);z-index:99998;
            justify-content:center;align-items:center;
            padding:20px;box-sizing:border-box;overflow-y:auto;
        }
        #legend-box {
            background:var(--card);border:1px solid var(--border);
            border-radius:24px;padding:30px;width:100%;max-width:560px;
        }
        #legend-box h2 { margin:0 0 20px;font-size:1.2rem;font-weight:800;color:var(--text); }
        .legend-row {
            display:flex;align-items:center;gap:14px;
            padding:12px 0;border-bottom:1px solid var(--border);
        }
        .legend-row:last-of-type { border-bottom:none; }
        .legend-dot {
            width:14px;height:14px;border-radius:50%;flex-shrink:0;
        }
        .legend-dot.ok   { background:var(--st-ok); }
        .legend-dot.warn { background:var(--st-warn); }
        .legend-dot.bad  { background:var(--st-bad); }
        .legend-dot.good { background:#34c759; }
        .legend-label { font-size:0.95rem;font-weight:700;color:var(--text);min-width:60px; }
        .legend-desc  { font-size:0.88rem;color:var(--sub-text);line-height:1.5; }
        #legend-close {
            margin-top:22px;width:100%;padding:14px;border-radius:14px;
            background:#333;color:#fff;border:none;
            font-size:1rem;font-weight:800;cursor:pointer;
        }

        /* IP警告モーダル */
        #ip-warn-overlay {
            display:none;position:fixed;top:0;left:0;width:100%;height:100%;
            background:rgba(0,0,0,0.95);z-index:999999;
            justify-content:center;align-items:center;
            padding:20px;box-sizing:border-box;
        }
        #ip-warn-box {
            background:var(--card);border:1px solid #ff9500;
            border-radius:24px;padding:30px;width:100%;max-width:500px;
        }
        #ip-warn-box h3 { margin:0 0 14px;font-size:1.1rem;font-weight:800;color:#ff9500; }
        #ip-warn-box p  { color:var(--sub-text);font-size:0.9rem;line-height:1.7;margin:0 0 22px; }
        .ip-warn-btns   { display:flex;flex-direction:column;gap:10px; }
        .ip-warn-btns button {
            width:100%;padding:14px;border-radius:14px;border:none;
            font-size:0.95rem;font-weight:800;cursor:pointer;
        }
        #ip-include-btn { background:var(--st-bad);color:#fff; }
        #ip-mask-btn    { background:var(--st-warn);color:#000; }
        #ip-hide-btn    { background:var(--accent);color:#fff; }
        .ip-note {
            margin-top:16px;font-size:0.78rem;color:#555;
            text-align:center;line-height:1.6;
        }"