/* ==========================================================================
   政策返点系统 — 共享设计系统
   ========================================================================== */

/* A. CSS 自定义属性
   ========================================================================== */
:root {
    /* 品牌蓝 */
    --color-brand-50:  #eff6ff;
    --color-brand-100: #dbeafe;
    --color-brand-200: #bfdbfe;
    --color-brand-300: #93c5fd;
    --color-brand-400: #60a5fa;
    --color-brand-500: #3b82f6;
    --color-brand-600: #2563eb;
    --color-brand-700: #1d4ed8;

    /* 中性灰 */
    --color-gray-50:  #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;

    /* 语义色 */
    --color-success: #059669;
    --color-success-dark: #047857;
    --color-success-light: #ecfdf5;
    --color-success-border: #a7f3d0;
    --color-success-text: #065f46;

    --color-warning: #d97706;
    --color-warning-dark: #b45309;
    --color-warning-light: #fffbeb;
    --color-warning-soft: #fef3c7;
    --color-warning-border: #fde68a;
    --color-warning-text: #92400e;

    --color-error:   #dc2626;
    --color-error-dark: #b91c1c;
    --color-error-light: #fef2f2;
    --color-error-border: #fecaca;
    --color-error-text: #991b1b;

    --color-info:    #0284c7;
    --color-info-light: #f0f9ff;
    --color-info-border: #bae6fd;
    --color-info-text: #075985;

    /* 背景层级 */
    --bg-page:   #fafbfc;
    --bg-card:   #ffffff;
    --bg-inset:  #f1f5f9;

    /* 边框 */
    --border-default: #e2e8f0;
    --border-light:   #f1f5f9;

    /* 阴影（低透明度 slate 基调，轻商务质感） */
    --shadow-card:     0 1px 3px rgba(15,23,42,0.04);
    --shadow-dropdown: 0 4px 12px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.03);
    --shadow-modal:    0 20px 56px rgba(15,23,42,0.14), 0 4px 12px rgba(15,23,42,0.06);

    /* 圆角 */
    --radius:    6px;
    --radius-lg: 8px;
    --radius-xl: 10px;

    /* 焦点环 */
    --focus-ring: 0 0 0 2px rgba(59,130,246,0.1);
}

/* B. 基础重置
   ========================================================================== */
[x-cloak] {
    display: none !important;
}

body {
    font-size: 14px;
    color: var(--color-gray-700);
    background: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--color-brand-100);
    color: var(--color-gray-800);
}

/* —— 数字排版：等宽数字，金额/结果对齐不跳动 —— */
.tnum, .num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* —— 细滚动条：贴合轻商务质感 —— */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--color-gray-400); background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: var(--color-gray-300) transparent; }

/* C. 共享动画
   ========================================================================== */
@keyframes slide-in {
    from { transform: translateX(20px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes fade-in-up {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.animate-slide-in   { animation: slide-in   0.25s ease-out; }
.animate-fade-in-up { animation: fade-in-up 0.2s  ease-out; }

/* 骨架屏（浅色：用于白色卡片） */
.skeleton-line {
    background: linear-gradient(90deg, var(--color-gray-200) 25%, var(--color-gray-100) 37%, var(--color-gray-200) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
    height: 14px;
}

/* 骨架屏（深色：用于深色背景头部） */
.skeleton-line-dark {
    background: linear-gradient(90deg, var(--color-gray-700) 25%, var(--color-gray-600) 37%, var(--color-gray-700) 63%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite;
    border-radius: 4px;
    height: 14px;
}

/* D. 组件类
   ========================================================================== */

/* —— 按钮 —— */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    transition: all 0.15s ease;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
    user-select: none;
    text-decoration: none;
}
.btn:disabled, .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
.btn:not(:disabled):active { transform: translateY(0.5px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.btn-primary {
    background: var(--color-brand-500);
    color: #fff;
    border-color: var(--color-brand-500);
}
.btn-primary:hover { background: var(--color-brand-600); border-color: var(--color-brand-600); transition-delay: 50ms; }
.btn-primary:active { background: var(--color-brand-700); }

.btn-secondary {
    background: #fff;
    color: var(--color-gray-700);
    border-color: var(--color-gray-200);
}
.btn-secondary:hover { background: var(--color-gray-50); border-color: var(--color-gray-300); transition-delay: 50ms; }

.btn-danger {
    background: var(--color-error);
    color: #fff;
    border-color: var(--color-error);
}
.btn-danger:hover { background: var(--color-error-dark); border-color: var(--color-error-dark); transition-delay: 50ms; }

.btn-ghost {
    background: transparent;
    color: var(--color-gray-600);
    border-color: transparent;
}
.btn-ghost:hover { background: var(--color-gray-100); color: var(--color-gray-800); transition-delay: 50ms; }

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
}

/* —— 表单控件 —— */
.input {
    width: 100%;
    padding: 6px 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-gray-700);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.input::placeholder { color: var(--color-gray-400); }
.input:focus {
    border-color: var(--color-brand-500);
    box-shadow: var(--focus-ring);
}

.textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    font-size: 13px;
    line-height: 1.6;
    color: var(--color-gray-700);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    resize: vertical;
    font-family: "SF Mono", Monaco, Consolas, "Courier New", monospace;
}
.textarea::placeholder { color: var(--color-gray-400); }
.textarea:focus {
    border-color: var(--color-brand-500);
    box-shadow: var(--focus-ring);
}

/* —— 卡片 —— */
.card {
    background: var(--bg-card);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}

/* —— 弹窗 —— */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,0.4);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
}
.modal-panel {
    background: var(--bg-card);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-modal);
    padding: 20px;
}
.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

/* —— Badge —— */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
}
.badge-success { background: var(--color-success-light); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.badge-error   { background: var(--color-error-light);   color: var(--color-error-text);   border: 1px solid var(--color-error-border); }
.badge-warning { background: var(--color-warning-light); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
.badge-info    { background: var(--color-info-light);    color: var(--color-info-text);    border: 1px solid var(--color-info-border); }
.badge-neutral { background: var(--color-gray-100); color: var(--color-gray-600); }
.badge-solid-success { background: var(--color-success); color: #fff; }

/* —— Toast —— */
.toast {
    padding: 8px 16px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    box-shadow: var(--shadow-dropdown);
}
.toast-success { background: var(--color-success); }
.toast-error   { background: var(--color-error); }
.toast-info    { background: var(--color-gray-800); }
.toast-warning { background: var(--color-warning); }

/* —— Tab 按钮 —— */
.tab-btn {
    padding: 6px 14px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-600);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.tab-btn:hover { color: var(--color-gray-800); background: rgba(255,255,255,0.6); }
.tab-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tab-btn-active {
    color: var(--color-brand-600);
    font-weight: 600;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,0.06), 0 0 0 1px rgba(15,23,42,0.04);
}

/* —— 页面头部 —— */
.page-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--color-gray-200);
    padding: 16px 20px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.page-header-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-gray-900);
    letter-spacing: -0.01em;
}
.page-header-desc {
    font-size: 12px;
    color: var(--color-gray-500);
    margin-top: 3px;
}
.page-header-meta {
    font-size: 12px;
    color: var(--color-gray-400);
    font-variant-numeric: tabular-nums;
}

