/**
 * public/css/tools/mousepad-glide-test.css
 * mousepad-glide-test 工具专属样式（前缀 mgt- 隔离作用域）
 * 复用全局：panel-raised / core-btn / stat-card / stat-value / stat-label / stats-grid
 */

/* 主题变量（作用域限定在 #tool-root，私有名不与全站冲突） */
#tool-root { --green-deep: #4a6a28; --fog-200: #e0ddd5; --sidebar-border: rgb(149,146,146); --card-bg: #fff; --text-muted: #666; }
html[data-theme="dark"] #tool-root { --green-deep: #8ea85c; --fog-200: #3a3e3a; --sidebar-border: #4d5561; --card-bg: #2a2f37; --text-muted: #acb4c0; }

/* 测试画布 */
.mgt-pad-wrap { position: relative; }
#mgt-pad {
  display: block;
  width: 100%;
  height: 300px;
  background: #0b0e12;
  border: 1px solid var(--fog-200, #e0ddd5);
  border-radius: 8px;
  touch-action: none;
  cursor: crosshair;
}
html[data-theme="dark"] #mgt-pad { border-color: var(--fog-200, #3a3e3a); }

.mgt-hint { font-size: .85rem; color: var(--text-muted, #666); line-height: 1.6; margin: .5rem 0 0; }

/* 分数 + 进度 */
.mgt-scorebar { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; flex-wrap: wrap; }
.mgt-score-block { min-width: 90px; }
.mgt-score-big {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 3rem; font-weight: 700; line-height: 1;
  color: var(--green-deep, #4a6a28);
}
.mgt-score-big.warn { color: #c38c28; }
.mgt-score-big.bad { color: #c34250; }
.mgt-score-label { font-size: .76rem; color: var(--text-muted, #666); margin-top: 4px; }
.mgt-progresswrap { flex: 1; min-width: 180px; height: 10px; background: var(--fog-200, #e0ddd5); border-radius: 5px; overflow: hidden; }
.mgt-progressbar { height: 100%; width: 0; background: linear-gradient(90deg, #8ba153, #bed26c); transition: width .1s; }

/* 状态徽章（私有，复用 badge 形态） */
.mgt-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-family: 'Rajdhani', sans-serif; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.mgt-badge-ok { background: rgba(148,181,79,.18); color: var(--green-deep, #4a6a28); border: 1px solid rgba(148,181,79,.5); }
.mgt-badge-bad { background: rgba(195,66,80,.16); color: #b0303f; border: 1px solid rgba(195,66,80,.5); }
.mgt-badge-warn { background: rgba(195,140,40,.18); color: #9a6b1e; border: 1px solid rgba(195,140,40,.5); }

/* 行 / 输入框 */
.mgt-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mgt-tag-input {
  font-family: inherit; font-size: .9rem; padding: .5rem .7rem;
  border: 1px solid var(--sidebar-border, rgb(149,146,146)); border-radius: .375rem;
  background: var(--card-bg, #fff); color: inherit; min-width: 160px;
}

/* 历史记录表 */
.mgt-hist { padding: 1.25rem; }
.mgt-hist h3 { font-family: 'Rajdhani', sans-serif; font-weight: 700; margin: 0 0 .75rem; }
.mgt-table { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .85rem; }
.mgt-table th, .mgt-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--fog-200, #e0ddd5); }
.mgt-table th { font-family: 'Rajdhani', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; color: var(--text-muted, #666); }
.mgt-table td { font-family: 'IBM Plex Mono', monospace; }
html[data-theme="dark"] .mgt-tag-input { background: var(--card-bg, #2a2f37); border-color: var(--sidebar-border, #4d5561); }

@media (max-width: 768px) {
  #mgt-pad { height: 260px; }
  .mgt-score-big { font-size: 2.4rem; }
}