/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 20px;
  border: 0; border-radius: var(--md-shape-full);
  font: inherit; font-weight: 500; letter-spacing: .1px; white-space: nowrap;
  cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--md-dur) var(--md-ease), background var(--md-dur) var(--md-ease), opacity var(--md-dur);
}
.btn .icon { width: 18px; height: 18px; margin-left: -4px; }
.btn:disabled { opacity: .38; cursor: default; }
.btn:active:not(:disabled) { transform: scale(.98); }
.btn-filled { background: var(--md-primary); color: var(--md-on-primary); }
.btn-tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.btn-text { background: transparent; color: var(--md-primary); padding: 0 12px; }
.btn-danger { background: transparent; color: var(--md-error); border: 1px solid color-mix(in srgb, var(--md-error) 50%, transparent); }
.btn-block { width: 100%; }
.btn-power-off { background: var(--md-surface-container-highest); color: var(--md-on-surface); }

.icon-btn {
  width: 40px; height: 40px; display: inline-grid; place-items: center; flex: none;
  border: 0; border-radius: var(--md-shape-full); background: transparent;
  color: var(--md-on-surface-variant); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background var(--md-dur) var(--md-ease);
}
.icon-btn:active { background: color-mix(in srgb, var(--md-on-surface) 12%, transparent); }

/* ---------- Outlined text field ---------- */
.field { position: relative; margin-bottom: 20px; }
.field input {
  width: 100%; height: 56px; padding: 22px 16px 6px; text-overflow: ellipsis;
  font: inherit; font-size: 16px; color: var(--md-on-surface);
  background: transparent; outline: 0;
  border: 1px solid var(--md-outline); border-radius: var(--md-shape-xs);
}
.field input:focus { border: 2px solid var(--md-primary); padding: 21px 15px 5px; }
.field label {
  position: absolute; left: 16px; top: 16px; pointer-events: none;
  font-size: 16px; line-height: 24px; color: var(--md-on-surface-variant);
  max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: all 150ms var(--md-ease); transform-origin: left top;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label { top: 6px; font-size: 12px; line-height: 16px; }
.field input:focus + label { color: var(--md-primary); }
.field input:-webkit-autofill { -webkit-text-fill-color: var(--md-on-surface); box-shadow: 0 0 0 40px var(--md-surface-container) inset; }
.field input:disabled { opacity: .38; cursor: default; }
.field input:disabled + label { opacity: .6; }
.field-hint { margin: 4px 16px 0; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }

/* ---------- Cards ---------- */
.card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 20px; border-radius: var(--md-shape-xl);
  background: var(--md-surface-container-low);
  border: 1px solid var(--md-outline-variant);
  color: inherit; text-decoration: none;
  transition: box-shadow var(--md-dur) var(--md-ease), transform var(--md-dur) var(--md-ease), background var(--md-dur) var(--md-ease);
}
.card.is-soon { opacity: .6; }
.card-icon {
  width: 48px; height: 48px; display: grid; place-items: center; flex: none;
  border-radius: var(--md-shape-lg);
  background: var(--md-primary-container); color: var(--md-on-primary-container);
  transition: background var(--md-dur) var(--md-ease), color var(--md-dur) var(--md-ease);
}
.card-surface { padding: 24px; background: var(--md-surface-container); border: 0; }

/* ---------- Chip / pill ---------- */
.chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; align-self: center; flex: none;
  border-radius: var(--md-shape-sm); font-size: 12px; font-weight: 500;
  background: var(--md-surface-container-high); color: var(--md-on-surface-variant);
}
.pill {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 6px; flex: none;
  border-radius: var(--md-shape-full); font-size: 13px; font-weight: 500;
  background: var(--md-surface-container-highest); color: var(--md-on-surface);
}
.pill .icon { width: 16px; height: 16px; color: var(--md-success); }
.pill.is-low .icon { color: var(--md-error); }

