/* UI restyle: 现代化设计 - 蓝色系主色调 + 卡片式布局 */
:root{
	--bg: #F8FAFC;
	--primary: #3B82F6;
	--primary-dark: #2563EB;
	--primary-light: #60A5FA;
	--text-primary: #1E293B;
	--text-secondary: #64748B;
	--text-muted: #94A3B8;
	--surface: #FFFFFF;
	--surface-hover: #F1F5F9;
	--border: #E2E8F0;
	--border-light: #F1F5F9;
	--success: #10B981;
	--warning: #F59E0B;
	--error: #EF4444;
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;
}

/* Page background */
[data-testid="stAppViewContainer"] {
	background-color: var(--surface) !important;
	background-image: none !important;
}

[data-testid="stMain"] {
	background-color: var(--surface) !important;
}

[data-testid="stHeader"] {
	background-color: var(--surface) !important;
	border-bottom: 1px solid var(--border) !important;
}

[data-testid="stToolbar"] {
	background-color: transparent !important;
}

[data-testid="stAppViewBlockContainer"] {
	padding: 0 !important;
}

[data-testid="stMarkdownContainer"] {
	color: var(--text-primary) !important;
}

/* Sidebar styling */
[data-testid="stSidebar"] {
	background-color: var(--surface) !important;
	border-right: 1px solid var(--border) !important;
	padding: 12px !important;
	box-shadow: var(--shadow-sm) !important;
}

[data-testid="stSidebar"] > div:first-child {
	gap: 12px !important;
}

/* Markdown list styling - reduce spacing between list items */
[data-testid="stMarkdownContainer"] ul, 
[data-testid="stMarkdownContainer"] ol {
    margin-bottom: 12px !important;
}

[data-testid="stMarkdownContainer"] li {
    margin-bottom: 4px !important; /* Reduced from default spacing */
    line-height: 1.3 !important; /* Ensure good readability */
}

/* Body and text styling - MODIFIED FOR READABILITY */
body, .stApp, .reportview-container {
	background-color: transparent !important;
	color: var(--text-primary) !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft Yahei", sans-serif !important;
	line-height: 1.35 !important; /* MODIFIED: Reduced for denser content */
}

/* Headings - MODIFIED FOR HIERARCHY */
h1, h2, h3, h4, .stMarkdown h1, .stMarkdown h2, .stMarkdown h3 {
	color: var(--text-primary) !important;
	font-weight: 700 !important;
	margin-top: 0.7em !important;
	margin-bottom: 0.35em !important;
	line-height: 1.2 !important;
}

h1, .stMarkdown h1 { font-size: 2rem !important; letter-spacing: -0.02em; }
h2, .stMarkdown h2 { font-size: 1.5rem !important; letter-spacing: -0.01em; }
h3, .stMarkdown h3 { font-size: 1.25rem !important; }

/* Links */
a, .stMarkdown a {
	color: var(--primary) !important;
	text-decoration: none !important;
	font-weight: 500 !important;
}

a:hover, .stMarkdown a:hover {
	color: var(--primary-dark) !important;
	text-decoration: underline !important;
}

/* Buttons */
button, .stButton>button {
	background-color: var(--primary) !important;
	color: #fff !important;
	border: none !important;
	padding: 10px 20px !important;
	border-radius: var(--radius-md) !important;
	font-weight: 600 !important;
	font-size: 0.95rem !important;
	box-shadow: var(--shadow-sm) !important;
	transition: all 0.2s ease !important;
}

button:hover, .stButton>button:hover {
	background-color: var(--primary-dark) !important;
	box-shadow: var(--shadow-md) !important;
	transform: translateY(-1px) !important;
}

button:active, .stButton>button:active {
	transform: translateY(0) !important;
}

button[disabled], .stButton>button[disabled] {
	background-color: var(--text-muted) !important;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Secondary button */
.stButton>button[kind="secondary"] {
	background-color: transparent !important;
	color: var(--primary) !important;
	border: 1px solid var(--border) !important;
}

.stButton>button[kind="secondary"]:hover {
	background-color: var(--surface-hover) !important;
}

/* Primary button emphasis */
.stButton>button[type="primary"] {
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
	box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.stButton>button[type="primary"]:hover {
	box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4) !important;
}

/* Inputs and textareas */
input, textarea, .stTextArea textarea, .stTextInput input {
	border: 1px solid var(--border) !important;
	background: var(--surface) !important;
	color: var(--text-primary) !important;
	border-radius: var(--radius-md) !important;
	padding: 10px 14px !important;
	font-size: 0.95rem !important;
	transition: all 0.2s ease !important;
}

input:focus, textarea:focus, .stTextArea textarea:focus, .stTextInput input:focus {
	border-color: var(--primary) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
	outline: none !important;
}

input::placeholder, textarea::placeholder {
	color: var(--text-muted) !important;
}

/* Textarea specific */
.stTextArea textarea {
	min-height: 180px !important;
	resize: vertical !important;
	line-height: 1.35 !important;
}

/* Multi-select styling - complete overhaul */
.stMultiSelect {
	background: var(--surface) !important;
	border-radius: var(--radius-md) !important;
	margin-bottom: 12px !important;
}

/* Base select container */
.stMultiSelect [data-baseweb="select"] {
	background-color: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-md) !important;
	padding: 8px 12px !important;
	color: var(--text-primary) !important;
	box-shadow: none !important;
	background-image: none !important;
}