/* —— 顶部导航（白色轻商务） —— */
.navbar {
    position: sticky;
    top: 0;
    z-index: 9997;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--color-gray-200);
}
.nav-link {
    padding: 6px 12px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-500);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}
.nav-link:hover { color: var(--color-gray-800); background: var(--color-gray-100); }
.nav-link-active,
.nav-link-active:hover {
    color: var(--color-brand-600);
    background: var(--color-brand-50);
}

/* 导航栏移动端下拉菜单链接 */
@media (max-width: 639px) {
    .navbar .nav-link {
        display: block;
        padding: 8px 12px;
        border-radius: var(--radius);
    }
}

/* —— 结果分组头部（浅色化，替代深灰块） —— */
.group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-default);
}
.group-header-title {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-gray-900);
}
.group-header-count {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--color-brand-50);
    color: var(--color-brand-600);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* —— 右键菜单 —— */
.context-menu {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-dropdown);
    padding: 4px;
    z-index: 50;
    min-width: 140px;
}
.context-menu-item {
    padding: 6px 12px;
    font-size: 13px;
    color: var(--color-gray-700);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s;
}
.context-menu-item:hover { background: var(--color-gray-50); }
.context-menu-item-danger:hover { background: var(--color-error-light); color: var(--color-error); }

/* —— 空状态插画 —— */
.empty-illustration {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin: 0 auto 16px;
    display: block;
}

/* —— 空状态图标框 —— */
.empty-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    font-size: 20px;
    color: var(--color-gray-400);
    margin: 0 auto 12px;
}
.empty-icon-error {
    background: var(--color-error-light);
    border-color: var(--color-error-border);
    color: var(--color-error);
}

/* —— 等宽字体 —— */
.font-mono, .mono, .line-content {
    font-family: "SF Mono", Monaco, Consolas, "Courier New", monospace;
}

/* —— 行类型样式（用于 index.html 政策表） —— */
.line-item-title {
    font-weight: 600;
    font-size: 13px;
    border-left: 2px solid var(--color-brand-500);
    background: transparent;
    padding-left: 12px;
}
.line-item-bold {
    font-weight: 700;
    background: rgba(255, 251, 235, 0.5); /* warning-light / 50% */
    border-left: 2px solid var(--color-warning);
    padding-left: 12px;
}
.line-item-separator {
    padding: 2px 12px;
    color: var(--color-gray-300);
    font-size: 12px;
}

/* —— 高亮标记 —— */
mark.highlight {
    background: var(--color-warning-soft);
    color: var(--color-warning-text);
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 600;
    box-shadow: inset 0 -1px 0 var(--color-warning-border);
}

/* —— CSS Logo 方块 —— */
.logo-mark {
    width: 22px;
    height: 22px;
    background: var(--color-brand-500);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

/* —— 提示条 —— */
.hint-bar {
    border-left: 2px solid var(--color-brand-300);
    padding-left: 10px;
    font-size: 12px;
    color: var(--color-gray-500);
}

/* —— 警告框 —— */
.alert-warning {
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning-border);
    color: var(--color-warning-text);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 13px;
}
.alert-success {
    background: var(--color-success-light);
    border: 1px solid var(--color-success-border);
    color: var(--color-success-text);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 13px;
}
.alert-error {
    background: var(--color-error-light);
    border: 1px solid var(--color-error-border);
    color: var(--color-error-text);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-size: 13px;
}

/* —— 极简辅助类 —— */
.section-divider {
    height: 1px;
    background: var(--border-light);
    margin: 12px 0;
}
.card-elevated {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(15,23,42,0.05);
}
.text-balance {
    text-wrap: balance;
}