.screen-topbar, .screen-actions { display: flex; align-items: end; flex-wrap: wrap; gap: 9px; margin: 16px 0; }
.screen-topbar label, .screen-actions label, .screen-schedule-form > label { display: grid; gap: 5px; font-size: 12px; font-weight: 700; }
.screen-topbar input, .screen-topbar select, .screen-actions input, .screen-schedule-form select,
.screen-schedule-form input[type="time"], .screen-properties input, .screen-properties select,
.screen-properties textarea { border: 1px solid var(--line); border-radius: 8px; min-height: 35px; padding: 6px 8px; background: #fff; color: var(--ink); }
.screen-topbar #screenName { width: 180px; }
.screen-editor { display: grid; grid-template-columns: 135px minmax(280px, 1fr) 260px; gap: 16px; align-items: start; }
.screen-editor h3, .screen-schedule-panel h3 { margin: 4px 0 12px; font-size: 14px; }
.screen-toolbox, .screen-inspector { display: grid; gap: 7px; border: 1px solid var(--line); border-radius: 11px; padding: 13px; background: #fbfdfc; }
.screen-inspector { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.screen-toolbox .button { justify-content: flex-start; }
.screen-stage { display: grid; justify-items: center; min-width: 0; padding: 13px; background: #eef2f0; border-radius: 11px; }
.screen-stage .section-meta { margin: 0 0 10px; text-align: center; }
.screen-canvas { position: relative; width: min(100%, 426px); aspect-ratio: 568 / 760; background: white; border: 1px solid #b1c2c5; box-shadow: 0 12px 22px #102a391c; overflow: hidden; touch-action: none; }
.screen-element { position: absolute; overflow: hidden; cursor: move; user-select: none; box-sizing: border-box; }
.screen-element.selected { outline: 2px solid #007e77; outline-offset: 1px; }
.screen-element.locked { cursor: default; }
.screen-element img { display: block; width: 100%; height: 100%; pointer-events: none; }
.screen-element .resize-handle { position: absolute; right: 0; bottom: 0; width: 12px; height: 12px; background: var(--teal); border: 2px solid white; cursor: nwse-resize; }
.screen-layers { display: grid; gap: 5px; min-width: 0; max-height: 260px; overflow: auto; }
.screen-layers button { width: 100%; text-align: left; white-space: normal; min-width: 0; }
.screen-layers button.active { border-color: var(--teal); background: var(--teal-soft); }
.screen-properties { display: grid; gap: 9px; min-width: 0; }
.screen-properties label { display: grid; gap: 4px; min-width: 0; font-size: 11px; font-weight: 700; }
.screen-properties input:not([type="checkbox"]), .screen-properties select, .screen-properties textarea { width: 100%; min-width: 0; max-width: 100%; }
.screen-properties textarea { min-height: 66px; width: 100%; resize: vertical; }
.screen-properties .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; min-width: 0; }
.screen-properties .run { padding: 8px; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 6px; }
.screen-properties .run .button { min-height: 30px; }
.screen-preview { display: flex; flex-wrap: wrap; gap: 16px; margin: 15px 0; padding: 15px; background: #f5f8f7; border-radius: 10px; }
.screen-preview figure { width: min(42%, 240px); margin: 0; }
.screen-preview figcaption { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.screen-preview img { width: 100%; border: 1px solid var(--line); border-radius: 6px; }
.screen-preview p { align-self: start; }
.screen-schedule-panel { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 20px; }
.screen-schedule-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.screen-schedule-form input[type="number"] { min-width: 0; width: 140px; }
.screen-schedule-form > label:first-child { display: flex; align-items: center; min-height: 35px; }
.screen-schedule-form fieldset { border: 1px solid var(--line); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 5px 10px; padding: 5px 9px; margin: 0; }
.screen-schedule-form fieldset legend { font-size: 11px; font-weight: 700; }
.screen-schedule-form fieldset label { font-size: 11px; white-space: nowrap; }
.screen-history { display: grid; gap: 7px; font-size: 12px; color: var(--muted); }
.screen-history div { padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; }
@media (max-width: 1150px) { .screen-editor { grid-template-columns: 125px minmax(230px, 1fr); } .screen-inspector { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
@media (max-width: 700px) { .screen-editor { grid-template-columns: 1fr; } .screen-toolbox { display: flex; flex-wrap: wrap; } .screen-toolbox h3 { width: 100%; } .screen-inspector { grid-column: auto; grid-template-columns: minmax(0, 1fr); } .screen-preview figure { width: 45%; } }
@media (max-width: 380px) { .screen-properties .row { grid-template-columns: minmax(0, 1fr); } }