/* ============================================================
   仅保留 Tailwind 不便处理的细节样式（组件类 + 状态类）
   布局/响应式/间距/配色主要由 index.html 中的 Tailwind 原子类承担
   ============================================================ */

/* 语言选择下拉：自定义箭头 + 悬停态 */
.lang-select {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 500;
  color: #202124;
  padding: 9px 30px 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: background-color .15s ease;
}
.lang-select:hover,
.lang-select:focus { background-color: #f1f3f4; outline: none; }

/* 图标按钮组件：避免在每个按钮上重复原子类 */
.icon-btn {
  width: 38px;
  height: 38px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #5f6368;
  font-size: 16px;
  transition: background-color .15s ease, color .15s ease, transform .12s ease;
}
.icon-btn:hover { background: #f1f3f4; color: #1a73e8; }
.icon-btn:active { transform: scale(.92); }
.icon-btn.flash { background: #1a73e8; color: #fff; }

/* 后端状态点 */
.status-dot { transition: background-color .3s ease; }
.status-dot.ok { background: #34a853 !important; }
.status-dot.bad { background: #ea4335 !important; }

/* 流式加载圈 */
.spinner {
  width: 18px; height: 18px;
  border: 2px solid #dadce0;
  border-top-color: #1a73e8;
  border-radius: 50%;
  display: inline-block;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 自定义滚动条（美化） */
.panel-scroll::-webkit-scrollbar { width: 8px; }
.panel-scroll::-webkit-scrollbar-thumb { background: #e3e6e8; border-radius: 4px; }
.panel-scroll::-webkit-scrollbar-thumb:hover { background: #cdd1d5; }

/* 译文淡入（每次新翻译开始时添加） */
.fade-in { animation: fadein .2s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* 顶栏管理入口（复用图标按钮观感） */
.icon-link {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #5f6368; font-size: 16px;
  transition: background-color .15s ease, color .15s ease;
}
.icon-link:hover { background: #f1f3f4; color: #1a73e8; }

/* 后台 Toast 提示 */
#toast { transition: opacity .2s ease; }