/* ===== 全局变量 ===== */
:root {
    --bg-primary: rgba(255, 255, 255, 0.40);
    --bg-secondary: rgba(255, 255, 255, 0.25);
    --bg-card: rgba(255, 255, 255, 0.48);
    --bg-card-hover: rgba(255, 255, 255, 0.70);
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --border-color: rgba(203, 213, 225, 0.25);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.12);
    --radius: 18px;
    --radius-sm: 12px;
    --radius-xs: 8px;
    --transition: 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --accent: #4f7cff;
    --accent-hover: #3a5fd9;
    --accent-light: rgba(79, 124, 255, 0.12);
    --font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --blur: blur(18px);
    --bg-image: none;
    --bg-color: #eef2f7;
    --toast-bg: #1e293b;
    --toast-text: #f1f5f9;
}

[data-theme="dark"] {
    --bg-primary: rgba(15, 23, 42, 0.55);
    --bg-secondary: rgba(15, 23, 42, 0.35);
    --bg-card: rgba(30, 41, 59, 0.55);
    --bg-card-hover: rgba(51, 65, 85, 0.72);
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --border-color: rgba(71, 85, 105, 0.35);
    --shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.50);
    --bg-color: #0f172a;
    --accent: #6d8fff;
    --accent-hover: #5a7ae6;
    --accent-light: rgba(109, 143, 255, 0.15);
    --toast-bg: #f1f5f9;
    --toast-text: #0f172a;
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: var(--font);
    min-height: 100vh;
    background-color: var(--bg-color);
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--text-primary);
    transition: background 0.6s ease, color 0.3s ease;
    display: flex;
    justify-content: center;
    padding: 20px;
    align-items: center;
}

