/* Emoji 图标页面独立样式，限定在 .emoji-page 作用域，避免影响其他页面 */
.emoji-page [v-cloak] { display: none !important; }

/* 修复左侧空白与底部裁切，沿用首页浅色风格 */
.emoji-page .main-content { margin-left: 0;  overflow: visible; min-height: 100vh; }
/* 移动端防溢出 */
.emoji-page .main-content { overflow-x: hidden; }

/* 布局与网格 */
.emoji-page .emoji-layout { display:grid; grid-template-columns: 240px 1fr; gap:16px; align-items:start; }
.emoji-page .emoji-sidebar { width:240px; height: 100%; flex-shrink:0; position:sticky; top:12px; align-self:flex-start; background:#ffffff; border:1px solid #e5e7eb;  padding:12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); display:flex; flex-direction:column; gap:8px; }
.emoji-page .emoji-main { flex:1; min-width:0; padding: 0 0 20px 0; height: 100%; max-width: 1200px; }
.emoji-page .emoji-toolbar { position: static; display:flex; align-items:center; gap:12px; background:#ffffff; padding:8px 12px; border:1px solid #e5e7eb; border-radius:12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); margin-bottom:12px; }
.emoji-page .emoji-search { display:flex; align-items:center; gap:12px; }
.emoji-page .emoji-input { flex:1; padding:10px 12px; border-radius:8px; border:1px solid #d1d5db; background:#ffffff; color:#374151; }
.emoji-page .emoji-count { color:#6b7280; font-size:14px; }

.emoji-page .emoji-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap:14px; padding-bottom: 28px; }
.emoji-page .emoji-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:16px; border-radius:12px; background:#ffffff; border:1px solid #e5e7eb; color:#111827; cursor:pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.04); position:relative; }

/* 移动端适配（emoji页） */
@media (max-width: 768px) {
  .emoji-page .emoji-layout { flex-direction: column; gap: 12px; grid-template-columns: 102px 1fr; }
  .emoji-page .emoji-sidebar { width: 100%; position: static; top: auto; align-self: stretch; }
  .emoji-page .emoji-main { padding: 12px 0; }
  .emoji-page .emoji-toolbar { flex-wrap: wrap; gap: 8px; }
  .emoji-page .emoji-input { width: 100%; }
  .emoji-page .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
}

@media (max-width: 480px) {
  .emoji-page .emoji-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
  .emoji-page .emoji-card { padding: 12px; }
  .emoji-page .emoji-char { font-size: 24px; }
  .emoji-page .emoji-name { font-size: 12px; }
}
.emoji-page .emoji-input::placeholder { color:#9ca3af; }
.emoji-page .emoji-count { color:#6b7280; font-size:14px; }


.emoji-page .emoji-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap:14px; padding-bottom: 28px; }
.emoji-page .emoji-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:16px; border-radius:12px; background:#ffffff; border:1px solid #e5e7eb; color:#111827; cursor:pointer; box-shadow: 0 1px 2px rgba(0,0,0,0.04); position:relative; overflow:hidden; transition: transform 120ms ease, box-shadow 180ms ease, border-color 140ms ease, background-color 140ms ease; }
.emoji-page .emoji-card:hover { border-color:#cfd3db; box-shadow: 0 2px 8px rgba(0,0,0,0.06); background:#f9fafb; }
.emoji-page .emoji-name { font-size:12px; color:#6b7280; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emoji-page .emoji-card:hover { border-color:#d1d5db; background:#f9fafb; }
.emoji-page .emoji-card.is-press { transform: scale(0.96); background:#eef2ff; border-color:#93c5fd; box-shadow: inset 0 0 0 1px rgba(59,130,246,0.20); }
.emoji-page .emoji-char { font-size:28px; line-height:1; }
.emoji-page .emoji-name { font-size:12px; color:#6b7280; }
.emoji-page .emoji-empty { color:#6b7280; text-align:center; padding:20px; }

.emoji-page .emoji-toast { position:fixed; left:50%; transform:translateX(-50%); bottom:24px; background:#111827; color:#fff; padding:8px 12px; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.2); }

/* 点击反馈动画：轻微弹跳 + 中心涟漪 */
.emoji-page .emoji-card.is-clicked { animation: emojiCardPop 220ms ease-out; border-color:#3b82f6; }
.emoji-page .emoji-card.is-clicked::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:9999px; background: rgba(59,130,246,0.25); transform: translate(-50%,-50%) scale(0); animation: emojiRipple 420ms ease-out; pointer-events:none; }

@keyframes emojiCardPop { 0% { transform: scale(0.95); box-shadow: 0 0 0 rgba(0,0,0,0); } 50% { transform: scale(1.04); box-shadow: 0 6px 14px rgba(0,0,0,0.10); } 100% { transform: scale(1); box-shadow: 0 1px 2px rgba(0,0,0,0.06); } }
@keyframes emojiRipple { 0% { transform: translate(-50%,-50%) scale(0); opacity: 0.8; } 100% { transform: translate(-50%,-50%) scale(24); opacity: 0; } }

/* 复制成功徽章：右上角短暂显示勾号 */
.emoji-page .emoji-check-badge { position:absolute; right:8px; top:8px; background:#10b981; color:#ffffff; font-size:12px; line-height:1; padding:4px 6px; border-radius:9999px; box-shadow:0 2px 6px rgba(16,185,129,0.35); transform: scale(0.6); opacity:0; pointer-events:none; transition: transform 160ms ease, opacity 160ms ease; }
.emoji-page .emoji-card.is-copied .emoji-check-badge { opacity:1; transform: scale(1); }
.emoji-page .emoji-sidebar .sidebar-header { font-size:14px; font-weight:600; color:#374151; margin-bottom:4px; }
.emoji-page .emoji-sidebar .category-item { display:block; width:100%; text-align:left; padding:8px 10px; border:1px solid #e5e7eb; border-radius:8px; background:#f9fafb; color:#374151; cursor:pointer; transition: all 0.18s ease; }
.emoji-page .emoji-sidebar .category-item:hover { background:#f3f4f6; border-color:#d1d5db; }
.emoji-page .emoji-sidebar .category-item:focus { outline:2px solid #93c5fd; outline-offset:2px; }
.emoji-page .emoji-sidebar .category-item.active { background:#eef2ff; border-color:#93c5fd; color:#1f2937; box-shadow: 0 1px 2px rgba(59,130,246,0.15); font-weight:600; }
.emoji-page .emoji-sidebar .category-item:active { transform: scale(0.98); }
.emoji-page .emoji-card:hover { border-color:#cfd3db; box-shadow: 0 2px 8px rgba(0,0,0,0.06); background:#f9fafb; }
.emoji-page .emoji-name { font-size:12px; color:#6b7280; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.emoji-page .emoji-card:hover { border-color:#d1d5db; background:#f9fafb; }
.emoji-page .emoji-card.is-press { transform: scale(0.96); background:#eef2ff; border-color:#93c5fd; box-shadow: inset 0 0 0 1px rgba(59,130,246,0.20); }
.emoji-page .emoji-char { font-size:28px; line-height:1; }
.emoji-page .emoji-name { font-size:12px; color:#6b7280; }
.emoji-page .emoji-empty { color:#6b7280; text-align:center; padding:20px; }

.emoji-page .emoji-toast { position:fixed; left:50%; transform:translateX(-50%); bottom:24px; background:#111827; color:#fff; padding:8px 12px; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.2); }

/* 点击反馈动画：轻微弹跳 + 中心涟漪 */
.emoji-page .emoji-card.is-clicked { animation: emojiCardPop 220ms ease-out; border-color:#3b82f6; }
.emoji-page .emoji-card.is-clicked::after { content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:9999px; background: rgba(59,130,246,0.25); transform: translate(-50%,-50%) scale(0); animation: emojiRipple 420ms ease-out; pointer-events:none; }

@keyframes emojiCardPop { 0% { transform: scale(0.95); box-shadow: 0 0 0 rgba(0,0,0,0); } 50% { transform: scale(1.04); box-shadow: 0 6px 14px rgba(0,0,0,0.10); } 100% { transform: scale(1); box-shadow: 0 1px 2px rgba(0,0,0,0.06); } }
@keyframes emojiRipple { 0% { transform: translate(-50%,-50%) scale(0); opacity: 0.8; } 100% { transform: translate(-50%,-50%) scale(24); opacity: 0; } }

/* 复制成功徽章：右上角短暂显示勾号 */
.emoji-page .emoji-check-badge { position:absolute; right:8px; top:8px; background:#10b981; color:#ffffff; font-size:12px; line-height:1; padding:4px 6px; border-radius:9999px; box-shadow:0 2px 6px rgba(16,185,129,0.35); transform: scale(0.6); opacity:0; pointer-events:none; transition: transform 160ms ease, opacity 160ms ease; }
.emoji-page .emoji-card.is-copied .emoji-check-badge { opacity:1; transform: scale(1); }