/* Фильтр-чипы (checkbox / radio внутри label) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-toggle { position: relative; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chip-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.chip-toggle span {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px;
  border: 1px solid var(--md-outline-variant); border-radius: var(--md-shape-sm);
  font-size: 14px; font-weight: 500; color: var(--md-on-surface-variant);
  transition: all var(--md-dur) var(--md-ease);
}
.chip-toggle input:checked + span {
  background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent;
}
.chip-toggle input:checked + span::before { content: "✓"; margin-right: 6px; }
.chip-toggle input:focus-visible + span { outline: 2px solid var(--md-primary); outline-offset: 2px; }

/* Сегментированная кнопка */
.segmented { display: inline-flex; border: 1px solid var(--md-outline); border-radius: var(--md-shape-full); overflow: hidden; flex: none; }
.segmented label { position: relative; cursor: pointer; flex: 1 0 auto; }
.segmented label + label { border-left: 1px solid var(--md-outline); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; white-space: nowrap; min-width: 48px; padding: 0 12px; font-weight: 500; color: var(--md-on-surface);
  transition: background var(--md-dur) var(--md-ease);
}
.segmented .icon { width: 18px; height: 18px; }
.segmented input:checked + span { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.segmented input:focus-visible + span { outline: 2px solid var(--md-primary); outline-offset: -2px; }
.segmented-lg { display: flex; width: 100%; }

/* ---------- Avatar ---------- */
.avatar {
  width: 40px; height: 40px; display: grid; place-items: center; flex: none;
  border-radius: var(--md-shape-full); font-size: 16px; font-weight: 500; text-transform: uppercase;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
}
.avatar-lg { width: 64px; height: 64px; font-size: 28px; }

/* ---------- Snackbar ---------- */
.snackbar {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 100;
  transform: translate(-50%, 24px); opacity: 0; pointer-events: none;
  min-width: min(280px, calc(100vw - 32px)); max-width: min(560px, calc(100vw - 32px)); padding: 14px 16px;
  border-radius: var(--md-shape-xs); box-shadow: var(--md-elev-3);
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface);
  transition: transform var(--md-dur) var(--md-ease), opacity var(--md-dur) var(--md-ease);
}
.snackbar.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Switch (M3) ---------- */
.switch {
  appearance: none; flex: none; position: relative; margin: 0; cursor: pointer;
  width: 52px; height: 32px; border-radius: var(--md-shape-full);
  background: var(--md-surface-container-highest); border: 2px solid var(--md-outline);
  transition: background var(--md-dur) var(--md-ease), border-color var(--md-dur) var(--md-ease);
}
.switch::before {
  content: ""; position: absolute; top: 50%; left: 6px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--md-outline); transform: translateY(-50%);
  transition: all var(--md-dur) var(--md-ease);
}
.switch:checked { background: var(--md-primary); border-color: var(--md-primary); }
.switch:checked::before { left: 22px; width: 24px; height: 24px; background: var(--md-on-primary); }
.switch:disabled { opacity: .38; cursor: default; }

