/* Microsenses MINI Dogs — Canine Communication Translator */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, sans-serif; background: #1a1a0e; color: #fff; min-height: 100vh; }

/* App wrapper — hidden until authenticated */
.app-wrapper { display: none; }
.app-wrapper.authenticated { display: block; }

/* Password Gate */
.password-gate {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, #1a1a0e 0%, #2d2d1a 50%, #1a1a0e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.password-gate.hidden { display: none; }
.password-card {
  background: #2d2d1a;
  border-radius: 20px;
  padding: 40px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  text-align: center;
}
.dog-logo { font-size: 48px; margin-bottom: 16px; }
.password-card h2 {
  font-size: 24px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #d4a017, #e8c547);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.password-card p {
  font-size: 13px;
  color: #888;
  margin-bottom: 24px;
}
.password-card input {
  width: 100%;
  padding: 14px 16px;
  background: #1a1a0e;
  border: 2px solid #4a4a2f;
  border-radius: 10px;
  color: white;
  font-size: 15px;
  text-align: center;
  margin-bottom: 16px;
}
.password-card input:focus {
  outline: none;
  border-color: #d4a017;
}
.password-card .error {
  color: #f44336;
  font-size: 13px;
  margin-bottom: 12px;
  display: none;
}
.password-card .error.show { display: block; }
.auth-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #d4a017, #8b6914);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.auth-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(212, 160, 23, 0.3);
}

