/* 全工具统一 UI 体系 —— 安小智 Tools */

.tool-shell {
  padding-bottom: 36px;
  animation: toolEnter .45s var(--ease) both;
}
@keyframes toolEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-shell { animation: none; }
}

/* —— Hero —— */
.tool-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 18px 16px;
  border-radius: 20px;
  color: #fff;
  isolation: isolate;
  box-shadow: 0 14px 32px var(--tool-shadow, rgba(24, 39, 75, .16));
  background: var(--tool-hero, linear-gradient(118deg, #1e4a9a, #2f7cf6 55%, #4aa3ff));
}
.tool-hero::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 68%);
  pointer-events: none;
  z-index: 0;
}
.tool-hero::after {
  content: "";
  position: absolute;
  left: -30px;
  bottom: -50px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.1), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.tool-hero > * { position: relative; z-index: 1; }

.tool-hero-ico {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
}
.tool-hero-ico svg { width: 24px; height: 24px; }

.tool-hero-en {
  display: block;
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .78;
  margin-bottom: 3px;
  font-weight: var(--fw-medium);
}
.tool-hero h2 {
  font-size: 19px;
  font-weight: var(--fw-semibold);
  letter-spacing: .02em;
  line-height: 1.25;
}
.tool-hero p {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.45;
  opacity: .9;
  max-width: 42em;
}

.tool-hero.is-inspect {
  --tool-hero: linear-gradient(118deg, #0f3a6e 0%, #1f6fe0 52%, #2bc4c9 100%);
  --tool-shadow: rgba(24, 92, 191, .2);
}
.tool-hero.is-nearmiss {
  --tool-hero: linear-gradient(118deg, #b45309 0%, #ea580c 48%, #f59e0b 100%);
  --tool-shadow: rgba(196, 90, 14, .22);
}
.tool-hero.is-exam {
  --tool-hero: linear-gradient(118deg, #2f3eb8 0%, #4f6ef7 52%, #6d8cff 100%);
  --tool-shadow: rgba(55, 80, 200, .22);
}
.tool-hero.is-hazard {
  --tool-hero: linear-gradient(118deg, #9f1239 0%, #dc2626 48%, #f07167 100%);
  --tool-shadow: rgba(185, 28, 28, .22);
}
.tool-hero.is-maintain {
  --tool-hero: linear-gradient(118deg, #0f766e 0%, #14b8a6 52%, #2dd4bf 100%);
  --tool-shadow: rgba(15, 118, 110, .22);
}

/* —— Quota —— */
.tool-shell .quota-bar,
.inspect-page .quota-bar,
.nm-page .quota-bar,
.exam-page .quota-bar,
.hz-page .quota-bar,
.mx-page .quota-bar {
  position: relative;
  overflow: hidden;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #fff, #fbfcfe);
  border: 1px solid rgba(226, 232, 240, .95);
  box-shadow: 0 6px 18px rgba(24, 39, 75, .04);
  font-size: 13.5px;
}
.tool-shell .quota-bar::before,
.inspect-page .quota-bar::before,
.nm-page .quota-bar::before,
.exam-page .quota-bar::before,
.hz-page .quota-bar::before,
.mx-page .quota-bar::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tool-accent, var(--blue));
}
.quota-tag {
  font-family: var(--font-en);
  letter-spacing: .06em;
}

/* —— Form cards —— */
.tool-shell .form-card,
.nm-form,
.hz-form,
.mx-form,
.exam-panel,
.exam-score-box {
  position: relative;
  border-radius: 20px !important;
  border: 1px solid rgba(226, 232, 240, .98) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 10px 28px rgba(24, 39, 75, .05) !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%) !important;
}
.tool-shell .form-card,
.nm-form,
.hz-form,
.mx-form {
  padding: 20px 18px 18px;
}

.tool-shell .field label,
.nm-form .field label,
.hz-form .field label,
.mx-form .field label,
.exam-panel .field label {
  font-size: 13.5px;
  font-weight: var(--fw-medium);
  color: var(--ink-2);
  letter-spacing: .02em;
}
.tool-shell .field input,
.tool-shell .field textarea,
.nm-form .field input,
.nm-form .field textarea,
.hz-form .field input,
.hz-form .field textarea,
.mx-form .field input,
.mx-form .field textarea,
.exam-panel .field input,
.exam-panel .field textarea {
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  background: #f8fafc !important;
  transition: border-color .18s, box-shadow .18s, background .18s !important;
}
.tool-shell .field input:focus,
.tool-shell .field textarea:focus,
.nm-form .field input:focus,
.nm-form .field textarea:focus,
.hz-form .field input:focus,
.hz-form .field textarea:focus,
.mx-form .field input:focus,
.mx-form .field textarea:focus,
.exam-panel .field input:focus,
.exam-panel .field textarea:focus {
  border-color: var(--tool-accent, var(--blue)) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(47, 124, 246, .14) !important;
}
.nm-page .field input:focus,
.nm-page .field textarea:focus { box-shadow: 0 0 0 3px rgba(234, 88, 12, .14) !important; }
.hz-page .field input:focus,
.hz-page .field textarea:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .14) !important; }
.mx-page .field input:focus,
.mx-page .field textarea:focus { box-shadow: 0 0 0 3px rgba(13, 148, 136, .14) !important; }
.exam-page .field input:focus,
.exam-page .field textarea:focus,
.exam-page .exam-score-cell input:focus,
.exam-page #exam-total:focus { box-shadow: 0 0 0 3px rgba(79, 110, 247, .16) !important; border-color: #4f6ef7 !important; }

