/* ========================================
   IP归属纠错页面样式
   ======================================== */

/* 面包屑导航 */
.new-breadcrumb {
    max-width: 1200px;
    margin: 15px auto;
    padding: 12px 0;
    font-size: 14px;
    color: #4e5969;
}

.new-breadcrumb a {
    color: #1e6f9f;
    text-decoration: none;
}

.new-breadcrumb a:hover {
    text-decoration: underline;
}

/* 主容器 - 两栏布局 */
.vspinp-container {
    max-width: 1200px;
    margin: 40px auto;
    display: flex;
    gap: 20px;
    padding: 0;
}

.flex1 {
    flex: 1;
    min-width: 0;
}

/* 左侧主内容区 */
.main-content {
    background: #fff;
    padding: 24px 28px;
    border: 1px solid #e8ecf2;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ========== 统计卡片 ========== */
.stats-row {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card {
    flex: 1;
    background: #fff;
    border: 1px solid #e8ecf2;
    border-radius: 10px;
    padding: 18px 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.stat-label {
    font-size: 13px;
    color: #86909c;
    margin-bottom: 8px;
}

.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: #1d7ff5;
    font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif;
}

.stat-value-red {
    color: #e54d42;
}

/* ========== 搜索区域 ========== */
.search-section {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.search-header {
    flex:1;
}

.search-title {
    font-size: 15px;
    font-weight: 600;
    color: #1d2129;
}

.search-bar {
    display: flex;
    gap: 10px;
    position: relative;
}

.search-input {
    width:300px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #dddfe5;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.25s;
}

.search-input:focus {
    border-color: #1d7ff5;
    box-shadow: 0 0 0 2px rgba(29, 127, 245, 0.15);
}

.search-input::placeholder {
    color: #bfbfbf;
}

.search-btn {
    height: 38px;
    padding: 0 24px;
    background: #1d7ff5;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.search-btn:hover {
    background: #176ecc;
}

/* ========== 反馈记录列表 ========== */
.record-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.record-item {
    background: #fafbfc;
    border: 1px solid #f0f1f3;
    border-radius: 10px;
    padding: 16px 20px;
    transition: all 0.2s;
    margin-bottom: 20px;
}

.record-item:hover {
    border-color: #dde4ed;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.record-main {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    line-height: 1.5;
}

.record-tag {
    display: inline-block;
    font-size: 13px;
    color: #4e5969;
    white-space: nowrap;
}

.record-ip {
    font-size: 14px;
    font-weight: 500;
    color: #1d2129;
    letter-spacing: 0.3px;
}

.record-arrow {
    color: #c9cdd4;
    font-size: 14px;
}

.record-location {
    font-size: 14px;
    color: #1d2129;
}

.record-warning {
    color: #faad14;
}

.record-sub {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.sub-label {
    font-size: 13px;
    color: #86909c;
}

.sub-value {
    font-size: 13px;
    color: #86909c;
}

.sub-pending {
    color: #c9cdd4;
}

.record-link {
    font-size: 13px;
    color: #1d2129;
}

.record-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.record-time {
    font-size: 12px;
    color: #86909c;
    display: flex;
    align-items: center;
    gap: 4px;
}
.time-icon{
    width: 14px;
    height: 14px;
}
.time-icon::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2386909c'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 状态标签 */
.status-badge {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.status-pending {
    background: #fff7e8;
    color: #d48806;
    border: 1px solid #ffe58f;
}

.status-rejected {
    background: #fff1f0;
    color: #cf1322;
    border: 1px solid #ffa39e;
}

.status-approved {
    background: #f6ffed;
    color: #52c41a;
    border: 1px solid #b7eb8f;
}

/* ========== 分页 ========== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 20px;
}

.page-btn {
    min-width: 36px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #dddfe5;
    background: #fff;
    border-radius: 6px;
    font-size: 13px;
    color: #4e5969;
    cursor: pointer;
    transition: all 0.2s;
}

.page-btn:hover:not(:disabled) {
    border-color: #1d7ff5;
    color: #1d7ff5;
}

.page-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.page-active {
    background: #1d7ff5;
    color: #fff;
    border-color: #1d7ff5;
}

.page-info {
    font-size: 13px;
    color: #86909c;
    margin: 0 4px;
}

/* ========== 右侧侧边栏 ========== */
.sidebar {
    flex-shrink: 0;
    width: 400px;
}

.feedback-form {
    background: #fff;
    padding: 24px 22px;
    border: 1px solid #e8ecf2;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    
}

.form-title {
    font-size: 17px;
    font-weight: 700;
    color: #1d2129;
    text-align: center;
    margin-bottom: 6px;
}

.form-desc {
    font-size: 12px;
    color: #86909c;
    text-align: center;
    margin-bottom: 22px;
}

/* 表单组 */
.form-group {
    margin-bottom: 18px;
    position: relative;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #1d2129;
    margin-bottom: 8px;
}

.optional {
    font-weight: 400;
    color: #c9cdd4;
    font-size: 12px;
}

/* IP类型单选 */
.radio-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.radio-item {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    position: relative;
}

.radio-item input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 2px solid #c9cdd4;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s;
}

.radio-item input[type="radio"]:checked {
    border-color: #1d7ff5;
}

.radio-item input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #1d7ff5;
    border-radius: 50%;
}

.radio-disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.radio-text {
    font-size: 12px;
    color: #1d2129;
}

.coming-soon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    background: #fff7e8;
    color: #d48806;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 600;
    margin-left: 4px;
}

/* 输入框 */
.form-input {
    width: 100%;
    height: 38px;
    padding: 0 14px;
    border: 1px solid #dddfe5;
    border-radius: 8px;
    font-size: 12px;
    outline: none;
    transition: all 0.25s;
    box-sizing: border-box;
}

.form-input:focus {
    border-color: #1d7ff5;
    box-shadow: 0 0 0 2px rgba(29, 127, 245, 0.12);
}

.form-input::placeholder {
    color: #c9cdd4;
}

.format-hint {
    margin-top: 6px;
    font-size: 12px;
    color: #c9cdd4;
}

/* 提示事项 */
.tips-box {
    background: linear-gradient(135deg, #fffbe6 0%, #fff9e6 100%);
    border: 1px solid #ffe59a;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 18px;
}

.tips-title {
    font-size: 13px;
    font-weight: 600;
    color: #d48806;
    margin-bottom: 8px;
}

.tips-list {
    margin: 0;
    padding-left: 18px;
    list-style: decimal;
}

.tips-list li {
    font-size: 12px;
    color: #8c6d33;
    line-height: 1.85;
}

/* 验证码 */
.captcha-group .form-label {
    display: inline;
}

.captcha-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.captcha-input {
    flex: 1;
}

.captcha-img {
    width: 90px;
    height: 38px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #dddfe5;
    transition: border-color 0.2s;
}

.captcha-img:hover {
    border-color: #1d7ff5;
}

/* ========================================
   列表加载状态 & 空状态
   ======================================== */

/* 列表容器：为定位提供参考 */
.record-list {
    position: relative;
    min-height: 200px;
}

/* 加载遮罩层 */
.ipc-loading-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

/* 加载旋转动画 */
.ipc-loading-spinner {
    width: 36px; height: 36px;
    border: 3px solid #e8ecf2;
    border-top-color: #1d7ff5;
    border-radius: 50%;
    animation: ipc-spin 0.9s linear infinite;
}

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

/* 加载文字 */
.ipc-loading-text {
    margin-left: 12px;
    font-size: 14px;
    color: #86909c;
}

/* 空状态卡片 */
.ipc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: #86909c;
}

.ipc-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.45;
}

.ipc-empty-text {
    font-size: 14px;
    line-height: 1.6;
}

/* 操作按钮 */
.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.btn-submit,
.btn-clear {
    flex: 1;
    height: 40px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-submit {
    background: #1d7ff5;
    color: #fff;
}

.btn-submit:hover {
    background: #176ecc;
}

.btn-clear {
    background: #fff;
    color: #4e5969;
    border: 1px solid #dddfe5;
}

.btn-clear:hover {
    border-color:#bbb;
}

/* ========== IP输入框校验样式 ========== */

/* 输入框错误状态 */
.search-input.ip-error,
.form-input.ip-error {
    border-color: #e54d42 !important;
    background-color: #fff8f7;
    animation: shake 0.4s ease-in-out;
}

/* 错误提示气泡 */
.ip-error-tip {
    display: inline-block;
    color: #cf1322;
    font-size: 12px;
    line-height: 1.5;
    width: 354px;
    word-break: break-word;
    position: absolute;
    left: 0;
    bottom: -20px;
}

/* 抖动动画 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* ========== 响应式适配 ========== */
@media (max-width: 1024px) {
    .vspinp-container {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
    }

    .stats-row {
        flex-direction: column;
    }
}