/* Header */
.header { background: linear-gradient(135deg, #3d3d1a 0%, #5a5a2f 100%); padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.header h1 { font-size: 20px; font-weight: 600; color: #e8c547; }
.header .subtitle { font-size: 11px; opacity: 0.8; color: #ccc; }
.flip-btn { padding: 8px 16px; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s; }
.flip-btn:hover { background: rgba(255,255,255,0.25); }

/* Main Layout */
.main-container { display: grid; grid-template-columns: 420px 1fr; gap: 16px; padding: 16px; max-width: 1600px; margin: 0 auto; }
@media (max-width: 900px) { .main-container { grid-template-columns: 1fr; } }

/* Left Panel - Video */
.video-panel { background: #2d2d1a; border-radius: 12px; padding: 16px; }
.video-container { position: relative; background: #000; border-radius: 8px; overflow: hidden; aspect-ratio: 4/3; }
.video-container video { width: 100%; height: 100%; object-fit: cover; }
#overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

/* Scan Mode Selector */
.scan-mode-selector {
  margin-top: 12px;
  padding: 10px;
  background: linear-gradient(135deg, #2d2d1a, #3d3d1a);
  border-radius: 10px;
  text-align: center;
}
.scan-mode-label {
  font-size: 9px;
  letter-spacing: 2px;
  color: #888;
  font-weight: 600;
  margin-bottom: 8px;
}
.scan-mode-options {
  display: flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #4a4a2f;
}
.scan-mode-btn {
  flex: 1;
  padding: 10px 4px;
  background: transparent;
  border: none;
  color: #888;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border-right: 1px solid #4a4a2f;
}
.scan-mode-btn:last-child { border-right: none; }
.scan-mode-btn:hover { background: rgba(212,160,23,0.1); color: #ccc; }
.scan-mode-btn.active {
  background: linear-gradient(135deg, #d4a017, #8b6914);
  color: #fff;
}

/* Controls */
.controls { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn { padding: 12px 20px; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 13px; transition: all 0.2s; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: linear-gradient(135deg, #d4a017, #8b6914); color: white; }
.btn-secondary { background: #4a4a2f; color: white; }
.btn-danger { background: #dc3545; color: white; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

/* Status */
.status-bar { margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-size: 13px; }
.status-bar.loading { background: #3d3d00; color: #ffc107; }
.status-bar.ready { background: #1e4620; color: #4caf50; }
.status-bar.scanning { background: #3d3d1a; color: #d4a017; }
.status-bar.error { background: #4a1e1e; color: #f44336; }

/* Timer */
.timer-display { text-align: center; margin-top: 16px; }
.timer-value { font-size: 48px; font-weight: 700; color: #d4a017; font-family: monospace; }
.timer-mode { font-size: 11px; color: #888; letter-spacing: 1px; margin-top: 2px; }
.timer-value.countdown { color: #ff8a65; }

/* Translation Panel */
.translation-panel {
  margin-top: 16px;
  padding: 16px;
  background: linear-gradient(135deg, #2d3a1f, #1e2a1f);
  border-radius: 12px;
  border-left: 4px solid #d4a017;
}
.translation-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.translation-icon { font-size: 20px; }
.translation-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: #d4a017;
  font-weight: 700;
}
.translation-message {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 8px;
}
.translation-science {
  font-size: 11px;
  color: #aaa;
  line-height: 1.5;
  font-style: italic;
  margin-bottom: 6px;
}
.translation-recommendation {
  font-size: 11px;
  color: #7cb342;
  line-height: 1.5;
  padding: 6px 8px;
  background: rgba(124, 179, 66, 0.1);
  border-radius: 6px;
  margin-bottom: 6px;
}
.translation-confidence {
  font-size: 10px;
  color: #888;
  text-align: right;
}

/* Real-time Metrics */
.realtime-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.metric-card { background: linear-gradient(135deg, #3d3d1a, #2d2d1a); border-radius: 8px; padding: 12px; text-align: center; }
.metric-card .label { font-size: 10px; text-transform: uppercase; opacity: 0.7; letter-spacing: 1px; }
.metric-card .value { font-size: 22px; font-weight: 700; margin-top: 4px; }
.metric-card.emotion-primary .value { color: #e8c547; }
.metric-card.emotion-confidence .value { color: #7cb342; }
.metric-card.emotion-intensity .value { color: #ff8a65; }
.metric-card.energy .value { color: #ff6b6b; }
.metric-card.vibration .value { color: #4ecdc4; }
.metric-card.frequency .value { color: #ffe66d; }

.formula-box { margin-top: 12px; padding: 12px; background: #1e2a1f; border-radius: 8px; font-size: 11px; color: #888; }

/* Bark Status */
.bark-status {
  margin-top: 12px; padding: 8px 12px; background: #1e2a1f; border-radius: 8px;
  font-size: 11px; display: flex; align-items: center; gap: 8px; letter-spacing: 1px;
}
.bark-status .bark-icon { font-size: 14px; }
.bark-status .bark-text { color: #888; }
.bark-status.active .bark-text { color: #7cb342; }
.bark-status.barking .bark-text { color: #ff8a65; }
.bark-status.denied .bark-text { color: #f44336; }
.bark-status.silent .bark-text { color: #ffc107; }

/* Live Indicators */
.live-indicators { margin-top: 12px; padding: 12px; background: #1e2a1f; border-radius: 8px; }
.indicator-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ind-chip {
  padding: 4px 10px; border-radius: 4px; font-size: 10px;
  font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
}
.ind-chip.happy { background: rgba(124,179,66,0.2); color: #7cb342; }
.ind-chip.excited { background: rgba(255,138,101,0.2); color: #ff8a65; }
.ind-chip.playful { background: rgba(78,205,196,0.2); color: #4ecdc4; }
.ind-chip.calm { background: rgba(76,175,80,0.2); color: #4caf50; }
.ind-chip.anxious { background: rgba(255,193,7,0.2); color: #ffc107; }
.ind-chip.stressed { background: rgba(255,152,0,0.2); color: #ff9800; }
.ind-chip.fearful { background: rgba(244,67,54,0.2); color: #f44336; }
.ind-chip.aggressive { background: rgba(244,67,54,0.25); color: #f44336; animation: pulse 0.5s 3; }
.ind-chip.alert { background: rgba(212,160,23,0.2); color: #d4a017; }
.ind-chip.sad { background: rgba(100,100,200,0.2); color: #9e9eff; }
.ind-chip.curious { background: rgba(130,177,255,0.2); color: #82b1ff; }
.ind-chip.neutral { background: rgba(255,255,255,0.05); color: #666; }
.ind-chip.bark { background: rgba(255,138,101,0.2); color: #ff8a65; }
.ind-chip.growl { background: rgba(244,67,54,0.2); color: #f44336; }
.ind-chip.whine { background: rgba(255,193,7,0.2); color: #ffc107; }
.ind-chip.howl { background: rgba(100,100,200,0.2); color: #9e9eff; }
.ind-chip.energy369 { background: rgba(212,160,23,0.15); color: #d4a017; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }

/* Right Panel - Results */
.results-panel { background: #2d2d1a; border-radius: 12px; padding: 20px; display: none; }
.results-panel.active { display: block; }

/* Report Header */
.report-header { background: linear-gradient(135deg, #3d3d1a, #5a5a2f); margin: -20px -20px 20px -20px; padding: 20px; border-radius: 12px 12px 0 0; }
.report-title { font-size: 18px; font-weight: 600; color: #e8c547; }
.report-subtitle { font-size: 11px; opacity: 0.8; margin-top: 4px; }

/* Section Title */
.section-title { font-size: 12px; font-weight: 700; color: #d4a017; letter-spacing: 2px; text-transform: uppercase; margin: 20px 0 12px; border-bottom: 1px solid #4a4a2f; padding-bottom: 6px; }

/* Emotion Summary Card */
.emotion-summary-card {
  background: #1e2a1f;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  border-left: 4px solid #7cb342;
}
.emotion-summary-card.positive { border-left-color: #7cb342; }
.emotion-summary-card.negative { border-left-color: #f44336; }
.emotion-summary-card.mixed { border-left-color: #ffc107; }
.emotion-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 8px; }
.emotion-title { font-size: 14px; font-weight: 700; letter-spacing: 2px; }
.emotion-badge { padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.emotion-badge.positive { background: rgba(124,179,66,0.15); color: #7cb342; }
.emotion-badge.negative { background: rgba(244,67,54,0.15); color: #f44336; }
.emotion-badge.mixed { background: rgba(255,193,7,0.15); color: #ffc107; }

.score-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 600px) { .score-grid { grid-template-columns: repeat(2, 1fr); } }
.score-ring { background: #2d2d1a; border-radius: 12px; padding: 16px; text-align: center; }
.score-value { font-size: 28px; font-weight: 700; color: #e8c547; }
.score-label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }

/* Emotion Distribution Bar */
.emotion-bar-container { margin-top: 12px; }
.emotion-bar-label { font-size: 11px; color: #aaa; margin-bottom: 4px; display: flex; justify-content: space-between; }
.emotion-bar { height: 8px; background: #2d2d1a; border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.emotion-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }

/* Bark Result Card */
.bark-card { background: #1e2a1f; border-radius: 10px; padding: 14px; margin-bottom: 10px; }
.bark-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
@media (max-width: 600px) { .bark-grid { grid-template-columns: repeat(2, 1fr); } }
.bark-item { background: #2d2d1a; border-radius: 6px; padding: 8px; text-align: center; }
.bark-item .b-label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.bark-item .b-val { font-size: 16px; font-weight: 700; margin-top: 2px; color: #ff8a65; }

/* 369 Energy Card */
.energy-card { background: #1e2a1f; border-radius: 10px; padding: 14px; margin-bottom: 10px; border-left: 4px solid #d4a017; }
.energy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
@media (max-width: 600px) { .energy-grid { grid-template-columns: repeat(2, 1fr); } }
.energy-item { background: #2d2d1a; border-radius: 6px; padding: 8px; text-align: center; }
.energy-item .e-label { font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 1px; }
.energy-item .e-val { font-size: 16px; font-weight: 700; margin-top: 2px; color: #d4a017; }

/* Translation Report Card */
.translation-card { background: #1e2a1f; border-radius: 10px; padding: 14px; margin-bottom: 10px; border-left: 4px solid #7cb342; }
.translation-entry { padding: 8px; background: #2d2d1a; border-radius: 6px; margin-bottom: 6px; }
.translation-entry .t-msg { font-size: 13px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.translation-entry .t-meta { font-size: 10px; color: #888; display: flex; justify-content: space-between; }

/* Scan Info */
.scan-info { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 20px 0; }
@media (max-width: 600px) { .scan-info { grid-template-columns: repeat(2, 1fr); } }
.scan-info-item { background: #1e2a1f; border-radius: 8px; padding: 12px; text-align: center; }
.scan-info-label { font-size: 10px; opacity: 0.7; text-transform: uppercase; }
.scan-info-value { font-size: 18px; font-weight: 700; margin-top: 4px; color: #e8c547; }

/* Indicator Tags */
.indicators-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ind-tag { font-size: 10px; letter-spacing: 1px; padding: 3px 8px; border-radius: 4px; font-weight: 600; text-transform: uppercase; }
.ind-tag.green { background: rgba(124,179,66,0.15); color: #7cb342; }
.ind-tag.amber { background: rgba(212,160,23,0.15); color: #d4a017; }
.ind-tag.orange { background: rgba(255,152,0,0.15); color: #ff9800; }
.ind-tag.red { background: rgba(244,67,54,0.15); color: #f44336; }
.ind-tag.blue { background: rgba(130,177,255,0.15); color: #82b1ff; }

/* ── Human-Friendly Report ── */
.friendly-report-header {
  text-align: center;
  padding: 24px 16px 20px;
  background: linear-gradient(135deg, #2d3a1f, #1e2a1f);
  border-radius: 12px;
  margin-bottom: 16px;
}
.friendly-mood-emoji { font-size: 56px; margin-bottom: 8px; }
.friendly-mood-text { font-size: 22px; font-weight: 700; color: #e8c547; line-height: 1.3; margin-bottom: 6px; }
.friendly-mood-sub { font-size: 13px; color: #aaa; line-height: 1.5; }
.friendly-section {
  background: #1e2a1f;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}
.friendly-section-title {
  font-size: 14px;
  font-weight: 700;
  color: #e8c547;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.friendly-section-title .fs-icon { font-size: 18px; }
.friendly-item {
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  margin-bottom: 8px;
  border-left: 3px solid #4a4a2f;
}
.friendly-item:last-child { margin-bottom: 0; }
.friendly-item-title { font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 4px; }
.friendly-item-text { font-size: 13px; color: #bbb; line-height: 1.5; }
.friendly-item.positive { border-left-color: #7cb342; }
.friendly-item.caution { border-left-color: #ffc107; }
.friendly-item.urgent { border-left-color: #f44336; }
.friendly-item.info { border-left-color: #82b1ff; }
.friendly-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.friendly-meter-label { font-size: 12px; color: #aaa; min-width: 80px; }
.friendly-meter-bar { flex: 1; height: 10px; background: #2d2d1a; border-radius: 5px; overflow: hidden; }
.friendly-meter-fill { height: 100%; border-radius: 5px; transition: width 0.5s; }
.friendly-meter-val { font-size: 12px; font-weight: 700; color: #e8c547; min-width: 36px; text-align: right; }
.friendly-quick-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
@media (max-width: 400px) { .friendly-quick-stats { grid-template-columns: repeat(2, 1fr); } }
.fqs-item { background: #2d2d1a; border-radius: 8px; padding: 12px; text-align: center; }
.fqs-val { font-size: 20px; font-weight: 700; color: #e8c547; }
.fqs-label { font-size: 10px; color: #888; margin-top: 2px; text-transform: uppercase; letter-spacing: 0.5px; }

/* Detail Toggle */
.detail-toggle-wrap { text-align: center; margin: 16px 0; }
.detail-toggle-btn {
  padding: 8px 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid #4a4a2f;
  border-radius: 8px;
  color: #888;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.detail-toggle-btn:hover { background: rgba(255,255,255,0.1); color: #ccc; }
.technical-detail { border-top: 1px solid #4a4a2f; padding-top: 16px; margin-top: 8px; }

/* Disclaimer */
.disclaimer { margin: 20px 0; padding: 12px; background: rgba(212,160,23,0.08); border: 1px solid rgba(212,160,23,0.2); border-radius: 8px; font-size: 11px; color: #d4a017; text-align: center; line-height: 1.5; }

/* Actions */
.report-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.report-actions .btn { min-width: 120px; }

/* Mode Badge */
.mode-badge {
  padding: 4px 12px; border-radius: 20px; font-size: 10px;
  font-weight: 700; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap;
  background: rgba(212,160,23,0.2); color: #d4a017;
}

/* ── Needs Panel ── */
.needs-panel, .signals-panel { margin-top: 12px; background: #1e2a1f; border-radius: 10px; padding: 12px; border: 1px solid rgba(212,160,23,0.15); }
.panel-header { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: #d4a017; margin-bottom: 10px; }
.need-item { padding: 10px; margin-bottom: 8px; border-radius: 8px; border-left: 3px solid #888; background: rgba(255,255,255,0.03); }
.need-item.need-high { border-left-color: #f44336; }
.need-item.need-mod { border-left-color: #ffc107; }
.need-item.need-low { border-left-color: #4caf50; }
.need-title { font-size: 13px; font-weight: 700; color: #e8c547; margin-bottom: 4px; }
.need-urg { font-size: 9px; padding: 2px 6px; border-radius: 10px; margin-left: 6px; font-weight: 600; }
.need-high .need-urg { background: rgba(244,67,54,0.2); color: #f44336; }
.need-mod .need-urg { background: rgba(255,193,7,0.2); color: #ffc107; }
.need-low .need-urg { background: rgba(76,175,80,0.2); color: #4caf50; }
.need-detail { font-size: 12px; color: #ccc; line-height: 1.5; margin-bottom: 4px; }
.need-science { font-size: 10px; color: #888; font-style: italic; line-height: 1.4; }

/* ── Signals Panel ── */
.signal-item { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.05); align-items: flex-start; }
.signal-item:last-child { border-bottom: none; }
.sig-icon { font-size: 16px; min-width: 24px; text-align: center; }
.sig-signal { font-size: 12px; font-weight: 600; color: #e8c547; }
.sig-detail { font-size: 11px; color: #aaa; line-height: 1.4; margin-top: 2px; }

/* ── Live Scan Readings Panel ── */
.scan-readings-panel {
  margin-top: 12px;
  background: linear-gradient(135deg, #1a2a1a, #1e2a1f);
  border-radius: 10px;
  padding: 12px;
  border: 1px solid rgba(78, 205, 196, 0.25);
}
.readings-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.readings-icon { font-size: 16px; }
.readings-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: #4ecdc4;
  font-weight: 700;
}
.readings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
@media (max-width: 600px) { .readings-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 400px) { .readings-grid { grid-template-columns: repeat(2, 1fr); } }
.reading-item {
  background: rgba(0,0,0,0.3);
  border-radius: 6px;
  padding: 8px 6px;
  text-align: center;
  border: 1px solid rgba(78, 205, 196, 0.08);
  transition: border-color 0.3s;
}
.reading-item.active {
  border-color: rgba(78, 205, 196, 0.3);
}
.reading-item .r-label {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reading-item .r-value {
  font-size: 18px;
  font-weight: 700;
  color: #4ecdc4;
  font-family: monospace;
  margin: 2px 0;
  line-height: 1.2;
}
.reading-item .r-unit {
  font-size: 8px;
  color: #666;
  letter-spacing: 0.5px;
}
.active-patterns {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 20px;
}
.pattern-chip {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(78, 205, 196, 0.12);
  color: #4ecdc4;
}
.pattern-chip.warn {
  background: rgba(255, 193, 7, 0.12);
  color: #ffc107;
}

/* ── K9 Action Panel ── */
.action-panel {
  margin-top: 12px;
  background: linear-gradient(135deg, #2a1a2d, #1e1a2a);
  border-radius: 10px;
  padding: 12px;
  border: 1px solid rgba(171, 130, 255, 0.25);
}
.action-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.action-icon { font-size: 16px; }
.action-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: #ab82ff;
  font-weight: 700;
}
.action-primary {
  font-size: 22px;
  font-weight: 700;
  color: #d4a0ff;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
  padding: 6px 0;
}
.action-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.action-chip {
  padding: 3px 8px;
  border-radius: 10px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.action-chip.locomotion { background: rgba(130,177,255,0.15); color: #82b1ff; }
.action-chip.direction { background: rgba(130,177,255,0.1); color: #7eaaee; }
.action-chip.jumping { background: rgba(255,138,101,0.15); color: #ff8a65; }
.action-chip.posture { background: rgba(78,205,196,0.15); color: #4ecdc4; }
.action-chip.transition { background: rgba(78,205,196,0.1); color: #4ecdc4; }
.action-chip.spatial { background: rgba(212,160,23,0.15); color: #d4a017; }
.action-chip.play { background: rgba(124,179,66,0.2); color: #7cb342; }
.action-chip.body { background: rgba(255,193,7,0.12); color: #ffc107; }
.action-chip.attention { background: rgba(171,130,255,0.15); color: #ab82ff; }
.action-chip.pattern { background: rgba(255,152,0,0.15); color: #ff9800; }
.action-chip.tail { background: rgba(124,179,66,0.15); color: #7cb342; }
.action-chip.stress { background: rgba(244,67,54,0.2); color: #f44336; }
.action-chip.vocalization { background: rgba(255,138,101,0.2); color: #ff8a65; }
.action-chip.rest { background: rgba(76,175,80,0.12); color: #4caf50; }
.action-chip.system { background: rgba(255,255,255,0.05); color: #666; }

/* ── Action Section in Friendly Report ── */
.action-report-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
@media (max-width: 400px) { .action-report-grid { grid-template-columns: 1fr; } }
.action-report-item {
  padding: 8px 10px;
  background: rgba(171,130,255,0.06);
  border-radius: 6px;
  border-left: 3px solid rgba(171,130,255,0.3);
}
.action-report-name {
  font-size: 12px;
  font-weight: 700;
  color: #d4a0ff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.action-report-desc {
  font-size: 11px;
  color: #aaa;
  margin-top: 2px;
  line-height: 1.4;
}
.action-report-count {
  font-size: 9px;
  color: #888;
  margin-top: 2px;
}

/* ── Confidence Note ── */
.confidence-note { margin-top: 8px; padding: 8px 12px; background: rgba(212,160,23,0.08); border: 1px solid rgba(212,160,23,0.15); border-radius: 6px; font-size: 10px; color: #aaa; line-height: 1.5; }

/* ── Posture metric ── */
.metric-card.posture .value { text-transform: uppercase; font-size: 18px; color: #82b1ff; }

/* ── Emotion metrics 4-column ── */
.realtime-metrics { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 600px) { .realtime-metrics { grid-template-columns: repeat(2, 1fr) !important; } }

/* Safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .main-container { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
}