:root {
  /* Material Design 3 - Dark Theme */
  --md-primary: #a8c7fa;
  --md-on-primary: #003258;
  --md-primary-container: #004a77;
  --md-on-primary-container: #d3e4ff;

  --md-secondary: #b8c8da;
  --md-on-secondary: #23323f;
  --md-secondary-container: #394857;
  --md-on-secondary-container: #d4e4f6;

  --md-tertiary: #d6bee4;
  --md-on-tertiary: #3b2948;
  --md-tertiary-container: #523f5f;
  --md-on-tertiary-container: #f2daff;

  --md-error: #ffb4ab;
  --md-on-error: #690005;
  --md-error-container: #93000a;
  --md-on-error-container: #ffdad6;

  --md-success: #79dd72;
  --md-on-success: #003a03;
  --md-success-container: #005305;
  --md-on-success-container: #95fb8c;

  --md-warning: #f6c344;
  --md-on-warning: #3f2e00;
  --md-warning-container: #5b4300;
  --md-on-warning-container: #ffdea6;

  --md-background: #1a1c1e;
  --md-on-background: #e2e2e6;
  --md-surface: #1a1c1e;
  --md-on-surface: #e2e2e6;
  --md-surface-variant: #42474e;
  --md-on-surface-variant: #c2c7cf;

  --md-outline: #8c9199;
  --md-outline-variant: #42474e;

  --md-surface-container-lowest: #0f1113;
  --md-surface-container-low: #1a1c1e;
  --md-surface-container: #1e2022;
  --md-surface-container-high: #282a2c;
  --md-surface-container-highest: #333537;

  --md-surface-dim: #1a1c1e;
  --md-surface-bright: #3f4144;

  --md-inverse-surface: #e2e2e6;
  --md-inverse-on-surface: #2e3134;
  --md-inverse-primary: #00639b;

  --md-shadow: rgba(0, 0, 0, 0.3);
  --md-scrim: rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  margin: 0;
  background: var(--md-background);
  color: var(--md-on-background);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

header {
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  padding: 16px;
  text-align: center;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
              0 4px 5px 0 rgba(0, 0, 0, 0.14),
              0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

main {
  padding: 16px;
  max-width: 600px;
  margin: auto;
}

.hidden {
  display: none;
}

/* Inputs & Textareas */
input, select, textarea {
  width: 100%;
  padding: 16px;
  margin: 8px 0;
  font-size: 16px;
  font-family: inherit;
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: 12px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

input::placeholder, textarea::placeholder {
  color: var(--md-on-surface-variant);
}

input:focus, textarea:focus {
  border-color: var(--md-primary);
  background: var(--md-surface-container-high);
}

input:hover:not(:focus), textarea:hover:not(:focus) {
  border-color: var(--md-on-surface);
}

/* Buttons - Material 3 Filled */
button {
  width: 100%;
  padding: 14px 24px;
  margin: 8px 0;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  background: var(--md-primary);
  color: var(--md-on-primary);
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3),
              0 1px 3px 1px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
}

button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
}

button:hover::before {
  opacity: 0.08;
}

button:focus::before {
  opacity: 0.12;
}

button:active::before {
  opacity: 0.12;
}

button:active {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3),
              0 2px 6px 2px rgba(0, 0, 0, 0.15);
}

button:disabled {
  background: rgba(227, 227, 235, 0.12);
  color: rgba(227, 227, 235, 0.38);
  box-shadow: none;
  cursor: not-allowed;
}

button:disabled::before {
  display: none;
}

button.red {
  background: var(--md-error);
  color: var(--md-on-error);
}

button.gray {
  background: var(--md-surface-container-highest);
  color: var(--md-on-surface);
}

button.green {
  background: var(--md-success);
  color: var(--md-on-success);
}

button.orange {
  background: var(--md-warning);
  color: var(--md-on-warning);
}

button.yellow {
  background: var(--md-warning);
  color: var(--md-on-warning);
}

/* Outlined buttons */
button.outlined {
  background: transparent;
  color: var(--md-primary);
  border: 1px solid var(--md-outline);
  box-shadow: none;
}

button.outlined:hover {
  background: rgba(168, 199, 250, 0.08);
}

.button-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.button-row button {
  flex: 1;
  min-width: 30%;
}

/* Cards - Material 3 Elevated */
.exercise {
  background: var(--md-surface-container-low);
  padding: 16px;
  margin-bottom: 16px;
  border-radius: 16px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3),
              0 2px 6px 2px rgba(0, 0, 0, 0.15);
}

.exercise > div:first-child {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: 0.15px;
}

/* Series */
.series {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px;
  background: var(--md-surface-container);
  border-radius: 12px;
}