/* ---------- Slider (M3-подобный, толстый трек) ---------- */
.slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
  accent-color: var(--md-primary); touch-action: pan-y;
}
.slider::-webkit-slider-runnable-track { height: 12px; border-radius: var(--md-shape-full); background: var(--md-secondary-container); }
.slider::-moz-range-track { height: 12px; border-radius: var(--md-shape-full); background: var(--md-secondary-container); }
.slider::-moz-range-progress { height: 12px; border-radius: var(--md-shape-full); background: var(--md-primary); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -8px; border-radius: 50%;
  background: var(--md-primary); border: 3px solid var(--md-surface-container-low); box-shadow: var(--md-elev-1);
}
.slider::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--md-primary); border: 3px solid var(--md-surface-container-low); box-shadow: var(--md-elev-1);
}
.slider-fill::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--md-primary) var(--p, 0%), var(--md-secondary-container) var(--p, 0%)); }
.slider-ct::-webkit-slider-runnable-track { background: linear-gradient(90deg, #ffb46b, #fff4e5, #cfe3ff); }
.slider-ct::-moz-range-track { background: linear-gradient(90deg, #ffb46b, #fff4e5, #cfe3ff); }
.slider-ct::-moz-range-progress { background: transparent; }
:root[data-theme="dark"] .slider-ct::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, color-mix(in srgb, #ffb46b 72%, var(--md-surface)), color-mix(in srgb, #fff4e5 48%, var(--md-surface)), color-mix(in srgb, #cfe3ff 72%, var(--md-surface)));
}
:root[data-theme="dark"] .slider-ct::-moz-range-track {
  background: linear-gradient(90deg, color-mix(in srgb, #ffb46b 72%, var(--md-surface)), color-mix(in srgb, #fff4e5 48%, var(--md-surface)), color-mix(in srgb, #cfe3ff 72%, var(--md-surface)));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .slider-ct::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, color-mix(in srgb, #ffb46b 72%, var(--md-surface)), color-mix(in srgb, #fff4e5 48%, var(--md-surface)), color-mix(in srgb, #cfe3ff 72%, var(--md-surface)));
  }
  :root:not([data-theme="light"]) .slider-ct::-moz-range-track {
    background: linear-gradient(90deg, color-mix(in srgb, #ffb46b 72%, var(--md-surface)), color-mix(in srgb, #fff4e5 48%, var(--md-surface)), color-mix(in srgb, #cfe3ff 72%, var(--md-surface)));
  }
}

/* ---------- Select ---------- */
.select {
  height: 40px; min-width: 0; max-width: 60%; padding: 0 32px 0 12px; font: inherit; font-weight: 500;
  color: var(--md-on-surface); background-color: var(--md-surface-container-high);
  border: 0; border-radius: var(--md-shape-sm); cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px; background-repeat: no-repeat;
  text-overflow: ellipsis;
}
.select option { background: var(--md-surface-container-high); color: var(--md-on-surface); }
input[type="time"].select { padding-right: 12px; background-image: none; }

/* ---------- Progress meter ---------- */
.meter { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border: 0; border-radius: 3px; overflow: hidden; background: var(--md-secondary-container); }
.meter::-webkit-progress-bar { background: var(--md-secondary-container); }
.meter::-webkit-progress-value { background: var(--md-primary); border-radius: 3px; }
.meter::-moz-progress-bar { background: var(--md-primary); border-radius: 3px; }
.meter.is-low::-webkit-progress-value { background: var(--md-error); }
.meter.is-low::-moz-progress-bar { background: var(--md-error); }

/* ---------- Form message ---------- */
.form-error { min-height: 20px; margin-bottom: 12px; line-height: 20px; font-size: 14px; color: var(--md-error); }

/* ---------- Dropdown (кастомный select) ---------- */
.dd { position: relative; display: inline-block; min-width: 0; max-width: 100%; }
.dd-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px;
  padding: 0 8px 0 14px; border: 0; border-radius: var(--md-shape-sm); font: inherit; font-weight: 500; text-align: left;
  color: var(--md-on-surface); background: var(--md-surface-container-high); cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.dd-btn .icon { width: 20px; height: 20px; transition: transform var(--md-dur) var(--md-ease); }
.dd-btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.dd-text { overflow: hidden; text-overflow: ellipsis; }
.dd-menu {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: min(320px, 86vw);
  max-height: 280px; overflow-y: auto; padding: 4px; border-radius: var(--md-shape-md);
  background: var(--md-surface-container-high); color: var(--md-on-surface); box-shadow: var(--md-elev-3);
}
.dd-end .dd-menu { left: auto; right: 0; }
.dd-up .dd-menu { top: auto; bottom: calc(100% + 4px); }
.dd-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 12px;
  border-radius: var(--md-shape-sm); cursor: pointer; white-space: nowrap; outline: none;
}
.dd-item .icon { width: 18px; height: 18px; visibility: hidden; }
.dd-item.is-selected { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.dd-item.is-selected .icon { visibility: visible; }
.dd-item:focus-visible { background: color-mix(in srgb, var(--md-on-surface) 10%, transparent); }
.dd-item.is-selected:focus-visible { background: color-mix(in srgb, var(--md-on-secondary-container) 12%, var(--md-secondary-container)); }
.dd-inline .dd-btn { min-height: 32px; padding: 0 4px 0 8px; background: transparent; color: inherit; font-size: 16px; border-radius: var(--md-shape-sm); }
.dd-inline .dd-menu { min-width: 180px; }
.setting-row .dd { max-width: 60%; }

.num-input {
  height: 40px; padding: 0 12px; border: 1px solid var(--md-outline); border-radius: var(--md-shape-md);
  background: transparent; color: inherit; font: inherit; text-align: center;
}
.num-input:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 1px; }

/* Свой цвет подсветки ПК: нативный выбор цвета в виде кружка-свотча */
.color-input { min-width: 40px; min-height: 40px; width: 40px; height: 40px; padding: 0; border: 2px dashed var(--md-outline); border-radius: 50%; background: none; cursor: pointer; }
.color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.color-input::-webkit-color-swatch { border: none; border-radius: 50%; }
.color-input::-moz-color-swatch { border: none; border-radius: 50%; }

@media (pointer: coarse) {
  .num-input, .select, .mini-input input, textarea { font-size: 16px; }
}

@media (hover: hover) {
  .btn-filled:hover:not(:disabled) { box-shadow: var(--md-elev-1); }
  .btn-tonal:hover:not(:disabled) { box-shadow: var(--md-elev-1); }
  .btn-text:hover:not(:disabled) { background: color-mix(in srgb, var(--md-primary) 8%, transparent); }
  .btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--md-error) 8%, transparent); }
  .btn-power-off:hover:not(:disabled) { box-shadow: var(--md-elev-1); }
  .icon-btn:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
  .field input:hover { border-color: var(--md-on-surface); }
  a.card:hover { box-shadow: var(--md-elev-2); transform: translateY(-2px); }
  .dd-item:hover, .dd-item:focus-visible { background: color-mix(in srgb, var(--md-on-surface) 10%, transparent); }
  .dd-item.is-selected:hover, .dd-item.is-selected:focus-visible { background: color-mix(in srgb, var(--md-on-secondary-container) 12%, var(--md-secondary-container)); }
  .dd-inline .dd-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
}