/* domain_security_style.css */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

:root {
    --primary-color: #267dff;
    --success-color: #00b894;
    --warning-color: #f0932b;
    --danger-color: #d63031;
    --light-gray-color: #f7f8fa;
    --border-color: #e9ecef;
    --text-color-light: #ffffff;
    --text-color-dark: #2f3542;
    --text-color-secondary: #57606f;
    --border-radius: 8px;
    --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }

body {
    font-family: 'Noto Sans SC', sans-serif;
    background-color: var(--light-gray-color);
    color: var(--text-color-dark);
    margin: 0;
}

/* Hero Section */
.hero-section {
    background-color: #1e1e2d;
    color: var(--text-color-light);
    padding: 60px 20px;
    text-align: center;
}
.hero-content { max-width: 700px; margin: 0 auto; }
.hero-section h1 { font-size: 2.5em; margin: 0 0 10px 0; }
.hero-section p { font-size: 1.2em; opacity: 0.7; margin-bottom: 30px; }
.check-form { display: flex; max-width: 600px; margin: 0 auto; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--border-radius); }
.check-form input { flex-grow: 1; padding: 15px; font-size: 1em; background: transparent; border: none; color: #fff; border-radius: var(--border-radius) 0 0 var(--border-radius); }
.check-form input:focus { outline: none; }
.check-form button { padding: 15px 30px; font-size: 1em; font-weight: 500; background-color: var(--primary-color); color: #fff; border: none; border-radius: 0 var(--border-radius) var(--border-radius) 0; cursor: pointer; transition: background-color 0.2s ease; }
.check-form button:hover { background-color: #1e66d4; }
.check-form button:disabled { background-color: #a4b0be; cursor: not-allowed; }

/* Page Content */
.page-content {
    max-width: 1600px; /* 核心修改：原为 1200px, 调大以适应宽屏 */
    margin: 40px auto;
    padding: 0 20px;
    position: relative;
    z-index: 10;
}
.card { background-color: #fff; border-radius: var(--border-radius); box-shadow: var(--box-shadow); margin-bottom: 20px; }
.card-header { padding: 15px 20px; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 10px; }
.card-header h2 { margin: 0; font-size: 1.2em; }
.card-body { padding: 20px; }

/* Function Introduction Section */
.intro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.intro-item { display: flex; align-items: center; gap: 15px; padding: 15px; border: 1px solid var(--border-color); border-radius: var(--border-radius); }
.intro-icon { width: 48px; height: 48px; flex-shrink: 0; }
.intro-icon svg { width: 100%; height: 100%; }
.intro-text h3 { margin: 0 0 5px 0; font-size: 1.1em; }
.intro-text p { margin: 0; font-size: 0.9em; color: var(--text-color-secondary); }

/* Results Section */
.results-header-info { display: flex; align-items: baseline; gap: 8px; }
.results-card .card-header .header-label { font-size: 1.1em; color: var(--text-color-secondary); }
.results-card .card-header .header-url { font-size: 1.1em; font-weight: 500; color: var(--primary-color); word-break: break-all;}
.results-grid { display: flex; flex-wrap: wrap; gap: 12px; }

/* Result Item Pill Style */
.result-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background-color: var(--light-gray-color); border-radius: 6px; font-size: 14px; border: 1px solid #e9ecef; }
.result-item .icon { width: 20px; height: 20px; flex-shrink: 0; }
.result-item .platform-name { color: var(--text-color-dark); }
.result-item .status-message { font-weight: 500; }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(38, 125, 255, 0.3); border-top-color: var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Status Colors */
.status-success .status-message { color: var(--success-color); }
.status-warning .status-message { color: var(--warning-color); }
.status-blocked .status-message { color: var(--danger-color); }
.status-error .status-message { color: var(--danger-color); }

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-section { padding: 40px 15px; }
    .check-form { flex-direction: column; border: none; }
    .check-form input, .check-form button { border-radius: var(--border-radius); }
    .check-form input { margin-bottom: 10px; border: 1px solid rgba(255, 255, 255, 0.2); }
    .page-content { margin-top: 20px; padding: 0 10px;}
}

/* --- 新增：结果状态样式 --- */
.status-message {
    display: inline-flex; /* 使用 flex 布局实现图标和文字对齐 */
    align-items: center;
    gap: 5px; /* 在图标和文字之间增加一点间距 */
}

.warning-icon {
    /* 图标颜色将自动继承父级元素的文字颜色（红色） */
    flex-shrink: 0; /* 防止图标被压缩 */
}