.series.pr-series {
  background: var(--md-tertiary-container);
  position: relative;
}

.series.pr-series::after {
  content: 'PR';
  position: absolute;
  top: -10px;
  right: 8px;
  background: var(--md-warning);
  color: var(--md-on-warning);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.series input[type="number"] {
  flex: 1;
  min-width: 60px;
  max-width: 100px;
  padding: 12px;
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}

.series input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--md-primary);
  cursor: pointer;
}

.small-btn {
  width: auto;
  padding: 10px 20px;
  font-size: 14px;
  min-width: 48px;
}

/* Canvas */
canvas {
  margin-top: 16px;
  max-width: 100%;
  border-radius: 12px;
}

/* Calendar */
.calendar-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.calendar-nav button {
  width: auto;
  padding: 10px 20px;
  background: var(--md-surface-container-highest);
  color: var(--md-primary);
  text-transform: none;
}

.calendar-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}

.calendar-header div {
  text-align: center;
  font-weight: 500;
  font-size: 12px;
  padding: 8px;
  color: var(--md-on-surface-variant);
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* History Items */
.history-item {
  background: var(--md-surface-container-low);
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 16px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3),
              0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.history-item b {
  display: block;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.15px;
}

.history-item button {
  width: auto;
  margin: 8px 8px 0 0;
  padding: 8px 16px;
  font-size: 13px;
}

.training-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--md-outline-variant);
}

/* Weight Items */
.weight-item {
  background: var(--md-surface-container);
  padding: 16px;
  margin: 8px 0;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.weight-item button {
  width: auto;
  margin: 0 0 0 8px;
  padding: 8px 16px;
  font-size: 13px;
}

/* Stats */
.stats-box {
  background: var(--md-surface-container-low);
  padding: 20px;
  margin: 16px 0;
  border-radius: 20px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3),
              0 2px 6px 2px rgba(0, 0, 0, 0.15);
}

.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}

.stat-item {
  text-align: center;
  padding: 24px 16px;
  background: var(--md-surface-container-highest);
  border-radius: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3),
              0 4px 8px 3px rgba(0, 0, 0, 0.15);
}

.stat-item .number {
  font-size: 36px;
  font-weight: 400;
  color: var(--md-primary);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.stat-item .label {
  font-size: 12px;
  color: var(--md-on-surface-variant);
  margin-top: 4px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* Template Items */
.template-item {
  background: var(--md-surface-container);
  padding: 16px;
  margin: 8px 0;
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.template-item.favorite {
  background: var(--md-tertiary-container);
  border: 1px solid var(--md-tertiary);
}

.template-item button {
  width: auto;
  margin: 0 0 0 8px;
  padding: 8px 16px;
  font-size: 13px;
}

/* PR Badge */
.pr-badge {
  display: inline-block;
  background: var(--md-warning-container);
  color: var(--md-on-warning-container);
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Loading */
.loading {
  text-align: center;
  padding: 32px;
  color: var(--md-on-surface-variant);
  font-size: 16px;
}

/* Sync Status */
.sync-status {
  position: fixed;
  top: 80px;
  right: 16px;
  background: var(--md-success-container);
  color: var(--md-on-success-container);
  padding: 12px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  display: none;
  z-index: 999;
  letter-spacing: 0.1px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3),
              0 4px 8px 3px rgba(0, 0, 0, 0.15);
}

/* Error Message */
.error-msg {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
  padding: 16px 20px;
  margin: 12px 0;
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.25px;
}

/* Theme Toggle - FAB */
.theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 24px;
  z-index: 1000;
  border: none;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3),
              0 4px 8px 3px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-toggle:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3),
              0 6px 12px 4px rgba(0, 0, 0, 0.15);
  transform: scale(1.05);
}

.theme-toggle:active {
  transform: scale(0.95);
}

/* Modal */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--md-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.modal {
  background: var(--md-surface-container-high);
  border-radius: 28px;
  padding: 24px;
  max-width: 400px;
  width: 90%;
  color: var(--md-on-surface);
  box-shadow: 0 8px 12px 6px rgba(0, 0, 0, 0.15),
              0 4px 4px 0 rgba(0, 0, 0, 0.3);
}

.modal h3 {
  margin: 0 0 16px 0;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0;
}

.modal p {
  margin: 0 0 24px 0;
  color: var(--md-on-surface-variant);
  line-height: 1.5;
  font-size: 14px;
  letter-spacing: 0.25px;
}

.modal input {
  margin-bottom: 16px;
}

.modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.modal-buttons button {
  width: auto;
  min-width: 100px;
  padding: 12px 24px;
  margin: 0;
}