/* —— Photo slots —— */
.nm-photos,
.hz-photos,
.mx-photos { gap: 12px; }
.nm-photo-slot,
.hz-photo-slot,
.mx-photo-slot {
  border-radius: 16px;
  border: 1.5px dashed #c5d0e0;
  background:
    radial-gradient(circle at 30% 20%, rgba(47,124,246,.04), transparent 50%),
    linear-gradient(180deg, #f8fafc, #fff);
  transition: border-color .18s, box-shadow .18s, transform .18s, background .18s;
}
.nm-photo-slot.is-empty:hover,
.hz-photo-slot.is-empty:hover,
.mx-photo-slot.is-empty:hover {
  border-color: var(--tool-accent, var(--blue));
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(24, 39, 75, .06);
}
.nm-page .nm-photo-slot.is-empty:hover { background: #fff7ed; border-color: #ea580c; }
.hz-page .hz-photo-slot.is-empty:hover { background: #fef2f2; border-color: #dc2626; }
.mx-page .mx-photo-slot.is-empty:hover { background: #f0fdfa; border-color: #0d9488; }
.nm-photo-slot.is-empty span,
.hz-photo-slot.is-empty span,
.mx-photo-slot.is-empty span {
  font-size: 13px;
  font-weight: var(--fw-medium);
  color: var(--ink-2);
}
.nm-photo-del,
.hz-photo-del,
.mx-photo-del {
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
.nm-hint,
.hz-hint,
.mx-hint {
  padding: 8px 10px;
  border-radius: 10px;
  background: #f1f5f9;
  color: var(--ink-2);
}

.nm-page { --tool-accent: #ea580c; }
.hz-page { --tool-accent: #dc2626; }
.mx-page { --tool-accent: #0d9488; }
.exam-page { --tool-accent: #4f6ef7; }
.inspect-page { --tool-accent: #1f6fe0; }

.nm-actions .btn-primary,
.hz-actions .btn-primary,
.mx-actions .btn-primary,
.exam-actions .btn-primary {
  min-height: 48px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: var(--fw-medium);
}
.nm-actions .btn-primary { box-shadow: 0 10px 22px rgba(234, 88, 12, .28); }
.hz-actions .btn-primary { box-shadow: 0 10px 22px rgba(220, 38, 38, .28); }
.mx-actions .btn-primary { box-shadow: 0 10px 22px rgba(13, 148, 136, .28); }
.exam-actions .btn-primary { box-shadow: 0 10px 22px rgba(79, 110, 247, .28); }

.nm-page .btn-primary,
.nm-preview-ops .btn-primary {
  background: linear-gradient(135deg, #ea580c, #f59e0b) !important;
}
.hz-page .btn-primary,
.hz-preview-ops .btn-primary {
  background: linear-gradient(135deg, #dc2626, #f87171) !important;
}
.mx-page .btn-primary,
.mx-preview-ops .btn-primary {
  background: linear-gradient(135deg, #0f766e, #14b8a6) !important;
}
.exam-page .btn-primary,
.exam-result-ops .btn-primary,
.exam-card-ops .btn-primary {
  background: linear-gradient(135deg, #3d5ce5, #6d8cff) !important;
}

/* —— Preview —— */
.nm-preview-wrap,
.hz-preview-wrap,
.mx-preview-wrap {
  margin-top: 22px;
  padding: 16px 14px 14px;
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, .95);
  background: linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 10px 28px rgba(24, 39, 75, .05);
}
.nm-preview-head,
.hz-preview-head,
.mx-preview-head { margin-bottom: 14px; }
.nm-preview-head h3,
.hz-preview-head h3,
.mx-preview-head h3 {
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.nm-preview-head h3::before,
.hz-preview-head h3::before,
.mx-preview-head h3::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tool-accent);
  box-shadow: 0 0 0 4px rgba(47, 124, 246, .12);
}
.nm-page .nm-preview-head h3::before { box-shadow: 0 0 0 4px rgba(234, 88, 12, .18); }
.hz-page .hz-preview-head h3::before { box-shadow: 0 0 0 4px rgba(220, 38, 38, .18); }
.mx-page .mx-preview-head h3::before { box-shadow: 0 0 0 4px rgba(13, 148, 136, .18); }

.nm-a4-stage,
.hz-a4-stage,
.mx-a4-stage {
  border-radius: 16px;
  padding: 14px 10px 18px;
  background:
    linear-gradient(180deg, #e8edf5, #dfe6f0);
  border: 1px solid rgba(148, 163, 184, .25);
}

.nm-print-tip,
.hz-print-tip,
.mx-print-tip,
.exam-keep-tip {
  border-radius: 14px !important;
  padding: 12px 14px !important;
  line-height: 1.65;
}

/* —— Loading —— */
.hz-loading,
.nm-loading,
.mx-loading {
  border-radius: 14px;
  font-weight: var(--fw-medium);
}

/* —— Exam specifics polish —— */
.exam-modes { gap: 12px; margin-bottom: 16px; }
.exam-mode {
  position: relative;
  overflow: hidden;
  border-radius: 18px !important;
  padding: 16px 15px 14px !important;
  background: linear-gradient(180deg, #fff, #f8fafc) !important;
}
.exam-mode.is-on {
  border-color: rgba(79, 110, 247, .55) !important;
  background: linear-gradient(180deg, #f5f8ff, #fff) !important;
}
.exam-mode.is-on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #4f6ef7;
}
.exam-score-box {
  padding: 16px 14px 14px !important;
  margin-bottom: 16px;
}
.exam-score-row {
  border-radius: 14px !important;
  background: #f8fafc !important;
  border-color: rgba(226, 232, 240, .9) !important;
}
.exam-drop {
  min-height: 168px;
  border-radius: 18px !important;
  border-style: dashed !important;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
}
.exam-drop:hover,
.exam-drop.is-drag {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(79, 110, 247, .1);
}
.exam-result {
  border-radius: 18px !important;
  padding: 16px !important;
  box-shadow: 0 10px 24px rgba(79, 110, 247, .08);
}
.exam-card {
  border-radius: 16px !important;
  transition: transform .18s, box-shadow .18s;
}
.exam-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(24, 39, 75, .08);
}

/* —— Inspect polish —— */
.inspect-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px !important;
  padding: 18px 16px !important;
}
.inspect-drop {
  border-radius: 22px !important;
  min-height: 300px;
  box-shadow: 0 12px 28px rgba(24, 92, 191, .06);
}
.inspect-run {
  border-radius: 16px !important;
  box-shadow: 0 12px 28px rgba(31, 111, 224, .25) !important;
}
.inspect-stage {
  border-radius: 20px;
  overflow: hidden;
}
.result-head h2 {
  font-weight: var(--fw-semibold);
}
.ai-note {
  border-radius: 14px;
}

/* —— Voice bar —— */
.mx-voice-bar {
  padding: 8px 10px;
  border-radius: 12px;
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
}

/* —— Home / tools grid polish —— */
.tool {
  transition: transform .18s var(--ease), box-shadow .18s var(--ease);
}
.tool:hover {
  transform: translateY(-2px);
}
.tool-ico {
  box-shadow: 0 10px 20px rgba(24, 39, 75, .12);
  border: 1px solid rgba(255,255,255,.25);
}

.result-block {
  border-radius: 16px !important;
}
.result-stack {
  gap: 12px;
}

@media (max-width: 420px) {
  .tool-hero { padding: 16px 14px; gap: 12px; }
  .tool-hero-ico { width: 46px; height: 46px; border-radius: 14px; }
  .tool-hero h2 { font-size: 18px; }
}