* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family:"Microsoft YaHei",sans-serif; background-size:cover;
    background-position:center; background-attachment:fixed;
    display:flex; flex-direction:column; height:100vh; color:#fff;
    text-shadow:0 1px 3px rgba(0,0,0,0.6); transition:background-image 0.3s;
}
body::before {
    content:''; position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.35); z-index:-1;
}
.top-bar {
    display:flex; justify-content:flex-end; padding:30px 30px;
    font-size:16px; align-items:center; position:relative; z-index:2;
}
#weather-widget {
    margin-right:8px; display:flex; align-items:center; cursor:pointer;
    gap:8px; position:relative;
}
.weather-icon { width:36px; height:36px; object-fit:contain; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
#weather-info { font-size:16px; }
.top-bar-actions { display:flex; align-items:center; gap:8px; }

.settings-wrapper {
    display: inline-flex; align-items: center;
    padding: 0; border-radius: 20px;
    background: transparent; transition: padding 0.25s, background 0.25s;
    cursor: pointer;
}
.settings-wrapper:hover { padding: 4px 12px; background: rgba(0,0,0,0.75); }
.settings-pill-text {
    display: inline-block; max-width: 0; overflow: hidden;
    white-space: nowrap; color: #fff; font-size: 0.85rem;
    margin-right: 0; transition: max-width 0.25s, margin-right 0.25s;
}
.settings-wrapper:hover .settings-pill-text { max-width: 80px; margin-right: 6px; }
.settings-btn {
    background: transparent; border: none; color: #fff;
    padding: 0; cursor: pointer; font-size: 20px;
}
.settings-btn:hover { color: #409eff; }
.login-btn, .user-menu-btn {
    padding:6px 15px; border:1px solid rgba(200,200,200,0.6);
    border-radius:3px; cursor:pointer; background:transparent; color:#fff;
    text-decoration:none; display:inline-flex; align-items:center; gap:5px;
}
.search-container {
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; flex:1; padding:0 20px; z-index:1;
    position:relative; top:-160px;
}
.search-box {
    display:flex; width:600px; max-width:100%; margin-bottom:30px;
    box-shadow:0 4px 15px rgba(0,0,0,0.4);
}
.search-input {
    flex:1; height:45px; padding:0 15px; border:none;
    border-radius:4px 0 0 4px; font-size:16px; outline:none;
    background:rgba(255,255,255,0.95); color:#333; text-shadow:none;
}
.search-btn {
    width:80px; height:45px; background:#409eff; color:#fff;
    border:none; border-radius:0 4px 4px 0; cursor:pointer;
    font-size:16px; display:flex; align-items:center; justify-content:center;
}
.shortcuts {
    display:flex; flex-wrap:wrap; justify-content:center; gap:20px;
    max-width:800px;
}
.shortcut-item {
    display:flex; flex-direction:column; align-items:center; color:#fff;
    width:60px; cursor:pointer; transition:transform 0.2s;
}
.shortcut-item:hover { transform:scale(1.05); }
.shortcut-item:hover .shortcut-icon { background: rgba(255,255,255,0.85); }
.shortcut-icon {
    width:40px; height:40px; border-radius:8px;
    background:rgba(255,255,255,0.6); backdrop-filter:blur(5px);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:8px; overflow:hidden;
}
.shortcut-icon img { width:28px; height:28px; object-fit:contain; }
.shortcut-name {
    font-size:12px; text-align:center; max-width:60px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.modal {
    display:none; position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.6); z-index:3000; justify-content:center;
    align-items:center;
}
.modal.show { display:flex; }
.modal-content {
    background:white; border-radius:12px; width:90%; max-width:500px;
    max-height:80vh; overflow-y:auto; box-shadow:0 10px 30px rgba(0,0,0,0.2);
    color:#333; text-shadow:none;
}
.modal-header {
    padding:16px 20px; border-bottom:1px solid #eee;
    display:flex; justify-content:space-between; align-items:center;
}
.modal-title { font-size:1.2rem; font-weight:600; }
.modal-close { background:none; border:none; font-size:1.5rem; cursor:pointer; color:#777; }
.modal-body { padding:20px; }
.modal-footer {
    padding:12px 20px; border-top:1px solid #eee;
    display:flex; justify-content:flex-end; gap:10px;
}
.section-title { font-weight:600; margin:15px 0 10px; font-size:0.95rem; color:#333; }
.preset-bg-list { display:flex; gap:15px; flex-wrap:wrap; justify-content:center; }
.preset-bg-item {
    width:100px; text-align:center; cursor:pointer; border:2px solid transparent;
    border-radius:8px; padding:5px; transition:border 0.2s;
}
.preset-bg-item:hover { border-color:#1e88e5; }
.preset-bg-item img { width:100%; height:60px; object-fit:cover; border-radius:4px; }
.preset-bg-item span { display:block; margin-top:5px; font-size:0.8rem; }
.custom-bg-upload { border-bottom: 1px solid #eee; padding-bottom: 12px; margin-bottom: 5px; }
.modal-btn { padding:8px 16px; border-radius:6px; font-size:0.9rem; cursor:pointer; }
.btn-primary { background:#1e88e5; color:white; border:none; }
.btn-primary:hover { background:#1976d2; }
.btn-secondary { background:#f5f7fa; color:#333; border:1px solid #ddd; }
.btn-secondary:hover { background:#e4eaf3; }

@media (max-width: 768px) {
    .search-container { top:0; }
    .preset-bg-list { justify-content:center; }
    .settings-pill-text { font-size: 0.75rem; }
    .settings-wrapper:hover .settings-pill-text { max-width: 65px; }
}