/* 登录覆盖层 */
.login-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.40);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    transition: opacity 0.5s ease;
}
.login-overlay.hidden { opacity:0; pointer-events:none; }
.login-card {
    background: var(--bg-card);
    backdrop-filter: var(--blur);
    border-radius: var(--radius);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-hover);
    padding: 40px 36px;
    max-width: 420px;
    width: 100%;
    text-align: center;
}
.login-card h2 {
    font-size:28px; font-weight:700; margin-bottom:8px;
    background: linear-gradient(135deg, var(--accent), #a78bfa);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    background-clip:text;
}
.login-card .sub { color:var(--text-secondary); margin-bottom:24px; font-size:14px; }
.login-card .form-group { margin-bottom:16px; text-align:left; }
.login-card .form-group label { display:block; font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:4px; }
.login-card .form-group input {
    width:100%; padding:12px 16px; border-radius:var(--radius-xs);
    border:1.5px solid var(--border-color); background:var(--bg-secondary);
    color:var(--text-primary); font-size:15px; transition:border 0.2s; outline:none;
}
.login-card .form-group input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.login-card .captcha-group {
    display: none;
    gap: 10px;
    align-items: center;
}
.login-card .captcha-group.visible { display: flex; }
.login-card .captcha-group input { flex:1; }
.login-card .captcha-group img {
    height: 40px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-color);
    cursor: pointer;
    background: #fff;
}
.login-card .login-btn {
    width:100%; padding:12px; border:none; border-radius:40px;
    background:var(--accent); color:#fff; font-size:16px; font-weight:600;
    cursor:pointer; transition:all var(--transition); margin-top:8px;
}
.login-card .login-btn:hover { background:var(--accent-hover); box-shadow:0 4px 20px rgba(79,124,255,0.35); transform:translateY(-2px); }
.login-card .login-error { color:#ef4444; font-size:13px; margin-top:12px; min-height:20px; }
.login-card .demo-hint {
    margin-top:16px; font-size:13px; color:var(--text-muted);
    border-top:1px solid var(--border-color); padding-top:16px;
}
.login-card .demo-hint span {
    display:inline-block; background:var(--bg-secondary); padding:2px 10px;
    border-radius:20px; margin:0 4px; font-family:monospace; font-weight:600;
}

/* 主应用容器 */
.app-wrapper {
    width:100%; max-width:1200px; min-height:calc(100vh - 40px);
    backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
    background:var(--bg-primary); border-radius:var(--radius);
    border:1px solid var(--border-color); box-shadow:var(--shadow);
    padding:28px 32px 32px; display:flex; flex-direction:column;
    transition:background 0.4s ease, border-color 0.3s ease;
    position:relative; overflow-y:auto;
}
.app-wrapper.hidden { display:none; }

/* 顶部栏 */
.header { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px 20px; margin-bottom:28px; }
.header-left { display:flex; flex-direction:column; gap:4px; }
.header-date { font-size:14px; font-weight:500; color:var(--text-secondary); letter-spacing:0.3px; }
.header-greeting { font-size:26px; font-weight:700; background:linear-gradient(135deg, var(--accent), #a78bfa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1.2; }
.header-right { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.header-weather {
    display:flex; align-items:center; gap:6px; font-size:15px; font-weight:500;
    color:var(--text-secondary); background:var(--bg-secondary); padding:6px 14px 6px 10px;
    border-radius:40px; backdrop-filter:var(--blur); border:1px solid var(--border-color);
    cursor:pointer; transition:background 0.3s;
}
.header-weather i { font-size:18px; color:#fbbf24; }
.header-weather .city-name { font-weight:600; color:var(--text-primary); margin-left:2px; }
.header-actions { display:flex; gap:6px; }
.header-actions button {
    background:var(--bg-secondary); border:1px solid var(--border-color);
    color:var(--text-secondary); width:38px; height:38px; border-radius:50%;
    font-size:16px; cursor:pointer; transition:all var(--transition);
    backdrop-filter:var(--blur); display:flex; align-items:center; justify-content:center;
}
.header-actions button:hover { background:var(--bg-card-hover); color:var(--text-primary); transform:scale(1.05); box-shadow:var(--shadow); }
.header-actions button.active-theme { background:var(--accent-light); color:var(--accent); border-color:var(--accent); }
.user-info {
    display:flex; align-items:center; gap:8px; background:var(--bg-secondary);
    padding:4px 12px 4px 8px; border-radius:40px; border:1px solid var(--border-color);
    font-size:14px; font-weight:500; color:var(--text-secondary);
}
.user-info i { color:var(--accent); }
.user-info .logout-btn { background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:14px; padding:2px 6px; border-radius:20px; transition:all 0.2s; }
.user-info .logout-btn:hover { background:rgba(239,68,68,0.15); color:#ef4444; }

/* 搜索栏 */
.search-section { display:flex; justify-content:center; margin-bottom:30px; }
.search-box {
    display:flex; align-items:center; width:100%; max-width:640px;
    background:var(--bg-secondary); border-radius:60px; border:1.5px solid var(--border-color);
    backdrop-filter:var(--blur); transition:all var(--transition);
    padding:4px 4px 4px 18px; box-shadow:0 2px 12px rgba(0,0,0,0.04);
}
.search-box:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-light), var(--shadow); background:var(--bg-card); }
.search-box i { color:var(--text-muted); font-size:16px; margin-right:10px; }
.search-box input { flex:1; border:none; background:transparent; padding:14px 0; font-size:16px; color:var(--text-primary); outline:none; min-width:60px; }
.search-box input::placeholder { color:var(--text-muted); font-weight:400; }
.search-engine-select {
    background:var(--bg-primary); border:none; border-left:1px solid var(--border-color);
    padding:8px 12px 8px 14px; font-size:14px; font-weight:500; color:var(--text-secondary);
    border-radius:0; cursor:pointer; outline:none; transition:background 0.2s; height:100%;
}
.search-engine-select:hover { background:var(--bg-card-hover); }
.search-btn {
    background:var(--accent); border:none; color:#fff; padding:10px 22px;
    border-radius:40px; font-size:15px; font-weight:600; cursor:pointer;
    transition:all var(--transition); margin-left:6px; white-space:nowrap;
    display:flex; align-items:center; gap:6px;
}
.search-btn:hover { background:var(--accent-hover); transform:scale(1.02); box-shadow:0 4px 16px rgba(79,124,255,0.35); }

/* 书签区域 */
.bookmarks-section { flex:1; display:flex; flex-direction:column; margin-top:6px; }
.section-header {
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 16px; margin-bottom:16px;
}
.section-header h2 { font-size:18px; font-weight:600; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
.section-header h2 span { font-size:14px; font-weight:400; color:var(--text-muted); margin-left:4px; }
.category-tabs { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.category-tab {
    padding:6px 16px; border-radius:30px; font-size:13px; font-weight:500;
    background:var(--bg-secondary); border:1px solid var(--border-color);
    color:var(--text-secondary); cursor:pointer; transition:all var(--transition);
    backdrop-filter:var(--blur); white-space:nowrap;
}
.category-tab:hover { background:var(--bg-card-hover); color:var(--text-primary); }
.category-tab.active { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:0 4px 14px rgba(79,124,255,0.30); }
.category-tab .tab-count { font-size:11px; opacity:0.7; margin-left:4px; font-weight:400; }
.category-actions { display:flex; gap:6px; align-items:center; }
.category-actions button, .bookmark-actions-btn {
    background:var(--bg-secondary); border:1px solid var(--border-color);
    color:var(--text-secondary); padding:6px 14px; border-radius:30px;
    font-size:13px; cursor:pointer; transition:all var(--transition);
    backdrop-filter:var(--blur); display:flex; align-items:center; gap:5px;
}
.category-actions button:hover, .bookmark-actions-btn:hover { background:var(--bg-card-hover); color:var(--text-primary); transform:translateY(-1px); }
.category-actions button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.category-actions button.primary:hover { background:var(--accent-hover); box-shadow:0 4px 14px rgba(79,124,255,0.30); }

/* ===== 书签列表（长条样式） ===== */
.bookmark-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}
.bookmark-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-card);
    backdrop-filter: var(--blur);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    text-decoration: none;
    color: var(--text-primary);
    cursor: pointer;
    position: relative;
}
.bookmark-item:hover {
    background: var(--bg-card-hover);
    box-shadow: var(--shadow-hover);
    border-color: var(--accent);
    transform: translateX(4px);
}
.bookmark-item .bm-icon {
    font-size: 24px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 8px;
    flex-shrink: 0;
}
.bookmark-item .bm-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.bookmark-item .bm-title {
    font-weight: 600;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bookmark-item .bm-description {
    font-size: 13px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.bookmark-item .bm-badge {
    font-size: 10px;
    background: #fbbf24;
    color: #78350f;
    padding: 2px 8px;
    border-radius: 20px;
    font-weight: 600;
    border: 1px solid #f59e0b;
    margin-left: 8px;
    flex-shrink: 0;
}
.bookmark-item .bm-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity var(--transition);
}
.bookmark-item:hover .bm-actions {
    opacity: 1;
}
.bookmark-item .bm-actions button {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bookmark-item .bm-actions button:hover { background: rgba(0,0,0,0.7); transform:scale(1.1); }
.bookmark-item .bm-actions .edit-btn:hover { background:#4f7cff; }
.bookmark-item .bm-actions .delete-btn:hover { background:#ef4444; }

/* 空状态 */
.empty-state {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    border: 2px dashed var(--border-color);
}
.empty-state i { font-size:44px; margin-bottom:12px; }
.empty-state p { font-size:15px; font-weight:500; }

/* Modal */
.modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.45);
    backdrop-filter:blur(6px); display:none; align-items:center;
    justify-content:center; z-index:999; padding:20px;
    animation:fadeIn 0.25s ease;
}
.modal-overlay.open { display:flex; }
.modal {
    background:var(--bg-card); backdrop-filter:var(--blur);
    border-radius:var(--radius); border:1px solid var(--border-color);
    box-shadow:var(--shadow-hover); max-width:480px; width:100%;
    padding:28px 32px 32px; animation:slideUp 0.3s ease;
    max-height:90vh; overflow-y:auto;
}
.modal h3 { font-size:20px; font-weight:700; margin-bottom:6px; color:var(--text-primary); }
.modal .modal-desc { font-size:14px; color:var(--text-secondary); margin-bottom:20px; }
.modal .form-group { margin-bottom:16px; }
.modal .form-group label { display:block; font-size:13px; font-weight:600; color:var(--text-secondary); margin-bottom:4px; }
.modal .form-group input, .modal .form-group select, .modal .form-group textarea {
    width:100%; padding:10px 14px; border-radius:var(--radius-xs);
    border:1.5px solid var(--border-color); background:var(--bg-secondary);
    color:var(--text-primary); font-size:14px; transition:border 0.2s, box-shadow 0.2s;
    outline:none; font-family:inherit; resize:vertical;
}
.modal .form-group textarea { min-height:60px; }
.modal .form-group input:focus, .modal .form-group select:focus, .modal .form-group textarea:focus {
    border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light);
}
.modal .form-row { display:flex; gap:12px; }
.modal .form-row .form-group { flex:1; }
.modal .modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:22px; }
.modal .modal-actions button {
    padding:10px 24px; border-radius:30px; font-size:14px; font-weight:600;
    border:none; cursor:pointer; transition:all var(--transition);
}
.modal .modal-actions .btn-cancel {
    background:var(--bg-secondary); color:var(--text-secondary); border:1px solid var(--border-color);
}
.modal .modal-actions .btn-cancel:hover { background:var(--bg-card-hover); }
.modal .modal-actions .btn-confirm { background:var(--accent); color:#fff; }
.modal .modal-actions .btn-confirm:hover { background:var(--accent-hover); box-shadow:0 4px 16px rgba(79,124,255,0.30); }
.modal .modal-actions .btn-danger { background:#ef4444; color:#fff; }
.modal .modal-actions .btn-danger:hover { background:#dc2626; }

/* Toast */
.toast-container {
    position:fixed; bottom:30px; right:30px; display:flex;
    flex-direction:column; gap:10px; z-index:9999; max-width:360px;
}
.toast {
    background:var(--toast-bg); color:var(--toast-text);
    padding:14px 22px; border-radius:var(--radius-sm);
    box-shadow:0 8px 30px rgba(0,0,0,0.25); font-size:14px; font-weight:500;
    animation:slideInRight 0.35s ease; display:flex; align-items:center; gap:10px;
    backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.08);
}
.toast i { font-size:18px; color:#4ade80; }
.toast.error i { color:#f87171; }
.toast.info i { color:#60a5fa; }
.toast.hide { animation:slideOutRight 0.3s ease forwards; }

/* 设置面板 */
.settings-panel {
    margin-top:20px; padding:20px 24px; background:var(--bg-secondary);
    border-radius:var(--radius-sm); border:1px solid var(--border-color);
    display:none; flex-wrap:wrap; gap:20px 32px; align-items:center;
    backdrop-filter:var(--blur); transition:all 0.3s;
}
.settings-panel.open { display:flex; }
.settings-panel .setting-group { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.settings-panel .setting-group label { font-size:13px; font-weight:500; color:var(--text-secondary); white-space:nowrap; }
.settings-panel .setting-group input[type="color"] {
    width:36px; height:36px; border:2px solid var(--border-color); border-radius:50%;
    cursor:pointer; padding:2px; background:transparent;
}
.settings-panel .setting-group input[type="file"] { display:none; }
.settings-panel .setting-group .file-label {
    padding:6px 16px; border-radius:30px; background:var(--bg-card);
    border:1px solid var(--border-color); cursor:pointer; font-size:13px;
    color:var(--text-secondary); transition:all 0.2s;
}
.settings-panel .setting-group .file-label:hover { background:var(--bg-card-hover); }
.settings-panel .preset-colors { display:flex; gap:6px; }
.settings-panel .preset-colors .color-dot {
    width:28px; height:28px; border-radius:50%; border:2px solid var(--border-color);
    cursor:pointer; transition:all 0.2s;
}
.settings-panel .preset-colors .color-dot:hover { transform:scale(1.12); border-color:var(--accent); }
.settings-panel .preset-colors .color-dot.active { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.settings-panel .preset-bg-group { display:flex; gap:8px; flex-wrap:wrap; }
.settings-panel .preset-bg-group .preset-bg-thumb {
    width:60px; height:40px; border-radius:var(--radius-xs);
    border:2px solid var(--border-color); cursor:pointer;
    background-size:cover; background-position:center; transition:all 0.2s;
}
.settings-panel .preset-bg-group .preset-bg-thumb:hover { transform:scale(1.08); border-color:var(--accent); }
.settings-panel .preset-bg-group .preset-bg-thumb.active { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.settings-panel .data-actions { display:flex; gap:8px; margin-left:auto; flex-wrap:wrap; }
.settings-panel .data-actions button {
    padding:6px 16px; border-radius:30px; border:1px solid var(--border-color);
    background:var(--bg-card); color:var(--text-secondary); font-size:13px;
    cursor:pointer; transition:all 0.2s;
}
.settings-panel .data-actions button:hover { background:var(--bg-card-hover); color:var(--text-primary); }
.settings-panel .data-actions button.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.settings-panel .data-actions button.primary:hover { background:var(--accent-hover); }

/* 动画 */
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes slideUp { from{opacity:0; transform:translateY(30px) scale(0.96);} to{opacity:1; transform:translateY(0) scale(1);} }
@keyframes slideInRight { from{opacity:0; transform:translateX(40px);} to{opacity:1; transform:translateX(0);} }
@keyframes slideOutRight { from{opacity:1; transform:translateX(0);} to{opacity:0; transform:translateX(40px);} }

/* 响应式 */
@media (max-width:820px) {
    .app-wrapper { padding:20px 18px; border-radius:var(--radius-sm); min-height:calc(100vh - 20px); }
    .header-greeting { font-size:22px; }
    .search-box { max-width:100%; }
    .search-box input { font-size:15px; padding:12px 0; }
    .search-btn { padding:8px 16px; font-size:14px; }
    .bookmark-item { padding:8px 12px; }
    .bookmark-item .bm-description { display:none; }
    .modal { padding:22px 20px; max-width:100%; margin:10px; }
    .settings-panel { flex-direction:column; align-items:stretch; gap:14px; }
    .settings-panel .data-actions { margin-left:0; justify-content:center; flex-wrap:wrap; }
    .settings-panel .setting-group { justify-content:center; flex-wrap:wrap; }
    .category-tabs { justify-content:center; }
    .section-header { flex-direction:column; align-items:stretch; }
    .section-header h2 { justify-content:center; }
    .header-right .user-info .username { display:none; }
}
@media (max-width:480px) {
    .app-wrapper { padding:16px 12px; }
    .header { flex-direction:column; align-items:center; text-align:center; }
    .header-left { align-items:center; }
    .header-right { justify-content:center; }
    .bookmark-item { padding:6px 10px; }
    .bookmark-item .bm-title { font-size:13px; }
    .bookmark-item .bm-actions { opacity:1; }
    .search-box { padding:4px 4px 4px 14px; border-radius:40px; }
    .search-btn { padding:6px 14px; font-size:13px; }
    .search-engine-select { font-size:12px; padding:6px 8px 6px 10px; }
    .modal .form-row { flex-direction:column; }
    .toast-container { right:16px; left:16px; max-width:100%; bottom:16px; }
    .login-card { padding:28px 20px; }
    .login-card .captcha-group { flex-wrap:wrap; }
}