.classroom-toolbar, .classroom-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.classroom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.classroom-widget { min-width: 0; padding: 18px; border: 1px solid #dce5eb; border-radius: 8px; background: #f8fafb; }
.classroom-widget .front-tools-button { margin: 0 6px 6px 0; }
.classroom-widget textarea,
.classroom-widget input[type="number"] { box-sizing: border-box; display: block; width: 100%; max-width: 100%; margin: 6px 0 12px; padding: 10px 12px; border: 1px solid #b8c7d1; border-radius: 6px; background: #fff; color: #243746; font: inherit; line-height: 1.4; box-shadow: inset 0 1px 2px rgba(25, 48, 64, .08); }
.classroom-widget textarea { min-height: 88px; resize: vertical; }
.classroom-widget textarea:focus,
.classroom-widget input[type="number"]:focus { border-color: #3986b8; outline: 2px solid rgba(57, 134, 184, .2); outline-offset: 1px; }
.classroom-widget > label:not(.sr-only) { display: block; margin: 8px 0 4px; font-weight: 600; }
.classroom-widget h2 { margin: 0 0 12px; font-size: 19px; }
#classroom-clock { display: block; font-size: clamp(38px, 7vw, 68px); font-weight: 700; font-variant-numeric: tabular-nums; }
#classroom-date { font-size: 18px; }
#classroom-countdown { margin: 8px 0; font-size: clamp(34px, 6vw, 58px); font-weight: 700; font-variant-numeric: tabular-nums; }
.classroom-task-display { min-height: 1em; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 24px; }
.traffic-mode { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 24px; }
.traffic-mode[data-mode="attention"] { color: #9b2525; }
.traffic-mode[data-mode="quiet"] { color: #755711; }
.traffic-mode[data-mode="talk"] { color: #27643a; }
.classroom-links a { padding: 8px; }
.classroom-projector.projector-fallback { position: fixed; z-index: 9999; inset: 0; overflow: auto; padding: 20px; background: #fff; }
.classroom-projector:fullscreen { overflow: auto; padding: 18px; background: #fff; }
.settings-hidden textarea, .settings-hidden input, .settings-hidden .front-tools-button { display: none !important; }
@media (max-width: 767px) { .classroom-grid { grid-template-columns: 1fr; } .classroom-widget { padding: 14px; } }

.classroom-widget-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 6px 10px; border: 1px solid #dce5eb; border-radius: 6px; }
.classroom-widget-controls summary { cursor: pointer; font-weight: 600; }
.classroom-widget-controls label { white-space: nowrap; }