.e7db-main { padding: 20px 0; max-width: 1200px; margin: 0 auto; }
.e7db-header { margin-bottom: 16px; text-align: left; }
.e7db-sub { color: var(--text-muted); margin: 6px 0 12px; }
.e7db-controls { display: flex; gap: 8px; flex-wrap: wrap; }
#e7db-search { flex: 1; min-width: 240px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; }
#e7db-filter { padding: 8px 10px; border: 1px solid var(--border-color); border-radius: 8px; }
/* Loading States */
.e7db-loading { 
	padding: 40px; 
	text-align: center; 
	color: var(--text-muted); 
	font-style: italic; 
	cursor: pointer; 
	transition: all 0.2s ease; 
}

.e7db-loading:hover { 
	color: var(--text-color); 
	background: var(--bg-color); 
	border-radius: 8px; 
	padding: 20px; 
}

.e7db-error { padding: 12px; background: #2b1a1a; color: #ffb3b3; border: 1px solid #5a2a2a; border-radius: 8px; }
.e7db-empty { padding: 20px; text-align: center; color: var(--text-muted); }
.e7db-section { margin: 16px 0 8px; font-size: 1.1rem; }
.e7db-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.e7db-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; padding: 10px; box-shadow: none; }
.e7db-card-title { font-weight: 700; margin-bottom: 6px; }
.e7db-card-sub { color: var(--text-muted); margin-bottom: 8px; }
.e7db-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.e7db-tag { padding: 2px 6px; border: 1px solid var(--border-color); border-radius: 999px; font-size: 0.8rem; color: var(--text-muted); }
.e7db-notes { margin-top: 20px; }
.e7db-notes .e7db-disclaimer { font-size: 0.9rem; color: var(--text-muted); }
.e7db-links { display: flex; gap: 12px; flex-wrap: wrap; }
.e7db-card-head { display:flex; align-items:center; gap:8px; }
.e7db-avatar { width: 48px; height: 48px; border-radius: 8px; border: 1px solid var(--border-color); object-fit: cover; image-rendering: auto; }
.e7db-skillrow { margin-top:6px; display:flex; gap:6px; flex-wrap:wrap; }
.e7db-skill { width:28px; height:28px; border-radius:6px; border:1px solid var(--border-color); object-fit:cover; }
.e7db-class { width:18px; height:18px; border-radius:4px; border:1px solid var(--border-color); object-fit:cover; }