/* Select container hover */
.stMultiSelect [data-baseweb="select"]:hover {
	border-color: var(--primary-light) !important;
	background-color: var(--surface) !important;
}

/* Select container focus */
.stMultiSelect [data-baseweb="select"]:focus-within {
	border-color: var(--primary) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Select container text */
.stMultiSelect [data-baseweb="select"] > div,
.stMultiSelect [data-baseweb="select"] > span,
.stMultiSelect [data-baseweb="select"] input {
	color: var(--text-primary) !important;
	font-size: 0.9rem !important;
	background-color: transparent !important;
}

/* Tags container */
.stMultiSelect [data-baseweb="select"] [data-baseweb="tags"] {
	background-color: transparent !important;
}

/* Individual tag */
.stMultiSelect [data-baseweb="tag"] {
	background-color: rgba(59, 130, 246, 0.15) !important;
	color: var(--primary-dark) !important;
	border: 1px solid rgba(59, 130, 246, 0.25) !important;
	border-radius: var(--radius-sm) !important;
	padding: 3px 8px !important;
	font-size: 0.85rem !important;
	font-weight: 500 !important;
	margin: 2px !important;
	box-shadow: none !important;
}

/* Tag close button */
.stMultiSelect [data-baseweb="tag"] svg {
	color: var(--primary) !important;
	width: 14px !important;
	height: 14px !important;
}

/* Tag close button hover */
.stMultiSelect [data-baseweb="tag"]:hover svg {
	color: var(--primary-dark) !important;
}

/* Menu dropdown */
.stMultiSelect [data-baseweb="menu"] {
	background-color: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-md) !important;
	box-shadow: var(--shadow-lg) !important;
}

/* Menu options */
.stMultiSelect [data-baseweb="menu"] [role="option"] {
	color: var(--text-primary) !important;
	background-color: var(--surface) !important;
	padding: 8px 12px !important;
	font-size: 0.9rem !important;
}

/* Menu option hover */
.stMultiSelect [data-baseweb="menu"] [role="option"]:hover {
	background-color: var(--surface-hover) !important;
}

/* Menu option selected */
.stMultiSelect [data-baseweb="menu"] [role="option"][aria-selected="true"] {
	background-color: rgba(59, 130, 246, 0.1) !important;
	border-left: 3px solid var(--primary) !important;
}

/* Clear selection button */
.stMultiSelect [data-baseweb="select"] [data-baseweb="clear"] {
	color: var(--text-primary) !important;
}

/* Dropdown arrow */
.stMultiSelect [data-baseweb="select"] [data-baseweb="dropdown"] {
	color: var(--text-primary) !important;
}

/* Override any remaining default styles */
.stMultiSelect [data-baseweb="select"] * {
	background-color: transparent !important;
	color: var(--text-primary) !important;
}

/* Force background color for all select elements */
.css-1n543e5 {
	background-color: var(--surface) !important;
	color: var(--text-primary) !important;
}

.css-12jo7m5 {
	background-color: var(--surface) !important;
	color: var(--text-primary) !important;
}

.css-1jux5v5 {
	background-color: var(--surface) !important;
	color: var(--text-primary) !important;
}

/* Slider styling */
.stSlider [data-baseweb="slider"] {
	background-color: var(--border-light) !important;
	height: 6px !important;
	border-radius: 3px !important;
}

.stSlider [data-baseweb="slider"] .css-1v7bxtl {
	background-color: var(--primary) !important;
	height: 6px !important;
	border-radius: 3px !important;
}

.stSlider [data-baseweb="thumb"] {
	background-color: var(--surface) !important;
	border: 2px solid var(--primary) !important;
	box-shadow: var(--shadow-md) !important;
	width: 20px !important;
	height: 20px !important;
}

.stSlider [data-baseweb="thumb"]:hover {
	background-color: var(--primary) !important;
}

/* Expander panels */
.streamlit-expanderHeader, .stExpander, .st-expander {
	background-color: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-md) !important;
	padding: 16px 20px !important;
	margin-bottom: 12px !important;
	box-shadow: var(--shadow-sm) !important;
}

