:root {
    --bg-gray: #f4f5f7;
    --card-white: #ffffff;
    --item-bg: #f1f3f5;
    --text-main: #333333;
    --text-sub: #70757a;
    --radius-lg: 16px;
    --radius-sm: 8px;
}

body {
    background-color: var(--bg-gray);
    margin: 0;
    font-family: -apple-system, "SF Pro Display", "Noto Sans SC", sans-serif;
    color: var(--text-main);
    display: flex;
    justify-content: center;
}

.main-wrapper {
    width: 1100px;
    padding: 60px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 欢迎语与搜索 */
.welcome-section h1 { font-size: 32px; font-weight: 600; margin-bottom: 40px; }
.search-area { width: 100%; max-width: 600px; margin-bottom: 50px; }
.search-input-wrapper {
    background: var(--card-white);
    padding: 12px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}
.search-placeholder { font-weight: bold; color: #4285f4; margin-right: 15px; font-size: 20px; }
.search-input-wrapper input { border: none; outline: none; width: 100%; font-size: 15px; }

/* 圆形入口 */
.quick-circles-container { display: flex; gap: 30px; margin-bottom: 50px; }
.circle-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; width: 70px; }
.circle-icon {
    width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; 
    justify-content: center; color: white; font-weight: bold; font-size: 20px; 
    margin-bottom: 8px; transition: transform 0.2s;
}
.circle-icon:hover { transform: translateY(-3px); }
.circle-label { font-size: 12px; color: var(--text-sub); }

/* 书签面板与分类 */
.bookmarks-panel {
    background: var(--card-white);
    width: 100%;
    border-radius: var(--radius-lg);
    padding: 20px 35px 40px 35px;
    box-sizing: border-box;
}

.category-group {
    margin-top: 30px; /* 每个分类之间的间距 */
}

.category-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-sub);
    margin: 0 0 15px 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.flex-cards-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.link-card {
    background: var(--item-bg);
    /* 5列布局 */
    width: calc((100% - 48px) / 5);
    height: 48px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    text-decoration: none;
    transition: all 0.2s;
}

.link-card:hover {
    background: #e9ecef;
    transform: scale(1.02);
}

.card-icon-placeholder {
    width: 26px; height: 26px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 13px; font-weight: bold;
    margin-right: 12px; flex-shrink: 0;
}

.link-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}