/* Modal */
.e7db-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); backdrop-filter: blur(2px); display:none; align-items:center; justify-content:center; z-index: 1002; }
.e7db-modal.open { display:flex; }
.e7db-modal-content { width: min(980px, 96vw); max-height: 90vh; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; display:flex; flex-direction:column; }
.e7db-modal-head { display:flex; gap:12px; align-items:center; padding:14px; border-bottom:1px solid var(--border-color); }
.e7db-modal-title { font-size: 1.2rem; font-weight: 700; }
.e7db-modal-sub { color: var(--text-muted); }
.e7db-modal-body { padding: 14px; overflow: auto; }
.e7db-modal-close { margin-left: auto; background: transparent; border: 1px solid var(--border-color); color: var(--text-color); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.e7db-modal-link { margin-left: auto; margin-right: 8px; text-decoration: none; padding:6px 10px; border:1px solid var(--border-color); border-radius:8px; color: var(--text-color); }

.e7db-tabs { display:flex; gap:8px; border-bottom:1px solid var(--border-color); margin-bottom:12px; }
.e7db-tab { padding:8px 10px; border:1px solid transparent; border-top-left-radius:8px; border-top-right-radius:8px; cursor:pointer; }
.e7db-tab.active { border-color: var(--border-color); border-bottom-color: var(--card-bg); background: var(--card-bg); }

.e7db-row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.e7db-stat { padding:4px 8px; border:1px solid var(--border-color); border-radius:8px; color:var(--text-muted); }

/* Skill cards */
.e7db-skillcard { display:flex; gap:10px; border:1px solid var(--border-color); border-radius:12px; padding:10px; margin-bottom:10px; background: var(--card-bg); }
.e7db-skillcard img.e7db-skill { width:40px; height:40px; border-radius:8px; }
.e7db-skillmeta { display:flex; gap:10px; align-items:center; }
.e7db-skillname { font-weight:700; }
.e7db-skillcd { color: var(--text-muted); font-size:0.9rem; }
.e7db-skilldesc { color: var(--text-color); margin-top:4px; }

/* Enhanced Hero Page Components */
.e7-hero-stats { 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
	gap: 16px; 
	margin-bottom: 24px; 
}

.e7-stat-card { 
	background: var(--bg-color); 
	border: 1px solid var(--border-color); 
	border-radius: 12px; 
	padding: 16px; 
	text-align: center; 
	transition: all 0.2s ease;
}

.e7-stat-card:hover { 
	transform: translateY(-2px); 
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
}

.e7-stat-value { 
	font-size: 1.5rem; 
	font-weight: 700; 
	color: var(--accent-color, #4a90e2); 
	margin-bottom: 4px; 
}

.e7-stat-label { 
	color: var(--text-muted); 
	font-size: 0.9rem; 
	text-transform: uppercase; 
	letter-spacing: 0.5px; 
}

/* Skill Cards */
.e7-skill-card { 
	background: var(--bg-color); 
	border: 1px solid var(--border-color); 
	border-radius: 16px; 
	padding: 20px; 
	margin-bottom: 20px; 
	transition: all 0.2s ease; 
}

.e7-skill-card:hover { 
	transform: translateY(-2px); 
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); 
}

.e7-skill-header { 
	display: flex; 
	align-items: center; 
	gap: 16px; 
	margin-bottom: 16px; 
}

.e7-skill-icon { 
	width: 48px; 
	height: 48px; 
	border-radius: 12px; 
	border: 2px solid var(--border-color); 
	object-fit: cover; 
	background: var(--card-bg); 
}

.e7-skill-info { 
	flex: 1; 
}

.e7-skill-name { 
	font-size: 1.3rem; 
	font-weight: 700; 
	color: var(--text-color); 
	margin-bottom: 4px; 
}

.e7-skill-cooldown { 
	color: var(--accent-color, #4a90e2); 
	font-weight: 600; 
	font-size: 0.9rem; 
}

.e7-skill-description { 
	color: var(--text-color); 
	line-height: 1.6; 
	margin-bottom: 16px; 
}

/* Skill Enhancements */
.e7-enhancements { 
	background: var(--card-bg); 
	border: 1px solid var(--border-color); 
	border-radius: 12px; 
	padding: 16px; 
}

.e7-enhancement-item { 
	display: flex; 
	justify-content: space-between; 
	align-items: center; 
	padding: 8px 0; 
	border-bottom: 1px solid var(--border-color); 
}

.e7-enhancement-item:last-child { 
	border-bottom: none; 
}

.e7-enhancement-effect { 
	font-weight: 500; 
	color: var(--text-color); 
}

.e7-enhancement-cost { 
	color: var(--text-muted); 
	font-size: 0.9rem; 
}

/* Artifacts and EE */
.e7-item-grid { 
	display: grid; 
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
	gap: 20px; 
}

.e7-item-card { 
	background: var(--bg-color); 
	border: 1px solid var(--border-color); 
	border-radius: 16px; 
	padding: 20px; 
	display: flex; 
	align-items: center; 
	gap: 16px; 
	transition: all 0.2s ease; 
	min-height: 160px;
}

.e7-item-card:hover { 
	transform: translateY(-2px); 
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); 
}

/* Optimize image loading */
.e7-item-icon { 
	width: 120px; 
	height: 120px; 
	border-radius: 16px; 
	border: 3px solid var(--border-color); 
	object-fit: cover; 
	/* Lazy load images - handled by HTML loading attribute */
	flex-shrink: 0; /* Prevent image from shrinking */
}

/* Ensure artifact images are always the right size */
.e7-item-card img.e7-item-icon {
	width: 120px !important;
	height: 120px !important;
	min-width: 120px !important;
	min-height: 120px !important;
	max-width: 120px !important;
	max-height: 120px !important;
}

.e7-item-info { 
	flex: 1; 
	display: flex; 
	flex-direction: column; 
	gap: 4px; 
}

.e7-item-name { 
	font-weight: 600; 
	color: var(--text-color); 
	font-size: 1rem; 
}

.e7-item-usage { 
	color: var(--accent-color, #4a90e2); 
	font-size: 0.85rem; 
	font-weight: 500; 
}

/* Awakening and Imprint */
.e7-awakening-list { 
	display: grid; 
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
	gap: 16px; 
}

.e7-awakening-item { 
	background: var(--bg-color); 
	border: 1px solid var(--border-color); 
	border-radius: 12px; 
	padding: 16px; 
	transition: all 0.2s ease;
}

.e7-awakening-item:hover { 
	transform: translateY(-1px); 
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
}

.e7-awakening-title { 
	font-weight: 600; 
	color: var(--accent-color, #4a90e2); 
	margin-bottom: 8px; 
}

.e7-awakening-value { 
	color: var(--text-color); 
	line-height: 1.5;
}

/* Enhanced Tabs */
.e7db-tabs { 
	display: flex; 
	gap: 4px; 
	border-bottom: 2px solid var(--border-color); 
	margin-bottom: 24px; 
	background: var(--card-bg); 
	padding: 0 20px; 
	border-radius: 16px 16px 0 0; 
}

.e7db-tab { 
	padding: 12px 20px; 
	border: none; 
	border-radius: 8px 8px 0 0; 
	cursor: pointer; 
	background: transparent; 
	color: var(--text-muted); 
	font-weight: 500; 
	transition: all 0.2s ease; 
	position: relative; 
}

.e7db-tab:hover { 
	color: var(--text-color); 
	background: rgba(255, 255, 255, 0.05); 
}

.e7db-tab.active { 
	color: var(--text-color); 
	background: var(--card-bg); 
	border-bottom: 2px solid var(--accent-color, #4a90e2); 
}

/* Enhanced Panels */
.e7db-panel { 
	background: var(--card-bg); 
	border: 1px solid var(--border-color); 
	border-radius: 0 16px 16px 16px; 
	padding: 24px; 
	min-height: 200px; /* Reduced from 400px for faster initial render */
	will-change: contents; /* Optimize for content changes */
}

/* Responsive Design */
@media (max-width: 768px) {
	.e7-hero-stats { 
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); 
	}
	
	.e7-item-grid { 
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
	}
	
	.e7-awakening-list { 
		grid-template-columns: 1fr; 
	}
	
	.e7db-tabs { 
		flex-wrap: wrap; 
		padding: 0 10px; 
	}
	
	.e7db-tab { 
		padding: 8px 12px; 
		font-size: 0.9rem; 
	}
} 

/* Responsive improvements for artifacts */
@media (max-width: 768px) {
	.e7-item-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	
	.e7-item-card {
		padding: 16px;
		min-height: 140px;
	}
	
	.e7-item-icon {
		width: 100px;
		height: 100px;
		border-radius: 12px;
		border: 2px solid var(--border-color);
	}
	
	.e7-item-card img.e7-item-icon {
		width: 100px !important;
		height: 100px !important;
		min-width: 100px !important;
		min-height: 100px !important;
		max-width: 100px !important;
		max-height: 100px !important;
	}
}

@media (max-width: 480px) {
	.e7-item-icon {
		width: 80px;
		height: 80px;
		border-radius: 10px;
	}
	
	.e7-item-card img.e7-item-icon {
		width: 80px !important;
		height: 80px !important;
		min-width: 80px !important;
		min-height: 80px !important;
		max-width: 80px !important;
		max-height: 80px !important;
	}
} 

/* Skill Enhancements Dropdown */
.e7-skill-toggle {
	background: var(--accent-color, #4a90e2);
	color: white;
	border: none;
	border-radius: 8px;
	padding: 8px 16px;
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease;
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.e7-skill-toggle:hover {
	background: var(--accent-hover, #357abd);
	transform: translateY(-1px);
}

.e7-skill-toggle::after {
	content: '▼';
	font-size: 0.7rem;
	transition: transform 0.2s ease;
}

.e7-skill-toggle.expanded::after {
	transform: rotate(180deg);
}

.e7-skill-enhancements {
	background: var(--bg-color);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	margin-top: 16px;
	padding: 16px;
	animation: slideDown 0.3s ease-out;
	max-width: 100%;
	overflow: hidden;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
		max-height: 0;
	}
	to {
		opacity: 1;
		transform: translateY(0);
		max-height: 500px;
	}
}

.e7-enhancements-header h4 {
	margin: 0 0 12px 0;
	font-size: 1.1rem;
}

.e7-enhancements-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 100%;
}

.e7-enhancement-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 12px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	gap: 16px;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
}

.e7-enhancement-effect {
	flex: 1;
	color: var(--text-color);
	line-height: 1.5;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
}

.e7-enhancement-cost {
	color: var(--accent-color, #4a90e2);
	font-weight: 600;
	font-size: 0.9rem;
	white-space: normal;
	text-align: right;
	flex-shrink: 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: 200px;
} 

/* Enhancements Overview Panel */
.e7-enhancements-overview {
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.e7-skill-enhancement-section {
	margin-bottom: 32px;
	padding: 20px;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 16px;
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.e7-skill-enhancement-header h4 {
	border-bottom: 2px solid var(--accent-color, #4a90e2);
	padding-bottom: 8px;
}

.e7-enhancements-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
	margin-top: 16px;
	max-width: 100%;
}

.e7-enhancement-card {
	background: var(--bg-color);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 16px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	transition: all 0.2s ease;
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.e7-enhancement-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.e7-enhancement-level {
	flex-shrink: 0;
}

.e7-level-badge {
	background: var(--accent-color, #4a90e2);
	color: white;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 600;
	white-space: nowrap;
}

.e7-enhancement-content {
	flex: 1;
	min-width: 0;
	max-width: 100%;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

.e7-enhancement-effect {
	color: var(--text-color);
	line-height: 1.5;
	margin-bottom: 8px;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
}

.e7-enhancement-cost {
	color: var(--accent-color, #4a90e2);
	font-weight: 600;
	font-size: 0.9rem;
	background: rgba(74, 144, 226, 0.1);
	padding: 4px 8px;
	border-radius: 6px;
	display: inline-block;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
	white-space: normal;
}

/* Responsive Design for Enhancements */
@media (max-width: 768px) {
	.e7-enhancements-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	
	.e7-enhancement-card {
		flex-direction: column;
		gap: 12px;
	}
	
	.e7-enhancement-level {
		align-self: flex-start;
	}
} 

/* Enhanced Awakening Panel */
.e7-awakening-overview {
	max-width: 100%;
}

.e7-awakening-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-top: 16px;
}

.e7-awakening-card {
	background: var(--bg-color);
	border: 1px solid var(--border-color);
	border-radius: 16px;
	padding: 20px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	transition: all 0.2s ease;
}

.e7-awakening-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.e7-awakening-icon {
	font-size: 2rem;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(74, 144, 226, 0.1);
	border-radius: 12px;
}

.e7-awakening-content {
	flex: 1;
	min-width: 0;
}

.e7-awakening-stat {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--accent-color, #4a90e2);
	margin-bottom: 8px;
}

.e7-awakening-value {
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--text-color);
	margin-bottom: 12px;
	background: rgba(74, 144, 226, 0.1);
	padding: 6px 12px;
	border-radius: 8px;
	display: inline-block;
}

.e7-awakening-description {
	color: var(--text-color);
	line-height: 1.5;
	font-size: 0.95rem;
}

/* Enhanced Memory Imprint Panel */
.e7-imprint-overview {
	max-width: 100%;
}

.e7-imprint-special {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	margin-bottom: 24px;
}

.e7-imprint-special-card {
	background: var(--bg-color);
	border: 2px solid var(--accent-color, #4a90e2);
	border-radius: 16px;
	padding: 20px;
	display: flex;
	gap: 16px;
	align-items: flex-start;
	transition: all 0.2s ease;
}

.e7-imprint-special-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(74, 144, 226, 0.2);
}

.e7-imprint-special-icon {
	font-size: 2rem;
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(74, 144, 226, 0.1);
	border-radius: 12px;
}

.e7-imprint-special-content {
	flex: 1;
	min-width: 0;
}

.e7-imprint-special-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--accent-color, #4a90e2);
	margin-bottom: 8px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.e7-imprint-special-value {
	color: var(--text-color);
	line-height: 1.5;
	font-size: 1rem;
}

/* Memory Imprint - Enhanced Layout */
.e7-imprint-container {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.e7-imprint-section {
	background: var(--bg-color);
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 20px;
	transition: all 0.3s ease;
}

.e7-imprint-section:hover {
	border-color: var(--accent-color, #4a90e2);
	box-shadow: 0 4px 12px rgba(74, 144, 226, 0.1);
}

.e7-imprint-section-header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 20px;
}

.e7-imprint-section-icon {
	font-size: 24px;
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-color, #4a90e2);
	color: white;
	border-radius: 50%;
	flex-shrink: 0;
}

.e7-imprint-section-title h4 {
	margin: 0;
	color: var(--text-color);
	font-size: 1.2em;
	font-weight: 600;
}

.e7-imprint-section-title p {
	margin: 4px 0 0 0;
	color: var(--text-muted);
	font-size: 0.9em;
	line-height: 1.4;
}

/* Enhanced Effect Cards */
.e7-imprint-effects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.e7-imprint-effect-card {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	background: var(--bg-secondary, rgba(255, 255, 255, 0.05));
	border: 1px solid var(--border-color);
	border-radius: 8px;
	transition: all 0.3s ease;
}

.e7-imprint-effect-card:hover {
	border-color: var(--accent-color, #4a90e2);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
}

.e7-imprint-effect-icon {
	font-size: 20px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--accent-color, #4a90e2);
	color: white;
	border-radius: 50%;
	flex-shrink: 0;
}

.e7-imprint-effect-content {
	flex: 1;
	min-width: 0;
}

.e7-imprint-effect-stat {
	font-weight: 600;
	color: var(--text-color);
	margin-bottom: 4px;
	font-size: 1em;
}

.e7-imprint-effect-value {
	font-weight: 700;
	color: var(--accent-color, #4a90e2);
	margin-bottom: 8px;
	font-size: 1.1em;
}

.e7-imprint-effect-description {
	color: var(--text-muted);
	font-size: 0.9em;
	line-height: 1.4;
	word-wrap: break-word;
}

/* Imprint Effect Header with Tier Badge */
.e7-imprint-effect-header {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* Tier Badge Styling */
.e7-imprint-tier-badge {
	padding: 4px 8px;
	border-radius: 6px;
	font-weight: 700;
	font-size: 0.8rem;
	text-align: center;
	min-width: 32px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* SSS Tier - Highest (Red) */
.e7-imprint-tier-badge.sss {
	background: linear-gradient(135deg, #ff0000, #ff4444);
	color: white;
	border: 1px solid #cc0000;
}

/* SS Tier - High (Red) */
.e7-imprint-tier-badge.ss {
	background: linear-gradient(135deg, #ff0000, #ff4444);
	color: white;
	border: 1px solid #cc0000;
}

/* S Tier - Good (Red) */
.e7-imprint-tier-badge.s {
	background: linear-gradient(135deg, #ff0000, #ff4444);
	color: white;
	border: 1px solid #cc0000;
}

/* A Tier - Average (Purple) */
.e7-imprint-tier-badge.a {
	background: linear-gradient(135deg, #800080, #9932cc);
	color: white;
	border: 1px solid #4b0082;
}

/* B Tier - Basic (Blue) */
.e7-imprint-tier-badge.b {
	background: linear-gradient(135deg, #0000ff, #4169e1);
	color: white;
	border: 1px solid #000080;
}

/* Hover effects for tier badges */
.e7-imprint-tier-badge:hover {
	transform: scale(1.05);
	transition: transform 0.2s ease;
}

/* Responsive adjustments for tier badges */
@media (max-width: 768px) {
	.e7-imprint-effect-header {
		flex-direction: column;
		gap: 8px;
		align-items: center;
	}
	
	.e7-imprint-tier-badge {
		font-size: 0.7rem;
		padding: 3px 6px;
		min-width: 28px;
	}
}

/* Responsive Design for Awakening and Imprint */
@media (max-width: 768px) {
	.e7-awakening-grid,
	.e7-imprint-special,
	.e7-imprint-effects-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	
	.e7-awakening-card,
	.e7-imprint-special-card,
	.e7-imprint-effect-card {
		flex-direction: column;
		gap: 16px;
		text-align: center;
	}
	
	.e7-awakening-icon,
	.e7-imprint-special-icon,
	.e7-imprint-effect-icon {
		align-self: center;
	}
} 

/* Enhanced Awakening Stages Layout */
.e7-awakening-stages {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.e7-awakening-stage {
	background: var(--bg-color);
	border: 2px solid var(--border-color);
	border-radius: 16px;
	overflow: hidden;
	transition: all 0.2s ease;
}

.e7-awakening-stage:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.e7-awakening-stage-header {
	background: linear-gradient(135deg, var(--accent-color, #4a90e2), var(--accent-hover, #357abd));
	color: white;
	padding: 16px 20px;
	display: flex;
	align-items: center;
	gap: 16px;
}

.e7-awakening-stage-icon {
	font-size: 1.2rem;
	flex-shrink: 0;
}

.e7-awakening-stage-title {
	font-size: 1.1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.e7-awakening-stage-content {
	padding: 20px;
}

.e7-awakening-stats {
	margin-bottom: 20px;
}

.e7-awakening-stat-item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
	padding: 8px 12px;
	background: rgba(74, 144, 226, 0.1);
	border-radius: 8px;
}

.e7-awakening-stat-icon {
	font-size: 1.2rem;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.e7-awakening-stat-text {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1;
}

.e7-awakening-stat-name {
	color: var(--text-color);
	font-weight: 600;
}

.e7-awakening-stat-value {
	color: var(--accent-color, #4a90e2);
	font-weight: 800;
	font-size: 1.1rem;
}

.e7-awakening-materials {
	border-top: 1px solid var(--border-color);
	padding-top: 16px;
}

.e7-awakening-materials-title {
	color: var(--text-color);
	font-weight: 600;
	margin-bottom: 12px;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.e7-awakening-material-item {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 8px;
	padding: 6px 10px;
	background: rgba(255, 193, 7, 0.1);
	border-radius: 6px;
}

.e7-awakening-material-icon {
	font-size: 1rem;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.e7-awakening-material-text {
	color: var(--text-color);
	font-weight: 500;
	font-size: 0.9rem;
}

.e7-awakening-no-stats,
.e7-awakening-no-materials {
	color: var(--text-muted);
	font-style: italic;
	text-align: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 8px;
}

/* Responsive Design for Awakening Stages */
@media (max-width: 768px) {
	.e7-awakening-stage-header {
		flex-direction: column;
		gap: 12px;
		text-align: center;
	}
	
	.e7-awakening-stage-content {
		padding: 16px;
	}
	
	.e7-awakening-stat-item,
	.e7-awakening-material-item {
		flex-direction: column;
		text-align: center;
		gap: 8px;
	}
} 

/* Skill Improvement and Ability Upgraded Sections */
.e7-skill-improvement,
.e7-ability-upgraded {
	margin-top: 20px;
	padding: 16px;
	background: var(--bg-color-light);
	border: 1px solid var(--border-color);
	border-radius: 12px;
}

.e7-skill-improvement-title,
.e7-ability-upgraded-title {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--accent-color, #4a90e2);
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.e7-skill-improvement-description,
.e7-ability-upgraded-description {
	color: var(--text-color);
	line-height: 1.6;
	font-size: 0.95rem;
	word-wrap: break-word;
	overflow-wrap: break-word;
	max-width: 100%;
} 

/* Grid layout for consistent spacing - FIXED */
.e7db-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 20px;
	padding: 20px;
	justify-items: center;
	width: 100%;
	max-width: none;
	margin: 0 auto;
}

/* CONSOLIDATED Hero Card Styling - No More Conflicts! */
.e7db-hero {
	position: relative;
	width: 220px;
	height: 142px; /* Increased from 140px to 142px as requested */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start; /* Changed to flex-start for top alignment */
	overflow: hidden;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
	border: 2px solid #4a90e2; /* Fixed: All cards now have consistent blue border */
	border-radius: 12px;
	background: var(--card-bg, #2a2a2a);
	padding: 12px;
	box-sizing: border-box;
	flex-shrink: 0;
	margin: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.e7db-hero:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 8px 16px rgba(74, 144, 226, 0.3), 0 0 15px rgba(74, 144, 226, 0.5);
	border-color: #4a90e2;
	background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
}

.e7db-hero:hover::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(74, 144, 226, 0.05) 100%);
	pointer-events: none;
	z-index: 1;
}

.e7db-hero:hover .e7db-card-title {
	color: #4a90e2;
	text-shadow: 0 0 10px rgba(74, 144, 226, 0.5);
}

.e7db-hero:hover .e7db-avatar {
	transform: scale(1.1);
	box-shadow: 0 0 15px rgba(74, 144, 226, 0.6);
}

/* Ensure click events work properly */
.e7db-hero * {
	pointer-events: none;
}

.e7db-hero {
	pointer-events: auto;
}

/* New card layout structure */
.e7db-card-top {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-bottom: 8px; /* Space between top section and details */
}

.e7db-card-details {
	font-size: 11px;
	color: var(--text-muted);
	text-align: center;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0.8;
	margin-top: auto; /* Push to bottom of card */
}

/* Enhanced Filtering System - Left/Right Layout */
.e7db-advanced-filters {
	margin: 15px 0;
	padding: 15px;
	background: var(--card-bg);
	border-radius: 12px;
	border: 1px solid var(--border-color);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.e7db-filters-left {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.e7db-filters-right {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-left: 30px;
	min-width: 200px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.e7db-filter-buttons {
		justify-content: center;
	}
	
	.e7db-hero {
		width: 200px;
		height: 130px;
	}
} 

/* Responsive grid adjustments */
@media (min-width: 768px) {
	.e7db-grid {
		grid-template-columns: repeat(auto-fill, 220px);
		justify-content: center;
	}
}

@media (min-width: 1200px) {
	.e7db-grid {
		grid-template-columns: repeat(auto-fill, 220px);
		justify-content: center;
		max-width: 1400px;
	}
}

@media (min-width: 1600px) {
	.e7db-grid {
		grid-template-columns: repeat(auto-fill, 220px);
		justify-content: center;
		max-width: 1800px;
	}
} 

/* Search suggestions styling */
.e7db-search-suggestions {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	z-index: 1000;
	max-height: 300px;
	overflow-y: auto;
}

.e7db-suggestion-item {
	padding: 10px 15px;
	cursor: pointer;
	border-bottom: 1px solid var(--border-color);
	transition: background-color 0.2s ease;
}

.e7db-suggestion-item:last-child {
	border-bottom: none;
}

.e7db-suggestion-item:hover {
	background-color: var(--accent-color, #4a90e2);
	color: white;
}

.e7db-suggestion-item[data-type="hero"] {
	font-weight: 600;
}

.e7db-suggestion-item[data-type="element"] {
	color: var(--accent-color, #4a90e2);
}

.e7db-suggestion-item[data-type="class"] {
	color: var(--text-muted);
} 

/* Enhanced Filter Button Styling */
.e7db-filter-btn {
	padding: 8px 16px;
	margin: 2px;
	border: 2px solid var(--border-color, #555);
	border-radius: 20px;
	background: var(--card-bg, #2a2a2a);
	color: var(--text-color, #fff);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
	text-align: center;
	min-width: 60px;
	position: relative;
	overflow: hidden;
}

.e7db-filter-btn:hover {
	background: var(--accent-color, #4a90e2);
	border-color: var(--accent-color, #4a90e2);
	color: white;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(74, 144, 226, 0.3);
}

.e7db-filter-btn.active {
	background: var(--accent-color, #4a90e2);
	border-color: var(--accent-color, #4a90e2);
	color: white;
	box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.5);
	position: relative;
}

.e7db-filter-btn.active::before {
	content: '✓';
	position: absolute;
	top: 2px;
	right: 6px;
	font-size: 10px;
	font-weight: bold;
	color: white;
	text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

/* Filter group styling improvements */
.e7db-filter-group {
	margin-bottom: 15px;
}

.e7db-filter-group label {
	display: block;
	font-weight: 600;
	color: var(--text-color, #fff);
	margin-bottom: 8px;
	font-size: 14px;
}

.e7db-filter-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
} 

/* Dropdown styling for Buff/Debuff filters */
.e7db-dropdown {
	padding: 8px 12px;
	border: 2px solid var(--border-color, #555);
	border-radius: 8px;
	background: var(--card-bg, #2a2a2a);
	color: var(--text-muted, #888);
	font-size: 12px;
	width: 100%;
	cursor: not-allowed;
	opacity: 0.6;
}

.e7db-dropdown:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.e7db-dropdown option {
	background: var(--card-bg, #2a2a2a);
	color: var(--text-muted, #888);
	padding: 8px;
} 

/* Artifact Cards - Perfect Uniformity */
.e7db-artifact-card {
	background: var(--card-bg, #fff);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
	overflow: hidden;
	transition: all 0.3s ease;
	border: 1px solid var(--border-color, #eee);
	height: 100%; /* Ensure all cards have same height */
	display: flex;
	flex-direction: column;
}

.e7db-artifact-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 25px rgba(0,0,0,0.15);
	border-color: var(--accent-color, #4a90e2);
}

.e7db-artifact-card .e7db-card-image {
	position: relative;
	overflow: hidden;
	background: #f8f9fa;
	height: 200px; /* Fixed height for consistency */
	flex-shrink: 0;
}

.e7db-artifact-card .e7db-avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.e7db-artifact-card:hover .e7db-avatar {
	transform: scale(1.05);
}

.e7db-artifact-card .e7db-card-content {
	padding: 20px;
	flex: 1; /* Take remaining space */
	display: flex;
	flex-direction: column;
}

.e7db-artifact-card .e7db-card-header {
	margin-bottom: 15px;
	flex-shrink: 0;
}

.e7db-artifact-card .e7db-card-title {
	margin: 0 0 10px 0;
	font-size: 1.2em;
	font-weight: 700;
	color: #2c3e50; /* Dark blue-gray for better contrast */
	line-height: 1.3;
	min-height: 2.6em; /* Ensure consistent title height */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for better readability */
}

.e7db-artifact-card .e7db-card-rarity {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.e7db-artifact-card .e7db-stars-display {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.e7db-artifact-card .rarity-star {
	width: 16px;
	height: 16px;
	margin-right: 2px;
}

.e7db-artifact-card .rarity-text {
	color: #666;
	font-size: 0.9em;
	font-weight: 500;
	margin-left: 4px;
	white-space: nowrap;
}

.e7db-artifact-card .e7db-class {
	background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
	color: white;
	padding: 6px 12px;
	border-radius: 18px;
	font-size: 0.8em;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
	box-shadow: 0 3px 6px rgba(0,0,0,0.3);
	border: 2px solid rgba(255,255,255,0.4);
	flex-shrink: 0;
	min-width: fit-content;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.e7db-artifact-card .e7db-class.class-all {
	background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
	color: white;
	font-weight: 800;
	border: 2px solid rgba(255,255,255,0.5);
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.e7db-artifact-card .e7db-card-description {
	color: var(--text-secondary, #666);
	font-size: 0.9em;
	line-height: 1.5;
	margin-bottom: 15px;
	flex: 1; /* Take remaining space */
	min-height: 4.5em; /* Ensure consistent description height */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Grid container for perfect alignment */
.e7db-results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 20px;
	align-items: stretch; /* Ensure all cards stretch to same height */
}

/* Responsive artifact cards */
@media (max-width: 768px) {
	.e7db-artifact-card .e7db-card-image {
		height: 150px;
	}
	
	.e7db-artifact-card .e7db-card-content {
		padding: 15px;
	}
	
	.e7db-artifact-card .e7db-card-title {
		font-size: 1.1em;
		min-height: 2.4em;
	}
	
	.e7db-artifact-card .e7db-card-description {
		min-height: 4.2em;
	}
	
	.e7db-results {
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		gap: 15px;
	}
} 

.e7db-landing { padding: 20px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 14px; }
.e7db-landing-header { text-align: center; margin-bottom: 16px; }
.e7db-landing-header h2 { margin: 6px 0; }
.e7db-landing-sub { color: var(--text-muted); }
.e7db-cta-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.e7db-landing-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.e7db-landing-card { grid-column: span 6; }
@media (max-width: 900px){ .e7db-landing-card { grid-column: span 12; } }
.e7db-landing-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.e7db-link-btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-color); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.e7db-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.e7db-mini-card { background: var(--bg-color); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.e7db-mini-icon { width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border-color); object-fit: cover; flex-shrink: 0; }
.e7db-mini-name { font-size: 0.92rem; font-weight: 600; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e7db-coming-soon { text-align: center; color: var(--text-muted); padding: 20px 0; font-style: italic; }
.e7db-link { color: var(--accent-color, #4a90e2); text-decoration: none; }
.e7db-link:hover { text-decoration: underline; } 

.e7db-card.e7db-hero { min-height: 150px; max-height: 150px; display: flex; flex-direction: column; justify-content: center; }
.e7db-card-top { display: flex; align-items: center; gap: 12px; }
.e7db-card-title { font-weight: 700; margin: 0; font-size: 1rem; line-height: 1.2; }
.e7db-card-details { color: var(--text-muted); margin-top: 8px; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.2px; min-height: 1.2em; }
.e7db-avatar { width: 52px !important; height: 52px !important; }