/*   public/style.css   */

/*           Apache License, Version 2.0
             Copyright [2025] [8891689]

   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
   Author: 8891689 (https://www.8891689.com)
*/

:root {
    --primary: #4361ee;
    --bg: #f8fafc;
    --card-bg: #ffffff;
    --text: #1e293b;
    --text-light: #64748b;
    --border: #e2e8f0;
    --radius: 16px;
    --header-bg-start: #f8fafc;
    --header-bg-end: #f1f5f9;
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    padding: 40px 0;
    line-height: 1.6;
}


.container-search {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- 修復後的搜索框樣式 --- */
.search-box {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    justify-content: center;
    /* 允許在手機小屏幕上換行 */
    flex-wrap: wrap; 
}

.search-box input {
    padding: 12px 20px;
    border: 1px solid var(--border);
    border-radius: 8px;
    /* 關鍵：讓輸入框佔滿剩餘空間 */
    flex: 1; 
    /* 最小寬度，防止太窄 */
    min-width: 250px; 
    font-size: 16px;
    font-family: 'JetBrains Mono', monospace;
    outline: none;
}

/* 解決文字過長的問題 */
.search-box input::placeholder {
    font-size: 14px; /* 字體稍微調小一點 */
    color: #94a3b8;
    /* 如果還是太長，顯示省略號 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-box input:focus {
    border-color: var(--primary);
}

.search-box button {
    padding: 12px 24px;
    background-color: var(--primary);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
    /* 防止按鈕被擠壓變形 */
    white-space: nowrap; 
}

.search-box button:hover {
    opacity: 0.9;
}


/* 卡片樣式 */
.ip-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border);
    overflow: hidden;
}

.ip-header {
    padding: 30px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(to right, var(--header-bg-start), var(--header-bg-end));
    text-align: center;
}

.ip-header h1 {
    margin: 0;
    font-size: 2.2rem;
    font-family: 'JetBrains Mono', monospace;
    color: var(--primary);
    letter-spacing: -1px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    padding: 30px;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-item label {
    font-size: 13px;
    color: var(--text-light);
    margin-bottom: 6px;
    font-weight: 600;
    text-transform: uppercase;
}

/* [新增] 強制長文字換行 */
.info-item .value {
    font-size: 16px;
    font-weight: 500;
    /* 關鍵：允許長單詞（如Hash）換行 */
    word-break: break-all; 
    word-wrap: break-word;
}

/* 響應式 */
@media (max-width: 600px) {
    .ip-header h1 { font-size: 1.8rem; }
    .search-box { flex-direction: column; }
    .search-box input { width: 100%; box-sizing: border-box; }
}


/* 延遲測試網格佈局 */
.latency-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
    padding: 0 24px 24px 24px;
}

.latency-item {
    background-color: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 15px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.latency-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(67, 97, 238, 0.15);
    border-color: var(--primary);
}

.latency-item .flag {
    font-size: 24px;
    margin-bottom: 5px;
    display: block;
}

.latency-item .region-name {
    font-size: 12px;
    color: var(--text-light);
    margin-bottom: 5px;
    font-weight: 500;
}

.latency-item .ping-value, 
.latency-item .cdn-value {
    font-size: 14px;
    font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--primary);
}

/* 顏色區分：延遲低顯示綠色，高顯示紅色 */
.ping-green { color: #10b981 !important; }
.ping-yellow { color: #f59e0b !important; }
.ping-red { color: #ef4444 !important; }

/* 簡單的加載轉圈動畫 */
.spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(67, 97, 238, 0.3);
    border-radius: 50%;
    border-top-color: var(--primary);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* 狀態標籤樣式 */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}
.badge-green { background: #dcfce7; color: #166534; }
.badge-red { background: #fee2e2; color: #991b1b; }
.badge-gray { background: #f1f5f9; color: #475569; }

.section-divider {
    border-bottom: 1px dashed var(--border);
    padding-bottom: 5px;
}

/* [新增] 強制長文字換行 */
.info-item .value {
    font-size: 16px;
    font-weight: 500;
    /* 關鍵：允許長單詞（如Hash）換行 */
    word-break: break-all; 
    word-wrap: break-word;
}

/* 針對指紋部分的字體調整 */
#fp-ja3-text, #fp-canvas, #fp-audio, #fp-id {
    font-size: 13px !important;
    font-family: 'JetBrains Mono', monospace;
    color: #555;
}

/* style.css */
@keyframes flash-red {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}