body { background: var(--bg-page); }

/* 广告轮播 — 桌面端与下方卡片等宽 */
.promo-slider-web { max-width: 550px; margin-left: auto; margin-right: auto; }

.tool-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 10px;
    padding: 12px 4px;
    max-width: 550px;
    margin: 0 auto;
}
@media (min-width: 500px) {
    .tool-grid { grid-template-columns: repeat(5, 1fr); }
}
.tool-grid a {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-decoration: none; transition: transform .15s; position: relative;
}
.tool-grid a:hover { transform: translateY(-2px); }
.tool-grid .tg-icon {
    width: 72px; height: 72px; border-radius: 22px;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    color: #8B7B6B; background: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
    font-size: 26px;
}
.tool-grid .tg-icon i { font-size: 26px; }

@keyframes jiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-1.5deg); }
    75% { transform: rotate(1.5deg); }
    100% { transform: rotate(0deg); }
}
.jiggling .tg-icon { animation: jiggle .3s infinite; }
.del-btn {
    display: none; position: absolute; top: -6px; right: -6px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 2px solid #e53e3e; color: #e53e3e;
    font-size: 14px; line-height: 18px; text-align: center; cursor: pointer;
    z-index: 5; font-weight: 700;
}
.jiggling .del-btn, .jiggling .add-btn { display: block; }
.jiggling-global .tg-icon .del-btn,
.jiggling-global .tg-icon .add-btn { display: block; }
.add-btn {
    display: none; position: absolute; top: -5px; right: -5px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; border: 1.5px solid #48bb78; color: #48bb78;
    font-size: 13px; line-height: 13px; text-align: center; cursor: pointer;
    z-index: 5; font-weight: 700;
}
.tool-grid a.dup-hidden { display: none; }
.tool-grid a.drag-over { opacity: .5; transform: scale(.95); }
.tool-grid a.dragging { opacity: .4; }
.tool-grid .tg-label { font-size: 11px; color: var(--text-secondary); font-weight: 400; text-align: center; }

#favCount { font-size: 11px; color: var(--text-muted); }

#resetBtn { display: none; }
.jiggling #resetBtn { display: inline-block; }

.fav-box {
    border: 1px solid var(--border-fieldset);
    border-radius: 12px;
    padding: 16px 10px 6px;
    margin: 0 auto 18px;
    max-width: 550px;
    width: calc(100% - 20px);
    box-sizing: border-box;
}
.fav-box legend {
    font-family: "MiSans", sans-serif; font-size: 13px; font-weight: 300; color: var(--border-fieldset);
    padding: 0 12px; margin-left: 8px; display: flex; align-items: center; gap: 8px;
}
.edit-btn {
    font-family: "MiSans", sans-serif; font-size: 11px; font-weight: 400;
    color: var(--accent); background: none; border: 1px solid var(--border-fieldset);
    border-radius: 10px; padding: 2px 10px; cursor: pointer;
    transition: all .2s;
}
.edit-btn:hover { background: var(--accent); color: #fff; }
.edit-btn.done { background: var(--accent); color: #fff; }
/* 莫兰迪色字 — 每图标不同 */
.tool-grid a:nth-child(1) .tg-icon  { color: #8696A7; }
.tool-grid a:nth-child(2) .tg-icon  { color: #96A48B; }
.tool-grid a:nth-child(3) .tg-icon  { color: #B7A98A; }
.tool-grid a:nth-child(4) .tg-icon  { color: #C4A8A8; }
.tool-grid a:nth-child(5) .tg-icon  { color: #7A8A9A; }
.tool-grid a:nth-child(6) .tg-icon  { color: #9B8EAD; }
.tool-grid a:nth-child(7) .tg-icon  { color: #A3ADA0; }
.tool-grid a:nth-child(8) .tg-icon  { color: #C4A0A4; }
.tool-grid a:nth-child(9) .tg-icon  { color: #A89782; }
.tool-grid a:nth-child(10) .tg-icon { color: #788A6E; }
.tool-grid a:nth-child(11) .tg-icon { color: #C99FA2; }
.tool-grid a:nth-child(12) .tg-icon { color: #8A9EAD; }
.tool-grid a:nth-child(13) .tg-icon { color: #A89B8E; }
.tool-grid a:nth-child(14) .tg-icon { color: #9E9482; }
.tool-grid a:nth-child(15) .tg-icon { color: #A896A8; }
.tool-grid a:nth-child(16) .tg-icon { color: #C9C2B8; }
.tool-grid a:nth-child(17) .tg-icon { color: #8B6A6A; }
.tool-grid a:nth-child(18) .tg-icon { color: #D4C2A0; }
.tool-grid a:nth-child(19) .tg-icon { color: #96A88E; }
.tool-grid a:nth-child(20) .tg-icon { color: #C5BED8; }
.tool-grid a:nth-child(21) .tg-icon { color: #B89A9A; }
.tool-grid a:nth-child(22) .tg-icon { color: #A8957C; }
.tool-grid a:nth-child(23) .tg-icon { color: #6A606E; }
.tool-grid a:nth-child(24) .tg-icon { color: #C4B696; }
.tool-grid a:nth-child(25) .tg-icon { color: #939393; }
.tool-grid a:nth-child(26) .tg-icon { color: #8A9EAD; }
.tool-grid .tg-icon i { font-size: 26px; }

.footer { text-align:center; color:var(--text-muted); font-size:12px; padding:32px 0; border-top:1px solid var(--border-card); margin-top:24px; }

/* ── Dark 模式 ── */
html[data-theme="dark"] .tool-grid .tg-icon,
html[data-theme="dark"] .fav-box,
html[data-theme="dark"] .footer { border-color: #2a1f4a; }
html[data-theme="dark"] .edit-btn { border-color: #2a1f4a; background: #1c1430; }