/* ===========================================================
   Nicla Sense ME – Live-Tritt-Tracker
   Globale Styles (unverändert aus der Monolith-Version)
   =========================================================== */

body { background:#0A1128; color:#00E5FF; font-family:'Courier New',Courier,monospace;
  display:flex; flex-direction:column; align-items:center; padding:30px; margin:0; }
h1 { color:#F1F1F1; text-shadow:0 0 10px rgba(0,229,255,0.5); text-align:center; }
h3 { margin-top:0; }
.panel { border:1px solid #1c2d5a; background:#0f183b; padding:20px; border-radius:6px;
  width:100%; max-width:640px; margin-bottom:20px; box-shadow:0 4px 15px rgba(0,0,0,0.5); }
.status-bar { background:#060a17; padding:10px; border-left:4px solid #00E5FF; margin-bottom:20px; font-weight:bold; }
button { background:transparent; color:#00E5FF; border:2px solid #00E5FF; padding:10px 15px; margin:5px;
  font-weight:bold; font-family:inherit; cursor:pointer; transition:all 0.2s; border-radius:4px; }
button:hover:not(:disabled) { background:#00E5FF; color:#0A1128; box-shadow:0 0 10px #00E5FF; }
button:disabled { border-color:#3a506b; color:#3a506b; cursor:not-allowed; }
.controls { display:flex; flex-wrap:wrap; justify-content:space-between; }
.data-readout { font-size:0.85em; color:#a1b5d8; margin-top:10px; white-space:pre-wrap; }
.divider { border-top:1px dashed #1c2d5a; margin:15px 0; padding-top:10px; }
.recording-active { background:#00E5FF!important; color:#0A1128!important; box-shadow:0 0 15px #00E5FF; }
.recording-kick   { background:#00ff99!important; border-color:#00ff99!important; color:#0A1128!important; box-shadow:0 0 18px #00ff99; }
.btn-kick  { border-color:#00ff99; color:#00ff99; }
.btn-kick:hover:not(:disabled)  { background:#00ff99; color:#0A1128; box-shadow:0 0 10px #00ff99; }

.live-status { font-size:2.0em; font-weight:bold; text-align:center; padding:18px; border-radius:8px;
  margin:8px 0; border:2px solid #3a506b; transition:all 0.12s; }
.live-status small { display:block; font-size:0.32em; font-weight:normal; color:#a1b5d8; margin-top:6px; letter-spacing:1px; }
.live-status.off   { color:#3a506b; border-color:#3a506b; }
.live-status.other { color:#00E5FF; border-color:#00E5FF; box-shadow:0 0 14px rgba(0,229,255,0.22); }
.live-status.move  { color:#F1F1F1; border-color:#F1F1F1; }
.live-status.kick  { color:#06210f; background:#00ff99; border-color:#00ff99; box-shadow:0 0 26px #00ff99; }

.kick-counter { font-size:2.4em; color:#00ff99; text-align:center; font-weight:bold; text-shadow:0 0 12px rgba(0,255,153,0.5); margin:6px 0; }
.kick-counter small { font-size:0.35em; color:#a1b5d8; display:block; }
.kick-log { font-size:0.8em; color:#a1b5d8; background:#060a17; border:1px solid #1c2d5a; border-radius:4px; padding:8px; margin-top:10px; min-height:40px; white-space:pre-wrap; }

.save-toast { display:none; position:fixed; top:24px; left:50%; transform:translateX(-50%); padding:16px 28px;
  border-radius:8px; font-weight:bold; font-size:1.3em; text-align:center; z-index:1000; box-shadow:0 0 30px rgba(0,0,0,0.6); pointer-events:none; }
.save-toast small { display:block; font-size:0.6em; font-weight:normal; margin-top:4px; }
.save-toast.show { display:block; animation:toastPop 1.6s ease-out forwards; }
.save-toast.kick  { background:#00ff99; color:#06210f; border:2px solid #00ff99; }
.save-toast.other { background:#00E5FF; color:#06212a; border:2px solid #00E5FF; }
.save-toast.warn  { background:#FF0055; color:#2a0010; border:2px solid #FF0055; }
@keyframes toastPop { 0%{opacity:0; transform:translateX(-50%) translateY(-12px) scale(0.9);}
  10%{opacity:1; transform:translateX(-50%) translateY(0) scale(1.04);} 20%{transform:translateX(-50%) scale(1);}
  82%{opacity:1;} 100%{opacity:0; transform:translateX(-50%) translateY(-6px);} }

.peak-readout { margin-top:12px; font-size:0.9em; color:#F1F1F1; background:#060a17; border:1px solid #1c2d5a;
  border-left:4px solid #00ff99; border-radius:4px; padding:10px; }
.peak-readout .big { font-size:1.5em; font-weight:bold; }
.peak-bar-bg { height:10px; margin-top:8px; background:#0d1530; border:1px solid #1c2d5a; border-radius:5px; overflow:hidden; position:relative; }
.peak-bar-fill { height:100%; width:0%; background:#00ff99; border-radius:5px; transition:width 0.2s; }
.peak-thr-mark { position:absolute; top:-3px; bottom:-3px; width:2px; background:#FF0055; }

.wave-wrap { margin-top:12px; }
.wave-canvas { width:100%; height:130px; background:#060a17; border:1px solid #1c2d5a; border-radius:4px; display:block; }
.capture-info { font-size:0.85em; margin-top:8px; padding:8px; border-radius:4px; background:#060a17; border-left:4px solid #3a506b; color:#a1b5d8; }
.capture-info.ok   { border-left-color:#00ff99; color:#cfeede; }
.capture-info.warn { border-left-color:#FF0055; color:#ffd0dd; }

.capture-meter { margin-top:12px; display:flex; align-items:center; gap:10px; font-size:0.8em; }
.capture-meter label { white-space:nowrap; color:#a1b5d8; }
.meter-bar-bg { flex:1; height:8px; background:#0d1530; border:1px solid #1c2d5a; border-radius:4px; overflow:hidden; position:relative; }
.meter-bar-fill { height:100%; width:0%; background:#00E5FF; transition:width 0.08s linear, background 0.2s; border-radius:4px; }
.meter-bar-fill.active { background:#00ff99; }
.meter-thr-mark { position:absolute; top:-2px; bottom:-2px; width:2px; background:#FF0055; left:50%; }

.gesture-flash { display:none; position:fixed; inset:0; pointer-events:none; border:4px solid #00ff99;
  box-shadow:inset 0 0 40px rgba(0,255,153,0.15); animation:fadeFlash 0.6s ease-out forwards; z-index:999; }
@keyframes fadeFlash { 0%{opacity:1;} 100%{opacity:0;} }

.slider-row { display:flex; align-items:center; gap:10px; margin-top:8px; }
.slider-row label { white-space:nowrap; color:#a1b5d8; font-size:0.85em; }
input[type=range] { flex:1; accent-color:#00E5FF; cursor:pointer; }
.slider-val { min-width:34px; text-align:right; color:#F1F1F1; font-size:0.85em; }
.hint { font-size:0.78em; color:#4a6080; margin-top:6px; line-height:1.5; }

.guide { font-size:0.9em; color:#c9d6ee; line-height:1.6; }
.guide ol { padding-left:20px; }
.guide li { margin-bottom:10px; }
.guide b { color:#F1F1F1; }
.tag { display:inline-block; padding:1px 7px; border-radius:4px; font-weight:bold; font-size:0.85em; }
.tag.other { background:#0d2b33; color:#00E5FF; border:1px solid #00E5FF; }
.tag.kick  { background:#0d2b1c; color:#00ff99; border:1px solid #00ff99; }