/* Google 风格搜索栏样式 — 适配 Homepage 的常见选择器 */
.hp-search input,
.search input,
.search-bar input,
#search input,
.top-search input,
.search-widget input,
input[type="search"] {
	width: 420px;
	max-width: calc(100vw - 200px);
	padding: 12px 16px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,0.12);
	box-shadow: 0 4px 14px rgba(32,33,36,0.06);
	font-size: 16px;
	transition: box-shadow .18s ease, transform .08s ease, border-color .12s ease;
	background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,250,0.9));
}

.hp-search input:focus,
.search input:focus,
.search-bar input:focus,
#search input:focus,
.top-search input:focus,
.search-widget input:focus {
	outline: none;
	box-shadow: 0 8px 30px rgba(32,33,36,0.10);
	transform: translateY(-1px);
	border-color: rgba(0,0,0,0.18);
}

.hp-search button,
.search button,
.search-bar button,
#search button,
.top-search button,
.search-widget button {
	margin-left: 8px;
	padding: 10px 14px;
	border-radius: 999px;
	background: linear-gradient(90deg,#4285F4,#2B7AE4);
	color: #fff;
	border: none;
	box-shadow: 0 6px 20px rgba(66,133,244,0.12);
	cursor: pointer;
}

.hp-search button:hover,
.search button:hover,
.search-bar button:hover,
#search button:hover,
.top-search button:hover,
.search-widget button:hover {
	transform: translateY(-1px);
}

/* 在较小屏幕上让输入框自适应 */
@media (max-width: 640px) {
	.hp-search input,
	.search input,
	.search-bar input,
	#search input,
	.top-search input,
	.search-widget input,
	input[type="search"] {
		width: calc(100vw - 100px);
		max-width: 100%;
		padding: 10px 12px;
	}
}

/* 全局主题增强：字体、玻璃卡片、背景叠层与高亮色 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

:root{
	--accent: #6C8EF5; /* 可自定义主色 */
	/* 将卡片背景改为更透明（更看见底图） */
	--card-bg: rgba(255,255,255,0.015);
	/* 细化边框以在更透明时依然可见 */
	--card-border: rgba(255,255,255,0.04);
}

body, html {
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 背景叠层：在原始背景图上加一层渐变，使内容更突出 */
.hp-root::before,
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(8,10,15,0.18), rgba(10,12,16,0.38));
	mix-blend-mode: multiply;
	z-index: 0;
}

/* 玻璃卡片样式，适用于小部件和链接卡片 */
.card,
.widget,
.info-widget,
.service-card,
.bookmarks-list li a,
.bookmark-card {
	background: var(--card-bg) !important;
	border: 1px solid var(--card-border) !important;
	box-shadow: 0 6px 20px rgba(2,6,23,0.45);
	backdrop-filter: blur(8px) saturate(120%);
	border-radius: 12px !important;
	transition: transform .12s ease, box-shadow .12s ease;
	z-index: 1;
}

.card:hover,
.widget:hover,
.info-widget:hover,
.service-card:hover,
.bookmark-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 40px rgba(2,6,23,0.55);
}

/* 标题与顶栏微调 */
.title,
.header-title,
.hp-title,
h1 {
	color: #fff;
	text-shadow: 0 2px 10px rgba(0,0,0,0.6);
	font-weight: 600;
}

/* 链接与按钮高亮 */
a,
.bookmark-card a,
.links a {
	color: var(--accent);
}

/* 搜索按钮使用主色 */
.hp-search button,
.search button,
.search-bar button,
.search-widget button {
	background: linear-gradient(90deg, var(--accent), #3b6fe8) !important;
}

/* 在小屏幕保持良好间距 */
@media (max-width: 880px) {
	.card, .widget, .bookmark-card { border-radius: 10px; }
}

/* 强制内容层级，使背景叠层不遮挡交互元素 */
.hp-root, main, .hp-app { position: relative; z-index: 2; }

/* 可选：为搜索 suggestion 列表添加圆角阴影 */
.suggestions-list, .search-suggestions {
	border-radius: 10px !important;
	box-shadow: 0 8px 30px rgba(2,6,23,0.45) !important;
	overflow: hidden;
}

/* 服务图标（彩色圆角）统一样式 */
.service-card img,
.service-card .icon,
.bookmarks-list li img {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	object-fit: cover;
	display: inline-block;
	vertical-align: middle;
	box-shadow: 0 6px 18px rgba(2,6,23,0.45);
	border: 1px solid rgba(255,255,255,0.04);
	/* 半透明主题色字母图标效果 */
	opacity: 0.86;
}

/* 在卡片内的图标容器微调，保持良好对齐 */
.service-card .icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-right: 10px;
	border-radius: 12px;
}