/* Toast - Snackbar */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--md-inverse-surface);
  color: var(--md-inverse-on-surface);
  padding: 14px 24px;
  border-radius: 8px;
  z-index: 3000;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.25px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3),
              0 4px 8px 3px rgba(0, 0, 0, 0.15);
  min-width: 280px;
  max-width: 560px;
}

.toast.success {
  background: var(--md-success-container);
  color: var(--md-on-success-container);
}

.toast.error {
  background: var(--md-error-container);
  color: var(--md-on-error-container);
}

.toast.info {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}

.toast.warning {
  background: var(--md-warning-container);
  color: var(--md-on-warning-container);
}

/* Spinner - Material Circular Progress */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(168, 199, 250, 0.3);
  border-radius: 50%;
  border-top-color: var(--md-primary);
  animation: spin 1s linear infinite;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.button-spinner {
  pointer-events: none;
  opacity: 0.7;
}

/* Ripple effect hint */
button {
  position: relative;
  overflow: hidden;
}

/* Elevation levels */
.elevation-1 {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3),
              0 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.elevation-2 {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3),
              0 2px 6px 2px rgba(0, 0, 0, 0.15);
}

.elevation-3 {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3),
              0 4px 8px 3px rgba(0, 0, 0, 0.15);
}

/* State layers */
.state-layer {
  position: relative;
  overflow: hidden;
}

.state-layer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.state-layer:hover::before {
  opacity: 0.08;
}

.state-layer:focus::before {
  opacity: 0.12;
}

.state-layer:active::before {
  opacity: 0.12;
}
/* ===== SSWT 3.0 UI layer ===== */
:root {
  --sswt-max-width: 980px;
  --sswt-radius: 18px;
  --sswt-touch: 44px;
}

html { scroll-behavior: smooth; }
body { min-height: 100vh; }

main {
  width: min(100% - 24px, var(--sswt-max-width));
  max-width: var(--sswt-max-width);
  padding: 20px 0 96px;
}

header {
  text-align: left;
  padding: 14px max(16px, calc((100vw - var(--sswt-max-width)) / 2));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 18px;
}

button, input, select, textarea { min-height: var(--sswt-touch); }
button { text-transform: none; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

.button-row { align-items: stretch; }
.button-row button { min-width: 0; }

.stats-box, .exercise, .history-item { border: 1px solid var(--md-outline-variant); }

.quick-stats { border: 1px solid var(--md-outline-variant); }

#dashboardView > .button-row { margin-bottom: 8px; }

#dashboardView > .stats-box:first-of-type > div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.calendar-day {
  min-height: 54px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container);
}

@media (max-width: 700px) {
  main { width: min(100% - 16px, var(--sswt-max-width)); padding-top: 12px; }
  header { padding: 12px 10px; font-size: 16px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  #dashboardView > .stats-box:first-of-type > div { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .button-row button { width: 100%; margin: 0; }
  .series { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .series input[type="number"] { max-width: none; width: 100%; }
  .record-compact, .template-item, .weight-item { align-items: flex-start; }
  .record-actions { flex-wrap: wrap; }
  .calendar-nav button { padding: 10px 12px; }
  .toast { width: calc(100vw - 24px); min-width: 0; }
}

@media (max-width: 430px) {
  .button-row { grid-template-columns: 1fr; }
  .stats-row { gap: 8px; }
  .stat-item { padding: 18px 10px; }
  .stat-item .number { font-size: 30px; }
  .quick-stats { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* SSWT 4.0 foundation */
.sswt-toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translate(-50%, 16px);
  max-width: min(92vw, 520px);
  padding: 12px 16px;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 12px;
  background: var(--card-bg, #fff);
  color: var(--text-color, #111);
  box-shadow: 0 8px 30px rgba(0,0,0,.15);
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 10000;
}
.sswt-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.sswt-toast-warning { border-color: #d99b00; }
.sswt-toast-error { border-color: #c44; }
@media (prefers-reduced-motion: reduce) {
  .sswt-toast { transition: none; }
}

/* SSWT 4.0 - calendar presentation */
.calendar-empty-day { padding: 10px; background: var(--bg-secondary, #f8f8f8); border-radius: 5px; }
.calendar-day { padding: 15px; text-align: center; background: var(--bg-secondary, #e9ecef); color: var(--text-primary, #000); border-radius: 5px; font-weight: normal; }
.calendar-day.has-training { background: var(--green, #28a745); color: #fff; }
.calendar-day.is-today { background: var(--yellow, #ffc107); color: #fff; font-weight: bold; }
.calendar-day.has-training.is-today { background: var(--green, #28a745); }