/* Scoped Notice Maker editor. Existing student-facing notice design stays unchanged. */
#posterModal{--notice-accent:#195f74;--notice-line:#dde5eb;--notice-muted:#64748b}
#posterModal .posterSheet{width:min(96vw,880px);padding:0;height:auto;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--notice-line);border-radius:18px;background:#fff;box-shadow:0 20px 70px #0f172a26;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
#posterModal .noticeHead{position:sticky;top:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#fff;border-bottom:1px solid var(--notice-line)}
#posterModal .noticeHead .mhead{margin:0;font-size:19px;font-weight:650;letter-spacing:-.3px;border:0;padding:0}
#posterModal .noticeHead .mhead::after{display:none}
#posterModal .noticeHead .close{width:36px;height:36px;min-height:36px;padding:0;border:1px solid var(--notice-line);border-radius:10px;background:#f8fafc;box-shadow:none;color:#334155;font:400 22px/1 system-ui}
#posterModal .posterShell{gap:16px;padding:16px 18px}
#posterModal .noticeSectionTitle{margin:0 0 10px;color:#334155;font-size:12px;font-weight:650;text-transform:uppercase;letter-spacing:.5px}
#posterModal .posterFieldGrid{gap:10px}
#posterModal .posterFieldGrid label,#posterModal .posterScheduleGrid label,#posterModal .posterTeacherPicker label,#posterModal .noticeTextEditor label{display:grid;gap:5px;color:#475569;font-size:12px;font-weight:550}
#posterModal input,#posterModal textarea,#posterModal select{box-sizing:border-box;min-width:0;max-width:100%;font-family:inherit}
#posterModal .posterFieldGrid input,#posterModal .posterFieldGrid textarea,#posterModal .posterScheduleGrid input,#posterModal .posterTeacherPicker select,#posterModal .posterStudentSearchInput,#posterModal .noticeTextEditor input,#posterModal .noticeTextEditor textarea{width:100%;border:1px solid var(--notice-line);border-radius:10px;background:#fff;padding:10px 12px;color:#111b21;font-size:14px;font-weight:400;line-height:1.5;box-shadow:none}
#posterModal #posterDescriptionInput{min-height:132px;resize:vertical;font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:15px;font-weight:400;line-height:1.5;color:#111b21}
#posterModal input::placeholder,#posterModal textarea::placeholder{font-weight:400;color:#87929d}
#posterModal input:focus-visible,#posterModal textarea:focus-visible,#posterModal select:focus-visible,#posterModal button:focus-visible,#posterModal summary:focus-visible{outline:2px solid var(--notice-accent);outline-offset:2px}
#posterModal .noticeDisclosure{border:1px solid var(--notice-line);border-radius:11px;background:#fff;min-width:0}
#posterModal summary{cursor:pointer;list-style:none;user-select:none}
#posterModal summary::-webkit-details-marker{display:none}
#posterModal .noticeDisclosure>summary{display:flex;align-items:center;gap:8px;padding:11px 12px;font-size:13px;font-weight:550;color:#334155}
#posterModal .noticeDisclosure>summary::after,#posterModal .noticeLog>summary::after{content:"";display:block;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin-left:auto;flex:none}
#posterModal .noticeDisclosure[open]>summary::after,#posterModal .noticeLog[open]>summary::after{transform:rotate(45deg)}
#posterModal .noticeDisclosureBody{padding:0 12px 12px;display:grid;gap:12px}
#posterModal .posterInlineTools{gap:12px;padding-top:10px;border-top:1px solid #edf1f4}
#posterModal .posterTemplateRow{gap:6px;margin:0}
#posterModal .posterTemplateBtn{min-height:34px;padding:6px 10px;border:1px solid var(--notice-line);border-radius:8px;background:#f8fafc;color:#334155;font-size:12px;font-weight:500;cursor:pointer}
#posterModal .posterFontLabel{font-weight:500;font-size:12px}
#posterModal .posterFontBtn{min-height:32px;width:32px;height:32px;border-radius:8px;font-weight:500}
#posterModal .noticeTextTools{display:flex;align-items:center;justify-content:space-between;gap:10px}
#posterModal .noticeSmallButton,#posterModal .noticeTextManageRow button{padding:6px 9px;min-height:32px;border:1px solid var(--notice-line);border-radius:8px;background:#f8fafc;color:var(--notice-accent);font-family:inherit;font-weight:500;font-size:12px;line-height:1.3;cursor:pointer}
#posterModal .noticeTextManageRow{display:flex;align-items:center;gap:6px;padding:6px 0}
#posterModal .noticeTextManageRow>span{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px}
#posterModal .noticeTextManageRow button:last-child{color:#b42318}
#posterModal .noticeTextEditor{display:grid;gap:9px;padding:10px;background:#f8fafc;border-radius:10px}
#posterModal [hidden]{display:none!important}
#posterModal .noticeTextEditor textarea{min-height:110px;resize:vertical}
#posterModal .noticeTextEditorActions{display:flex;justify-content:flex-end;gap:6px}
#posterModal #noticeTextMessage{font-size:12px;line-height:1.4;color:#b42318}
#posterModal #noticeTextMessage:empty{display:none}
#posterModal .noticePreview{position:relative;padding:0;border:0;border-radius:0;background:none}
#posterModal .posterPreviewBox{position:relative;padding:0;border:0;background:transparent;border-radius:10px}
#posterModal .posterPreviewBox img{border-radius:10px;box-shadow:none}
#posterModal #posterDownloadBtn{position:absolute;left:9px;bottom:9px;width:36px;height:36px;display:grid;place-items:center;padding:8px;min-height:36px;border:1px solid #d9e1e7;border-radius:9px;background:#fffffff2;color:var(--notice-accent);box-shadow:0 2px 8px #0f172a12;cursor:pointer}
#posterModal #posterDownloadBtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#posterModal .posterPublishPanel{border:1px solid var(--notice-line);border-radius:12px;background:#fff;padding:12px;gap:10px}
#posterModal .posterPanelTitle{font-size:14px;font-weight:600;color:#1e293b}
#posterModal .noticeAudienceDates{display:grid;grid-template-columns:minmax(100px,.7fr) minmax(0,1.6fr);gap:10px;align-items:start}
#posterModal .posterTeacherPicker{min-width:0}
#posterModal .posterScheduleGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
#posterModal .posterAudienceToggle{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
#posterModal .posterAudienceBtn{min-height:38px;padding:7px 8px;border:1px solid var(--notice-line);border-radius:9px;background:#f8fafc;font-size:12px;font-weight:500;color:#475569;box-shadow:none}
#posterModal .posterAudienceBtn.on{background:var(--notice-accent);border-color:var(--notice-accent);color:#fff;box-shadow:none}
#posterModal .posterStudentPicker{gap:8px}
#posterModal .noticeSelectionHead{display:flex;align-items:center;gap:8px}
#posterModal .noticeSelectionHead input{flex:1;min-width:0}
#posterModal #noticeSelectedCount{white-space:nowrap;font-size:11px;color:var(--notice-muted)}
#posterModal .posterStudentSearchResults{max-height:190px;gap:0;border:1px solid var(--notice-line);border-radius:10px}
#posterModal .noticeStudentRow{display:flex;align-items:center;gap:10px;padding:9px 10px;cursor:pointer;border-bottom:1px solid #edf1f4;background:#fff}
#posterModal .noticeStudentRow:last-child{border:0}
#posterModal .noticeStudentRow input{width:17px;height:17px;flex:none;accent-color:var(--notice-accent);margin:0}
#posterModal .noticeStudentRow{min-height:38px;padding:5px 9px}
#posterModal .noticeStudentRow>span{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
#posterModal .noticeStudentRow strong{font-size:13px;font-weight:400;min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1e293b}
#posterModal .noticeStudentRow small{font-size:11px;font-weight:400;color:var(--notice-muted);white-space:nowrap;flex:none}
#posterModal .posterSelectedStudentsList{display:none}
#posterModal .posterSelectedStudentChip{display:flex;gap:5px;padding:5px 7px;background:#f0f6f8;border:0;border-radius:7px}
#posterModal .posterSelectedStudentChip strong{font-weight:500;font-size:11px;max-width:160px;display:block}
#posterModal .posterSelectedStudentChip span{display:none}
#posterModal .posterSelectedStudentChip .posterStudentMiniBtn{min-height:28px;padding:4px;font-size:10px;font-weight:500;background:none;color:#64748b}
#posterModal #posterPublishBtn{min-height:42px;width:100%;padding:10px;background:var(--notice-accent);border:0;border-radius:9px;box-shadow:none;font-size:14px;font-weight:600;color:#fff}
#posterModal .posterLiveNotices{gap:10px}
#posterModal .noticeCurrentLogs{display:grid;gap:7px}
#posterModal .noticeLog{border:1px solid var(--notice-line);border-radius:10px;background:#fff;min-width:0}
#posterModal .noticeLog>summary{display:flex;align-items:center;gap:9px;padding:10px 11px;font-size:12px}
#posterModal .noticeLog>summary>span:first-child{display:grid;gap:4px;min-width:0;flex:1}
#posterModal .noticeLog strong{font-size:13px;font-weight:550;color:#1e293b;overflow-wrap:anywhere}
#posterModal .noticeLog small{font-size:11px;font-weight:400;color:var(--notice-muted);line-height:1.4}
#posterModal .noticeStatus{font-size:10px;line-height:1;padding:5px 7px;border-radius:6px;color:#167d76;background:#effaf6;font-weight:500;flex:none}
#posterModal .noticeStatus.scheduled{color:#94630f;background:#fff8e6}
#posterModal .noticeStatus.expired,#posterModal .noticeStatus.cancelled{color:#64748b;background:#f1f5f9}
#posterModal .noticeLogBody{padding:0 11px 10px;display:grid;gap:8px}
#posterModal .noticeLogBody p{margin:0;white-space:pre-wrap;font:400 13px/1.5 "Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#334155;overflow-wrap:anywhere}
#posterModal .posterCancelNoticeBtn{width:fit-content;min-height:32px;padding:6px 9px;border:1px solid #f0d9d8;border-radius:7px;background:#fff;color:#b42318;font-size:11px;font-weight:500}
#posterModal .noticeHistoryBody{padding:0 10px 10px;display:grid;gap:7px}
#posterModal .noticeHistory>summary span{font-size:11px;color:var(--notice-muted)}
#posterModal .noticeEmpty{font-size:12px;line-height:1.4;color:var(--notice-muted);padding:8px}
#posterModal #posterMsg{margin:0;font-size:12px;font-weight:400;line-height:1.4}
#posterModal #posterMsg:empty{display:none}
#posterModal .noticeWorkspace,#posterModal .noticeEditorColumn{display:grid;gap:12px}
#posterModal .noticePreview .posterPreviewBox{max-width:620px;margin-inline:auto}
@media(max-width:539px){#posterModal .posterSheet{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:14px}#posterModal .posterShell{padding:12px;gap:12px}#posterModal .noticeHead{padding:11px 12px}#posterModal .noticeWorkspace,#posterModal .noticeEditorColumn{display:grid;gap:12px}#posterModal .noticeAudienceDates{grid-template-columns:1fr}#posterModal .posterScheduleGrid{grid-template-columns:repeat(2,minmax(0,1fr))}#posterModal input,#posterModal textarea,#posterModal select{font-size:16px!important}#posterModal #posterDescriptionInput{min-height:120px}#posterModal .posterAudienceBtn{font-size:12px}#posterModal .posterPublishPanel{padding:10px}}

html.protivaIosNativeShell #posterModal .noticeHead{padding-top:calc(14px + var(--protiva-safe-top,0px))}
html.protivaIosNativeShell #posterModal .posterShell{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}

#posterModal .noticeDisclosureBody>label{display:grid;gap:5px;font-size:12px;font-weight:500;color:#475569}
#posterModal #posterFooterInput{width:100%;padding:10px 12px;border:1px solid var(--notice-line);border-radius:10px;font-size:14px;font-weight:400;line-height:1.5}

#posterModal .noticeDescriptionField{display:grid;gap:5px}
#posterModal .noticeDescriptionHeader{display:flex;align-items:center;gap:8px}
#posterModal .noticeDescriptionHeader .posterFontSizer{gap:4px}
#posterModal .noticeDescriptionHeader .posterFontBtn{width:24px;height:24px;min-height:24px;padding:0;border:1px solid var(--notice-line);border-radius:6px;font-size:16px;font-weight:400;line-height:1;box-shadow:none;background:#f8fafc;color:#475569}

#posterModal .noticeWorkspace{padding:12px;border:1px solid var(--notice-line);border-radius:12px;background:#fcfdfe}
#posterModal .noticeTextIcon{display:grid;place-items:center;width:24px;height:24px;min-height:24px;padding:4px;border:1px solid var(--notice-line);border-radius:6px;background:#f8fafc;color:var(--notice-accent);box-shadow:none}
#posterModal .noticeTextIcon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
#posterModal .noticeTextDialog{padding:0;width:min(420px,calc(100vw - 28px));max-height:calc(100dvh - 48px);border:1px solid var(--notice-line);border-radius:14px;background:#fff;color:#1e293b;box-shadow:0 18px 60px #0f172a33;font-family:inherit;overflow:auto}
#posterModal .noticeTextDialog::backdrop{background:#0f172a66}
#posterModal .noticeTextDialogHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--notice-line);position:sticky;top:0;background:#fff;z-index:1;font-size:15px}
#posterModal .noticeTextDialogHead button{width:28px;height:28px;min-height:28px;padding:0;border:1px solid var(--notice-line);border-radius:7px;background:#f8fafc;color:#475569;font-size:20px;font-weight:400;line-height:1}
#posterModal .noticeTextDialogBody{display:grid;gap:10px;padding:4px 14px 14px}
#posterModal .noticeTextList{display:grid;gap:0}
#posterModal .noticeTextManageRow{border-bottom:1px solid #edf1f4;padding:9px 0;gap:6px}
#posterModal .noticeTextManageRow .noticeTextApply{flex:1;min-width:0;text-align:left;padding:6px 0;border:0;background:none;color:#1e293b;font-size:14px;overflow-wrap:anywhere}
#posterModal #noticeTextAdd{justify-self:start}
#posterModal .noticeTextApply:active,#posterModal .noticeTextApplying{transform:scale(.97);background:#fff3cc!important;box-shadow:0 0 0 2px #dfb64e66}
#posterModal .noticeTextApply{transition:transform .12s ease,background-color .12s ease}
#posterModal #posterDescriptionInput.noticeTextApplied{border-color:#d5a529;background-image:linear-gradient(110deg,#fff 20%,#fff3cc 45%,#fff 70%);background-size:250% 100%;animation:noticeTextShine .8s linear infinite;box-shadow:0 0 0 2px #dfb64e33}
@keyframes noticeTextShine{from{background-position:100% 0}to{background-position:0 0}}
@media(prefers-reduced-motion:reduce){#posterModal .noticeTextApply{transition:none}#posterModal #posterDescriptionInput.noticeTextApplied{animation:none;background-image:none;background-color:#fffaf0}}