.toys-view {
  min-height: 100vh;
  margin: -4px -6px 0 -8px;
  padding: 40px 32px 136px;
  background: var(--page-background);
  color: var(--text);
}

.toy-screen { width: 100%; }
.toy-module-header { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 24px; margin-bottom: 24px; }
.toy-module-header h1, .toy-form-header h1 { margin: 0 0 6px; color: var(--text); font-size: 28px; font-weight: 700; line-height: 34px; }
.toy-module-header p, .toy-form-header p { margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.toy-button { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 8px 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--history-bg); color: var(--history-text); font: 700 12px/1 Inter, Arial, sans-serif; cursor: pointer; }
.toy-button:hover, .toy-button:focus-visible { background: #e4eaf0; }
.toy-button:focus-visible, .toy-field input:focus-visible, .toy-field select:focus-visible, .toy-field textarea:focus-visible { outline: 2px solid rgb(120 144 156 / 24%); outline-offset: 1px; }
.toy-button:disabled { cursor: not-allowed; opacity: .5; }
.toy-button--primary { border-color: transparent; background: var(--sidebar); color: #fff; }
.toy-button--primary:hover, .toy-button--primary:focus-visible { background: var(--sidebar-active); }
.toy-button--secondary { background: var(--surface); color: var(--action-secondary-text); }
.toy-list-controls { display: flex; align-items: flex-end; justify-content: space-between; min-height: 86px; gap: 24px; margin-bottom: 24px; }
.toy-search { display: flex; width: 520px; max-width: 100%; flex-direction: column; gap: 8px; color: var(--text); font-size: 12px; font-weight: 700; }
.toy-search input, .toy-field input, .toy-field select, .toy-field textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: 400 12px/20px Inter, Arial, sans-serif; }
.toy-search input, .toy-field input, .toy-field select { height: 40px; padding: 8px 12px; }
.toy-search input::placeholder, .toy-field input::placeholder, .toy-field textarea::placeholder { color: var(--muted); opacity: 1; }
.toy-filters { display: flex; align-items: center; gap: 12px; }
.toy-filter--active { background: var(--surface); color: var(--action-secondary-text); }
.toy-table-card, .toy-form-card { width: 100%; padding: 20px; border: 0; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.toy-table-card h2, .toy-form-card h2 { margin: 0 0 12px; color: var(--text); font-size: 16px; font-weight: 700; line-height: 22px; }
.toy-table-wrap { overflow-x: auto; }
.toy-table { width: 1096px; min-width: 1096px; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.toy-table th, .toy-table td { height: 48px; padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toy-table th { height: 40px; overflow: visible; background: var(--history-bg); color: var(--muted); font-size: 12px; font-weight: 500; text-overflow: clip; }
.toy-table th:nth-child(1), .toy-table td:nth-child(1) { width: 390px; }
.toy-table th:nth-child(2), .toy-table td:nth-child(2) { width: 110px; padding-right: 8px; padding-left: 8px; text-align: center; }
.toy-table th:nth-child(3), .toy-table td:nth-child(3) { width: 110px; padding-right: 8px; padding-left: 8px; text-align: center; }
.toy-table th:nth-child(4), .toy-table td:nth-child(4) { width: 170px; }
.toy-table th:nth-child(5), .toy-table td:nth-child(5) { width: 120px; }
.toy-table th:nth-child(6), .toy-table td:nth-child(6) { width: 196px; padding-right: 8px; padding-left: 8px; text-align: center; }
.toy-table tbody tr:last-child td { border-bottom: 0; }
.toy-status { display: inline-flex; align-items: center; justify-content: center; height: 22px; padding: 4px 12px; border: 1px solid; border-radius: 6px; font-size: 12px; font-weight: 700; line-height: 14px; white-space: nowrap; }
.toy-status--active { border-color: var(--confirmed-border); background: var(--confirmed-bg); color: var(--confirmed-text); }
.toy-status--inactive { border-color: var(--history-border); background: var(--history-bg); color: var(--history-text); }
.toy-actions-cell { text-align: center !important; }
.toy-row-action { margin-left: 8px; padding: 8px 12px; }
.toy-row-action--neutral { background: var(--surface); color: var(--action-secondary-text); }
.toy-empty-state { margin: 16px 0 0; color: var(--muted); font-size: 13px; }

.toy-form-screen { padding-bottom: 0; }
.toy-form-header { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
.toy-form-heading-row { display: flex; width: 100%; align-items: flex-start; justify-content: space-between; gap: 24px; }
.toy-form-heading-actions { position: relative; display: flex; align-items: center; gap: 12px; padding-top: 14px; }
#toy-status-action { width: 153px; }
.toy-form-card { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; overflow: hidden; }
.toy-form-card h2 { margin: 0; font-size: 18px; line-height: 24px; }
.toy-form-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; margin-bottom: 16px; }
.toy-form-duo .toy-form-card { margin-bottom: 0; }
.toy-linked-events-warning { display: flex; flex-direction: column; gap: 8px; min-height: 78px; margin: 0 0 16px; padding: 16px; border: 0; border-radius: 8px; background: #fff4e5; box-shadow: inset 0 0 0 1px #f4a259; color: #8a4b08; }
.toy-linked-events-warning strong { font: 500 14px/20px Inter, Arial, sans-serif; }
.toy-linked-events-warning span { font: 400 13px/18px Inter, Arial, sans-serif; }
.toy-form-grid { display: grid; gap: 16px; }
.toy-form-grid--main { grid-template-columns: 428px 260px 160px 200px; }
.toy-form-grid--operation, .toy-form-grid--infrastructure { display: flex; flex-direction: column; gap: 8px; }
.toy-form-grid__row { display: grid; width: 100%; min-width: 0; gap: 16px; }
.toy-form-grid__row--monitor { grid-template-columns: 200px minmax(0, 1fr); min-height: 63px; }
.toy-form-grid__row--times, .toy-form-grid__row--infrastructure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.toy-form-grid__row--infrastructure { min-height: 63px; }
.toy-form-grid__row--monitor > .toy-choice-field, .toy-form-grid__row--infrastructure > .toy-choice-field { align-self: start; }
.toy-form-grid__row .toy-choice-group { margin-top: 8px; }
.toy-form-grid__row--voltage { grid-template-columns: minmax(0, 1fr); }
.toy-form-grid--main .toy-field:nth-child(4) input { text-align: right; }
.toy-form-auxiliary { display: grid; grid-template-columns: 428px 260px 160px 200px; gap: 16px; width: 100%; }
.toy-form-auxiliary p { margin: 0; color: var(--muted); font: 400 12px/16px Inter, Arial, sans-serif; }
.toy-field { display: flex; min-width: 0; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; color: var(--text); font-size: 12px; font-weight: 700; }
.toy-field textarea { height: 72px; min-height: 72px; padding: 12px; line-height: 20px; resize: vertical; }
.toy-field select:disabled { background: var(--history-bg); color: var(--muted); cursor: not-allowed; }
.toy-field legend { margin: 0; padding: 0; font: 500 14px/20px Inter, Arial, sans-serif; }
.toy-form-status-row { display: flex; align-items: center; gap: 12px; color: var(--muted); font: 500 14px/20px Inter, Arial, sans-serif; }
.toy-form-status-row > span:first-child { width: 63px; }
.toy-info-layout { display: flex; width: 100%; flex-direction: column; gap: 12px; }
.toy-info-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
.toy-info-description { width: 100%; }
.toy-info-textarea-field > span, .toy-show-on-site-field legend { font: 500 14px/20px Inter, Arial, sans-serif; }
.toy-info-textarea-field textarea { font-size: 14px; }
.toy-show-on-site-field { width: 360px; }
.toy-show-on-site-field { min-height: 60px; height: auto; }
.toy-show-on-site-field .toy-choice-group { margin-top: 8px; }
.toy-choice-group { display: flex; gap: 8px; }
.toy-choice-group label { position: relative; display: inline-flex; min-width: 72px; height: 32px; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 500; cursor: pointer; }
.toy-choice-group label::before { width: 14px; height: 14px; flex: 0 0 14px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); content: ''; }
.toy-choice-group input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toy-choice-group label:has(input:checked) { border-color: var(--sidebar); background: var(--history-bg); font-weight: 700; }
.toy-choice-group label:has(input:checked)::before { border-color: var(--sidebar); background: radial-gradient(circle, var(--sidebar) 0 3px, var(--history-bg) 4px 100%); }
.toy-choice-group label:has(input:focus-visible) { outline: 2px solid rgb(120 144 156 / 24%); outline-offset: 1px; }
.toy-show-on-site-field small { color: var(--muted); font: 400 12px/16px Inter, Arial, sans-serif; }
.toy-form-error { margin: 12px 0 0; color: #b42318; font-size: 12px; font-weight: 700; }
.toy-form-footer { position: fixed; z-index: 25; right: 0; bottom: 0; left: 240px; display: flex; align-items: center; justify-content: space-between; min-height: 104px; gap: 24px; padding: 20px 32px; border-top: 1px solid var(--border); background: var(--surface); }
.toy-form-footer > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.toy-form-footer strong { font-size: 16px; line-height: 22px; }
.toy-form-footer span { color: var(--muted); font-size: 13px; line-height: 18px; }
.toy-form-footer__actions { display: flex; align-items: center; gap: 12px; }

.toy-modal { position: fixed; z-index: 110; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.toy-modal[hidden] { display: none; }
.toy-modal__backdrop { position: absolute; inset: 0; background: rgb(38 50 56 / 45%); }
.toy-modal__dialog { position: relative; display: flex; width: min(560px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; flex-direction: column; gap: 16px; margin-left: 240px; padding: 24px; border: 0; border-radius: 8px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border), 0 12px 32px rgb(26 38 46 / 24%); transform: translateY(-45px); }
.toy-modal__dialog h2 { margin: 0; color: var(--text); font-size: 20px; line-height: 24px; }
.toy-modal__dialog > p { margin: 0; color: var(--muted); font-size: 12px; line-height: 18px; }
.toy-modal__warning { width: 100%; min-height: 60px; padding: 12px 16px; border: 0; border-radius: 8px; background: #fff4e5; box-shadow: inset 0 0 0 1px #f4a259; color: #8a4b08 !important; font-size: 12px !important; line-height: 18px !important; }
.toy-modal__actions { display: flex; width: 100%; height: 32px; align-items: center; justify-content: flex-end; gap: 12px; margin: 0; }
.toy-modal__actions #toy-confirmation-cancel { width: 68px; }
.toy-modal__actions #toy-confirmation-submit.toy-button--danger { width: 140px; }
.toy-modal__actions #toy-confirmation-submit.toy-button--primary { width: 144px; }
.toy-button--danger { border-color: transparent; background: #c71f26; color: #ffffff; }
.toy-button--danger:hover, .toy-button--danger:focus-visible { background: #a7191f; }

@media (min-width: 640px) and (max-width: 1023px) {
  .toys-view { padding: 24px 24px 136px; }
  .toy-list-controls { align-items: stretch; flex-direction: column; }
  .toy-search { width: 100%; }
  .toy-filters { justify-content: flex-end; }
  .toy-form-duo { grid-template-columns: minmax(0, 1fr); }
  .toy-form-grid--main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toy-form-auxiliary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toy-info-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1441px) {
  .toy-form-grid--main { grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr) 160px 200px; }
  .toy-form-auxiliary { grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr) 160px 200px; }
  .toy-info-description { width: 100%; }
  .toy-table { width: 100%; min-width: 1096px; }
  .toy-table th:nth-child(1), .toy-table td:nth-child(1) { width: auto; }
}

@media (max-width: 639px) {
  .toys-view { min-height: calc(100vh - 56px); margin: 0; padding: 16px 16px 184px; }
  .toy-module-header { align-items: flex-start; flex-direction: column; gap: 16px; margin-bottom: 20px; }
  .toy-module-header h1, .toy-form-header h1 { font-size: 24px; line-height: 30px; }
  .toy-module-header .toy-button { align-self: stretch; }
  .toy-list-controls { align-items: stretch; flex-direction: column; gap: 16px; margin-bottom: 16px; }
  .toy-search { width: 100%; }
  .toy-filters { justify-content: flex-start; }
  .toy-table-card, .toy-form-card { padding: 16px; }
  .toy-form-heading-row { flex-direction: column; gap: 8px; }
  .toy-form-heading-actions { width: 100%; justify-content: flex-start; padding-top: 0; }
  .toy-form-duo { grid-template-columns: minmax(0, 1fr); }
  .toy-form-grid--main { grid-template-columns: minmax(0, 1fr); }
  .toy-form-auxiliary { grid-template-columns: minmax(0, 1fr); }
  .toy-form-auxiliary > span { display: none; }
  .toy-info-row { grid-template-columns: minmax(0, 1fr); }
  .toy-choice-group label { flex: 1 1 0; }
  .toy-form-footer { left: 0; align-items: stretch; flex-direction: column; gap: 12px; min-height: 168px; padding: 16px; }
  .toy-form-footer__actions { width: 100%; }
  .toy-form-footer__actions .toy-button { flex: 1 1 0; min-width: 0; padding-right: 8px; padding-left: 8px; }
  .toy-modal { padding: 16px; }
  .toy-modal__dialog { margin-left: 0; transform: none; }
  .toy-modal__dialog { padding: 16px; }
  .toy-modal__actions { flex-direction: column-reverse; }
  .toy-modal__actions .toy-button { width: 100%; }
}

@media (min-width: 640px) and (max-width: 700px), (max-width: 399px) {
  .toy-form-grid__row--monitor, .toy-form-grid__row--times, .toy-form-grid__row--infrastructure, .toy-form-grid__row--voltage { grid-template-columns: minmax(0, 1fr); }
}