.streamlit-expanderHeader:hover, .stExpander:hover {
	background-color: var(--surface-hover) !important;
	border-color: var(--primary-light) !important;
}

.stExpander .stExpanderContent {
	padding: 16px 20px !important;
	border-top: 1px solid var(--border-light) !important;
}

/* Block container */
.block-container {
	padding: 32px !important;
	max-width: 1400px !important;
}

/* Card styling */
.stCard, .stAlert, .stError, .stWarning, .stSuccess, .stInfo {
	background-color: var(--surface) !important;
	border: 1px solid var(--border) !important;
	border-radius: var(--radius-lg) !important;
	box-shadow: var(--shadow-sm) !important;
	padding: 20px !important;
	margin-bottom: 16px !important;
}

.stSuccess {
	border-left: 4px solid var(--success) !important;
}

.stWarning {
	border-left: 4px solid var(--warning) !important;
}

.stError {
	border-left: 4px solid var(--error) !important;
}

.stInfo {
	border-left: 4px solid var(--primary) !important;
}

/* Checkbox and radio button */
.stCheckbox [data-baseweb="checkbox"] div,
.stRadio [data-baseweb="radio"] div {
	border-color: var(--border) !important;
	background-color: var(--surface) !important;
}

.stCheckbox [data-baseweb="checkbox"]:hover div,
.stRadio [data-baseweb="radio"]:hover div {
	border-color: var(--primary-light) !important;
}

.stCheckbox [data-baseweb="checkbox"]:checked div,
.stRadio [data-baseweb="radio"]:checked div {
	background-color: var(--primary) !important;
	border-color: var(--primary) !important;
}

/* Progress bar */
.stProgress .progress-bar {
	background-color: var(--primary) !important;
	border-radius: var(--radius-sm) !important;
}

/* Horizontal rule */
hr {
	border: 0;
	border-top: 1px solid var(--border) !important;
	margin: 16px 0 !important;
}

/* Info boxes and tips */
.stInfo, .stSuccess, .stWarning, .stError {
	font-size: 0.95rem !important;
	line-height: 1.35 !important;
}

/* Sidebar specific improvements */
[data-testid="stSidebar"] .stTextArea,
[data-testid="stSidebar"] .stMultiSelect,
[data-testid="stSidebar"] .stSlider {
	margin-bottom: 12px !important;
}

[data-testid="stSidebar"] h3 {
	font-size: 1rem !important;
	color: var(--text-primary) !important;
	margin-bottom: 8px !important;
	font-weight: 600 !important;
	margin-top: 4px !important;
}

[data-testid="stSidebar"] hr {
	margin: 12px 0 !important;
}

/* Disable elements */
.stButton>button[disabled],
.stTextInput input[disabled],
.stTextArea textarea[disabled] {
	background-color: var(--surface-hover) !important;
	color: var(--text-muted) !important;
	cursor: not-allowed !important;
}

/* Smooth transitions */
* {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Remove unwanted shadows */
.css-ffhzg2, .css-12oz5g7 {
	box-shadow: none !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: var(--surface-hover);
}

::-webkit-scrollbar-thumb {
	background: var(--border);
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--text-muted);
}

/* Empty state styling */
.empty-state {
	text-align: center;
	padding: 60px 20px;
	color: var(--text-muted);
}

.empty-state svg {
	width: 64px;
	height: 64px;
	margin-bottom: 16px;
	opacity: 0.5;
}

/* Loading animation */
@keyframes spin {
	to { transform: rotate(360deg); }
}

.loading-spinner {
	animation: spin 1s linear infinite;
}

/* Badge styling */
.badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--radius-sm);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.025em;
}

.badge-primary {
	background-color: rgba(59, 130, 246, 0.1);
	color: var(--primary);
}

.badge-success {
	background-color: rgba(16, 185, 129, 0.1);
	color: var(--success);
}

.badge-warning {
	background-color: rgba(245, 158, 11, 0.1);
	color: var(--warning);
}

/* Tooltip hint */
.hint-text {
	font-size: 0.875rem;
	color: var(--text-secondary);
	margin-top: 8px;
	line-height: 1.5;
}

/* Step indicator */
.step-indicator {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	margin-bottom: 16px;
}

.step-number {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--primary);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.875rem;
}

/* Stats card */
.stats-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 20px;
	box-shadow: var(--shadow-sm);
}

.stats-value {
	font-size: 2rem;
	font-weight: 700;
	color: var(--primary);
	margin: 8px 0;
}

.stats-label {
	font-size: 0.875rem;
	color: var(--text-secondary);
	font-weight: 500;
}

.small-muted {
	color: var(--text-secondary);
	font-size: 0.9rem;
	line-height: 1.35;
}