/* --- START OF mystyle.css --- */

:root{
  --bg:#0a0c12;
  --card:#12151b;
  --border:#1f2330;
  --accent:#00ffcc;
  --accent-2:#3bc2ff;
  --text:#e0e6ef;
  --muted:#9aa7b5;
  --warn:#ffcc00;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'Share Tech Mono', monospace;
  margin: 0;
  padding: 20px;
  font-size: 16px;
}

.page{ max-width: 1280px; margin: 0 auto; }
.page-header{ margin-bottom: 16px; }

h1 {
  font-family: 'Audiowide', sans-serif;
  font-size: 40px;
  color: var(--accent);
  text-align: center;
  letter-spacing: 0.5px;
  text-shadow: 0 0 5px var(--accent), 0 0 12px rgba(0,255,204,0.6);
  margin: 8px 0 18px 0;
}

/* Card container */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0)), var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.02);
  padding: 14px;
  margin-bottom: 16px;
}
.section-title{ font-size: 18px; color: var(--muted); margin: 4px 2px 12px 2px; }

/* Animation section (re-uses existing selectors) */
#breathing-section{ width: 100%; margin: 0 auto 16px auto; padding: 12px; }
.breathing-title{ font-size: 20px; margin: 6px 6px 10px 6px; color: #dfefff; letter-spacing: 0.5px; text-shadow: 0 0 6px #00ffcc55; }
#breathingCanvas{ width: 100%; height: 720px; display: block; background: transparent; }

/* Speed buttons */
.breathing-speed-controls{ display:flex; align-items:center; gap:10px; margin: 10px 6px 0 6px; flex-wrap: wrap; }
.breathing-speed-controls .label{ color:#cfcfcf; font-size:16px; }
.breathing-speed-controls button{ border: 2px solid var(--accent); color: var(--accent); padding: 6px 12px; font-size: 14px; min-width: 84px; border-radius: 8px; background: rgba(0,0,0,0.2); }
.breathing-speed-controls button.active{ background: var(--accent); color: #0a0410; box-shadow: 0 0 10px var(--accent), inset 0 0 8px rgba(0,255,204,0.66); }

/* Toolbar / Control panel */
.control-panel{ padding: 10px 12px; }
.toolbar{ display:flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; justify-content: space-between; }
.toolbar-group{ display:flex; align-items:center; gap: 12px; }
.fields{ flex: 1 1 520px; justify-content: flex-start; }
.file-actions{ flex: 1 1 320px; justify-content: flex-end; }

.status-pill{ padding: 8px 12px; border:1px solid var(--border); border-radius: 999px; background: #0e1620; color: var(--accent); box-shadow: inset 0 0 0 1px rgba(0,255,204,0.25); }
.rate-display{ color: var(--muted); font-size: 13px; letter-spacing: 0.4px; }
.rate-display span{ color: var(--accent-2); font-weight: bold; }
.total-count{ color: var(--muted); font-weight: normal; font-size: 12px; }
.total-count span{ color: var(--warn); font-weight: bold; font-size: 12px; }

.field{ display:flex; flex-direction: column; gap:6px; min-width: 140px; }
.field-label{ font-size: 12px; color: var(--muted); }
.field input, .field select{ background:#0b1118; color: var(--text); border:1px solid var(--border); padding:10px 12px; border-radius: 8px; outline:none; min-width: 140px; }
.field input:focus, .field select:focus{ border-color: var(--accent); box-shadow: 0 0 0 2px rgba(0,255,204,0.15); }
.field.checkbox{ flex-direction: row; align-items: center; gap:10px; padding-top: 14px; }

/* Buttons */
button{ font-family: 'Share Tech Mono', monospace; background-color: transparent; padding: 10px 15px; text-align: center; text-decoration: none; font-size: 16px; margin: 6px 5px; border-radius: 8px; outline: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease; opacity: 0.95; border: 2px solid var(--accent); color: var(--accent); }
button:hover{ background-color: var(--accent); color: #0a0410; box-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent-2); }
button:active{ transform: scale(0.97); }

/* Plot grid */
.plots-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 16px 0; }
.widget{ padding: 10px; background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.08)); border: 1px solid var(--border); border-radius: 12px; }
.widget p{ font-family: 'Audiowide', sans-serif; color: var(--accent-2); font-size: 18px; text-shadow: 0 0 4px rgba(59,194,255,0.6); margin-top: 6px; margin-bottom: 8px; border-bottom: 1px solid rgba(59,194,255,0.25); padding-bottom: 6px; }
.plot{ height: 220px; width: 100%; background-color: #000000cc; border: 1px dashed rgba(255,255,255,0.08); border-radius: 8px; }

/* Activity label section */
.labelbutton{ display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 6px 0 10px; background: transparent; }
.labelbutton button{ border: 2px solid #ff00ff; color: #ff80ff; background: rgba(255,0,255,0.08); }
.labelbutton button:hover{ background:#ff00ff; color:#0a0410; box-shadow: 0 0 18px #ff00ff; }
.activity-label{ font-size: 16px; color: var(--muted); margin: 8px 2px 2px 2px; white-space: pre-line; }

/* Legacy ids used elsewhere */
#infoBar, #labelText{ font-size: 18px; }

/* Responsive */
@media (max-width: 900px){ .plots-grid{ grid-template-columns: 1fr; } .toolbar{ gap: 10px; } }

/* --- END OF mystyle.css --- */