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


.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;
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.tool-grid .tg-icon img { width: 100%; height: 100%; display: block; }

@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; }
.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-label { color: var(--color-text-muted); }

  /* 收藏夹 */
  .fav-box { background: transparent; border-color: #2a1f4a; }
  .fav-box legend { color: var(--color-text-muted); }

  /* 编辑/删除/添加按钮 */
  .edit-btn { border-color: #2a1f4a; background: var(--color-input-bg); color: var(--color-text); }
  .edit-btn:hover { background: var(--color-brand); color: var(--color-page); }
  .edit-btn.done { background: var(--color-brand); color: var(--color-page); }
  .del-btn { background: var(--color-panel); border-color: var(--color-fire); color: var(--color-fire); }
  .add-btn { background: var(--color-panel); border-color: #48bb78; color: #48bb78; }

  /* 收藏计数 */
  #favCount { color: var(--color-text-muted); }

  /* 页脚 */
  .footer { border-color: #2a1f4a; color: var(--color-text-muted); }
}