* { box-sizing: border-box; }
html, body { margin: 0px; padding: 0px; }
body { -webkit-font-smoothing: antialiased; background: var(--bg); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border-radius: 99px; background: var(--border); }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline-offset: 2px; border-radius: 6px; }
.app { max-width: 1060px; margin: 0px auto; padding: 0px 18px 70px; }
.topbar { position: sticky; top: 0px; z-index: 50; backdrop-filter: none; background: color-mix(in srgb,var(--panel) 78%,transparent); }
html[data-theme="dark"] .topbar { background: rgba(21, 31, 40, 0.88); }
.topbar-inner { max-width: 1060px; margin: 0px auto; padding: 11px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; min-width: 0px; }
.logo { width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto; color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; letter-spacing: 0.02em; box-shadow: rgba(13, 124, 143, 0.55) 0px 6px 16px -4px; background: var(--grad); }
.brand h1 { margin: 0px; font-size: 17.5px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
.brand p { margin: 0px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.topactions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn { color: var(--av-text-primary); border-radius: 12px; padding: 8px 14px; font-size: 13.5px; font-weight: 650; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s, background 0.15s, color 0.15s; background: var(--av-control-bg); box-shadow:var(--av-shadow-control);}
.btn:hover { box-shadow: var(--av-shadow-control); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { border: 0px; color: var(--av-primary-ink); font-weight: 700; box-shadow: var(--av-shadow-primary); background: var(--av-primary-gradient); }
.btn.primary:hover { filter: brightness(1.06); box-shadow: var(--av-shadow-primary); }
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.toggle { color: var(--muted); border-radius: 999px; padding: 8px 15px; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; transition: 0.15s; background: var(--panel); }
.toggle svg { width: 15px; height: 15px; }
.toggle:hover { color: var(--accent-strong); }
.toggle.on { color: rgb(255, 255, 255); box-shadow: rgba(13, 124, 143, 0.5) 0px 4px 12px -4px; background: var(--accent); }
.panel { box-shadow: var(--shadow); padding: 18px; margin-top: 18px; background: var(--panel); }
.dropzone { border-radius: 14px; padding: 28px 18px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.dropzone:hover, .dropzone.drag { transform: scale(1.005); background: var(--accent-soft); }
.dz-icon { width: 52px; height: 52px; border-radius: 16px; margin: 0px auto 10px; color: var(--accent-strong); display: flex; align-items: center; justify-content: center; background: var(--accent-soft); }
.dz-icon svg { width: 26px; height: 26px; }
.dropzone strong { color: var(--accent-strong); }
.dropzone p { margin: 5px 0px 0px; color: var(--muted); font-size: 13px; }
.uploadbar { display: none; align-items: center; gap: 12px; flex-wrap: wrap; }
.panel.loaded .dropzone { display: none; }
.panel.loaded .uploadbar { display: flex; }
.uploadbar .ok-ico { width: 38px; height: 38px; border-radius: 12px; flex: 0 0 auto; color: var(--ok); display: flex; align-items: center; justify-content: center; background: var(--ok-soft); }
.uploadbar .ok-ico svg { width: 20px; height: 20px; }
.uploadbar .ub-main { min-width: 0px; }
.uploadbar .ub-t { font-weight: 700; font-size: 14.5px; }
.uploadbar .ub-s { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.uploadbar .spacer { margin-left: auto; }
.statusline { margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.status { font-size: 13.5px; color: var(--muted); }
.status.ok { color: var(--ok); font-weight: 650; }
.status.err { color: var(--danger); font-weight: 650; }
.filechips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { color: var(--accent-strong); border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 650; background: var(--accent-soft); }
.check-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; user-select: none; }
.check-pill { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 700; }
.check-pill svg { width: 15px; height: 15px; }
.check-pill.ok { color: var(--ok); background: var(--ok-soft); }
.check-pill.warn { color: var(--warn); background: var(--warn-soft); }
.check-pill.bad { color: var(--danger); background: var(--danger-soft); }
.check-toggle { margin-left: auto; color: var(--accent-strong); background: none; border: 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.shared-note { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.shared-chip { display: inline-flex; align-items: center; gap: 5px; color: var(--accent-strong); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: 0.15s; background: var(--accent-soft); }
.shared-chip:hover { }
.check-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.conflict { border-radius: 12px; padding: 12px 14px; background: var(--panel-2); }
.conflict.bad { border-left-color: var(--danger); }
.conflict .c-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-weight: 700; font-size: 13.5px; }
.conflict .c-head .c-room { color: rgb(255, 255, 255); border-radius: 7px; padding: 2px 9px; font-size: 12.5px; background: var(--accent); }
.conflict .c-body { margin-top: 7px; display: flex; flex-direction: column; gap: 4px; }
.conflict .c-line { font-size: 13px; color: var(--muted); }
.conflict .c-line b { color: var(--text); }
.conflict .c-actions { margin-top: 9px; display: flex; gap: 8px; flex-wrap: wrap; }
.conflict .c-open, .conflict .c-shared { border-radius: 9px; padding: 5px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--accent-strong); transition: 0.15s; background: var(--panel); }
.conflict .c-shared { color: var(--muted); }
.conflict .c-open:hover { }
.conflict .c-shared:hover { color: var(--text); }
.modebar { display: flex; gap: 4px; border-radius: 13px; padding: 4px; width: fit-content; flex-wrap: wrap; background: var(--panel-2); }
.modebtn { border: 0px; background: transparent; color: var(--muted); font-weight: 700; font-size: 13.5px; padding: 8px 17px; border-radius: 10px; cursor: pointer; transition: 0.15s; }
.modebtn.active { color: rgb(255, 255, 255); box-shadow: rgba(13, 124, 143, 0.5) 0px 3px 10px -3px; background: var(--grad); }
.modehint { margin: 10px 2px 0px; font-size: 12.5px; color: var(--muted); }
.searchwrap { position: relative; flex: 1 1 0%; min-width: 220px; }
.searchwrap > svg { position: absolute; right: 14px; left: auto; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--faint); pointer-events: none; transition: opacity 0.15s; }
.searchwrap.hasval > svg { opacity: 0; }
input.search:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)) { width: 100%; color: var(--av-text-primary); border-radius: 13px; padding: 12px 42px 12px 14px; font-size: 15px; outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; font-variant-numeric: tabular-nums; background: var(--av-well); box-shadow:var(--av-shadow-well);}
input.search:focus:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)) { box-shadow: var(--av-shadow-well); background: var(--av-focus-well); }
input.search::placeholder { color: var(--faint); }
.clearbtn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 8px; border: 0px; background: transparent; color: var(--faint); cursor: pointer; font-size: 16px; line-height: 1; display: none; align-items: center; justify-content: center; }
.clearbtn:hover { color: var(--text); background: var(--border-soft); }
.searchwrap.hasval .clearbtn { display: flex; }
.searchrow { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.favrow { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.favrow:empty { margin-top: 0px; }
.favchip { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 5px 7px 5px 13px; font-size: 13px; font-weight: 650; cursor: pointer; transition: 0.15s; background: var(--panel-2); }
.favchip:hover { }
.favchip.active { color: var(--accent-strong); background: var(--accent-soft); }
.favchip .x { width: 18px; height: 18px; border-radius: 50%; border: 0px; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.favchip .x:hover { color: rgb(255, 255, 255); background: var(--danger); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; margin-top: 18px; }
.card { position: relative; text-align: left; border-radius: 15px; padding: 15px 15px 13px; cursor: pointer; display: flex; flex-direction: column; gap: 9px; transition: transform 0.15s, box-shadow 0.18s, border-color 0.15s; animation: 0.3s ease 0s 1 normal both running fadeUp; font: inherit; color: inherit; background: var(--panel); }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card .row1 { display: flex; align-items: center; gap: 11px; min-width: 0px; }
.avatar { width: 44px; height: 44px; border-radius: 13px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; }
.avatar.lg { width: 62px; height: 62px; border-radius: 18px; font-size: 25px; }
.avatar.code { font-size: 11.5px; white-space: nowrap; }
.avatar.lg.code { font-size: 16px; }
.card-name { font-weight: 750; font-size: 14.5px; line-height: 1.25; word-break: break-word; }
.card-sub { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.card-star { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 9px; border: 0px; background: transparent; color: var(--faint); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.15s; }
.card-star svg { width: 16px; height: 16px; }
.card-star:hover { color: rgb(232, 185, 60); background: var(--warn-soft); }
.card-star.active { color: rgb(232, 185, 60); }
.card-star.active svg { fill: rgb(232, 185, 60); }
.card .warnflag { position: absolute; bottom: 10px; right: 10px; font-size: 11px; font-weight: 800; color: var(--warn); border-radius: 7px; padding: 2px 8px; background: var(--warn-soft); }
.card .shareflag { position: absolute; bottom: 10px; right: 10px; font-size: 11px; font-weight: 800; color: var(--accent-strong); border-radius: 7px; padding: 2px 8px; background: var(--accent-soft); }
.gallery-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 36px 16px; font-size: 14px; }
.detail { margin-top: 18px; animation: 0.25s ease 0s 1 normal both running fadeUp; }
.dhead { box-shadow: var(--shadow); padding: 20px; position: relative; overflow: hidden; background: var(--panel); }
.dhead::before { content: ""; position: absolute; left: 0px; top: 0px; right: 0px; height: 4px; background: var(--grad); }
.backbtn { color: var(--muted); border-radius: 10px; padding: 6px 13px 6px 10px; font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: 0.15s; margin-bottom: 14px; background: var(--panel-2); }
.backbtn:hover { color: var(--accent-strong); }
.backbtn svg { width: 15px; height: 15px; }
.dtitle { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dname { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.dkind { font-size: 12px; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 3px; }
.dtitle .actions { margin-left: auto; display: flex; gap: 8px; }
.iconbtn { border-radius: 12px; width: 44px; height: 44px; flex: 0 0 auto; cursor: pointer; color: var(--faint); display: flex; align-items: center; justify-content: center; transition: 0.15s; background: var(--panel-2); }
.iconbtn svg { width: 20px; height: 20px; }
.iconbtn:hover { color: var(--accent-strong); }
.iconbtn.fav:hover { border-color: rgb(232, 185, 60); color: rgb(232, 185, 60); }
.iconbtn.fav.active { background: rgb(255, 247, 224); border-color: rgb(232, 185, 60); color: rgb(217, 158, 20); }
html[data-theme="dark"] .iconbtn.fav.active { background: rgb(58, 51, 32); }
.iconbtn.fav.active svg { fill: rgb(217, 158, 20); }
.dchips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.dchip { border-radius: 11px; padding: 8px 13px; min-width: 86px; background: var(--panel-2); }
.dchip .v { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dchip .v em { font-style: normal; font-size: 11.5px; font-weight: 650; color: var(--muted); margin-left: 2px; }
.dchip .l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 1px; }
.dchip.hl .v { color: var(--accent-strong); }
.dchip.bad .v { color: var(--danger); }
.dchart { display: flex; align-items: flex-end; gap: 7px; margin-top: 18px; height: 78px; }
.dchart .bar { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.dchart .bar i { display: block; width: 100%; max-width: 38px; border-radius: 7px 7px 3px 3px; min-height: 4px; transition: height 0.4s cubic-bezier(0.2, 0.8, 0.3, 1); opacity: 0.9; background: var(--grad); }
.dchart .bar.off i { opacity: 0.6; background: var(--border); }
.dchart .bar b { font-size: 11px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.dchart .bar span { font-size: 10.5px; color: var(--faint); font-weight: 650; }
.dchart .bar.today span { color: var(--accent-strong); }
.cmpbar { margin-top: 16px; border-radius: 14px; padding: 13px 17px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; animation: 0.25s ease 0s 1 normal both running fadeUp; background: var(--accent-soft); }
.cmpbar b { color: var(--accent-strong); }
.cmpbar .hint { color: var(--muted); font-size: 13.5px; }
.cmpbar button { margin-left: auto; border-radius: 9px; padding: 5px 13px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; background: var(--panel); }
.cmpbar button:hover { color: var(--accent-strong); }
.vs { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; color: rgb(255, 255, 255); font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: rgba(13, 124, 143, 0.5) 0px 4px 10px -3px; background: var(--grad); }
.cmp-person { display: flex; align-items: center; gap: 11px; min-width: 0px; }
.cmp-person .p-name { font-size: 15.5px; font-weight: 800; line-height: 1.2; }
.cmp-person .p-kind { font-size: 11px; color: var(--muted); font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.cmp-row { display: grid; grid-template-columns: 56px minmax(0px, 1fr) minmax(0px, 1fr); gap: 10px; padding: 9px 14px; align-items: stretch; }
.cmp-row.head { border-top: 0px; padding-bottom: 4px; }
.cmp-row.head .h { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); text-align: center; }
.cmp-row .pn { width: 34px; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--accent-strong); font-variant-numeric: tabular-nums; background: var(--panel-2); }
.cmp-row .cside { display: flex; flex-direction: column; gap: 6px; min-width: 0px; }
.cmp-row.clash { background: color-mix(in srgb,var(--danger) 7%,transparent); }
.cmp-row.clash .pn { color: var(--danger); }
.cmp-free { color: var(--faint); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; border-radius: 10px; min-height: 36px; }
.cmp-legend { margin-top: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.cmp-legend .sw { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; background: color-mix(in srgb,var(--danger) 12%,transparent); }
.agenda { margin-top: 16px; border-radius: 15px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; animation: 0.25s ease 0s 1 normal both running fadeUp; background: var(--accent-soft); }
.agenda .a-ico { width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto; color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; background: var(--accent); }
.agenda .a-ico svg { width: 20px; height: 20px; }
.agenda .a-main { font-weight: 750; font-size: 14.5px; }
.agenda .a-sub { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.agenda .a-timer { margin-left: auto; font-size: 20px; font-weight: 800; color: var(--accent-strong); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.days { margin-top: 16px; }
.day { box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; animation: 0.3s ease 0s 1 normal both running fadeUp; background: var(--panel); }
@keyframes fadeUp {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: none; }
}
.dayhead { position: relative; display: flex; align-items: center; gap: 10px; color: var(--accent-strong); padding: 13px 18px 13px 23px; font-weight: 800; font-size: 15.5px; background: linear-gradient(90deg,var(--accent-soft),transparent 75%); }
.dayhead::before { content: ""; position: absolute; left: 0px; top: 0px; bottom: 0px; width: 5px; background: var(--grad); }
.dayhead .ddate { font-weight: 650; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.today-chip { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 3px 12px; animation: 2.2s ease 0s infinite normal none running pulse; background: var(--accent); }
@keyframes pulse {
0%, 100% { box-shadow: rgba(13, 124, 143, 0.35) 0px 0px 0px 0px; }
50% { box-shadow: rgba(13, 124, 143, 0) 0px 0px 0px 7px; }
}
.pair { display: grid; grid-template-columns: 62px minmax(0px, 1fr); gap: 12px; padding: 10px 16px; }
.pair:first-of-type { border-top: 0px; }
.pairnum { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 2px; }
.pairnum .pn { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; color: var(--accent-strong); font-variant-numeric: tabular-nums; background: var(--panel-2); }
.pairnum .pt { font-size: 10.5px; color: var(--muted); text-align: center; line-height: 1.3; font-variant-numeric: tabular-nums; }
.lessons { display: flex; flex-direction: column; gap: 8px; min-width: 0px; }
.lesson { border-radius: 12px; padding: 10px 14px; transition: transform 0.12s, box-shadow 0.15s; background: var(--panel-2); }
.lesson:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.lesson.now { box-shadow: rgba(232, 185, 60, 0.45) 0px 0px 0px 2px; background: linear-gradient(90deg,#fff8e3,var(--panel-2)); border-left-color: rgb(232, 185, 60) !important; }
html[data-theme="dark"] .lesson.now { background: linear-gradient(90deg,#33290f,var(--panel-2)); }
.lesson.special-lesson { background: linear-gradient(90deg,#f3f0ff,var(--panel-2)); border-left-color: rgb(120, 103, 216) !important; }
.lesson.special-lesson:hover { box-shadow: rgba(120, 103, 216, 0.12) 0px 4px 16px; }
.lesson.special-lesson .badge { background: rgb(238, 234, 255); color: rgb(103, 88, 199); }
.special-subject-icon { display: inline-grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; margin-right: 7px; vertical-align: -6px; background: rgb(232, 227, 255); color: rgb(105, 89, 201); }
.special-subject-icon svg { width: 14px; height: 14px; }
.pairnum .pn.special-event-num { background: rgb(238, 234, 255); border-color: rgb(217, 210, 255); color: rgb(103, 88, 199); }
.pairnum .pn.special-event-num svg { width: 19px; height: 19px; }
.subject { font-weight: 700; font-size: 14.5px; line-height: 1.3; }
.codechip { display: inline-block; font-size: 10.5px; font-weight: 750; letter-spacing: 0.03em; border-radius: 6px; padding: 1.5px 7px; margin-right: 7px; vertical-align: 1px; }
.lmeta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.badge { color: var(--accent-strong); border-radius: 8px; padding: 2.5px 10px; font-size: 12px; font-weight: 700; background: var(--accent-soft); }
.badge.time { background: transparent; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.roompill { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.05; color: rgb(255, 255, 255); border-radius: 9px; padding: 3px 11px; min-width: 46px; background: var(--accent); }
.roompill .rl { font-size: 8.5px; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.85; }
.roompill .rn { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.window { border-radius: 11px; color: var(--faint); font-weight: 700; font-size: 12.5px; letter-spacing: 0.16em; text-align: center; padding: 9px; }
.no-lessons { color: var(--muted); font-size: 13.5px; padding: 6px 2px; }
.hero { text-align: center; padding: 56px 20px; color: var(--muted); animation: 0.3s ease 0s 1 normal both running fadeUp; }
.hero .h-ico { width: 84px; height: 84px; border-radius: 26px; margin: 0px auto 18px; box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center; color: var(--accent); background: var(--panel); }
.hero .h-ico svg { width: 42px; height: 42px; }
.hero h2 { color: var(--text); margin: 0px 0px 10px; font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.hero p { margin: 5px auto; max-width: 470px; font-size: 14px; }
footer { max-width: 1060px; margin: 26px auto 0px; padding: 0px 18px; color: var(--muted); font-size: 12.5px; display: none; gap: 14px; align-items: center; flex-wrap: wrap; }
body[data-role="staff"] > footer { display: flex; }
footer .link { color: var(--accent-strong); cursor: pointer; background: none; border: 0px; font: inherit; padding: 0px; text-decoration: underline; }
@media (max-width: 640px) {
.pair { grid-template-columns: 50px minmax(0px, 1fr); gap: 9px; padding: 9px 12px; }
.pairnum .pn { width: 32px; height: 32px; font-size: 15px; border-radius: 10px; }
.brand p { display: none; }
.topactions .btn span { display: none; }
.topactions .btn { padding: 9px 11px; }
.toggle span { display: none; }
.toggle { padding: 9px 12px; }
.dname { font-size: 19px; }
.gallery { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.dchart { height: 64px; }
.cmp-row { grid-template-columns: 44px minmax(0px, 1fr) minmax(0px, 1fr); gap: 7px; padding: 8px 10px; }
.cmp-row .pn { width: 30px; height: 30px; font-size: 13px; }
.dtitle .actions { margin-left: 0px; }
}
#printRoot { position: fixed; left: -12000px; top: 0px; width: 210mm; background: rgb(255, 255, 255); color: rgb(0, 0, 0); font-size: 10pt; }
.print-page { width: 190mm; height: 275mm; overflow: hidden; display: flex; flex-direction: column; background: rgb(255, 255, 255); print-color-adjust: exact; }
.print-head { border-bottom: 0.45mm solid rgb(13, 124, 143); padding-bottom: 1.8mm; margin-bottom: 2.2mm; flex: 0 0 auto; }
.ph-title { font-size: 10pt; font-weight: 800; color: rgb(9, 94, 109); text-transform: uppercase; letter-spacing: 0.06em; }
.ph-name { font-size: 13pt; font-weight: 800; margin-top: 0.6mm; }
.ph-sub { font-size: 8.5pt; color: rgb(66, 99, 106); margin-top: 0.6mm; }
.print-body { flex: 1 1 0%; overflow: hidden; min-height: 0px; }
.print-cols { column-gap: 6mm; }
.print-cols.two { column-count: 2; }
#printRoot .day { box-shadow: none; animation: auto ease 0s 1 normal none running none; overflow: hidden; border: 0.25mm solid rgb(185, 205, 210); border-radius: 2.4mm; margin: 0px 0px 2.4mm; break-inside: avoid; }
#printRoot .dayhead { padding: 1.1mm 2.4mm 1.1mm 2.8mm; font-size: 9.5pt; background: rgb(227, 242, 245); color: rgb(7, 95, 110); border-bottom: 0.25mm solid rgb(159, 200, 207); }
#printRoot .dayhead::before { width: 1.4mm; background: rgb(13, 124, 143); }
#printRoot .ddate { font-size: 7.5pt; color: rgb(66, 99, 106); }
#printRoot .today-chip { display: none; }
#printRoot .pair { grid-template-columns: 8.5mm minmax(0px, 1fr); gap: 1.6mm; padding: 0.9mm 2mm; border-top: 0.2mm solid rgb(228, 236, 238); }
#printRoot .pairnum { gap: 0.4mm; padding-top: 0.3mm; }
#printRoot .pairnum .pn { width: 6mm; height: 6mm; font-size: 9pt; font-weight: 800; border: 0.25mm solid rgb(185, 216, 222); background: rgb(238, 248, 249); color: rgb(7, 95, 110); border-radius: 1.6mm; }
#printRoot .pairnum .pt { font-size: 5.8pt; line-height: 1.15; color: rgb(66, 99, 106); }
#printRoot .lessons { gap: 1mm; }
#printRoot .lesson { background: rgb(255, 255, 255); border-width: 0px 0px 0px 0.7mm; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgb(13, 124, 143); border-image: none; border-radius: 1.6mm; padding: 1.1mm 2mm; }
#printRoot .lesson.now { background: rgb(255, 255, 255); box-shadow: none; }
#printRoot .subject { font-size: 8.6pt; line-height: 1.16; }
#printRoot .codechip { font-size: 6pt; padding: 0px 1.2mm; margin-right: 1.5mm; border: 0.15mm solid rgb(207, 227, 231); background: rgb(243, 250, 251); color: rgb(66, 99, 106); }
#printRoot .lmeta { gap: 1.2mm; margin-top: 0.7mm; }
#printRoot .badge { font-size: 6.8pt; padding: 0.4mm 1.6mm; background: rgb(227, 242, 245); color: rgb(7, 95, 110); }
#printRoot .badge.time { background: rgb(255, 255, 255); border: 0.2mm dashed rgb(185, 205, 210); color: rgb(66, 99, 106); }
#printRoot .roompill { background: rgb(13, 124, 143); padding: 0.4mm 1.8mm; min-width: 9mm; border-radius: 1.5mm; }
#printRoot .roompill .rl { font-size: 4.5pt; }
#printRoot .roompill .rn { font-size: 8pt; }
#printRoot .window { font-size: 6.5pt; padding: 0.9mm; letter-spacing: 0.1em; border-radius: 1.5mm; border: 0.25mm dashed rgb(185, 205, 210); color: rgb(66, 99, 106); }
#printRoot .no-lessons { font-size: 7.5pt; padding: 1.4mm 2mm; }
@media print {
body { background: rgb(255, 255, 255); }
body > :not(#printRoot) { display: none !important; }
#printRoot { width: auto; position: static !important; left: 0px !important; }
}
.roleOverlay { position: fixed; inset: 0px; z-index: 99; display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; background: radial-gradient(30rem 24rem at 20% 18%, rgba(24, 178, 191, 0.22), transparent 68%), radial-gradient(28rem 22rem at 82% 24%, rgba(69, 115, 226, 0.16), transparent 70%), radial-gradient(26rem 20rem at 52% 88%, rgba(44, 201, 157, 0.14), transparent 70%), rgba(7, 18, 25, 0.72) !important; }
.roleOverlay.open { display: flex; }
.roleBox { width: min(560px, 100%); color: var(--text); border-radius: 18px; padding: 26px; box-shadow: var(--av-shadow-modal); background: var(--av-surface-1); }
.roleBox h2 { margin: 0px 0px 5px; }
.roleBox p { color: var(--muted); }
.roleCard { display: flex; flex-direction: column; gap: 4px; width: 100%; margin: 10px 0px; text-align: left; font: inherit; color: var(--text); cursor: pointer; background: var(--panel-2); }
.roleCard:hover { }
.roleCard span { font-size: 12px; color: var(--muted); }
#roleOverlay { align-items: center; padding: 22px 16px; background: linear-gradient(145deg, rgba(7, 41, 50, 0.82), rgba(17, 28, 45, 0.78)); }
#roleOverlay .role-choice-box { position: relative; width: min(520px, 100%); padding: 32px; border-radius: 26px; overflow: hidden; }
#roleOverlay .role-choice-box::before { content: ""; position: absolute; inset: -80px auto auto -70px; width: 220px; height: 220px; border-radius: 50%; filter: blur(2px); pointer-events: none; background: color-mix(in srgb,var(--accent) 17%,transparent); }
.role-choice-head { position: relative; }
.role-choice-logo { display: grid; place-items: center; color: rgb(255, 255, 255); font-size: 17px; font-weight: 850; letter-spacing: 0.03em; background: var(--grad) !important; }
#roleOverlay .role-choice-head h2 { margin: 0px; }
#roleOverlay .role-choice-head p { margin: 6px 0px 0px; color: var(--muted); }
.role-choice-grid { position: relative; }
#roleOverlay .roleCard { position: relative; min-height: 138px; margin: 0px; padding: 20px 18px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 13px; border: 0px; border-radius: 20px; color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.7) 0px 12px 28px -17px; overflow: hidden; transition: transform 0.16s, box-shadow 0.16s, filter 0.16s; }
#roleOverlay .roleCard::before { content: ""; position: absolute; width: 120px; height: 120px; border-radius: 50%; right: -35px; top: -40px; background: rgba(255, 255, 255, 0.13); }
#roleOverlay .roleCard:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.78) 0px 16px 32px -18px; filter: saturate(1.06); }
#roleOverlay .roleCard:active { transform: translateY(0px) scale(0.99); }
#roleOverlay .role-student { background: linear-gradient(145deg, rgb(7, 151, 169), rgb(8, 114, 133)); }
#roleOverlay .role-teacher { background: linear-gradient(145deg, rgb(104, 114, 232), rgb(77, 86, 185)); }
#roleOverlay .roleCard b { position: relative; font-size: 18px; line-height: 1.1; letter-spacing: -0.01em; }
#roleOverlay .role-card-icon { position: relative; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.16); backdrop-filter: none; color: rgb(255, 255, 255) !important; }
#roleOverlay .role-card-icon svg { width: 25px; height: 25px; }
.role-admin-entry { z-index: 3; right: 15px; top: 15px; justify-items: center; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; background: rgba(255, 255, 255, 0.1) !important; }
.roleBox input { width: 100%; box-sizing: border-box; padding: 11px 13px; margin: 5px 0px; border-radius: 10px; color: var(--av-text-primary); font: inherit; background: var(--av-well); box-shadow:var(--av-shadow-well);}
.roleBox #loginError { min-height: 18px; color: var(--danger); font-size: 12px; }
.cloudInfo { display: none; margin: 0px 0px 11px; padding: 10px 12px; border-radius: 12px; font-size: 12px; color: var(--muted); background: var(--panel-2); }
body[data-role="student"] .cloudInfo, body[data-role="teacher"] .cloudInfo { display: block; }
.cloudInfo.ok { color: var(--ok); border-color: rgb(191, 227, 200); background: var(--ok-soft); }
.cloudInfo.err { color: var(--warn); border-color: rgb(241, 217, 172); background: var(--warn-soft); }
.publishBar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--accent-soft); }
.publishBar span { font-size: 12px; font-weight: 700; color: var(--accent-strong); margin-right: auto; }
body:not([data-role="staff"]) #uploadPanel, body:not([data-role="staff"]) #checkPanel, body:not([data-role="staff"]) .modebar, body:not([data-role="staff"]) #csvBtn { display: none !important; }
:root { --mobile-max: 760px; }
.fresh { font-size: 11px; color: var(--muted); text-align: right; max-width: 145px; }
.lunch-app-icon--event { width:30px; height:30px; }
.lunch-app-icon--status { width:24px; height:24px; margin-right:7px; color:var(--av-break-accent,var(--warn)); background:transparent !important; border:0 !important; }
.bell-break.lunch::before { content:""; display:inline-block; width:7px; height:7px; margin-right:7px; vertical-align:1px; border-radius:50%; background:var(--warn); box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 12%,transparent); }
.notice { border-radius: 16px; padding: 13px 14px; margin-bottom: 12px; background: var(--panel); }
.notice.warn { border-color: rgb(231, 192, 120); background: var(--warn-soft); }
.notice.ok { border-color: rgb(183, 222, 194); background: var(--ok-soft); }
.notice .nt { font-weight: 850; font-size: 13px; }
.notice .ns { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.notice .n-actions { display: flex; gap: 8px; margin-top: 10px; }
.mini-btn { color: var(--text); border-radius: 10px; padding: 7px 10px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 12px; font-weight: 750; cursor: pointer; background: var(--panel); }
.special-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px; color: var(--warn); font-weight: 800; background: var(--warn-soft); font-size: 10.5px !important; }
.week-day-btn { width: 100%; border: 0px; background: none; color: inherit; font: inherit; text-align: left; padding: 0px; cursor: pointer; }
.week-summary { font-size: 11px; color: var(--muted); }
.bell-break { background: var(--panel-2); }
.bell-break.lunch { color: var(--warn); font-weight: 800; background: var(--warn-soft); }
.feedbackBox { position: relative; width: min(600px, 100%); padding: 25px !important; }
.feedbackBox h2 { margin: 0px; font-size: 22px; letter-spacing: -0.02em; }
.feedbackBox > p { margin: 6px 42px 18px 0px; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.feedback-field { margin: 13px 0px; }
.feedback-field label:not(.feedback-upload-pick) { display: block; margin: 0px 0px 6px; font-size: 11px; font-weight: 850; color: var(--muted); text-transform: uppercase; letter-spacing: 0.055em; }
.feedback-field select, .feedback-field textarea { width: 100%; box-sizing: border-box; color: var(--av-text-primary); border-radius: 12px; padding: 11px 12px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 13px; outline: none; background: var(--av-well); box-shadow:var(--av-shadow-well);}
.feedback-field textarea { min-height: 145px; resize: vertical; line-height: 1.5; }
.feedback-field select:focus, .feedback-field textarea:focus { box-shadow: var(--av-shadow-well); background:var(--av-focus-well);}
.feedback-context { margin: 13px 0px; padding: 11px 12px; border-radius: 13px; background: var(--panel-2); }
.feedback-context b { display: block; font-size: 11.5px; }
.feedback-context span { display: block; margin-top: 4px; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.feedback-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.feedback-actions .primary { min-width: 170px; }
.feedback-status { min-height: 17px; margin-top: 9px; font-size: 11px; color: var(--muted); }
.feedback-status.ok { color: var(--ok); }
.feedback-status.err { color: var(--danger); }
.feedback-thanks { text-align: center; padding: 18px 5px 7px; }
.feedback-thanks-icon { width: 52px; height: 52px; border-radius: 16px; margin: 0px auto 11px; display: grid; place-items: center; color: var(--ok); font-size: 24px; background: var(--ok-soft); }
.feedback-thanks h3 { margin: 0px; font-size: 18px; }
.feedback-thanks p { margin: 7px auto 0px; max-width: 390px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.feedback-admin-toolbar { display: grid; margin: 12px 0px; }
.feedback-admin-toolbar .staff-field { margin: 0px; }
.feedback-summary { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0px 13px; }
.feedback-summary span { padding: 6px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; color: var(--muted); background: var(--panel); }
.feedback-summary strong { color: var(--text); }
.feedback-admin-list { display: flex; flex-direction: column; gap: 8px; }
.feedback-card { border-radius: 14px; padding: 12px 13px; background: var(--panel); }
.feedback-card-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.feedback-type-chip, .feedback-status-chip { display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 999px; font-size: 9px; font-weight: 900; }
.feedback-status-chip { color: var(--muted); background: var(--panel-2); }
.feedback-status-chip.new { color: var(--accent-strong); border-color: transparent; background: var(--accent-soft); }
.feedback-status-chip.in_progress { color: var(--warn); border-color: transparent; background: var(--warn-soft); }
.feedback-status-chip.resolved { color: var(--ok); border-color: transparent; background: var(--ok-soft); }
.feedback-card-date { margin-left: auto; font-size: 9.5px; color: var(--faint); }
.feedback-card-message { margin-top: 9px; font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.feedback-card-meta { margin-top: 8px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.feedback-card-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.feedback-card-actions select { color: var(--av-text-primary); border-radius: 9px; padding: 7px 8px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 10.5px; background: var(--av-well); box-shadow:var(--av-shadow-well);}
.feedback-card-actions .btn { padding: 7px 10px; font-size: 10.5px; }
.feedback-empty { padding: 30px 15px; text-align: center; border-radius: 14px; color: var(--muted); font-size: 12px; }
.feedback-nav-badge { display: inline-flex; min-width: 17px; height: 17px; padding: 0px 5px; margin-left: 4px; border-radius: 999px; align-items: center; justify-content: center; background: rgb(230, 83, 114); color: rgb(255, 255, 255); font-size: 9px; font-weight: 900; vertical-align: 1px; }
.feedback-nav-badge[hidden] { display: none !important; }
html[data-theme="dark"] select { color-scheme: dark !important; background-color: var(--av-well)!important; color: var(--av-text-primary)!important; border-color: transparent!important; box-shadow:var(--av-shadow-well);}
html[data-theme="dark"] select option, html[data-theme="dark"] select optgroup { background: rgb(23, 36, 45) !important; color: rgb(238, 246, 250) !important; }
html[data-theme="dark"] select option:disabled { color: rgb(115, 139, 152) !important; }
.feedback-card { --fb-cat: #71838d; --fb-soft: color-mix(in srgb,var(--fb-cat) 11%,var(--panel)); background: var(--panel); }
.feedback-card.cat-bug { --fb-cat: #d4525f; }
.feedback-card.cat-suggestion { --fb-cat: #1d9d72; }
.feedback-card.cat-ui { --fb-cat: #7a66d9; }
.feedback-card.cat-notifications { --fb-cat: #c48722; }
.feedback-card.cat-account { --fb-cat: #4385c5; }
.feedback-card.cat-install { --fb-cat: #1596a7; }
.feedback-card.cat-other { --fb-cat: #71838d; }
.feedback-card.is-new { box-shadow: inset 3px 0 0 var(--fb-cat); }
.feedback-type-chip { color: var(--fb-cat) !important; background: var(--fb-soft) !important; }
@media (max-width: 760px) {
#feedbackOverlay { align-items: flex-start !important; justify-content: center !important; overflow-y: auto !important; overscroll-behavior: contain !important; }
#feedbackOverlay .feedbackBox { width: 100% !important; max-width: 600px !important; max-height: none !important; overflow: visible !important; margin: 0px auto !important; border-radius: 20px !important; }
.feedbackBox h2 { padding-left: 42px !important; padding-right: 0px !important; }
.feedbackBox > p { margin-right: 0px !important; }
.feedback-admin-toolbar { grid-template-columns: 1fr 1fr; }
.feedback-admin-toolbar .btn { grid-column: 1 / -1; }
.feedback-actions { position: sticky !important; bottom: 0px !important; z-index: 8 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin: 14px -4px -4px !important; padding: 10px 4px 4px !important; background: linear-gradient(180deg,color-mix(in srgb,var(--panel) 0%,transparent),var(--panel) 26%) !important; }
.feedback-actions .primary { min-width: 0px; }
.feedback-field textarea { font-size: 16px; min-height: 118px !important; max-height: 38dvh !important; resize: none !important; }
.feedback-field select { font-size: 16px; }
.feedback-context { margin-bottom: 4px !important; }
}
@media (max-width: 390px) {
.feedback-actions { grid-template-columns: 1fr !important; }
.feedback-actions .btn { width: 100% !important; }
}
.entityRetry { margin: 12px auto 0px; display: block; color: var(--text); border-radius: 12px; padding: 10px 16px; font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 800; cursor: pointer; background: var(--panel); }
.entityLoadingDot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin: 0px 2px; animation: 1.1s ease 0s infinite alternate none running pakPulse; background: var(--accent); }
.entityLoadingDot:nth-child(2) { animation-delay: 0.18s; }
.entityLoadingDot:nth-child(3) { animation-delay: 0.36s; }
@keyframes pakPulse {
0% { opacity: 0.25; transform: translateY(0px); }
100% { opacity: 1; transform: translateY(-3px); }
}
#dispatcherTools { display: none; }
.staff-auth[data-role="staff"] #dispatcherTools { display: block; }
.staff-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.staff-tab { color: var(--text); border-radius: 11px; padding: 8px 12px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 12px; font-weight: 800; cursor: pointer; background: var(--panel); }
.staff-tab.active { color:var(--a2-legacy-ink,rgb(255, 255, 255)); background: var(--accent); }
.staff-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; }
.staff-box { border-radius: 14px; padding: 14px; background: var(--panel-2); }
.staff-box h3 { margin: 0px 0px 5px; font-size: 15px; }
.staff-box p { margin: 0px 0px 11px; font-size: 12px; color: var(--muted); }
.staff-field { display: flex; flex-direction: column; gap: 5px; margin: 9px 0px; }
.staff-field label { font-size: 11px; font-weight: 800; color: var(--muted); }
.staff-field input, .staff-field select { width: 100%; box-sizing: border-box; color: var(--av-text-primary); border-radius: 9px; padding: 9px 10px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 13px; background: var(--av-well); box-shadow:var(--av-shadow-well);}
.bell-editor-row { display: grid; grid-template-columns: 54px 1fr 1fr; gap: 7px; align-items: center; margin: 6px 0px; }
.bell-editor-row b { font-size: 11px; }
.override-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.override-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; font-size: 11px; background: var(--panel); }
.override-item span { margin-right: auto; }
.staff-note { font-size: 11px; color: var(--muted); line-height: 1.45; }
.change-list { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.change-item { padding: 8px 10px; border-radius: 9px; font-size: 11.5px; background: var(--panel); }
body[data-role="student"] .topbar, body[data-role="teacher"] .topbar, body[data-role="student"] > .app, body[data-role="teacher"] > .app, body[data-role="student"] > footer, body[data-role="teacher"] > footer { display: none !important; }
body[data-role="student"], body[data-role="teacher"] { overflow-x: hidden; }
body[data-role="staff"] #icsBtn, body[data-role="staff"] #printBtn, body[data-role="staff"] #todayBtn, body[data-role="staff"] #fullBtn { display: none !important; }
body[data-role="staff"]:not(.staff-auth) #uploadPanel, body[data-role="staff"]:not(.staff-auth) #checkPanel, body[data-role="staff"]:not(.staff-auth) main.app > section:not(#dispatcherTools) { display: none !important; }
@media (max-width: 760px) {
.roleOverlay { padding: 12px; align-items: flex-end; }
.roleBox { border-radius: 22px; max-height: calc(100dvh - 24px); }
#roleOverlay { align-items: center; }
#roleOverlay .role-choice-box { padding: 27px 17px 19px; border-radius: 24px; max-height: none; }
#roleOverlay .role-choice-head { margin-bottom: 18px; }
#roleOverlay .role-choice-head h2 { font-size: 22px; }
#roleOverlay .role-choice-grid { gap: 10px; }
#roleOverlay .roleCard { min-height: 124px; padding: 16px 14px; border-radius: 18px; }
#roleOverlay .roleCard b { font-size: 16px; }
#roleOverlay .role-card-icon { width: 41px; height: 41px; }
.role-admin-entry { right: 11px; top: 11px; width: 36px; height: 36px; }
.roleCard { min-height: 62px; }
.roleBox input { font-size: 16px; }
body[data-role="staff"] .topbar-inner { padding: 10px 12px; }
.brand h1 { font-size: 16px; }
.logo { width: 38px; height: 38px; }
.topactions { margin-left: auto; }
.topactions #roleBtn span { display: inline; }
.topactions #roleBtn { max-width: 130px; overflow: hidden; }
.topactions #themeBtn { width: 42px; height: 42px; padding: 0px; justify-content: center; }
.topactions #themeBtn span { display: none; }
body[data-role="staff"] main.app { padding: 10px; }
.staff-grid { grid-template-columns: 1fr; }
.panel { border-radius: 14px; }
.publishBar { align-items: stretch; }
.publishBar .btn { min-height: 44px; }
}
#dispatcherTools { max-width: 1024px; margin: 18px auto 32px; }
.bell-admin-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 0px 0px 14px; }
.bell-admin-tab { color: var(--text); border-radius: 11px; padding: 8px 12px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 12px; font-weight: 800; cursor: pointer; background: var(--panel); }
.bell-admin-tab.active { color:var(--a2-legacy-ink,rgb(255, 255, 255)); background: var(--accent); }
.bell-admin-panel[hidden] { display: none !important; }
.weekday-pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0px 13px; }
.weekday-pill { min-width: 47px; border-radius: 10px; color: var(--text); padding: 8px 10px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 12px; font-weight: 800; cursor: pointer; background: var(--panel); }
.weekday-pill.active { color: var(--accent-strong); background: var(--accent-soft); }
.profile-editor { display: flex; flex-direction: column; gap: 7px; margin: 10px 0px 13px; }
.profile-editor-head, .profile-editor-row { display: grid; grid-template-columns: 64px repeat(4, minmax(88px, 1fr)); gap: 7px; align-items: center; }
.profile-editor-head { font-size: 10px; font-weight: 800; color: var(--muted); text-align: center; padding: 0px 2px; }
.profile-editor-row b { font-size: 11px; white-space: nowrap; }
.profile-editor-row input { min-width: 0px; width: 100%; box-sizing: border-box; color: var(--av-text-primary); border-radius: 8px; padding: 8px 6px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 12px; background: var(--av-well); box-shadow:var(--av-shadow-well);}
.profile-editor-row.has-second { border-radius: 10px; padding: 5px; background: color-mix(in srgb,var(--accent-soft) 55%,transparent); }
.editor-hint { font-size: 10.5px; color: var(--muted); line-height: 1.45; margin: 5px 0px 10px; }
.inline-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; }
.inline-actions .staff-field { margin: 0px; min-width: 160px; flex: 1 1 0%; }
.template-list-card { display: flex; align-items: center; gap: 8px; border-radius: 10px; padding: 9px 10px; margin: 6px 0px; font-size: 11.5px; background: var(--panel); }
.template-list-card span { margin-right: auto; }
.event-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0px 12px; }
.event-editor-grid .wide { grid-column: 1 / -1; }
.check-pills { display: flex; gap: 6px; flex-wrap: wrap; margin: 5px 0px 9px; }
.check-pill { position: relative; }
.check-pill input { position: absolute; opacity: 0; pointer-events: none; }
.check-pill span { display: block; border-radius: 9px; padding: 7px 9px; font-size: 11px; font-weight: 750; cursor: pointer; background: var(--panel); }
.check-pill input:checked + span { color: var(--accent-strong); background: var(--accent-soft); }
.group-checks { max-height: 184px; overflow: auto; border-radius: 10px; padding: 7px; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 5px; background: var(--panel); }
.group-check { display: flex; gap: 6px; align-items: center; font-size: 10.5px; padding: 5px; border-radius: 7px; }
.group-check:hover { background: var(--panel-2); }
.event-list { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.event-item { border-radius: 11px; padding: 10px; display: flex; gap: 9px; align-items: flex-start; background: var(--panel); }
.event-item .event-main { min-width: 0px; flex: 1 1 0%; }
.event-item .event-name { font-size: 12.5px; font-weight: 850; }
.event-item .event-sub { font-size: 10.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.event-type-chip { font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 7px; padding: 3px 6px; color: var(--accent-strong); white-space: nowrap; background: var(--accent-soft); }
.event-type-chip.lunch { color: var(--warn); background: var(--warn-soft); }
.event-warning { margin-top: 6px; padding: 6px 8px; border-radius: 8px; color: var(--warn); font-size: 10px; font-weight: 750; background: var(--warn-soft); }
.mode-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 8px; font-size: 10px; font-weight: 800; color: var(--accent-strong); margin-top: 5px; background: var(--accent-soft); }
.staff-mini-summary { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0px; }
.staff-mini-summary span { border-radius: 8px; padding: 5px 7px; font-size: 10px; font-weight: 750; color: var(--muted); background: var(--panel); }
@media (max-width: 760px) {
.profile-editor-head { display: none; }
.profile-editor-row { grid-template-columns: 56px repeat(2, minmax(0px, 1fr)); padding: 7px; border-radius: 10px; }
.profile-editor-row input:nth-of-type(3), .profile-editor-row input:nth-of-type(4) { grid-row: 2; }
.profile-editor-row b { grid-row: 1 / 3; }
.event-editor-grid { grid-template-columns: 1fr; }
.event-editor-grid .wide { grid-column: auto; }
.group-checks { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
}
.notice-badge { position: absolute; right: -3px; top: -4px; min-width: 17px; height: 17px; padding: 0px 4px; box-sizing: border-box; border-radius: 999px; background: rgb(192, 57, 43); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; line-height: 1; }
.notice-badge[hidden] { display: none !important; }
.notice-admin-form { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0px 12px; }
.notice-admin-form .wide { grid-column: 1 / -1; }
.notice-target-card { margin: 5px 0px 10px; padding: 13px; border-radius: 14px; background: color-mix(in srgb,var(--panel-2) 72%,var(--panel)); }
.notice-target-card[hidden] { display: none !important; }
.notice-target-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.notice-target-head b { font-size: 12.5px; }
.notice-target-head span { font-size: 10.5px; color: var(--muted); }
.notice-target-card .staff-field { margin-bottom: 9px; }
.notice-teacher-checks { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
.notice-admin-form textarea { width: 100%; box-sizing: border-box; resize: vertical; color: var(--av-text-primary); border-radius: 10px; padding: 9px 10px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 12px; line-height: 1.45; background: var(--av-well); box-shadow:var(--av-shadow-well);}
.admin-mini-label { display: block; font-size: 10.5px; font-weight: 800; color: var(--muted); margin: 0px 0px 6px; }
.notice-flags { display: flex; gap: 7px; flex-wrap: wrap; margin: 3px 0px 9px; }
.notice-admin-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.notice-admin-preview { margin-top: 10px; }
.notice-admin-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.notice-admin-item{ --notice-color: var(--accent); --notice-soft: var(--accent-soft); border-radius: 14px; background: color-mix(in srgb,var(--notice-soft) 62%,var(--panel)); }
.notice-history-card{ --notice-color: var(--accent); --notice-soft: var(--accent-soft); border-radius: 14px; background: var(--av-card-bg); box-shadow:var(--av-shadow-card);}
.notice-admin-item.info{ --notice-color: #0d7c8f; --notice-soft: #e7f5f7; }
.notice-history-card.info{ --notice-color: #0d7c8f; --notice-soft: #e7f5f7; }
.notice-admin-item.important{ --notice-color: #b7791f; --notice-soft: #fff4d8; }
.notice-history-card.important{ --notice-color: #b7791f; --notice-soft: #fff4d8; }
.notice-admin-item.urgent{ --notice-color: #c0392b; --notice-soft: #fdebea; }
.notice-history-card.urgent{ --notice-color: #c0392b; --notice-soft: #fdebea; }
html[data-theme="dark"] .notice-admin-item.info{ --notice-soft: #17363d; }
html[data-theme="dark"] .notice-history-card.info{ --notice-soft: #17363d; }
html[data-theme="dark"] .notice-admin-item.important{ --notice-soft: #3b3119; }
html[data-theme="dark"] .notice-history-card.important{ --notice-soft: #3b3119; }
html[data-theme="dark"] .notice-admin-item.urgent{ --notice-soft: #3e2223; }
html[data-theme="dark"] .notice-history-card.urgent{ --notice-soft: #3e2223; }
.notice-admin-item { padding: 11px 12px; cursor: pointer; text-align: left; color: var(--text); font: inherit; }
.notice-admin-item:hover { }
.notice-admin-item .nai-top, .notice-history-card .nh-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.notice-level-chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 3px 7px; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; background: var(--accent-soft) !important; }
.notice-state-chip { display: inline-flex; border-radius: 999px; padding: 3px 7px; font-size: 9px; font-weight: 800; background: var(--panel-2) !important; }
.notice-admin-item b, .notice-history-card h3 { font-size: 13px; }
.notice-admin-item .nai-title { font-weight: 900; margin-top: 7px; }
.notice-admin-item .nai-sub { font-size: 10.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.notice-admin-item .nai-text { font-size: 11px; margin-top: 5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notice-overlay { position: fixed; inset: 0px; z-index: 1200; padding: 20px; display: none; align-items: center; justify-content: center; background: rgba(7, 18, 25, 0.58) !important; }
.notice-overlay.open { display: flex; }
.notice-page-head { display: flex; justify-content: space-between; gap: 10px; }
.notice-history-list { display: flex; flex-direction: column; gap: 9px; }
.notice-history-card { cursor: pointer; background: var(--av-card-bg)!important; box-shadow:var(--av-shadow-card);}
.notice-history-card.unread { box-shadow: var(--av-shadow-card); }
.notice-history-card .nh-meta { font-size: 9.5px; color: var(--faint); margin-top: 8px; }
@media (max-width: 760px) {
.notice-admin-form { grid-template-columns: 1fr; }
.notice-admin-form .wide { grid-column: auto; }
.notice-overlay { padding: 12px; align-items: flex-end; }
}
.access-admin-tabs { display: flex; gap: 7px; flex-wrap: wrap; margin: 0px 0px 14px; }
.access-admin-tab { color: var(--text); border-radius: 11px; padding: 8px 12px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 12px; font-weight: 800; cursor: pointer; background: var(--panel); }
.access-admin-tab.active { color: rgb(255, 255, 255); background: var(--accent); }
.access-admin-panel[hidden] { display: none !important; }
.access-toolbar { display: flex; gap: 7px; flex-wrap: wrap; margin: 10px 0px; }
.access-summary { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0px; }
.access-summary span { border-radius: 999px; padding: 5px 8px; font-size: 10.5px; font-weight: 800; color: var(--muted); background: var(--panel); }
.access-summary span strong { color: var(--text); }
.access-departments { display: flex; flex-direction: column; gap: 12px; }
.access-dept { border-radius: 12px; overflow: hidden; background: var(--panel); }
.access-dept-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 10px; background: var(--panel-2); }
.access-dept-head b { font-size: 13px; margin-right: auto; }
.access-dept-head span { font-size: 10px; color: var(--muted); }
.access-dept-head button { border: 0px; background: none; color: var(--accent-strong); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 10px; font-weight: 800; cursor: pointer; padding: 3px; }
.access-row { display: grid; grid-template-columns: minmax(0px, 1fr) 120px; gap: 8px; align-items: center; padding: 8px 10px; }
.access-row:first-child { border-top: 0px; }
.access-check { display: flex; align-items: center; gap: 8px; min-width: 0px; cursor: pointer; }
.access-check input { width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; }
.access-check span { font-size: 12px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-row select { width: 100%; color: var(--av-text-primary); border-radius: 8px; padding: 6px 7px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 10.5px; background: var(--av-well); box-shadow:var(--av-shadow-well);}
.access-empty { padding: 14px; color: var(--muted); font-size: 11px; text-align: center; }
.access-person-list { max-height: 560px; overflow: auto; border-radius: 12px; background: var(--panel); }
.access-person-row { display: flex; align-items: center; gap: 9px; padding: 9px 10px; }
.access-person-row:first-child { border-top: 0px; }
.access-person-row input { width: 17px; height: 17px; accent-color: var(--accent); }
.access-person-row span { font-size: 12px; font-weight: 750; }
.access-savebar { position: sticky; bottom: 10px; z-index: 8; margin-top: 14px; padding: 10px 12px; box-shadow: var(--shadow); border-radius: 13px; display: flex; align-items: center; gap: 12px; background: color-mix(in srgb,var(--panel) 92%,var(--accent-soft)); }
.access-savebar > div { margin-right: auto; display: flex; flex-direction: column; gap: 2px; }
.access-savebar b { font-size: 11.5px; }
.access-savebar span { font-size: 10px; color: var(--muted); }
.entityDeptTitle { padding: 10px 4px 5px; }
.entityOption .entityDeptTag { float: right; font-size: 9px; font-weight: 900; padding: 2px 6px; border-radius: 999px; color: var(--accent-strong); margin-left: 8px; background: var(--accent-soft); }
@media (max-width: 760px) {
.access-row { grid-template-columns: minmax(0px, 1fr) 105px; }
.access-savebar { bottom: 6px; }
.access-savebar .btn { min-height: 44px; }
.access-dept-head { align-items: flex-start; }
}
.about-version { cursor: pointer; background: var(--panel) !important; }
.pak-chlog-ov { position: fixed; inset: 0px; background: rgba(10, 20, 30, 0.55); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pak-chlog { color: var(--text); border-radius: 18px; max-width: 480px; width: 100%; max-height: 80vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); background: var(--panel); }
.pak-chlog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; }
.pak-chlog-title { font-weight: 800; font-size: 17px; }
.pak-chlog-body { overflow-y: auto; padding: 0px 18px 18px; }
.pak-chlog-item { padding: 12px 0px; }
.pak-chlog-item:first-child { border-top: 0px; }
.pak-chlog-itemhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.pak-chlog-chip { color: rgb(255, 255, 255); border-radius: 8px; padding: 2px 10px; font-size: 12px; font-weight: 800; background: var(--grad); }
.pak-chlog-chip.base { background: var(--muted); }
.pak-chlog-name { font-weight: 700; font-size: 14px; }
.pak-chlog-date { font-size: 12px; color: var(--faint); margin-left: auto; }
.pak-chlog-item ul { margin: 0px; padding-left: 18px; }
.pak-chlog-item li { font-size: 13.5px; line-height: 1.5; margin: 3px 0px; }
html[data-theme="dark"] .pak-chlog-ov { background: rgba(0, 0, 0, 0.62); }
.app-logo { padding: 0px; overflow: hidden; box-shadow: rgba(13, 124, 143, 0.32) 0px 6px 16px -4px; background: transparent !important; }
.app-logo img, .role-choice-logo img, .about-app-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.role-choice-logo { padding: 0px; overflow: hidden; background: var(--grad) !important; }
.aboutBox { position: relative; width: min(430px, 100%); text-align: center; padding: 28px 24px 24px !important; }
.about-app-logo { margin: 2px auto 13px; background: var(--grad) !important; }
.aboutBox h2 { margin: 0px !important; font-size: 22px !important; }
.about-version { display: inline-flex; margin-top: 7px; background: var(--panel) !important; }
.about-description { margin: 14px auto 0px; max-width: 355px; font-size: 12px; line-height: 1.55; color: var(--muted); }
.about-author { padding-right: 14px; padding-bottom: 17px; padding-left: 14px; }
.about-author .label { margin-bottom: 7px; }
.about-author b { line-height: 1.35; }
.about-author span { line-height: 1.4; }
.about-like { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 9px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; cursor: pointer; background: var(--panel) !important; }
.about-like:hover { transform: translateY(-1px); border-color: rgb(230, 83, 114); background: var(--accent-soft) !important; }
.about-like:disabled { cursor: default; transform: none; opacity: 0.88; }
.about-like svg { width: 21px; height: 21px; color: rgb(217, 65, 97); fill: transparent; transition: 0.16s; }
.about-like.liked svg { fill: rgb(217, 65, 97); }
.about-like .count { min-width: 26px; padding-left: 7px; font-variant-numeric: tabular-nums; }
.about-like-status { min-height: 16px; margin-top: 7px; font-size: 10.5px; color: var(--muted); }
.about-like-status.ok { color: var(--ok); }
.about-like-status.err { color: var(--warn); }
@media (max-width: 640px) {
.aboutBox { }
.about-app-logo { width: 66px; height: 66px; border-radius: 20px; }
}
.installBox { position: relative; width: min(470px, 100%); padding: 26px 24px 22px !important; }
.install-hero { display: flex; align-items: center; gap: 13px; padding-right: 42px; }
.install-hero-icon { width: 54px; height: 54px; border-radius: 16px; color: rgb(255, 255, 255); display: grid; place-items: center; box-shadow: 0 10px 25px -13px var(--accent); flex: 0 0 auto; background: linear-gradient(145deg,var(--accent),#32d2a4); }
.install-hero-icon svg { width: 28px; height: 28px; }
.install-hero h2 { line-height: 1.18; margin: 0px !important; font-size: 20px !important; }
.install-hero p { color: var(--muted); line-height: 1.4; margin: 5px 0px 0px !important; font-size: 11.5px !important; }
.install-platform-tabs { display: flex; gap: 7px; margin: 18px 0px 12px; }
.install-platform-tab { flex: 1 1 0%; color: var(--text); border-radius: 11px; padding: 9px 10px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 12px; font-weight: 850; cursor: pointer; background: var(--panel-2); }
.install-platform-tab.active { color: var(--accent-strong); background: var(--accent-soft); }
.install-guide { border-radius: 15px; padding: 14px 15px; background: var(--panel-2); }
.install-guide-title { font-size: 13px; font-weight: 900; margin-bottom: 9px; }
.install-guide ol { margin: 0px; padding-left: 22px; }
.install-guide li { padding: 4px 0px 4px 3px; font-size: 12px; line-height: 1.45; color: var(--text); }
.install-guide li::marker { color: var(--accent-strong); font-weight: 800; }
.install-guide-note { margin-top: 9px; padding-top: 9px; font-size: 10.5px; line-height: 1.45; color: var(--muted); }
.install-state { display: none; margin: 12px 0px 0px; padding: 10px 12px; border-radius: 12px; color: var(--ok); font-size: 11.5px; font-weight: 800; background: var(--ok-soft); }
.install-state.show { display: block; }
.install-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 15px; }
.install-actions .btn { min-height: 43px; }
.install-actions .primary { flex: 1 1 0%; }
.install-actions .btn[hidden] { display: none !important; }
@media (max-width: 640px) {
.installBox { }
.install-hero-icon { width: 50px; height: 50px; border-radius: 15px; }
.install-platform-tabs { margin-top: 15px; }
.install-guide { padding: 13px; }
.install-guide li { font-size: 12.5px; }
.install-actions { display: grid; grid-template-columns: 1fr 1fr; }
.install-actions .primary:only-child { grid-column: 1 / -1; }
}
.notice-page-head { align-items: center; }
.notice-back { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 13px; color: var(--text); display: grid; place-items: center; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 28px; line-height: 1; cursor: pointer; background: var(--panel); }
.notice-back:hover { color: var(--accent-strong); background: var(--accent-soft); }
.notice-center-overlay { position: fixed; inset: 0px; z-index: 1190; display: none; align-items: flex-end; justify-content: center; padding: 12px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: var(--av-surface-1); backdrop-filter: none; }
.notice-center-overlay.open { display: flex; }
.notice-center-dialog { width: min(520px, 100%); max-height: 86dvh; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px 22px 16px 16px; background-color: var(--av-surface-1); box-shadow: var(--av-shadow-modal); }
.notice-center-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 16px; flex: 0 0 auto; }
.notice-center-head h2 { margin: 2px 0px 0px; font-size: 19px; }
.notice-center-body { overflow: auto; }
.notice-center-body .notice-page-head { display: none; }
.notice-center-body .notice-section-title:first-child { margin-top: 3px; }
body.notice-center-open { overflow: hidden; }
@media (min-width: 520px) {
.notice-center-overlay { align-items: center; padding: 20px; }
.notice-center-dialog { border-radius: 22px; max-height: 80dvh; }
}
:root { --premium-radius: 24px; --premium-shadow: 0 18px 48px -30px rgba(13,63,78,.30),0 3px 12px rgba(13,63,78,.05); --premium-glow: 0 14px 40px -22px color-mix(in srgb,var(--accent) 45%,transparent); }
html[data-theme="dark"] { --premium-shadow: 0 22px 52px -30px rgba(0,0,0,.72),0 3px 14px rgba(0,0,0,.24); }
#mobileBellShortcut, #mobileSettingsShortcut { display: none !important; }
.today-chip, .near-chip { display: inline-flex; padding: 4px 8px; border-radius: 999px; font-weight: 850; font-size: 9.5px !important; }
.today-chip { background: var(--accent); color: rgb(255, 255, 255) !important; }
.near-chip { background: var(--accent-soft); color: var(--accent-strong) !important; }
.special-chip { max-width: 150px; white-space: normal; text-align: center; line-height: 1.2; background: var(--warn-soft); }
.themeBox { width: min(520px, 100%); }
.theme-choice-list { display: grid; gap: 8px; margin-top: 14px; }
.theme-choice { width: 100%; color: var(--text); border-radius: 15px; padding: 12px 13px; display: flex; align-items: center; gap: 11px; text-align: left; font: inherit; cursor: pointer; background: var(--panel-2); }
.theme-choice.active { box-shadow: 0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent); background: var(--accent-soft); }
.theme-choice-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--accent-strong); background: var(--panel); }
.theme-choice-icon svg { width: 20px; height: 20px; }
.theme-choice-copy { min-width: 0px; flex: 1 1 0%; }
.theme-choice-copy b { display: block; font-size: 13.5px; }
.theme-choice-copy span { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.theme-check { font-size: 18px; color: var(--accent-strong); font-weight: 900; }
body[data-role="staff"] main.app { max-width: 1220px; }
.build-chip { padding: 6px 10px; border-radius: 999px; color: var(--accent-strong); font-size: 10px; font-weight: 850; background: var(--accent-soft); }
body[data-role="staff"] #dispatcherTools > .staff-tabs { display: none !important; }
body[data-role="staff"] #uploadPanel, body[data-role="staff"] #checkPanel, body[data-role="staff"] #staffSearchPanel, body[data-role="staff"] #view, body[data-role="staff"] #dispatcherTools { transition: opacity 0.15s; }
body[data-role="staff"] #uploadPanel .filechips { display: none; }
body[data-role="staff"] #uploadPanel.show-files .filechips { display: flex; }
.staff-file-toggle { margin-top: 8px; border: 0px; background: none; color: var(--accent-strong); font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 10.5px; font-weight: 800; cursor: pointer; padding: 0px; }
.staff-page-title { margin: 0px 0px 11px; padding: 0px 2px; }
.staff-page-title h2 { margin: 0px; font-size: 21px; letter-spacing: -0.025em; }
.staff-page-title p { margin: 4px 0px 0px; color: var(--muted); font-size: 11.5px; }
.week-select { font-weight: 800; color: var(--text); cursor: pointer; background: var(--panel); }
.week-range-preview { margin-top: 9px; padding: 10px 12px; border-radius: 11px; color: var(--accent-strong); font-size: 12px; font-weight: 800; display: flex; align-items: center; gap: 7px; background: var(--accent-soft); }
.week-range-preview::before { content: "โฃ"; font-size: 13px; }
#search::-webkit-credentials-auto-fill-button, #accessGroupSearch::-webkit-credentials-auto-fill-button, #accessTeacherSearch::-webkit-credentials-auto-fill-button { visibility: hidden !important; display: none !important; pointer-events: none !important; position: absolute !important; right: -9999px !important; }
#search::-webkit-contacts-auto-fill-button, #accessGroupSearch::-webkit-contacts-auto-fill-button, #accessTeacherSearch::-webkit-contacts-auto-fill-button { visibility: hidden !important; display: none !important; pointer-events: none !important; }
.week-publish-preview { margin: -1px 0px 12px; padding: 12px 13px; border-radius: 11px; display: flex; flex-direction: column; gap: 2px; background: linear-gradient(135deg,color-mix(in srgb,var(--accent-soft) 72%,var(--panel)),var(--panel)); }
.week-publish-preview > span { font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.week-publish-preview > b { font-size: 15px; line-height: 1.25; color: var(--text); }
.week-publish-preview > small { font-size: 10.5px; line-height: 1.35; color: var(--muted); margin-top: 3px; }
#publishWeekSelect { cursor: pointer; }
@media screen {
:root { --ring: rgba(13,138,158,.30); --ease-spring: cubic-bezier(.22,.9,.28,1.06); --ease-out: cubic-bezier(.22,.8,.3,1); }
html[data-theme="dark"] { --ring: rgba(58,208,232,.35); }
html { text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; text-rendering: optimizelegibility; transition: background-color 0.25s, color 0.25s; }
::selection { color: var(--text); background: var(--accent-soft); }
html[data-theme="dark"] ::selection { background: rgba(58, 208, 232, 0.3); color: rgb(255, 255, 255); }
:focus-visible { outline-offset: 2px; border-radius: 8px; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { border: 2px solid transparent; background-clip: padding-box; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: padding-box padding-box rgba(255, 255, 255, 0.14); border: 2px solid transparent; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.24); }
button:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)) { cursor: pointer; }
.time, .num, .countdown, .dchip .v, .card-sub { font-variant-numeric: tabular-nums; }
.topbar { backdrop-filter: none; background: color-mix(in srgb,var(--panel) 72%,transparent) !important; }
.topbar { background: color-mix(in srgb,var(--panel) 72%,transparent) !important; }
html[data-theme="dark"] .topbar { background: rgba(10, 17, 24, 0.78) !important; }
.logo { box-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px inset, rgba(13, 124, 143, 0.55) 0px 8px 20px -6px !important; }
html[data-theme="dark"] .logo { box-shadow: rgba(255, 255, 255, 0.22) 0px 1px 0px inset, rgba(58, 208, 232, 0.4) 0px 10px 24px -6px !important; }
.brand h1 { letter-spacing: -0.02em; }
.btn { }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0px) scale(0.98); }
.btn.primary { box-shadow: var(--av-shadow-primary)!important; }
.btn.primary:hover { transform: translateY(-1px); box-shadow: var(--av-shadow-primary)!important; }
.btn.primary:active { transform: translateY(0px) scale(0.98); }
html[data-theme="dark"] .btn { border-color: transparent; }
html[data-theme="dark"] .btn.primary { box-shadow: var(--av-shadow-primary)!important; }
.toggle { }
.modebtn { }
.iconbtn, .backbtn, .mini-btn { }
.iconbtn:hover { transform: translateY(-1px); color: var(--accent-strong) !important; }
.iconbtn:active, .backbtn:active { transform: scale(0.94); }
.panel{ box-shadow: var(--shadow) !important; }
.card{ box-shadow: var(--shadow) !important; }
.day{ box-shadow: var(--shadow) !important; }
.dhead{ box-shadow: var(--shadow) !important; }
.detail{ box-shadow: var(--shadow) !important; }
.agenda{ box-shadow: var(--shadow) !important; }
.cmpbar{ box-shadow: var(--shadow) !important; }
.notice-history-card{ box-shadow: var(--av-shadow-card)!important; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg) !important; }
.card:active { transform: translateY(-1px) scale(0.995); }
html[data-theme="dark"] .card:hover { box-shadow: var(--shadow-lg),0 0 0 1px rgba(255,255,255,.06) !important; }
.avatar { box-shadow: rgba(255, 255, 255, 0.35) 0px 0px 0px 1px inset; }
html[data-theme="dark"] .avatar { filter: brightness(1.55) saturate(1.05); box-shadow: rgba(255, 255, 255, 0.12) 0px 0px 0px 1px inset; }
.lesson { }
.lesson:hover { transform: translateX(3px); box-shadow: 0 6px 18px -8px color-mix(in srgb,var(--accent) 45%,transparent),var(--shadow-sm) !important; background: linear-gradient(115deg,color-mix(in srgb,var(--panel-2) 96%,#fff),color-mix(in srgb,var(--accent-soft) 16%,var(--panel-2))) !important; }
input.search:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .searchwrap input:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .staff-field input:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .staff-field select:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .notice-admin-form input:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .notice-admin-form textarea:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .notice-admin-form select:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)) { transition: border-color 0.18s, box-shadow 0.2s, background 0.18s !important; border-radius: 13px !important; }
input.search:focus:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .searchwrap input:focus:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)) { box-shadow: var(--av-shadow-well)!important; background:var(--av-focus-well);}
.roleOverlay, .notice-overlay, .pak-chlog-ov { backdrop-filter: none; }
.roleOverlay { background: rgba(9, 17, 23, 0.48) !important; }
.notice-overlay { background: rgba(9, 17, 23, 0.48) !important; }
.pak-chlog-ov { background: rgba(9, 17, 23, 0.5) !important; }
html[data-theme="dark"] .roleOverlay, html[data-theme="dark"] .notice-overlay { background: rgba(0, 0, 0, 0.6) !important; }
html[data-theme="dark"] .pak-chlog-ov { background: rgba(0, 0, 0, 0.62) !important; }
.roleBox{ border-radius: 24px !important; box-shadow: var(--av-shadow-modal)!important; }
.pak-notify{ border-radius: 24px !important; box-shadow: rgba(9, 17, 23, 0.12) 0px 2px 8px, rgba(9, 17, 23, 0.45) 0px 32px 68px -20px !important; }
.pak-chlog{ border-radius: 24px !important; box-shadow: rgba(9, 17, 23, 0.12) 0px 2px 8px, rgba(9, 17, 23, 0.45) 0px 32px 68px -20px !important; }
.themeBox{ border-radius: 24px !important; box-shadow: var(--av-shadow-modal)!important; }
html[data-theme="dark"] .roleBox { border: 1px solid transparent; color: var(--text) !important; box-shadow: var(--av-shadow-modal)!important; background: var(--av-surface-1)!important; }
html[data-theme="dark"] .pak-notify, html[data-theme="dark"] .pak-chlog { border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text) !important; background: var(--panel) !important; }
html[data-theme="dark"] .pak-notify-head { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
@keyframes pakPopIn {
0% { opacity: 0; transform: translateY(14px) scale(0.955); }
100% { opacity: 1; transform: none; }
}
.countdown { letter-spacing: 0.01em; }
.today-chip { box-shadow: rgba(13, 124, 143, 0.5) 0px 4px 12px -4px !important; }
html[data-theme="dark"] .today-chip { box-shadow: rgba(58, 208, 232, 0.55) 0px 4px 14px -4px !important; }
.favchip:active { transform: scale(0.97); }
.pak-skel-card { border-radius: 16px !important; }
html[data-theme="dark"] .pak-skel-card { background: rgba(255, 255, 255, 0.035) !important; }
html[data-theme="dark"] .pak-skel-line { background: linear-gradient(90deg, rgba(255, 255, 255, 0.07) 25%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.07) 75%) !important; }
.fresh { font-variant-numeric: tabular-nums; }
.aboutBox { text-align: center; max-width: 440px !important; padding: 26px 24px 24px !important; }
.about-app-logo { width: 92px; height: 92px; border-radius: 26px; box-shadow: var(--shadow-lg); overflow: hidden; margin: 2px auto 14px !important; display: block !important; float: none !important; }
.about-app-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-version { letter-spacing: 0.01em; display: inline-block !important; float: none !important; color: var(--accent-strong) !important; border-radius: 999px !important; padding: 6px 16px !important; font-weight: 800 !important; font-size: 13px !important; text-decoration: none !important; background: var(--accent-soft) !important; }
html[data-theme="dark"] .about-version { background: rgba(58, 208, 232, 0.14) !important; }
.aboutBox h2 { margin: 12px 0px 4px; font-size: 21px; letter-spacing: -0.02em; }
.about-description { color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 320px; margin: 0px auto; }
.about-author { margin-top: 16px; padding-top: 16px; }
.about-like { margin-top: 16px; border-radius: 999px; padding: 11px 20px; display: inline-flex; align-items: center; gap: 9px; background: var(--panel-2); }
.about-like:hover { transform: translateY(-1px); }
.about-like:active { transform: scale(0.96); }
.about-like.liked { border-color: transparent; color: rgb(255, 255, 255); box-shadow: rgba(13, 124, 143, 0.55) 0px 8px 20px -7px; background: var(--grad); }
html[data-theme="dark"] .about-like.liked { box-shadow: rgba(58, 208, 232, 0.5) 0px 8px 22px -7px; }
.about-like svg { width: 17px; height: 17px; }
.about-like .count { font-weight: 800; }
.about-like-status { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
html[data-theme="dark"] body::before { background: radial-gradient(48rem 30rem at 8% -6%, rgba(58, 208, 232, 0.13), transparent 60%), radial-gradient(42rem 26rem at 100% 0%, rgba(99, 102, 241, 0.11), transparent 60%), radial-gradient(38rem 26rem at 50% 110%, rgba(52, 211, 153, 0.08), transparent 60%) !important; }
html[data-theme="dark"] .lesson.special-lesson { border-left-color: rgb(139, 127, 240) !important; background: linear-gradient(90deg,rgba(124,108,222,.17),var(--panel-2)) !important; }
html[data-theme="dark"] .lesson.special-lesson:hover { box-shadow: rgba(124, 108, 222, 0.18) 0px 4px 18px !important; }
html[data-theme="dark"] .lesson.special-lesson .badge { background: rgba(124, 108, 222, 0.25); color: rgb(197, 188, 247); }
html[data-theme="dark"] .special-subject-icon { background: rgba(124, 108, 222, 0.22) !important; color: rgb(197, 188, 247) !important; }
html[data-theme="dark"] .pairnum .pn.special-event-num { background: rgba(124, 108, 222, 0.25) !important; border-color: rgba(124, 108, 222, 0.45) !important; color: rgb(197, 188, 247) !important; }
html[data-theme="dark"] .lesson.now { border-left-color: rgb(240, 179, 74) !important; box-shadow: rgba(232, 185, 60, 0.28) 0px 0px 0px 2px !important; background: linear-gradient(90deg,rgba(19,188,179,.16),var(--panel-2)) !important; }
html[data-theme="dark"] .iconbtn.fav.active { background: rgba(232, 185, 60, 0.16) !important; border-color: rgba(232, 185, 60, 0.45) !important; color: rgb(245, 196, 81) !important; }
html[data-theme="dark"] .iconbtn.fav.active svg { fill: rgb(245, 196, 81) !important; }
html[data-theme="dark"] .dayhead { background: linear-gradient(90deg, rgba(58, 208, 232, 0.09), transparent 75%) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; }
html[data-theme="dark"] .dchip { background: rgba(255, 255, 255, 0.043); }
html[data-theme="dark"] .agenda { background: rgba(58, 208, 232, 0.09) !important; }
html[data-theme="dark"] .cmpbar { background: rgba(58, 208, 232, 0.08) !important; }
html[data-theme="dark"] .entityOption { background: rgba(255, 255, 255, 0.04) !important; }
html[data-theme="dark"] .entityDeptTitle { color: var(--accent-strong) !important; }
html[data-theme="dark"] .check-pill.ok { background: var(--ok-soft) !important; }
html[data-theme="dark"] .check-pill.warn { background: var(--warn-soft) !important; }
html[data-theme="dark"] .check-pill.bad { background: var(--danger-soft) !important; }
.pak-ltip { position: fixed; z-index: 10002; pointer-events: none; backdrop-filter: none; border-radius: 16px; box-shadow: var(--shadow-lg); padding: 10px 18px 11px; text-align: center; min-width: 150px; background: color-mix(in srgb,var(--panel) 94%,transparent); }
html[data-theme="dark"] .pak-ltip { background: rgba(16, 26, 34, 0.96); border-color: rgba(58, 208, 232, 0.28); }
.pak-ltip .lt-label { font-size: 9.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.pak-ltip .lt-time { font-size: 21px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; margin-top: 2px; background-clip: text; -webkit-text-fill-color: transparent; }
.pak-ltip .lt-count { font-size: 12.5px; font-weight: 750; color: var(--accent-strong); margin-top: 3px; font-variant-numeric: tabular-nums; }
.pak-ltip .lt-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.nh-meta:empty, #noticePopupMeta:empty { display: none !important; margin: 0px !important; }
.entityDeptTitle { font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; margin: 12px 4px 6px; font-size: 10.5px !important; color: var(--accent-strong) !important; }
.entityOption { width: 100%; text-align: left; font-weight: 650; font-size: 14.5px; background: transparent !important; border: 0px !important; border-radius: 13px !important; padding: 11px 13px !important; color: var(--text) !important; }
.entityOption:hover { background: var(--accent-soft) !important; }
.entityOption:active { transform: scale(0.98); }
.entityDeptTag { font-size: 10px; font-weight: 750; color: var(--muted); border-radius: 7px; padding: 3px 8px; flex: 0 0 auto; background: var(--panel-2); }
.entityEmpty { padding: 22px 12px; text-align: center; color: var(--muted); font-size: 13.5px; }
.identityCancel { margin-top: 12px; width: 100%; border-radius: 13px !important; padding: 11px !important; font-weight: 700 !important; color: var(--muted) !important; background: var(--panel-2) !important; }
.identityCancel:hover { color: var(--accent-strong) !important; }
.identityCancel:active { transform: scale(0.98); }
html[data-theme="dark"] .entityOption:hover { background: rgba(58, 208, 232, 0.08) !important; }
.notice-badge { font-weight: 800; align-items: center; justify-content: center; box-shadow: rgba(255, 45, 85, 0.6) 0px 4px 12px -3px; animation: 2.4s ease-in-out 0s infinite normal none running pakBadgePulse; min-width: 18px !important; height: 18px !important; padding: 0px 5px !important; border-radius: 999px !important; background: linear-gradient(135deg, rgb(255, 95, 109), rgb(255, 45, 85)) !important; color: rgb(255, 255, 255) !important; font-size: 10.5px !important; display: inline-flex !important; }
.notice-badge.pak-dot { min-width: 10px !important; width: 10px !important; height: 10px !important; padding: 0px !important; font-size: 0px !important; }
@keyframes pakBadgePulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15); }
}
@keyframes pakBellRing {
0%, 26%, 100% { transform: rotate(0deg); }
4% { transform: rotate(12deg); }
9% { transform: rotate(-9deg); }
14% { transform: rotate(6deg); }
19% { transform: rotate(-3deg); }
}
#roleOverlay { align-items: center !important; background: rgba(8, 18, 24, 0.55) !important; }
html[data-theme="dark"] #roleOverlay { background: rgba(0, 0, 0, 0.66) !important; }
#roleOverlay::before { content: ""; position: absolute; inset: -30%; pointer-events: none; animation: 16s ease-in-out 0s infinite alternate none running pakBlobMove; background: linear-gradient(135deg, rgba(255, 255, 255, 0.024), transparent 42%, rgba(119, 239, 198, 0.03)) !important; }
@keyframes pakBlobMove {
0% { transform: translate(0px, 0px) scale(1); }
50% { transform: translate(3%, -2%) scale(1.06); }
100% { transform: translate(-3%, 2%) scale(1.02); }
}
#roleOverlay .role-choice-box { max-width: 390px; width: 100%; display: flex; flex-direction: column; align-items: center; background: transparent !important; border: 0px !important; box-shadow: none !important; animation: auto ease 0s 1 normal none running none !important; padding: 0px !important; overflow: visible !important; }
.role-choice-head { display: flex; flex-direction: column; align-items: center; margin: 0px 0px 22px !important; }
.role-choice-logo { animation: 4.5s ease-in-out 0s infinite normal none running pakFloat; width: 88px !important; height: 88px !important; border-radius: 28px !important; margin: 0px auto 16px !important; box-shadow: rgba(13, 124, 143, 0.6) 0px 24px 50px -18px, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px !important; }
@keyframes pakFloat {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
}
#roleOverlay .role-choice-head h2 { font-weight: 800; letter-spacing: -0.02em; color: rgb(255, 255, 255) !important; font-size: 26px !important; margin: 0px 0px 4px !important; }
#roleOverlay .role-choice-head p { font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, 0.75) !important; margin: 0px !important; }
.role-choice-grid { width: 100%; display: grid !important; grid-template-columns: 1fr !important; gap: 13px !important; padding: 0px !important; }
@keyframes pakRise {
0% { opacity: 0; transform: translateY(18px); }
100% { opacity: 1; transform: none; }
}
.roleCard { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; min-height: 0px !important; margin: 0px !important; padding: 16px 18px !important; border-radius: 20px !important; background: color-mix(in srgb,var(--panel) 93%,transparent) !important; }
.roleCard.role-student { animation-delay: 0.08s; }
.roleCard.role-teacher { animation-delay: 0.16s; }
.roleCard b { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; color: rgb(255, 255, 255) !important; }
.roleCard:hover { transform: translateY(-3px) !important; filter: saturate(1.1) !important; box-shadow: rgba(0, 0, 0, 0.6) 0px 20px 40px -18px, rgba(255, 255, 255, 0.14) 0px 0px 0px 1px !important; }
.roleCard:active { transform: translateY(-1px) scale(0.98) !important; }
.role-card-icon { flex: 0 0 auto; width: 52px !important; height: 52px !important; border-radius: 17px !important; box-shadow: rgba(255, 255, 255, 0.28) 0px 1px 0px inset !important; }
.role-admin-entry { margin: 24px auto 0px; align-items: center; gap: 7px; backdrop-filter: none; font-size: 12.5px; font-weight: 650; position: static !important; top: auto !important; right: auto !important; display: inline-flex !important; background: rgba(255, 255, 255, 0.09) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 999px !important; width: auto !important; height: auto !important; padding: 9px 18px !important; color: rgba(255, 255, 255, 0.68) !important; }
.role-admin-entry svg { width: 15px !important; height: 15px !important; }
.role-admin-entry:hover { border-color: rgba(255, 255, 255, 0.38) !important; color: rgb(255, 255, 255) !important; }
.role-admin-entry:active { transform: scale(0.96) !important; }
}
@media screen and (prefers-reduced-motion: reduce) {
*, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
.topbar .brand h1 { font-weight: 950; letter-spacing: 0.055em; font-size: 20px; }
.topbar .app-logo { border-radius: 15px; box-shadow: rgba(0, 213, 196, 0.72) 0px 10px 26px -14px; }
#roleOverlay .role-choice-head h2 { font-weight: 950; font-size: 27px !important; letter-spacing: 0.07em !important; }
#roleOverlay .role-choice-head p { letter-spacing: 0.04em; font-size: 12px !important; font-weight: 750 !important; }
.install-av-logo { overflow: hidden; padding: 0px !important; background: none !important; border: 0px !important; box-shadow: rgba(0, 208, 190, 0.85) 0px 12px 30px -16px !important; }
.install-av-logo img { width: 100%; height: 100%; display: block; object-fit: cover; }
#aboutOverlay { background-image: initial !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: var(--av-surface-1) !important; backdrop-filter: none!important; }
.about-avera { scrollbar-width: thin; width: min(720px, 100%) !important; max-width: 720px !important; max-height: calc(100dvh - 28px) !important; overflow: auto !important; text-align: left !important; padding: 18px !important; border-radius: 28px !important; box-shadow: rgba(0, 0, 0, 0.55) 0px 30px 90px -34px !important; background: linear-gradient(145deg,color-mix(in srgb,var(--panel) 96%,#ddfffa 4%),var(--panel)) !important; }
.about-avera::before { content: ""; position: absolute; inset: 0px 0px auto; height: 270px; pointer-events: none; background: radial-gradient(28rem 15rem at 80% -10%, rgba(67, 230, 191, 0.19), transparent 65%), radial-gradient(22rem 14rem at 10% -6%, rgba(20, 172, 196, 0.16), transparent 65%); border-radius: 28px 28px 0px 0px; }
.about-avera > * { position: relative; }
.avera-about-hero { padding: 10px 8px 23px; clear: both; }
.avera-about-brand { display: flex; align-items: center; gap: 15px; min-width: 0px; }
.about-avera .about-app-logo { width: 84px !important; height: 84px !important; min-width: 84px !important; margin: 0px !important; border-radius: 24px !important; box-shadow: rgba(0, 201, 183, 0.82) 0px 18px 42px -22px !important; }
.avera-wordmark { flex-direction: column; }
.about-avera .about-version { text-decoration: none !important; cursor: pointer !important; }
.avera-about-hero h2 { line-height: 1.08; letter-spacing: -0.035em; margin: 18px 0px 6px !important; font-size: 27px !important; }
.avera-about-hero > p { margin: 0px; max-width: 540px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.avera-origin::after { background: radial-gradient(circle, rgba(45, 214, 185, 0.15), transparent 68%); }
.avera-origin-formula { flex-wrap: wrap; }
.avera-origin-part b { background-clip: text; }
.avera-origin-part small { text-transform: uppercase; }
.avera-origin-formula i { font-size: 17px; font-style: normal; font-weight: 850; color: var(--faint); }
.about-avera .about-author { margin-top: 13px !important; padding: 18px 4px 2px !important; border: 0px !important; text-align: left !important; }
.about-avera .about-author .label { letter-spacing: 0.12em; }
.about-avera .about-like { width: 100% !important; margin-top: 15px !important; justify-content: center !important; border-radius: 16px !important; min-height: 50px !important; background: var(--panel-2) !important; }
.about-avera .about-like.liked { background: var(--grad) !important; }
.about-avera .about-like-status { text-align: center; }
.avera-about-footer { text-align: center; padding: 18px 0px 4px; font-size: 10px; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; color: var(--faint); }
.avera-about-footer span { margin: 0px 6px; color: var(--accent); }
html[data-theme="dark"] .about-avera { background: linear-gradient(145deg, rgb(15, 29, 36), rgb(11, 23, 29)) !important; border-color: rgba(255, 255, 255, 0.08) !important; }
html[data-theme="dark"] .about-avera::before { background: radial-gradient(28rem 16rem at 80% -10%, rgba(63, 230, 192, 0.17), transparent 65%), radial-gradient(22rem 15rem at 10% -6%, rgba(52, 201, 224, 0.14), transparent 65%); }
@media (max-width: 640px) {
#aboutOverlay { padding: 0px !important; align-items: flex-end !important; }
.about-avera { width: 100% !important; max-width: none !important; max-height: 94dvh !important; border-radius: 28px 28px 0px 0px !important; }
.about-avera::before { border-radius: 28px 28px 0px 0px; }
.avera-about-hero { padding: 7px 4px 18px; }
.about-avera .about-app-logo { width: 68px !important; height: 68px !important; min-width: 68px !important; border-radius: 20px !important; }
.avera-wordmark strong { font-size: 25px; }
.avera-wordmark span { font-size: 10.5px; }
.avera-about-hero h2 { font-size: 23px !important; }
.avera-about-card { padding: 17px; }
}
@media screen {
:root { --avera-deep: #044f5d; --avera-teal: #05889a; --avera-aqua: #11c4bc; --avera-mint: #83efc6; --avera-pearl: #f5f2e7; --ring: rgba(17,196,188,.20) !important; }
html[data-theme="dark"] { --ring: rgba(125,233,196,.18) !important; }
html[data-theme="dark"] body::before { background: radial-gradient(50rem 30rem at 6% -8%, rgba(19, 188, 179, 0.12), transparent 58%), radial-gradient(44rem 26rem at 100% 0%, rgba(131, 239, 198, 0.1), transparent 54%), radial-gradient(42rem 24rem at 50% 105%, rgba(4, 79, 93, 0.16), transparent 60%) !important; }
.logo, .role-choice-logo, .about-app-logo, .app-logo { box-shadow: rgba(255, 255, 255, 0.34) 0px 1px 0px inset, rgba(8, 116, 126, 0.58) 0px 16px 34px -16px, rgba(131, 239, 198, 0.2) 0px 0px 0px 1px !important; }
html[data-theme="dark"] .logo, html[data-theme="dark"] .role-choice-logo, html[data-theme="dark"] .about-app-logo, html[data-theme="dark"] .app-logo { box-shadow: rgba(255, 255, 255, 0.12) 0px 1px 0px inset, rgba(19, 188, 179, 0.52) 0px 18px 40px -18px, rgba(131, 239, 198, 0.28) 0px 0px 22px -8px !important; }
.btn.primary{ border-color: transparent!important; color:var(--av-primary-ink)!important; box-shadow:var(--av-shadow-primary)!important; background: var(--av-primary-gradient)!important; }
.staff-tab.active{ border-color: transparent !important; color:var(--a2-legacy-ink,rgb(255, 255, 255))!important; box-shadow:var(--a2-legacy-shadow-inset,rgba(5, 136, 154, 0.55) 0px 10px 24px -12px, rgba(255, 255, 255, 0.28) 0px 1px 0px inset)!important; background: var(--grad) !important; }
.access-admin-tab.active{ border-color: transparent !important; color:var(--a2-legacy-ink,rgb(255, 255, 255))!important; box-shadow:var(--a2-legacy-shadow-inset,rgba(5, 136, 154, 0.55) 0px 10px 24px -12px, rgba(255, 255, 255, 0.28) 0px 1px 0px inset)!important; background: var(--grad) !important; }
.access-role.active{ border-color: transparent !important; color:var(--a2-legacy-ink,rgb(255, 255, 255))!important; box-shadow:var(--a2-legacy-shadow-inset,rgba(5, 136, 154, 0.55) 0px 10px 24px -12px, rgba(255, 255, 255, 0.28) 0px 1px 0px inset)!important; background: var(--grad) !important; }
.modebtn.active{ border-color: transparent !important; color:var(--a2-legacy-ink,rgb(255, 255, 255))!important; box-shadow:var(--a2-legacy-shadow-inset,rgba(5, 136, 154, 0.55) 0px 10px 24px -12px, rgba(255, 255, 255, 0.28) 0px 1px 0px inset)!important; background: var(--grad) !important; }
.toggle.on{ border-color: transparent !important; color:var(--a2-legacy-ink,rgb(255, 255, 255))!important; box-shadow:var(--a2-legacy-shadow-inset,rgba(5, 136, 154, 0.55) 0px 10px 24px -12px, rgba(255, 255, 255, 0.28) 0px 1px 0px inset)!important; background: var(--grad) !important; }
html[data-theme="dark"] .btn.primary{ box-shadow:var(--av-shadow-primary)!important; }
html[data-theme="dark"] .staff-tab.active{ box-shadow:var(--a2-legacy-shadow-inset,rgba(19, 188, 179, 0.5) 0px 12px 28px -14px, rgba(255, 255, 255, 0.16) 0px 1px 0px inset)!important; }
html[data-theme="dark"] .access-admin-tab.active{ box-shadow:var(--a2-legacy-shadow-inset,rgba(19, 188, 179, 0.5) 0px 12px 28px -14px, rgba(255, 255, 255, 0.16) 0px 1px 0px inset)!important; }
html[data-theme="dark"] .access-role.active{ box-shadow:var(--a2-legacy-shadow-inset,rgba(19, 188, 179, 0.5) 0px 12px 28px -14px, rgba(255, 255, 255, 0.16) 0px 1px 0px inset)!important; }
html[data-theme="dark"] .modebtn.active{ box-shadow:var(--a2-legacy-shadow-inset,rgba(19, 188, 179, 0.5) 0px 12px 28px -14px, rgba(255, 255, 255, 0.16) 0px 1px 0px inset)!important; }
html[data-theme="dark"] .toggle.on{ box-shadow:var(--a2-legacy-shadow-inset,rgba(19, 188, 179, 0.5) 0px 12px 28px -14px, rgba(255, 255, 255, 0.16) 0px 1px 0px inset)!important; }
.btn.primary:hover { filter: saturate(1.03) brightness(1.02) !important; }
.today-chip, .build-chip, .about-version { color: rgb(255, 255, 255) !important; background: var(--grad) !important; }
.build-chip, .about-version { box-shadow: rgba(5, 136, 154, 0.45) 0px 8px 20px -16px !important; }
.dayhead { background: linear-gradient(100deg,color-mix(in srgb,var(--accent-soft) 86%,var(--panel)),var(--panel) 75%) !important; }
html[data-theme="dark"] .dayhead { background: linear-gradient(100deg, rgba(19, 188, 179, 0.12), rgba(11, 27, 32, 0.98) 72%) !important; }
.dayhead::before { background: linear-gradient(180deg,var(--avera-deep),var(--avera-aqua) 68%,var(--avera-mint)) !important; }
.day:has(.today-chip) { box-shadow: 0 0 0 3px var(--ring),var(--shadow) !important; }
.lesson.now { border-left-color: var(--accent) !important; box-shadow: 0 0 0 2px color-mix(in srgb,var(--accent) 28%,transparent),0 12px 24px -18px rgba(5,136,154,.48) !important; background: linear-gradient(90deg,color-mix(in srgb,var(--accent-soft) 92%,var(--panel)),var(--panel-2)) !important; }
html[data-theme="dark"] .lesson.now { box-shadow: rgba(125, 233, 196, 0.18) 0px 0px 0px 1px, rgba(19, 188, 179, 0.26) 0px 12px 24px -16px !important; background: linear-gradient(90deg,rgba(19,188,179,.16),var(--panel-2)) !important; }
.pairnum .pn, .roompill { }
.roompill { color: rgb(255, 255, 255) !important; box-shadow: rgba(5, 136, 154, 0.62) 0px 10px 18px -14px !important; background: linear-gradient(160deg,var(--avera-deep),var(--avera-aqua) 72%,var(--avera-mint)) !important; }
.near-chip, .pak-ltip .lt-count, .avera-kicker, .entityDeptTitle { color: var(--accent-strong) !important; }
input.search:focus:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .searchwrap input:focus:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .staff-field input:focus:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .staff-field select:focus:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .notice-admin-form input:focus:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .notice-admin-form textarea:focus:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .notice-admin-form select:focus:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)) { box-shadow:var(--av-shadow-well)!important; background:var(--av-focus-well);}
.staff-box, .access-dept, .access-person-list, .about-avera .avera-about-card { }
.about-avera::before { opacity: 1 !important; background: linear-gradient(135deg,var(--avera-deep) 0%,var(--avera-aqua) 52%,var(--avera-mint) 100%) !important; }
.about-avera .about-author, .avera-about-card, .about-avera .about-like { }
.about-avera .about-like.liked { box-shadow: rgba(5, 136, 154, 0.6) 0px 14px 24px -18px !important; background: linear-gradient(135deg, rgb(8, 113, 132), rgb(18, 188, 179) 62%, rgb(120, 233, 195)) !important; }
.roleCard { background: color-mix(in srgb,var(--panel) 93%,transparent) !important; }
.roleCard:hover { box-shadow: rgba(5, 136, 154, 0.55) 0px 18px 34px -24px, rgba(131, 239, 198, 0.14) 0px 0px 0px 1px !important; }
.notice-history-card{ box-shadow: var(--av-shadow-card)!important; }
.card{ box-shadow: var(--shadow),0 10px 24px -22px rgba(5,136,154,.18) !important; }
.day{ box-shadow: var(--shadow),0 10px 24px -22px rgba(5,136,154,.18) !important; }
html[data-theme="dark"] .notice-history-card{ box-shadow: var(--av-shadow-card)!important; }
html[data-theme="dark"] .card{ box-shadow: var(--shadow),0 12px 28px -22px rgba(19,188,179,.16) !important; }
html[data-theme="dark"] .day{ box-shadow: var(--shadow),0 12px 28px -22px rgba(19,188,179,.16) !important; }
}
@media screen {
#aboutOverlay { padding: 18px !important; align-items: center !important; background-image: initial !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: var(--av-surface-1) !important; backdrop-filter: none!important; }
.about-avera { scrollbar-width: thin; position: relative !important; width: min(680px, 100%) !important; max-width: 680px !important; max-height: calc(100dvh - 36px) !important; overflow: auto !important; text-align: left !important; padding: 18px 18px 20px !important; border-radius: 28px !important; box-shadow: rgba(0, 0, 0, 0.58) 0px 32px 90px -36px !important; background: var(--panel) !important; }
.about-avera::before { display: none !important; background: linear-gradient(135deg,var(--avera-deep) 0%,var(--avera-aqua) 52%,var(--avera-mint) 100%) !important; }
.about-avera > * { position: relative; z-index: 1; }
.avera-about-hero-card { clear: both; position: relative; overflow: hidden; padding: 20px 21px 19px; border-radius: 23px; box-shadow: var(--shadow-sm); background: linear-gradient(135deg,color-mix(in srgb,var(--panel) 97%,var(--accent-soft) 3%),color-mix(in srgb,var(--panel) 91%,var(--accent-soft) 9%)); }
.avera-about-hero-card::after { content: ""; position: absolute; width: 230px; height: 230px; border-radius: 50%; right: -105px; top: -125px; background: radial-gradient(circle, rgba(131, 239, 198, 0.23), rgba(17, 196, 188, 0.1) 42%, transparent 70%); pointer-events: none; }
.avera-about-brandrow { display: grid; grid-template-columns: auto minmax(0px, 1fr) auto; align-items: center; gap: 14px; position: relative; z-index: 1; }
.about-avera .about-app-logo { width: 76px !important; height: 76px !important; min-width: 76px !important; margin: 0px !important; border-radius: 22px !important; overflow: hidden !important; box-shadow: rgba(5, 136, 154, 0.7) 0px 16px 34px -20px, rgba(131, 239, 198, 0.12) 0px 0px 0px 1px !important; }
.about-avera .about-app-logo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avera-wordmark { display: flex; flex-direction: column; min-width: 0px; }
.avera-wordmark strong { font-size: 29px; line-height: 1; font-weight: 950; letter-spacing: 0.105em; color: var(--text); }
.avera-wordmark span { margin-top: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.075em; color: var(--muted); }
.about-avera .about-version { margin: 0px !important; align-self: center !important; display: inline-flex !important; white-space: nowrap !important; padding: 6px 10px !important; border-radius: 999px !important; color: var(--accent-strong) !important; box-shadow: none !important; font-size: 10.5px !important; font-weight: 850 !important; text-decoration: none !important; background: color-mix(in srgb,var(--accent-soft) 88%,var(--panel)) !important; }
.avera-hero-copy { position: relative; z-index: 1; margin-top: 19px; padding-top: 16px; }
.avera-hero-copy h2 { margin: 0px !important; font-size: 25px !important; line-height: 1.12 !important; letter-spacing: -0.035em !important; color: var(--text) !important; }
.avera-hero-copy p { max-width: 535px; margin: 7px 0px 0px !important; font-size: 13.5px !important; line-height: 1.56 !important; color: var(--muted) !important; }
.avera-about-card { position: relative; overflow: hidden; margin-top: 12px !important; padding: 19px 20px !important; border-radius: 21px !important; box-shadow: rgba(5, 136, 154, 0.3) 0px 10px 26px -24px !important; background: var(--panel) !important; }
.avera-kicker { font-size: 9.5px !important; font-weight: 900 !important; text-transform: uppercase !important; letter-spacing: 0.15em !important; color: var(--accent-strong) !important; margin-bottom: 8px !important; }
.avera-origin::after { content: "" !important; position: absolute !important; width: 155px !important; height: 155px !important; border-radius: 50% !important; right: -85px !important; top: -85px !important; background: radial-gradient(circle, rgba(131, 239, 198, 0.15), transparent 68%) !important; pointer-events: none !important; }
.avera-origin-lockup { display: flex !important; align-items: center !important; gap: 9px !important; margin: 0px 0px 9px !important; }
.avera-origin-lockup span { font-size: 28px !important; font-weight: 950 !important; letter-spacing: 0.065em !important; background-clip: text !important; color: transparent !important; }
.avera-origin-lockup i { font-size: 18px !important; font-style: normal !important; font-weight: 600 !important; color: var(--faint) !important; }
.avera-origin p { max-width: 590px; margin: 0px !important; font-size: 13px !important; line-height: 1.62 !important; color: var(--muted) !important; }
.avera-origin p strong { color: var(--text) !important; }
.avera-features-card h3 { margin: 0px !important; font-size: 18px !important; letter-spacing: -0.02em !important; }
.about-avera .about-author { margin: 15px 4px 0px !important; padding: 17px 2px 0px !important; border-bottom: 0px !important; text-align: left !important; }
.about-avera .about-author .label { margin-bottom: 7px !important; font-size: 9.5px !important; font-weight: 900 !important; letter-spacing: 0.14em !important; color: var(--muted) !important; }
.about-avera .about-author b { font-size: 13.5px !important; line-height: 1.35 !important; }
.about-avera .about-author span { font-size: 11px !important; line-height: 1.45 !important; color: var(--muted) !important; }
.about-avera .about-like { width: 100% !important; margin-top: 14px !important; min-height: 48px !important; justify-content: center !important; border-radius: 15px !important; color: var(--text) !important; box-shadow: none !important; background: var(--panel) !important; }
.about-avera .about-like:hover { box-shadow: rgba(17, 196, 188, 0.5) 0px 10px 22px -20px !important; }
.about-avera .about-like.liked { border-color: transparent !important; color: rgb(255, 255, 255) !important; background: linear-gradient(135deg, rgb(8, 113, 132), rgb(18, 188, 179) 62%, rgb(120, 233, 195)) !important; }
.about-avera .about-like-status { text-align: center !important; margin-top: 7px !important; font-size: 10.5px !important; }
.avera-about-footer { text-align: center !important; padding: 16px 0px 2px !important; font-size: 9.5px !important; font-weight: 850 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--faint) !important; }
.avera-about-footer span { margin: 0px 6px !important; color: var(--accent) !important; }
html[data-theme="dark"] .about-avera { background: rgb(8, 22, 26) !important; border-color: rgba(131, 239, 198, 0.08) !important; }
html[data-theme="dark"] .avera-about-hero-card { background: linear-gradient(135deg, rgba(10, 30, 35, 0.98), rgba(11, 42, 45, 0.86)) !important; border-color: rgba(125, 233, 196, 0.12) !important; }
html[data-theme="dark"] .avera-about-hero-card::after { background: radial-gradient(circle, rgba(131, 239, 198, 0.16), rgba(19, 188, 179, 0.08) 42%, transparent 70%) !important; }
html[data-theme="dark"] .avera-about-card { background: rgba(255, 255, 255, 0.024) !important; border-color: rgba(131, 239, 198, 0.07) !important; }
}
@media (max-width: 640px) {
#aboutOverlay { padding: 0px !important; align-items: flex-end !important; }
.about-avera { width: 100% !important; max-width: none !important; max-height: 94dvh !important; border-radius: 28px 28px 0px 0px !important; }
.avera-about-hero-card { padding: 17px !important; border-radius: 21px !important; }
.avera-about-brandrow { grid-template-columns: auto minmax(0px, 1fr) !important; gap: 12px !important; }
.about-avera .about-app-logo { width: 64px !important; height: 64px !important; min-width: 64px !important; border-radius: 18px !important; }
.avera-wordmark strong { font-size: 24px !important; }
.avera-wordmark span { font-size: 9.8px !important; margin-top: 5px !important; }
.about-avera .about-version { grid-column: 1 / -1 !important; justify-self: start !important; margin-top: 2px !important; }
.avera-hero-copy { margin-top: 14px !important; padding-top: 14px !important; }
.avera-hero-copy h2 { font-size: 22px !important; }
.avera-hero-copy p { font-size: 12.5px !important; }
.avera-about-card { padding: 16px !important; border-radius: 19px !important; }
.avera-origin-part b { font-size: 21px !important; }
.avera-origin-part { min-width: 76px !important; padding: 8px 10px !important; }
.avera-origin-formula > strong { font-size: 22px !important; }
}
@media screen {
.near-chip { display: none !important; }
#roleOverlay { padding: 24px 18px !important; background: radial-gradient(34rem 25rem at 50% -10%, rgba(41, 211, 194, 0.2), transparent 58%), radial-gradient(26rem 22rem at 92% 90%, rgba(118, 239, 196, 0.12), transparent 62%), linear-gradient(155deg, rgb(6, 35, 43) 0%, rgb(7, 26, 32) 56%, rgb(6, 17, 22) 100%) !important; }
#roleOverlay::before { content: "" !important; position: absolute !important; inset: 0px !important; pointer-events: none !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.024), transparent 42%, rgba(119, 239, 198, 0.03)) !important; animation: auto ease 0s 1 normal none running none !important; }
#roleOverlay .role-choice-box { max-width: 410px !important; width: 100% !important; background: transparent !important; }
#roleOverlay .role-choice-head { margin: 0px 0px 24px !important; }
#roleOverlay .role-choice-logo { width: 78px !important; height: 78px !important; border-radius: 24px !important; margin: 0px auto 14px !important; box-shadow: rgba(20, 196, 184, 0.58) 0px 22px 42px -20px, rgba(164, 247, 217, 0.2) 0px 0px 0px 1px !important; animation: auto ease 0s 1 normal none running none !important; }
#roleOverlay .role-choice-head h2 { color: rgb(246, 251, 250) !important; font-size: 29px !important; font-weight: 900 !important; letter-spacing: 0.08em !important; margin: 0px !important; line-height: 1.05 !important; }
#roleOverlay .role-choice-head p { margin: 7px 0px 0px !important; color: rgba(223, 242, 239, 0.66) !important; font-size: 12px !important; font-weight: 650 !important; letter-spacing: 0.035em !important; }
#roleOverlay .role-choice-grid { gap: 11px !important; }
#roleOverlay .roleCard { position: relative !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 14px !important; width: 100% !important; min-height: 78px !important; padding: 13px 15px !important; margin: 0px !important; border-radius: 20px !important; background: linear-gradient(125deg, rgba(13, 45, 52, 0.94), rgba(10, 58, 64, 0.88)) !important; border: 1px solid rgba(137, 239, 209, 0.14) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(255, 255, 255, 0.043) 0px 1px 0px inset, rgba(0, 0, 0, 0.9) 0px 16px 32px -28px !important; overflow: hidden !important; filter: none !important; animation: auto ease 0s 1 normal none running none !important; }
#roleOverlay .roleCard::before { content: "" !important; position: absolute !important; width: 170px !important; height: 110px !important; right: -72px !important; top: -66px !important; border-radius: 50% !important; background: rgba(104, 239, 200, 0.08) !important; filter: blur(2px) !important; }
#roleOverlay .roleCard:hover { transform: translateY(-2px) !important; border-color: rgba(137, 239, 209, 0.3) !important; background: linear-gradient(125deg, rgba(13, 49, 56, 0.98), rgba(9, 72, 75, 0.92)) !important; box-shadow: rgba(8, 203, 188, 0.42) 0px 18px 34px -26px, rgba(255, 255, 255, 0.07) 0px 1px 0px inset !important; }
#roleOverlay .roleCard:active { transform: scale(0.985) !important; }
#roleOverlay .role-card-icon { position: relative !important; z-index: 1 !important; width: 50px !important; height: 50px !important; border-radius: 16px !important; display: grid !important; place-items: center !important; flex: 0 0 50px !important; color: rgb(248, 255, 252) !important; background: linear-gradient(145deg, rgb(7, 90, 105), rgb(16, 185, 176) 64%, rgb(128, 238, 197)) !important; border: 1px solid rgba(207, 255, 240, 0.22) !important; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px inset, rgba(15, 191, 177, 0.65) 0px 12px 24px -17px !important; }
#roleOverlay .role-card-icon svg { width: 24px !important; height: 24px !important; }
#roleOverlay .role-card-copy { position: relative !important; z-index: 1 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; min-width: 0px !important; }
#roleOverlay .role-card-copy b { font-size: 16.5px !important; color: rgb(248, 252, 251) !important; font-weight: 820 !important; line-height: 1.15 !important; }
#roleOverlay .role-card-copy small { font-size: 11.5px !important; color: rgba(220, 239, 236, 0.62) !important; font-weight: 600 !important; line-height: 1.3 !important; }
#roleOverlay .role-admin-entry { margin: 18px auto 0px !important; padding: 8px 14px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.035) !important; border: 1px solid rgba(255, 255, 255, 0.11) !important; color: rgba(229, 242, 241, 0.58) !important; box-shadow: none !important; animation: auto ease 0s 1 normal none running none !important; }
#roleOverlay .role-admin-entry:hover { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(123, 237, 206, 0.24) !important; color: rgb(234, 248, 244) !important; }
.about-avera .about-like { width: max-content !important; max-width: 100% !important; min-height: 40px !important; margin: 15px auto 0px !important; padding: 8px 15px !important; border-radius: 999px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; color: var(--text) !important; box-shadow: rgba(9, 52, 59, 0.36) 0px 8px 22px -20px !important; background: var(--panel) !important; }
.about-avera .about-like svg { width: 17px !important; height: 17px !important; color: rgb(223, 85, 112) !important; }
.about-avera .about-like .count { min-width: 0px !important; padding: 0px !important; margin: 0px !important; border: 0px !important; font-size: 12px !important; }
.about-avera .about-like .count::before { content: "ยท"; margin-right: 8px; opacity: 0.58; font-weight: 800; }
.about-avera .about-like.liked { background: linear-gradient(135deg, rgb(8, 113, 132), rgb(18, 188, 179) 62%, rgb(120, 233, 195)) !important; color: rgb(255, 255, 255) !important; border-color: transparent !important; box-shadow: rgba(13, 174, 165, 0.58) 0px 12px 26px -19px !important; }
.about-avera .about-like.liked svg { color: rgb(255, 216, 223) !important; fill: rgb(242, 103, 127) !important; }
.about-avera .about-like-status:empty { display: none !important; }
@media (max-width: 560px) {
#roleOverlay { padding: 20px 14px !important; }
#roleOverlay .role-choice-logo { width: 72px !important; height: 72px !important; border-radius: 22px !important; }
#roleOverlay .role-choice-head h2 { font-size: 27px !important; }
#roleOverlay .roleCard { min-height: 74px !important; padding: 12px 13px !important; border-radius: 18px !important; }
#roleOverlay .role-card-icon { width: 47px !important; height: 47px !important; flex-basis: 47px !important; border-radius: 15px !important; }
}
}
@media screen {
#roleOverlay .role-admin-entry { margin: 18px auto 0px !important; padding: 8px 16px !important; border-radius: 999px !important; background: linear-gradient(rgba(255, 255, 255, 0.027), rgba(0, 0, 0, 0.14)) !important; border: 1px solid rgba(154, 226, 211, 0.14) !important; color: rgba(226, 241, 239, 0.64) !important; box-shadow: rgba(0, 0, 0, 0.42) 0px 2px 6px inset, rgba(255, 255, 255, 0.055) 0px -1px 0px inset, rgba(255, 255, 255, 0.024) 0px 1px 0px !important; text-shadow: none !important; }
#roleOverlay .role-admin-entry svg { opacity: 0.82 !important; }
#roleOverlay .role-admin-entry:hover { background: linear-gradient(rgba(255, 255, 255, 0.043), rgba(0, 0, 0, 0.1)) !important; border-color: rgba(125, 233, 196, 0.28) !important; color: rgb(238, 250, 246) !important; box-shadow: rgba(0, 0, 0, 0.34) 0px 1px 4px inset, rgba(255, 255, 255, 0.07) 0px -1px 0px inset, rgba(125, 233, 196, 0.024) 0px 0px 0px 1px !important; }
#roleOverlay .role-admin-entry:active { transform: translateY(1px) scale(0.985) !important; box-shadow: rgba(0, 0, 0, 0.52) 0px 3px 8px inset !important; }
}
@media screen {
#roleOverlay .role-card-copy { gap: 0px !important; }
#roleOverlay .role-card-copy small { display: none !important; }
#roleOverlay .roleCard { min-height: 84px !important; padding: 13px 15px !important; background: linear-gradient(125deg, rgba(13, 45, 52, 0.94), rgba(10, 58, 64, 0.88)) !important; }
#roleOverlay .role-admin-entry { margin: 20px auto 0px !important; min-width: 238px !important; justify-content: center !important; padding: 10px 20px !important; border-radius: 999px !important; background: linear-gradient(rgb(89, 102, 109) 0%, rgb(75, 87, 94) 100%) !important; border: 1px solid rgba(235, 243, 245, 0.34) !important; color: rgb(244, 247, 248) !important; font-size: 13px !important; font-weight: 760 !important; box-shadow: rgba(255, 255, 255, 0.14) 0px 1px 0px inset, rgba(0, 0, 0, 0.14) 0px -7px 14px inset, rgba(0, 0, 0, 0.55) 0px 2px 6px -4px !important; text-shadow: none !important; transition: background 0.16s, border-color 0.16s, box-shadow 0.16s, transform 0.12s !important; }
#roleOverlay .role-admin-entry svg { width: 16px !important; height: 16px !important; opacity: 0.92 !important; }
#roleOverlay .role-admin-entry:hover { background: linear-gradient(rgb(97, 110, 117) 0%, rgb(80, 92, 99) 100%) !important; border-color: rgba(255, 255, 255, 0.46) !important; color: rgb(255, 255, 255) !important; transform: translateY(-1px) !important; box-shadow: rgba(255, 255, 255, 0.16) 0px 1px 0px inset, rgba(0, 0, 0, 0.13) 0px -7px 14px inset, rgba(0, 0, 0, 0.72) 0px 6px 14px -10px !important; }
#roleOverlay .role-admin-entry:active { transform: translateY(1px) !important; box-shadow: rgba(0, 0, 0, 0.28) 0px 3px 7px inset, rgba(255, 255, 255, 0.06) 0px 1px 0px inset !important; }
.lesson { transform: none !important; }
.lesson:hover { transform: none !important; background: linear-gradient(115deg,color-mix(in srgb,var(--panel-2) 96%,#fff),color-mix(in srgb,var(--accent-soft) 16%,var(--panel-2))) !important; }
.lesson { transition: transform 0.16s cubic-bezier(0.22, 0.8, 0.3, 1), background 0.18s, border-color 0.18s, box-shadow 0.2s !important; }
.lesson:hover { box-shadow: rgba(255, 255, 255, 0.68) 0px 1px 0px inset, rgba(4, 79, 93, 0.48) 0px 12px 25px -22px !important; background: linear-gradient(115deg,color-mix(in srgb,var(--panel-2) 96%,#fff),color-mix(in srgb,var(--accent-soft) 16%,var(--panel-2))) !important; }
html[data-theme="dark"] .lesson:hover { background: linear-gradient(115deg, rgba(18, 43, 48, 0.96), rgba(11, 31, 36, 0.96)) !important; border-color: rgba(125, 233, 196, 0.16) !important; box-shadow: rgba(255, 255, 255, 0.04) 0px 1px 0px inset, rgba(19, 188, 179, 0.34) 0px 14px 28px -23px !important; }
}
.bell-break { font-variant-numeric: tabular-nums; background: var(--panel-2); margin: 0px 6px !important; padding: 5px 0px 5px 60px !important; color: var(--faint) !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.25 !important; }
.roleOverlay { backdrop-filter: none; background: radial-gradient(30rem 24rem at 20% 18%, rgba(24, 178, 191, 0.22), transparent 68%), radial-gradient(28rem 22rem at 82% 24%, rgba(69, 115, 226, 0.16), transparent 70%), radial-gradient(26rem 20rem at 52% 88%, rgba(44, 201, 157, 0.14), transparent 70%), rgba(7, 18, 25, 0.72) !important; }
.role-choice-box { width: min(420px, 100%) !important; padding: 0px !important; background: transparent !important; border: 0px !important; box-shadow: none !important; overflow: visible !important; }
.role-choice-head { margin: 0px 0px 22px !important; text-align: center !important; }
.role-choice-logo { width: 76px !important; height: 76px !important; margin: 0px auto 14px !important; border-radius: 24px !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; box-shadow: rgba(255, 255, 255, 0.34) 0px 1px 0px inset, rgba(10, 176, 186, 0.74) 0px 18px 38px -15px !important; background: var(--grad) !important; }
.role-choice-head h2 { margin: 0px !important; color: rgb(255, 255, 255) !important; font-size: 27px !important; font-weight: 850 !important; letter-spacing: -0.03em !important; }
.role-choice-head p { margin: 6px auto 0px !important; color: rgba(240, 250, 252, 0.74) !important; font-size: 12.5px !important; font-weight: 650 !important; line-height: 1.35 !important; }
.role-choice-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; }
.roleCard { background: var(--panel-2); min-height: 84px !important; padding: 14px 16px !important; border-radius: 19px !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; box-shadow: rgba(255, 255, 255, 0.2) 0px 1px 0px inset, rgba(0, 0, 0, 0.52) 0px 12px 26px -18px !important; }
.roleCard::before { width: 100px !important; height: 100px !important; top: -30px !important; right: -26px !important; background: rgba(255, 255, 255, 0.13) !important; }
.roleCard:hover { transform: translateY(-2px) !important; filter: saturate(1.06) brightness(1.03) !important; }
.roleCard:active { transform: scale(0.985) !important; }
.role-card-icon { width: 42px !important; height: 42px !important; border-radius: 14px !important; background: rgba(255, 255, 255, 0.18) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; }
.role-card-icon svg { width: 23px !important; height: 23px !important; }
.roleCard b { margin-top: 0px !important; font-size: 17px !important; font-weight: 850 !important; letter-spacing: -0.025em !important; white-space: nowrap !important; }
.role-card-copy { display: none !important; }
.role-admin-entry { position: static !important; width: auto !important; height: auto !important; margin: 14px auto 0px !important; padding: 8px 12px !important; border-radius: 999px !important; background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; color: rgba(245, 252, 253, 0.86) !important; display: flex !important; align-items: center !important; gap: 7px !important; font-size: 11px !important; font-weight: 750 !important; box-shadow: none !important; }
.role-admin-entry:hover { background: rgba(255, 255, 255, 0.16) !important; border-color: rgba(255, 255, 255, 0.27) !important; color: rgb(255, 255, 255) !important; }
.role-admin-entry svg { width: 15px !important; height: 15px !important; }
.role-admin-entry .rae-text { display: inline !important; }
.entityDeptTitle { margin: 11px 8px 4px !important; color: var(--accent-strong) !important; font-size: 9.5px !important; font-weight: 900 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; }
.entityOption { position: relative !important; width: 100% !important; min-height: 44px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 10px 12px !important; overflow: hidden !important; border-radius: 13px !important; color: var(--text) !important; font-style: inherit !important; font-variant: inherit !important; font-stretch: inherit !important; font-family: inherit !important; font-optical-sizing: inherit !important; font-size-adjust: inherit !important; font-kerning: inherit !important; font-feature-settings: inherit !important; font-variation-settings: inherit !important; font-language-override: inherit !important; font-size: 13.5px !important; font-weight: 750 !important; line-height: 1.3 !important; text-align: left !important; cursor: pointer !important; transition: background 0.16s, border-color 0.16s, transform 0.12s !important; background: color-mix(in srgb,var(--panel) 82%,var(--panel-2)) !important; }
.entityOption:hover { background: var(--accent-soft) !important; }
.entityOption:active { transform: scale(0.988) !important; }
.entityDeptTag { flex: 0 0 auto !important; padding: 3px 7px !important; border-radius: 7px !important; color: var(--muted) !important; font-size: 9px !important; font-weight: 850 !important; letter-spacing: 0.05em !important; background: var(--panel-2) !important; }
.entityEmpty { padding: 24px 8px !important; color: var(--muted) !important; text-align: center !important; font-size: 12.5px !important; line-height: 1.45 !important; }
html[data-theme="dark"] .entityOption { background: rgba(255, 255, 255, 0.035) !important; border-color: rgba(255, 255, 255, 0.07) !important; }
html[data-theme="dark"] .entityOption:hover { background: rgba(58, 208, 232, 0.09) !important; border-color: rgba(58, 208, 232, 0.17) !important; }
html[data-theme="dark"] .entityDeptTag { background: rgba(255, 255, 255, 0.043) !important; border-color: rgba(255, 255, 255, 0.09) !important; }
@media (max-width: 640px) {
.entityOption { min-height: 42px !important; padding: 9px 11px !important; font-size: 13px !important; }
}
.aboutBox, .about-avera { width: min(460px, 100%) !important; max-height: calc(100dvh - 28px) !important; overflow: auto !important; padding: 24px 20px 20px !important; border-radius: 26px !important; box-shadow: rgba(255, 255, 255, 0.6) 0px 1px 0px inset, rgba(7, 28, 36, 0.5) 0px 30px 70px -22px !important; background: var(--panel) !important; }
.avera-about-hero-card { position: relative; overflow: hidden !important; padding: 19px 17px 17px !important; border-radius: 20px !important; background: linear-gradient(135deg,
color-mix(in srgb,var(--accent-soft) 92%,var(--panel)) 0%,
var(--panel) 72%) !important; }
.avera-about-hero-card::before { content: ""; position: absolute; width: 180px; height: 180px; top: -112px; right: -75px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(39, 199, 155, 0.18), transparent 68%); }
.avera-about-brandrow { position: relative; z-index: 1; }
.about-app-logo { width: 62px !important; height: 62px !important; flex: 0 0 auto !important; border-radius: 19px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; box-shadow: rgba(255, 255, 255, 0.35) 0px 1px 0px inset, rgba(13, 124, 143, 0.55) 0px 11px 22px -12px !important; background: var(--grad) !important; }
.about-app-logo img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.avera-wordmark strong { display: block !important; color: var(--text) !important; font-size: 24px !important; font-weight: 850 !important; letter-spacing: -0.035em !important; line-height: 1 !important; }
.avera-wordmark span { margin-top: 5px !important; color: var(--accent-strong) !important; font-size: 11px !important; font-weight: 850 !important; text-transform: uppercase !important; }
.about-version { position: absolute !important; top: 14px !important; right: 14px !important; padding: 5px 9px !important; border-radius: 999px !important; color: var(--accent-strong) !important; font-size: 10px !important; font-weight: 850 !important; text-decoration: none !important; background: var(--panel) !important; }
.avera-hero-copy { position: relative; z-index: 1; margin-top: 17px !important; }
.avera-hero-copy h2 { margin: 0px !important; color: var(--text) !important; font-size: 20px !important; font-weight: 850 !important; line-height: 1.2 !important; letter-spacing: -0.025em !important; }
.avera-hero-copy p { margin: 6px 0px 0px !important; color: var(--muted) !important; font-size: 13px !important; line-height: 1.5 !important; }
.avera-about-card { margin-top: 12px !important; padding: 15px !important; border-radius: 17px !important; box-shadow: rgba(255, 255, 255, 0.46) 0px 1px 0px inset !important; background: var(--panel-2) !important; }
.avera-kicker { margin-bottom: 6px !important; color: var(--accent-strong) !important; font-size: 10px !important; font-weight: 850 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; }
.avera-origin { position: relative !important; overflow: hidden !important; background: linear-gradient(145deg,color-mix(in srgb,var(--accent-soft) 45%,var(--panel-2)),var(--panel-2) 74%) !important; }
.avera-origin::after { content: ""; background: radial-gradient(circle, rgba(45, 214, 185, 0.15), transparent 68%); position: absolute !important; width: 150px !important; height: 150px !important; right: -70px !important; top: -84px !important; border-radius: 50% !important; pointer-events: none !important; }
.avera-origin-formula { position: relative !important; z-index: 1 !important; display: grid !important; grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr) auto minmax(92px, 1.05fr) !important; align-items: center !important; gap: 7px !important; margin: 11px 0px 13px !important; }
.avera-origin-part { min-width: 0px !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 10px 11px !important; border-radius: 13px !important; box-shadow: rgba(255, 255, 255, 0.45) 0px 1px 0px inset !important; background: color-mix(in srgb,var(--panel) 82%,transparent) !important; }
.avera-origin-part b { color: var(--accent-strong) !important; font-size: 21px !important; font-weight: 900 !important; line-height: 1 !important; letter-spacing: 0.03em !important; }
.avera-origin-part small { margin-top: 5px !important; color: var(--muted) !important; font-size: 8.5px !important; font-weight: 750 !important; line-height: 1.25 !important; letter-spacing: 0.02em !important; }
.avera-origin-formula > i { color: var(--faint) !important; font-style: normal !important; font-size: 17px !important; font-weight: 800 !important; }
.avera-origin-formula > strong { display: grid !important; place-items: center !important; align-self: stretch !important; min-width: 0px !important; white-space: nowrap !important; min-height: 54px !important; padding: 8px 10px !important; border-radius: 14px !important; color: rgb(255, 255, 255) !important; font-size: 20px !important; font-weight: 900 !important; letter-spacing: 0.06em !important; box-shadow: 0 10px 24px -15px color-mix(in srgb,var(--accent) 75%,transparent) !important; background: linear-gradient(135deg,var(--accent),#18a993) !important; }
.avera-origin > p { position: relative !important; z-index: 1 !important; margin: 0px !important; color: var(--muted) !important; font-size: 12.5px !important; line-height: 1.58 !important; }
.avera-origin > p strong { color: var(--text) !important; }
html[data-theme="dark"] .avera-origin { background: linear-gradient(145deg, rgba(47, 192, 214, 0.08), rgba(255, 255, 255, 0.024)) !important; }
html[data-theme="dark"] .avera-origin-part { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: rgba(255, 255, 255, 0.035) 0px 1px 0px inset !important; }
@media (max-width: 520px) {
.avera-origin-formula { grid-template-columns: minmax(0px, 1fr) auto minmax(0px, 1fr) auto minmax(0px, 1.12fr) !important; gap: clamp(2px, 1vw, 5px) !important; }
.avera-origin-part { padding: clamp(6px, 2vw, 9px) clamp(5px, 1.8vw, 9px) !important; border-radius: clamp(9px, 2.8vw, 13px) !important; }
.avera-origin-part b { font-size: clamp(14px, 5vw, 19px) !important; }
.avera-origin-part small { margin-top: clamp(3px, 1vw, 5px) !important; font-size: clamp(6px, 2.15vw, 8px) !important; white-space: nowrap !important; }
.avera-origin-formula > i { font-size: clamp(12px, 4vw, 17px) !important; }
.avera-origin-formula > strong { grid-column: auto !important; min-width: 0px !important; min-height: clamp(38px, 12vw, 48px) !important; padding: clamp(5px, 1.7vw, 8px) !important; border-radius: clamp(9px, 2.8vw, 14px) !important; font-size: clamp(13px, 4.5vw, 20px) !important; letter-spacing: clamp(0.02em, 0.6vw, 0.06em) !important; white-space: nowrap !important; }
}
@media (max-width: 350px) {
.avera-origin-formula { gap: 2px !important; }
.avera-origin-part { padding-left: 4px !important; padding-right: 4px !important; }
.avera-origin-part small { letter-spacing: -0.01em !important; }
.avera-origin-formula > strong { padding-left: 4px !important; padding-right: 4px !important; }
}
.avera-about-card h3 { margin: 0px 0px 7px !important; color: var(--text) !important; font-size: 15px !important; font-weight: 850 !important; letter-spacing: -0.01em !important; }
.avera-about-card p { margin: 0px !important; color: var(--muted) !important; font-size: 12.5px !important; line-height: 1.55 !important; }
.about-author { margin-top: 15px !important; padding-top: 14px !important; }
.about-author .label { color: var(--muted) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 0.09em !important; text-transform: uppercase !important; }
.about-author b { display: block !important; margin-top: 4px !important; color: var(--text) !important; font-size: 13px !important; font-weight: 850 !important; }
.about-author span { display: block !important; margin-top: 1px !important; color: var(--muted) !important; font-size: 11px !important; }
.about-like { width: 100% !important; margin-top: 14px !important; padding: 11px 14px !important; border-radius: 14px !important; color: var(--accent-strong) !important; font-size: 12.5px !important; font-weight: 800 !important; background: var(--panel) !important; }
.about-like:hover { box-shadow: 0 8px 16px -14px color-mix(in srgb,var(--accent) 65%,transparent) !important; background: var(--accent-soft) !important; }
.about-like:active { transform: scale(0.985) !important; }
.about-like.liked { border-color: transparent !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(13, 124, 143, 0.55) 0px 9px 18px -12px !important; background: var(--grad) !important; }
html[data-theme="dark"] .aboutBox, html[data-theme="dark"] .about-avera { border-color: rgba(255, 255, 255, 0.09) !important; box-shadow: rgba(255, 255, 255, 0.055) 0px 1px 0px inset, rgba(0, 0, 0, 0.92) 0px 32px 72px -22px !important; background: var(--panel) !important; }
html[data-theme="dark"] .avera-about-hero-card { border-color: rgba(58, 208, 232, 0.22) !important; background: linear-gradient(135deg,
rgba(58,208,232,.14) 0%,
var(--panel) 72%) !important; }
html[data-theme="dark"] .avera-about-card { background: rgba(255, 255, 255, 0.043) !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: rgba(255, 255, 255, 0.04) 0px 1px 0px inset !important; }
html[data-theme="dark"] .about-like { background: rgba(255, 255, 255, 0.043) !important; border-color: rgba(255, 255, 255, 0.09) !important; }
html[data-theme="dark"] .about-version { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(58, 208, 232, 0.22) !important; }
@media (max-width: 370px) {
.aboutBox, .about-avera { padding: 19px 14px 16px !important; border-radius: 22px !important; }
.avera-about-hero-card { padding: 16px 14px !important; border-radius: 18px !important; }
.about-app-logo { width: 54px !important; height: 54px !important; border-radius: 17px !important; }
.avera-wordmark strong { font-size: 21px !important; }
}
.notice-page-head { margin: 2px 2px 15px !important; }
.notice-page-head h2 { margin: 0px !important; color: var(--text) !important; font-size: 23px !important; font-weight: 850 !important; line-height: 1.15 !important; letter-spacing: -0.028em !important; }
.notice-page-head p { margin: 5px 0px 0px !important; color: var(--muted) !important; font-size: 13px !important; line-height: 1.42 !important; }
.notice-section-title { margin: 19px 3px 9px !important; color: var(--muted) !important; font-size: 10px !important; font-weight: 850 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; }
.notice-history-card { position: relative; overflow: hidden !important; margin-bottom: 10px !important; padding: 14px 14px 13px !important; border-radius: 17px !important; box-shadow: var(--av-shadow-card)!important; background: var(--av-card-bg)!important; }
@media (hover: hover) and (pointer: fine) {
.notice-history-card:hover { transform: translateY(-2px); box-shadow: var(--av-shadow-card)!important; }
}
.notice-history-card.important { border-left-color: rgb(229, 161, 38) !important; background: var(--av-card-bg)!important; box-shadow:var(--av-shadow-card);}
.notice-history-card.urgent { border-left-color: rgb(219, 89, 99) !important; background: var(--av-card-bg)!important; box-shadow:var(--av-shadow-card);}
.nh-top { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; }
.notice-level-chip, .notice-state-chip { padding: 4px 8px !important; border-radius: 999px !important; font-size: 9px !important; font-weight: 850 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; }
.notice-level-chip { color: var(--accent-strong) !important; background: var(--accent-soft) !important; }
.notice-history-card.important .notice-level-chip { background: rgb(255, 240, 207) !important; color: rgb(168, 106, 0) !important; }
.notice-history-card.urgent .notice-level-chip { background: rgb(255, 229, 232) !important; color: rgb(179, 50, 66) !important; }
.notice-state-chip { color: var(--muted) !important; background: var(--panel-2) !important; }
.notice-history-card h3 { margin: 10px 0px 5px !important; color: var(--text) !important; font-size: 15px !important; font-weight: 850 !important; line-height: 1.28 !important; letter-spacing: -0.012em !important; }
.notice-history-card p { margin: 0px !important; color: var(--muted) !important; font-size: 12.5px !important; line-height: 1.5 !important; white-space: normal !important; }
.nh-meta { font-variant-numeric: tabular-nums; display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; margin-top: 10px !important; color: var(--faint) !important; font-size: 10.5px !important; font-weight: 700 !important; }
.notice-empty { padding: 25px 16px !important; border-radius: 16px !important; color: var(--muted) !important; text-align: center !important; font-size: 13px !important; background: var(--panel-2) !important; }
html[data-theme="dark"] .notice-history-card { border-top-color: rgba(255, 255, 255, 0.09) !important; border-right-color: rgba(255, 255, 255, 0.09) !important; border-bottom-color: rgba(255, 255, 255, 0.09) !important; border-left-color: var(--accent) !important; box-shadow: var(--av-shadow-card)!important; background: var(--av-card-bg)!important; }
html[data-theme="dark"] .notice-history-card.important { border-left-color: rgb(233, 181, 79) !important; background: var(--av-card-bg)!important; box-shadow:var(--av-shadow-card);}
html[data-theme="dark"] .notice-history-card.urgent { border-left-color: rgb(239, 123, 132) !important; background: var(--av-card-bg)!important; box-shadow:var(--av-shadow-card);}
html[data-theme="dark"] .notice-history-card.important .notice-level-chip { background: rgba(245, 187, 71, 0.16) !important; color: rgb(242, 202, 114) !important; }
html[data-theme="dark"] .notice-history-card.urgent .notice-level-chip { background: rgba(219, 89, 99, 0.16) !important; color: rgb(241, 153, 161) !important; }
html[data-theme="dark"] .notice-state-chip { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.09) !important; }
html[data-theme="dark"] .notice-empty { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(255, 255, 255, 0.1) !important; }
.notice-overlay { backdrop-filter: none; background: rgba(7, 18, 25, 0.58) !important; }
html[data-theme="dark"] .notice-overlay { background: rgba(0, 0, 0, 0.68) !important; }
@media (max-width: 370px) {
}
.hnp-icon { display: grid !important; width: 28px !important; height: 28px !important; flex: 0 0 28px !important; place-items: center !important; border-radius: 10px !important; color: var(--accent-strong) !important; font-size: 14px !important; background: var(--accent-soft) !important; }
.hnp-content { min-width: 0px !important; flex: 1 1 0% !important; }
.hnp-kicker { margin-bottom: 2px !important; color: var(--faint) !important; font-size: 9px !important; font-weight: 850 !important; letter-spacing: 0.09em !important; line-height: 1.15 !important; text-transform: uppercase !important; }
.hnp-title { overflow: hidden !important; color: var(--text) !important; font-size: 13px !important; font-weight: 830 !important; line-height: 1.27 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.hnp-date { font-variant-numeric: tabular-nums; flex: 0 0 auto !important; padding-top: 2px !important; color: var(--faint) !important; font-size: 10px !important; font-weight: 700 !important; white-space: nowrap !important; }
@media (max-width: 390px) {
.hnp-date { display: none !important; }
.hnp-title { white-space: normal !important; }
}
.settings-page-head { margin: 2px 2px 16px !important; }
.settings-page-head h2 { margin: 0px !important; color: var(--text) !important; font-size: 23px !important; font-weight: 850 !important; line-height: 1.15 !important; letter-spacing: -0.028em !important; }
.settings-page-head p { margin: 5px 0px 0px !important; color: var(--muted) !important; font-size: 13px !important; line-height: 1.42 !important; }
.settings-section { margin: 0px 0px 17px !important; }
.settings-section-title { margin: 0px 3px 8px !important; color: var(--muted) !important; font-size: 10px !important; font-weight: 850 !important; letter-spacing: 0.12em !important; line-height: 1.2 !important; text-transform: uppercase !important; }
.settings-row { display: flex !important; align-items: center !important; gap: 12px !important; min-height: 62px !important; padding: 11px 13px !important; }
.settings-row:last-child { border-bottom: 0px !important; }
.settings-row-icon { display: grid !important; width: 34px !important; height: 34px !important; flex: 0 0 34px !important; place-items: center !important; border-radius: 12px !important; color: var(--accent-strong) !important; font-size: 16px !important; background: var(--accent-soft) !important; }
.settings-row-copy { min-width: 0px !important; flex: 1 1 0% !important; }
.settings-row-title { color: var(--text) !important; font-size: 13px !important; font-weight: 820 !important; line-height: 1.28 !important; }
.settings-row-desc { margin-top: 2px !important; color: var(--muted) !important; font-size: 11px !important; line-height: 1.35 !important; }
.settings-row-control { flex: 0 0 auto !important; }
.settings-toggle { position: relative !important; display: inline-block !important; width: 44px !important; height: 26px !important; }
.settings-toggle input { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; clip: rect(0px, 0px, 0px, 0px) !important; white-space: nowrap !important; }
.settings-toggle-track { position: absolute !important; inset: 0px !important; border-radius: 999px !important; box-shadow: none!important; cursor: pointer !important; transition: background 0.18s, border-color 0.18s !important; background: var(--av-well)!important; }
.settings-toggle-track::after { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--av-well); box-shadow: none; content: ""; }
.settings-toggle input:checked + .settings-toggle-track { background: var(--av-well)!important; }
.settings-toggle input:checked + .settings-toggle-track::after { transform: translateX(18px) !important; }
.settings-toggle input:focus-visible + .settings-toggle-track { box-shadow: none!important; background:var(--av-well);}
.settings-row.link-row { cursor: pointer !important; transition: background 0.16s !important; }
.settings-row.link-row::after { flex: 0 0 auto; color: var(--faint); font-size: 19px; font-weight: 400; line-height: 1; content: ""; display:inline-block;width:18px;height:18px;background:currentColor;mask:var(--av-icon-chevron-mask) center/contain no-repeat;-webkit-mask:var(--av-icon-chevron-mask) center/contain no-repeat; }
@media (hover: hover) and (pointer: fine) {
.settings-row.link-row:hover { background: var(--panel-2) !important; }
}
html[data-theme="dark"] .settings-row { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
html[data-theme="dark"] .settings-toggle-track { border-color: transparent!important; background: var(--av-well)!important; box-shadow: none!important; }
html[data-theme="dark"] .settings-toggle-track::after { background: var(--av-well)!important; box-shadow: none!important; }
@media (max-width: 430px) {
.settings-row { gap: 10px !important; min-height: 58px !important; padding: 10px 11px !important; }
.settings-row-icon { width: 31px !important; height: 31px !important; flex-basis: 31px !important; border-radius: 10px !important; font-size: 14px !important; }
}
.profile-page-head { margin: 2px 2px 16px !important; }
.profile-page-head h2 { margin: 0px !important; color: var(--text) !important; font-size: 23px !important; font-weight: 850 !important; line-height: 1.15 !important; letter-spacing: -0.028em !important; }
.profile-page-head p { margin: 5px 0px 0px !important; color: var(--muted) !important; font-size: 13px !important; line-height: 1.42 !important; }
.profile-hero-card { position: relative; overflow: hidden !important; margin-bottom: 13px !important; padding: 18px 16px 16px !important; border-radius: 21px !important; box-shadow: rgba(255, 255, 255, 0.66) 0px 1px 0px inset, rgba(10, 71, 82, 0.3) 0px 12px 26px -20px !important; background: linear-gradient(125deg,
var(--accent-soft) 0%,
var(--panel) 57%) !important; }
.profile-hero-card::after { position: absolute; top: -42px; right: -36px; width: 145px; height: 145px; border: 1px solid rgba(13, 124, 143, 0.13); border-radius: 50%; content: ""; pointer-events: none; }
.profile-hero-main { position: relative; z-index: 1; display: flex !important; align-items: center !important; gap: 13px !important; }
.profile-avatar { display: grid !important; width: 58px !important; height: 58px !important; flex: 0 0 58px !important; place-items: center !important; overflow: hidden !important; border: 2px solid rgba(255, 255, 255, 0.82) !important; border-radius: 18px !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(13, 124, 143, 0.62) 0px 8px 16px -10px !important; font-size: 21px !important; font-weight: 850 !important; letter-spacing: -0.04em !important; background: var(--grad) !important; }
.profile-avatar img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.profile-identity { min-width: 0px !important; flex: 1 1 0% !important; }
.profile-name { overflow: hidden !important; color: var(--text) !important; font-size: 18px !important; font-weight: 860 !important; line-height: 1.17 !important; letter-spacing: -0.025em !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.profile-role { overflow: hidden !important; margin-top: 3px !important; color: var(--muted) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.profile-status { display: inline-flex !important; align-items: center !important; gap: 5px !important; margin-top: 7px !important; padding: 4px 7px !important; border: 1px solid rgba(13, 124, 143, 0.16) !important; border-radius: 999px !important; background: rgba(13, 124, 143, 0.08) !important; color: var(--accent-strong) !important; font-size: 9px !important; font-weight: 850 !important; letter-spacing: 0.065em !important; line-height: 1 !important; text-transform: uppercase !important; }
.profile-status::before { width: 6px; height: 6px; border-radius: 50%; box-shadow: rgba(13, 124, 143, 0.11) 0px 0px 0px 3px; content: ""; background: var(--accent); }
.profile-details { position: relative; z-index: 1; display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 8px !important; margin-top: 15px !important; padding-top: 13px !important; border-top: 1px solid rgba(13, 124, 143, 0.13) !important; }
.profile-detail { min-width: 0px !important; }
.profile-detail-label { overflow: hidden !important; color: var(--faint) !important; font-size: 9px !important; font-weight: 850 !important; letter-spacing: 0.09em !important; line-height: 1.2 !important; text-overflow: ellipsis !important; text-transform: uppercase !important; white-space: nowrap !important; }
.profile-detail-value { overflow: hidden !important; margin-top: 3px !important; color: var(--text) !important; font-size: 12px !important; font-weight: 760 !important; line-height: 1.3 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.profile-section { margin: 0px 0px 16px !important; }
.profile-section-title { margin: 0px 3px 8px !important; color: var(--muted) !important; font-size: 10px !important; font-weight: 850 !important; letter-spacing: 0.12em !important; line-height: 1.2 !important; text-transform: uppercase !important; }
.profile-card { overflow: hidden !important; border-radius: 18px !important; box-shadow: rgba(255, 255, 255, 0.56) 0px 1px 0px inset, rgba(10, 46, 56, 0.24) 0px 9px 20px -18px !important; background: var(--panel) !important; }
.profile-action-row { display: flex !important; align-items: center !important; gap: 11px !important; min-height: 58px !important; padding: 10px 12px !important; cursor: pointer !important; transition: background 0.16s !important; }
.profile-action-row:last-child { border-bottom: 0px !important; }
.profile-action-icon { display: grid !important; width: 33px !important; height: 33px !important; flex: 0 0 33px !important; place-items: center !important; border-radius: 11px !important; color: var(--accent-strong) !important; font-size: 15px !important; background: var(--accent-soft) !important; }
.profile-action-copy { min-width: 0px !important; flex: 1 1 0% !important; }
.profile-action-title { color: var(--text) !important; font-size: 13px !important; font-weight: 820 !important; line-height: 1.28 !important; }
.profile-action-desc { overflow: hidden !important; margin-top: 2px !important; color: var(--muted) !important; font-size: 11px !important; line-height: 1.3 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.profile-action-row::after { flex: 0 0 auto; color: var(--faint); font-size: 19px; line-height: 1; content: ""; display:inline-block;width:18px;height:18px;background:currentColor;mask:var(--av-icon-chevron-mask) center/contain no-repeat;-webkit-mask:var(--av-icon-chevron-mask) center/contain no-repeat; }
@media (hover: hover) and (pointer: fine) {
.profile-action-row:hover { background: var(--panel-2) !important; }
}
.profile-logout { display: flex !important; width: 100% !important; min-height: 44px !important; align-items: center !important; justify-content: center !important; gap: 7px !important; border: 1px solid rgba(219, 89, 99, 0.3) !important; border-radius: 13px !important; background: rgba(219, 89, 99, 0.06) !important; color: rgb(179, 50, 66) !important; font-size: 12px !important; font-weight: 820 !important; transition: background 0.16s, border-color 0.16s !important; }
@media (hover: hover) and (pointer: fine) {
.profile-logout:hover { border-color: rgba(219, 89, 99, 0.46) !important; background: rgba(219, 89, 99, 0.11) !important; }
}
html[data-theme="dark"] .profile-hero-card { border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px inset, rgba(0, 0, 0, 0.8) 0px 12px 26px -20px !important; background: linear-gradient(125deg,
rgba(13,124,143,.18) 0%,
var(--panel) 59%) !important; }
html[data-theme="dark"] .profile-hero-card::after { border-color: rgba(87, 195, 205, 0.16) !important; }
html[data-theme="dark"] .profile-avatar { border-color: rgba(255, 255, 255, 0.14) !important; }
html[data-theme="dark"] .profile-status { border-color: rgba(87, 195, 205, 0.22) !important; background: rgba(87, 195, 205, 0.12) !important; color: rgb(146, 220, 226) !important; }
html[data-theme="dark"] .profile-status::before { background: rgb(116, 209, 216) !important; box-shadow: rgba(116, 209, 216, 0.11) 0px 0px 0px 3px !important; }
html[data-theme="dark"] .profile-details { border-top-color: rgba(255, 255, 255, 0.09) !important; }
html[data-theme="dark"] .profile-card { border-color: rgba(255, 255, 255, 0.09) !important; box-shadow: rgba(255, 255, 255, 0.043) 0px 1px 0px inset, rgba(0, 0, 0, 0.75) 0px 10px 22px -18px !important; }
html[data-theme="dark"] .profile-action-row { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
html[data-theme="dark"] .profile-logout { border-color: rgba(239, 123, 132, 0.34) !important; background: rgba(219, 89, 99, 0.1) !important; color: rgb(241, 153, 161) !important; }
@media (max-width: 370px) {
.profile-hero-card { padding: 15px 13px 14px !important; }
.profile-avatar { width: 50px !important; height: 50px !important; flex-basis: 50px !important; border-radius: 16px !important; font-size: 18px !important; }
.profile-name { font-size: 16px !important; }
.profile-details { gap: 7px !important; }
.profile-detail-value { font-size: 11px !important; }
}
.confirm-overlay, .modal-overlay { backdrop-filter: none; background: rgba(7, 18, 25, 0.58) !important; }
.confirm-dialog, .app-modal { width: min(440px, 100% - 24px) !important; overflow: hidden !important; border-radius: 23px !important; box-shadow: rgba(255, 255, 255, 0.64) 0px 1px 0px inset, rgba(0, 0, 0, 0.58) 0px 30px 72px -22px !important; background: var(--panel) !important; }
.confirm-dialog-body, .app-modal-body { padding: 22px 20px 18px !important; }
.confirm-dialog-icon, .app-modal-icon { display: grid !important; width: 42px !important; height: 42px !important; place-items: center !important; margin-bottom: 13px !important; border-radius: 14px !important; color: var(--accent-strong) !important; font-size: 20px !important; background: var(--accent-soft) !important; }
.confirm-dialog h2, .app-modal h2 { margin: 0px !important; color: var(--text) !important; font-size: 20px !important; font-weight: 850 !important; line-height: 1.18 !important; letter-spacing: -0.024em !important; }
.confirm-dialog-text, .app-modal-text { margin: 8px 0px 0px !important; color: var(--muted) !important; font-size: 13.5px !important; line-height: 1.52 !important; }
.confirm-dialog-actions, .app-modal-actions { display: flex !important; gap: 8px !important; padding: 0px 20px 20px !important; }
.confirm-dialog-actions .btn, .app-modal-actions .btn { min-height: 42px !important; flex: 1 1 0% !important; justify-content: center !important; border-radius: 13px !important; font-size: 12px !important; font-weight: 820 !important; }
.confirm-dialog-actions .btn.primary, .app-modal-actions .btn.primary { box-shadow: var(--av-shadow-primary)!important; }
.confirm-dialog.danger, .app-modal.danger { border-color: rgba(219, 89, 99, 0.33) !important; background: linear-gradient(180deg,
#fff2f3 0%,
var(--panel) 190px) !important; }
.confirm-dialog.danger .confirm-dialog-icon, .app-modal.danger .app-modal-icon { background: rgb(255, 225, 228) !important; color: rgb(179, 50, 66) !important; }
.confirm-dialog.danger .btn.danger, .app-modal.danger .btn.danger { border-color: rgb(207, 68, 81) !important; background: rgb(207, 68, 81) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(255, 255, 255, 0.23) 0px 1px 0px inset, rgba(207, 68, 81, 0.56) 0px 8px 16px -11px !important; }
@media (hover: hover) and (pointer: fine) {
.confirm-dialog.danger .btn.danger:hover, .app-modal.danger .btn.danger:hover { border-color: rgb(185, 54, 67) !important; background: rgb(185, 54, 67) !important; }
}
.confirm-dialog.warning, .app-modal.warning { border-color: rgb(239, 212, 157) !important; background: linear-gradient(180deg,
#fff8e8 0%,
var(--panel) 190px) !important; }
.confirm-dialog.warning .confirm-dialog-icon, .app-modal.warning .app-modal-icon { background: rgb(255, 240, 207) !important; color: rgb(168, 106, 0) !important; }
.confirm-dialog.warning .btn.warning, .app-modal.warning .btn.warning { border-color: rgb(217, 146, 24) !important; background: rgb(217, 146, 24) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(255, 255, 255, 0.24) 0px 1px 0px inset, rgba(217, 146, 24, 0.52) 0px 8px 16px -11px !important; }
html[data-theme="dark"] .confirm-overlay, html[data-theme="dark"] .modal-overlay { background: rgba(0, 0, 0, 0.7) !important; }
html[data-theme="dark"] .confirm-dialog, html[data-theme="dark"] .app-modal { border-color: rgba(255, 255, 255, 0.1) !important; box-shadow: rgba(255, 255, 255, 0.05) 0px 1px 0px inset, rgba(0, 0, 0, 0.95) 0px 32px 74px -22px !important; background: var(--panel) !important; }
html[data-theme="dark"] .confirm-dialog.danger, html[data-theme="dark"] .app-modal.danger { border-color: rgba(219, 89, 99, 0.3) !important; background: linear-gradient(180deg,
rgba(219,89,99,.15) 0%,
var(--panel) 190px) !important; }
html[data-theme="dark"] .confirm-dialog.danger .confirm-dialog-icon, html[data-theme="dark"] .app-modal.danger .app-modal-icon { background: rgba(219, 89, 99, 0.16) !important; color: rgb(241, 153, 161) !important; }
html[data-theme="dark"] .confirm-dialog.warning, html[data-theme="dark"] .app-modal.warning { border-color: rgba(245, 187, 71, 0.28) !important; background: linear-gradient(180deg,
rgba(245,187,71,.15) 0%,
var(--panel) 190px) !important; }
html[data-theme="dark"] .confirm-dialog.warning .confirm-dialog-icon, html[data-theme="dark"] .app-modal.warning .app-modal-icon { background: rgba(245, 187, 71, 0.16) !important; color: rgb(242, 202, 114) !important; }
@media (max-width: 370px) {
.confirm-dialog-body, .app-modal-body { padding: 19px 16px 16px !important; }
.confirm-dialog-actions, .app-modal-actions { flex-direction: column-reverse !important; padding: 0px 16px 16px !important; }
.confirm-dialog-actions .btn, .app-modal-actions .btn { width: 100% !important; }
.confirm-dialog h2, .app-modal h2 { font-size: 19px !important; }
}
.app-state, .empty-state, .error-state, .loading-state { display: flex !important; min-height: 210px !important; align-items: center !important; justify-content: center !important; padding: 22px 16px !important; border-radius: 19px !important; text-align: center !important; background: var(--panel-2) !important; }
.app-state-inner, .empty-state-inner, .error-state-inner, .loading-state-inner { width: min(300px, 100%) !important; }
.state-title, .empty-state-title, .error-state-title, .loading-state-title { margin: 0px !important; letter-spacing: -0.014em !important; }
.state-text, .empty-state-text, .error-state-text, .loading-state-text { margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; }
.state-actions, .empty-state-actions, .error-state-actions, .loading-state-actions { display: flex !important; justify-content: center !important; gap: 8px !important; margin-top: 14px !important; }
.state-actions .btn, .empty-state-actions .btn, .error-state-actions .btn, .loading-state-actions .btn { min-height: 38px !important; padding: 0px 13px !important; border-radius: 11px !important; font-size: 11px !important; font-weight: 820 !important; }
.loading-state { border-style: solid !important; }
.state-spinner, .loading-spinner { width: 24px !important; height: 24px !important; margin: 0px auto !important; border-width: 3px !important; border-style: solid !important; border-right-color: rgba(13, 124, 143, 0.16) !important; border-bottom-color: rgba(13, 124, 143, 0.16) !important; border-left-color: rgba(13, 124, 143, 0.16) !important; border-image: none !important; border-top-color: var(--accent) !important; border-radius: 50% !important; animation: 0.72s linear 0s infinite normal none running state-spin !important; }
.loading-state .state-icon, .loading-state .loading-state-icon { background: transparent !important; }
@keyframes state-spin {
100% { transform: rotate(360deg); }
}
.error-state .state-icon, .error-state .error-state-icon { background: rgb(255, 225, 228) !important; color: rgb(179, 50, 66) !important; }
.error-state .state-title, .error-state .error-state-title { color: rgb(179, 50, 66) !important; }
.error-state .btn.primary { border-color: transparent!important; background: var(--av-primary-gradient)!important; color: var(--av-primary-ink)!important; box-shadow: var(--av-shadow-primary)!important; }
.offline-state { border-color: rgb(239, 212, 157) !important; background: linear-gradient(120deg,
rgba(245,187,71,.08) 0%,
var(--panel-2) 66%) !important; }
.offline-state .state-icon { background: rgb(255, 240, 207) !important; color: rgb(168, 106, 0) !important; }
.offline-state .state-title { color: rgb(156, 104, 9) !important; }
.inline-state { display: flex !important; align-items: center !important; gap: 9px !important; padding: 12px !important; border-radius: 13px !important; background: var(--panel-2) !important; }
.inline-state .state-icon { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; margin: 0px !important; border-radius: 10px !important; font-size: 14px !important; }
.inline-state-copy { min-width: 0px !important; flex: 1 1 0% !important; text-align: left !important; }
.inline-state .state-title { font-size: 12px !important; }
.inline-state .state-text { margin-top: 1px !important; font-size: 11px !important; }
html[data-theme="dark"] .app-state, html[data-theme="dark"] .empty-state, html[data-theme="dark"] .error-state, html[data-theme="dark"] .loading-state { border-color: rgba(255, 255, 255, 0.11) !important; background: rgba(255, 255, 255, 0.035) !important; }
html[data-theme="dark"] .error-state { border-color: rgba(219, 89, 99, 0.31) !important; background: linear-gradient(120deg, rgba(219, 89, 99, 0.12), rgba(255, 255, 255, 0.035) 66%) !important; }
html[data-theme="dark"] .error-state .state-icon, html[data-theme="dark"] .error-state .error-state-icon { background: rgba(219, 89, 99, 0.16) !important; color: rgb(241, 153, 161) !important; }
html[data-theme="dark"] .error-state .state-title, html[data-theme="dark"] .error-state .error-state-title { color: rgb(241, 153, 161) !important; }
html[data-theme="dark"] .offline-state { border-color: rgba(245, 187, 71, 0.28) !important; background: linear-gradient(120deg, rgba(245, 187, 71, 0.13) 0%, rgba(255, 255, 255, 0.035) 66%) !important; }
html[data-theme="dark"] .offline-state .state-icon { background: rgba(245, 187, 71, 0.16) !important; color: rgb(242, 202, 114) !important; }
html[data-theme="dark"] .offline-state .state-title { color: rgb(242, 202, 114) !important; }
html[data-theme="dark"] .inline-state { border-color: rgba(255, 255, 255, 0.09) !important; background: rgba(255, 255, 255, 0.043) !important; }
html[data-theme="dark"] .state-spinner, html[data-theme="dark"] .loading-spinner { border-color: rgb(116, 209, 216) rgba(116, 209, 216, 0.16) rgba(116, 209, 216, 0.16) !important; }
@media (max-width: 370px) {
.app-state, .empty-state, .error-state, .loading-state { min-height: 180px !important; padding: 18px 13px !important; }
.state-icon, .empty-state-icon, .error-state-icon, .loading-state-icon { width: 46px !important; height: 46px !important; border-radius: 15px !important; font-size: 20px !important; }
}
.form-group { margin: 0px 0px 14px !important; }
.form-group:last-child { margin-bottom: 0px !important; }
.form-label { display: block !important; margin: 0px 0px 6px !important; color: var(--text) !important; font-size: 11px !important; font-weight: 820 !important; line-height: 1.3 !important; }
.form-label .required { margin-left: 2px !important; color: rgb(207, 68, 81) !important; }
.form-control{ box-sizing: border-box !important; width: 100% !important; min-height: 42px !important; padding: 10px 11px !important; border-radius: 12px !important; color: var(--text) !important; font-style: inherit !important; font-variant: inherit !important; font-weight: inherit !important; font-stretch: inherit !important; font-family: inherit !important; font-optical-sizing: inherit !important; font-size-adjust: inherit !important; font-kerning: inherit !important; font-feature-settings: inherit !important; font-variation-settings: inherit !important; font-language-override: inherit !important; font-size: 13px !important; line-height: 1.35 !important; outline: none !important; transition: border-color 0.16s, box-shadow 0.16s, background 0.16s !important; background: var(--panel-2) !important; }
.form-group input:not([type="checkbox"]):not([type="radio"]){ box-sizing: border-box !important; width: 100% !important; min-height: 42px !important; padding: 10px 11px !important; border-radius: 12px !important; color: var(--av-text-primary)!important; font-style: inherit !important; font-variant: inherit !important; font-weight: inherit !important; font-stretch: inherit !important; font-family: inherit !important; font-optical-sizing: inherit !important; font-size-adjust: inherit !important; font-kerning: inherit !important; font-feature-settings: inherit !important; font-variation-settings: inherit !important; font-language-override: inherit !important; font-size: 13px !important; line-height: 1.35 !important; outline: none !important; transition: border-color 0.16s, box-shadow 0.16s, background 0.16s !important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
.form-group select{ box-sizing: border-box !important; width: 100% !important; min-height: 42px !important; padding: 10px 11px !important; border-radius: 12px !important; color: var(--av-text-primary)!important; font-style: inherit !important; font-variant: inherit !important; font-weight: inherit !important; font-stretch: inherit !important; font-family: inherit !important; font-optical-sizing: inherit !important; font-size-adjust: inherit !important; font-kerning: inherit !important; font-feature-settings: inherit !important; font-variation-settings: inherit !important; font-language-override: inherit !important; font-size: 13px !important; line-height: 1.35 !important; outline: none !important; transition: border-color 0.16s, box-shadow 0.16s, background 0.16s !important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
.form-group textarea{ box-sizing: border-box !important; width: 100% !important; min-height: 42px !important; padding: 10px 11px !important; border-radius: 12px !important; color: var(--av-text-primary)!important; font-style: inherit !important; font-variant: inherit !important; font-weight: inherit !important; font-stretch: inherit !important; font-family: inherit !important; font-optical-sizing: inherit !important; font-size-adjust: inherit !important; font-kerning: inherit !important; font-feature-settings: inherit !important; font-variation-settings: inherit !important; font-language-override: inherit !important; font-size: 13px !important; line-height: 1.35 !important; outline: none !important; transition: border-color 0.16s, box-shadow 0.16s, background 0.16s !important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
.form-group textarea { min-height: 102px !important; resize: vertical !important; }
.form-group select { padding-right: 34px !important; cursor: pointer !important; }
.form-control::placeholder, .form-group input::placeholder, .form-group textarea::placeholder { color: var(--faint) !important; opacity: 1 !important; }
.form-control:focus{ box-shadow: rgba(13, 124, 143, 0.13) 0px 0px 0px 3px !important; background: var(--panel) !important; }
.form-group input:not([type="checkbox"]):not([type="radio"]):focus{ box-shadow: var(--av-shadow-well)!important; background: var(--av-focus-well)!important; }
.form-group select:focus{ box-shadow: var(--av-shadow-well)!important; background: var(--av-focus-well)!important; }
.form-group textarea:focus{ box-shadow: var(--av-shadow-well)!important; background: var(--av-focus-well)!important; }
.form-hint { margin: 5px 1px 0px !important; color: var(--faint) !important; font-size: 10.5px !important; font-weight: 650 !important; line-height: 1.38 !important; }
.form-group.has-error .form-label, .form-group.is-invalid .form-label { color: var(--a2-legacy-danger,rgb(179, 50, 66)) !important; }
.form-group.has-error .form-control{ border-color: var(--a2-legacy-danger,rgb(219, 89, 99)) !important; background: var(--a2-legacy-danger-soft,rgb(255, 248, 248)) !important; box-shadow: var(--a2-legacy-danger-soft,rgba(219, 89, 99, 0.1)) 0px 0px 0px 3px !important; }
.form-group.is-invalid .form-control{ border-color: var(--a2-legacy-danger,rgb(219, 89, 99)) !important; background: var(--a2-legacy-danger-soft,rgb(255, 248, 248)) !important; box-shadow: var(--a2-legacy-danger-soft,rgba(219, 89, 99, 0.1)) 0px 0px 0px 3px !important; }
.form-group.has-error input:not([type="checkbox"]):not([type="radio"]){ border-color: transparent!important; background: var(--av-well)!important; box-shadow: var(--av-shadow-well)!important; }
.form-group.is-invalid input:not([type="checkbox"]):not([type="radio"]){ border-color: transparent!important; background: var(--av-well)!important; box-shadow: var(--av-shadow-well)!important; }
.form-group.has-error select{ border-color: transparent!important; background: var(--av-well)!important; box-shadow: var(--av-shadow-well)!important; }
.form-group.is-invalid select{ border-color: transparent!important; background: var(--av-well)!important; box-shadow: var(--av-shadow-well)!important; }
.form-group.has-error textarea{ border-color: transparent!important; background: var(--av-well)!important; box-shadow: var(--av-shadow-well)!important; }
.form-group.is-invalid textarea{ border-color: transparent!important; background: var(--av-well)!important; box-shadow: var(--av-shadow-well)!important; }
.form-error { display: flex !important; align-items: flex-start !important; gap: 5px !important; margin: 5px 1px 0px !important; color: rgb(179, 50, 66) !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.35 !important; }
.form-error::before { flex: 0 0 auto; margin-top: 1px; content: "!"; font-weight: 900; }
.form-group.has-success .form-control{ border-color: rgb(76, 171, 117) !important; background: rgb(247, 252, 249) !important; }
.form-group.is-valid .form-control{ border-color: rgb(76, 171, 117) !important; background: rgb(247, 252, 249) !important; }
.form-group.has-success input:not([type="checkbox"]):not([type="radio"]){ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
.form-group.is-valid input:not([type="checkbox"]):not([type="radio"]){ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
.form-group.has-success select{ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
.form-group.is-valid select{ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
.form-group.has-success textarea{ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
.form-group.is-valid textarea{ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
.form-success { margin: 5px 1px 0px !important; color: rgb(35, 122, 79) !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.35 !important; }
.form-field-icon { position: relative !important; }
.form-field-icon > .form-control{ padding-left: 38px !important; }
.form-field-icon > input{ padding-left: 38px !important; }
.form-field-icon > .field-icon { position: absolute !important; top: 50% !important; left: 12px !important; z-index: 1 !important; color: var(--faint) !important; font-size: 15px !important; line-height: 1 !important; pointer-events: none !important; transform: translateY(-50%) !important; }
.form-field-action { position: relative !important; }
.form-field-action > .form-control{ padding-right: 42px !important; }
.form-field-action > input{ padding-right: 42px !important; }
.form-field-action > .field-action { position: absolute !important; top: 50% !important; right: 7px !important; display: grid !important; width: 29px !important; height: 29px !important; place-items: center !important; border-radius: 9px !important; color: var(--faint) !important; font-size: 14px !important; transform: translateY(-50%) !important; transition: background 0.15s, color 0.15s !important; }
@media (hover: hover) and (pointer: fine) {
.form-field-action > .field-action:hover { color: var(--accent-strong) !important; background: var(--panel) !important; }
}
.form-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; margin-top: 18px !important; }
.form-actions .btn { min-height: 42px !important; padding: 0px 15px !important; border-radius: 12px !important; font-size: 12px !important; font-weight: 820 !important; }
.form-actions .btn.primary { box-shadow: var(--av-shadow-primary)!important; }
.form-control[readonly]{ border-style: dashed !important; color: var(--muted) !important; cursor: default !important; background: var(--panel-2) !important; }
.form-group input[readonly]{ border-style: dashed !important; color: var(--av-text-primary)!important; cursor: default !important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
.form-group textarea[readonly]{ border-style: dashed !important; color: var(--av-text-primary)!important; cursor: default !important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
.form-control:disabled{ opacity: 0.62 !important; cursor: not-allowed !important; }
.form-group input:disabled{ opacity: 0.62 !important; cursor: not-allowed !important; }
.form-group select:disabled{ opacity: 0.62 !important; cursor: not-allowed !important; }
.form-group textarea:disabled{ opacity: 0.62 !important; cursor: not-allowed !important; }
html[data-theme="dark"] .form-control{ border-color: rgba(255, 255, 255, 0.12) !important; background: rgba(255, 255, 255, 0.05) !important; }
html[data-theme="dark"] .form-group input:not([type="checkbox"]):not([type="radio"]){ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
html[data-theme="dark"] .form-group select{ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
html[data-theme="dark"] .form-group textarea{ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
html[data-theme="dark"] .form-control:focus{ border-color: rgb(116, 209, 216) !important; background: rgba(255, 255, 255, 0.075) !important; box-shadow: rgba(116, 209, 216, 0.14) 0px 0px 0px 3px !important; }
html[data-theme="dark"] .form-group input:not([type="checkbox"]):not([type="radio"]):focus{ border-color: transparent!important; background: var(--av-focus-well)!important; box-shadow: var(--av-shadow-well)!important; }
html[data-theme="dark"] .form-group select:focus{ border-color: transparent!important; background: var(--av-focus-well)!important; box-shadow: var(--av-shadow-well)!important; }
html[data-theme="dark"] .form-group textarea:focus{ border-color: transparent!important; background: var(--av-focus-well)!important; box-shadow: var(--av-shadow-well)!important; }
html[data-theme="dark"] .form-group.has-error .form-control{ border-color: rgb(239, 123, 132) !important; background: rgba(219, 89, 99, 0.09) !important; box-shadow: rgba(219, 89, 99, 0.12) 0px 0px 0px 3px !important; }
html[data-theme="dark"] .form-group.is-invalid .form-control{ border-color: rgb(239, 123, 132) !important; background: rgba(219, 89, 99, 0.09) !important; box-shadow: rgba(219, 89, 99, 0.12) 0px 0px 0px 3px !important; }
html[data-theme="dark"] .form-group.has-error input:not([type="checkbox"]):not([type="radio"]){ border-color: transparent!important; background: var(--av-well)!important; box-shadow: var(--av-shadow-well)!important; }
html[data-theme="dark"] .form-group.is-invalid input:not([type="checkbox"]):not([type="radio"]){ border-color: transparent!important; background: var(--av-well)!important; box-shadow: var(--av-shadow-well)!important; }
html[data-theme="dark"] .form-group.has-error select{ border-color: transparent!important; background: var(--av-well)!important; box-shadow: var(--av-shadow-well)!important; }
html[data-theme="dark"] .form-group.is-invalid select{ border-color: transparent!important; background: var(--av-well)!important; box-shadow: var(--av-shadow-well)!important; }
html[data-theme="dark"] .form-group.has-error textarea{ border-color: transparent!important; background: var(--av-well)!important; box-shadow: var(--av-shadow-well)!important; }
html[data-theme="dark"] .form-group.is-invalid textarea{ border-color: transparent!important; background: var(--av-well)!important; box-shadow: var(--av-shadow-well)!important; }
html[data-theme="dark"] .form-group.has-success .form-control{ border-color: rgb(101, 196, 141) !important; background: rgba(46, 158, 99, 0.09) !important; }
html[data-theme="dark"] .form-group.is-valid .form-control{ border-color: rgb(101, 196, 141) !important; background: rgba(46, 158, 99, 0.09) !important; }
html[data-theme="dark"] .form-group.has-success input:not([type="checkbox"]):not([type="radio"]){ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
html[data-theme="dark"] .form-group.is-valid input:not([type="checkbox"]):not([type="radio"]){ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
html[data-theme="dark"] .form-group.has-success select{ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
html[data-theme="dark"] .form-group.is-valid select{ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
html[data-theme="dark"] .form-group.has-success textarea{ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
html[data-theme="dark"] .form-group.is-valid textarea{ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
html[data-theme="dark"] .form-group.has-error .form-label, html[data-theme="dark"] .form-group.is-invalid .form-label, html[data-theme="dark"] .form-error { color: rgb(241, 153, 161) !important; }
html[data-theme="dark"] .form-success { color: rgb(127, 216, 166) !important; }
html[data-theme="dark"] .form-field-action > .field-action:hover { background: rgba(255, 255, 255, 0.07) !important; color: rgb(146, 220, 226) !important; }
@media (max-width: 370px) {
.form-control{ min-height: 40px !important; padding: 9px 10px !important; font-size: 12.5px !important; }
.form-group input:not([type="checkbox"]):not([type="radio"]){ min-height: 40px !important; padding: 9px 10px !important; font-size: 12.5px !important; }
.form-group select{ min-height: 40px !important; padding: 9px 10px !important; font-size: 12.5px !important; }
.form-group textarea{ min-height: 40px !important; padding: 9px 10px !important; font-size: 12.5px !important; }
.form-group textarea { min-height: 92px !important; }
.form-actions { flex-direction: column-reverse !important; align-items: stretch !important; }
.form-actions .btn { width: 100% !important; }
}
:root { --app-max: 760px; --page-x: 16px; --page-y: 18px; --radius-xs: 9px; --radius-md: 16px; --radius-lg: 21px; --radius-xl: 26px; --control-h: 42px; --control-h-sm: 36px; --shadow-card: inset 0 1px 0 rgba(255,255,255,.60),
0 10px 25px -21px rgba(10,46,56,.32); --shadow-float: inset 0 1px 0 rgba(255,255,255,.62),
0 18px 42px -22px rgba(10,46,56,.38); --shadow-modal: inset 0 1px 0 rgba(255,255,255,.64),
0 32px 76px -24px rgba(0,0,0,.60); --focus-ring: 0 0 0 3px rgba(13,124,143,.16); }
html[data-theme="dark"] { --shadow-card: inset 0 1px 0 rgba(255,255,255,.045),
0 11px 26px -20px rgba(0,0,0,.80); --shadow-float: inset 0 1px 0 rgba(255,255,255,.055),
0 20px 44px -22px rgba(0,0,0,.86); --shadow-modal: inset 0 1px 0 rgba(255,255,255,.055),
0 34px 80px -23px rgba(0,0,0,.96); --focus-ring: 0 0 0 3px rgba(116,209,216,.16); }
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; background: var(--bg) !important; }
body { text-rendering: optimizelegibility; background: var(--bg); min-width: 320px !important; margin: 0px !important; color: var(--text) !important; font-family: var(--av-font-sans) !important; font-size: 14px !important; line-height: 1.45 !important; }
button:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ font: inherit; }
input:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ font: inherit; }
select:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ font: inherit; }
textarea:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ font: inherit; }
button:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ -webkit-tap-highlight-color: transparent; }
a:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ -webkit-tap-highlight-color: transparent; }
select:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ -webkit-tap-highlight-color: transparent; }
label[for]:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ -webkit-tap-highlight-color: transparent; }
button:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)) { cursor: pointer; }
button:disabled:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ cursor: not-allowed !important; opacity: 0.58 !important; }
input:disabled:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ cursor: not-allowed !important; opacity: 0.58 !important; }
select:disabled:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ cursor: not-allowed !important; opacity: 0.58 !important; }
textarea:disabled:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ cursor: not-allowed !important; opacity: 0.58 !important; }
::selection { background: rgba(13, 124, 143, 0.2); color: var(--text); }
html[data-theme="dark"] ::selection { background: rgba(116, 209, 216, 0.26); }
.app, #app, .app-shell, .page-shell, .main-shell { min-height: 100vh !important; background: var(--bg) !important; }
.main, .main-content, .page-content, .content, .view-content { width: min(var(--app-max),100%) !important; box-sizing: border-box !important; margin: 0px auto !important; }
.page, .view, .screen { }
@keyframes av-page-in {
0% { opacity: 0; transform: translateY(4px); }
100% { opacity: 1; transform: translateY(0px); }
}
h1:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), h2:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), h3:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), h4:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), p:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)) { max-width: 100%; }
h1:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .page-title:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .screen-title:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)) { font-weight: 400; letter-spacing: -0.035em; margin: 0px !important; color: var(--text) !important; font-size: 25px !important; line-height: 1.13 !important; }
h2:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .section-heading:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)) { font-weight: 400; letter-spacing: -0.024em; margin: 0px !important; color: var(--text) !important; font-size: 19px !important; line-height: 1.2 !important; }
h3:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)) { font-weight: 400; letter-spacing: -0.014em; color: var(--text) !important; }
.page-subtitle, .screen-subtitle, .section-description, .muted { color: var(--muted) !important; }
.section-title, .settings-section-title, .profile-section-title, .notice-section-title { margin: 19px 3px 8px !important; color: var(--muted) !important; font-size: 10px !important; font-weight: 850 !important; letter-spacing: 0.12em !important; line-height: 1.2 !important; text-transform: uppercase !important; }
.card{ box-shadow: var(--shadow-card) !important; background: var(--panel) !important; }
.panel{ box-shadow: var(--shadow-card) !important; background: var(--panel) !important; }
.surface{ box-shadow: var(--shadow-card) !important; background: var(--panel) !important; }
.profile-card{ box-shadow: var(--shadow-card) !important; background: var(--panel) !important; }
.notice-history-card{ box-shadow: var(--av-shadow-card)!important; background: var(--av-card-bg)!important; }
.schedule-card{ box-shadow: var(--shadow-card) !important; background: var(--panel) !important; }
.info-card{ box-shadow: var(--shadow-card) !important; background: var(--panel) !important; }
.list-card{ box-shadow: var(--shadow-card) !important; background: var(--panel) !important; }
.card, .panel, .surface, .schedule-card, .info-card { padding: 15px !important; }
.card + .card, .panel + .panel, .surface + .surface { margin-top: 12px !important; }
.card-header, .panel-header { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 10px !important; margin-bottom: 12px !important; }
.card-title, .panel-title { color: var(--text) !important; font-size: 15px !important; font-weight: 840 !important; line-height: 1.25 !important; }
.card-subtitle, .panel-subtitle { margin-top: 3px !important; color: var(--muted) !important; font-size: 12px !important; line-height: 1.38 !important; }
.btn:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ display: inline-flex !important; min-height: var(--control-h) !important; box-sizing: border-box !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 0px 14px !important; color: var(--av-text-primary)!important; font-size: 12px !important; font-weight: 820 !important; line-height: 1 !important; text-decoration: none !important; background: var(--av-control-bg)!important; box-shadow:var(--av-shadow-control);}
button.btn:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ display: inline-flex !important; min-height: var(--control-h) !important; box-sizing: border-box !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 0px 14px !important; color: var(--av-text-primary)!important; font-size: 12px !important; font-weight: 820 !important; line-height: 1 !important; text-decoration: none !important; background: var(--av-control-bg)!important; box-shadow:var(--av-shadow-control);}
.button:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ display: inline-flex !important; min-height: var(--control-h) !important; box-sizing: border-box !important; align-items: center !important; justify-content: center !important; gap: 7px !important; padding: 0px 14px !important; color: var(--text) !important; font-size: 12px !important; font-weight: 820 !important; line-height: 1 !important; text-decoration: none !important; background: var(--panel) !important; }
.btn.primary:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ color: var(--av-primary-ink)!important; box-shadow: var(--av-shadow-primary)!important; background: var(--av-primary-gradient)!important; }
.btn-primary:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ color: rgb(255, 255, 255) !important; box-shadow: rgba(255, 255, 255, 0.28) 0px 1px 0px inset, rgba(13, 124, 143, 0.56) 0px 8px 17px -12px !important; background: var(--accent) !important; }
.button-primary:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ color: rgb(255, 255, 255) !important; box-shadow: rgba(255, 255, 255, 0.28) 0px 1px 0px inset, rgba(13, 124, 143, 0.56) 0px 8px 17px -12px !important; background: var(--accent) !important; }
button.primary:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ color: rgb(255, 255, 255) !important; box-shadow: rgba(255, 255, 255, 0.28) 0px 1px 0px inset, rgba(13, 124, 143, 0.56) 0px 8px 17px -12px !important; background: var(--accent) !important; }
.btn.secondary{ background: var(--av-control-bg)!important; box-shadow:var(--av-shadow-control);}
.btn-outline{ background: var(--panel-2) !important; }
.button-secondary{ background: var(--panel-2) !important; }
.btn.ghost{ border-color: transparent!important; background: transparent !important; color: var(--accent-strong) !important; box-shadow: none!important; }
.btn-text{ border-color: transparent !important; background: transparent !important; color: var(--accent-strong) !important; box-shadow: none !important; }
.button-ghost{ border-color: transparent !important; background: transparent !important; color: var(--accent-strong) !important; box-shadow: none !important; }
.btn.danger, .btn-danger, .button-danger { color: rgb(255, 255, 255) !important; box-shadow: rgba(255, 255, 255, 0.22) 0px 1px 0px inset, rgba(207, 68, 81, 0.52) 0px 8px 17px -12px !important; background: var(--danger) !important; }
.btn.warning, .btn-warning { color: rgb(255, 255, 255) !important; background: var(--warning) !important; }
.btn.small{ min-height: var(--control-h-sm) !important; padding: 0px 11px !important; border-radius: 10px !important; font-size: 11px !important; }
.btn-sm{ min-height: var(--control-h-sm) !important; padding: 0px 11px !important; border-radius: 10px !important; font-size: 11px !important; }
.btn.icon{ width: var(--control-h) !important; padding: 0px !important; }
.btn-icon{ width: var(--control-h) !important; padding: 0px !important; }
.btn:focus-visible:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ outline: none!important; box-shadow: var(--av-shadow-control)!important; background:var(--av-focus-action);}
button:focus-visible:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ outline: none!important; box-shadow: var(--av-shadow-control)!important; }
a:focus-visible:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ outline: none!important; box-shadow: var(--av-shadow-control)!important; }
@media (hover: hover) and (pointer: fine) {
.btn:hover{ transform: translateY(-1px); }
.button:hover{ transform: translateY(-1px); }
.btn.primary:hover:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ filter: brightness(0.96); }
.btn-primary:hover:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ filter: brightness(0.96); }
.button-primary:hover:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ filter: brightness(0.96); }
button.primary:hover:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ filter: brightness(0.96); }
.btn.danger:hover, .btn-danger:hover, .button-danger:hover { filter: brightness(0.94); }
.btn.ghost:hover{ background: var(--accent-soft) !important; }
.btn-text:hover{ background: var(--accent-soft) !important; }
.button-ghost:hover{ background: var(--accent-soft) !important; }
}
.btn:active{ transform: translateY(0px) scale(0.985) !important; }
.button:active{ transform: translateY(0px) scale(0.985) !important; }
label:not(.feedback-upload-pick):not(.av-checkbox):where(:not(.an-check)), .form-label { display: block !important; margin: 0px 0px 6px !important; color: var(--text) !important; font-size: 11px !important; font-weight: 810 !important; line-height: 1.3 !important; }
.form-group, .field-group { margin: 0px 0px 14px !important; }
input:not([type="checkbox"]):not([type="radio"]):not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ width: 100% !important; min-height: var(--control-h) !important; box-sizing: border-box !important; padding: 9px 11px !important; color: var(--av-text-primary)!important; font-size: 13px !important; line-height: 1.35 !important; outline: none !important; transition: border-color 0.16s, box-shadow 0.16s, background 0.16s !important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
select:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ width: 100% !important; min-height: var(--control-h) !important; box-sizing: border-box !important; padding: 9px 11px !important; color: var(--av-text-primary)!important; font-size: 13px !important; line-height: 1.35 !important; outline: none !important; transition: border-color 0.16s, box-shadow 0.16s, background 0.16s !important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
textarea:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ width: 100% !important; min-height: var(--control-h) !important; box-sizing: border-box !important; padding: 9px 11px !important; color: var(--av-text-primary)!important; font-size: 13px !important; line-height: 1.35 !important; outline: none !important; transition: border-color 0.16s, box-shadow 0.16s, background 0.16s !important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
.form-control:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ width: 100% !important; min-height: var(--control-h) !important; box-sizing: border-box !important; padding: 9px 11px !important; color: var(--text) !important; font-size: 13px !important; line-height: 1.35 !important; outline: none !important; transition: border-color 0.16s, box-shadow 0.16s, background 0.16s !important; background: var(--panel-2) !important; }
textarea:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)) { min-height: 100px !important; resize: vertical !important; }
select:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)) { padding-right: 34px !important; }
input::placeholder, textarea::placeholder { color: var(--faint) !important; opacity: 1 !important; }
input:not([type="checkbox"]):not([type="radio"]):focus:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ box-shadow: var(--av-shadow-well)!important; background: var(--av-focus-well)!important; }
select:focus:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ box-shadow: var(--av-shadow-well)!important; background: var(--av-focus-well)!important; }
textarea:focus:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ box-shadow: var(--av-shadow-well)!important; background: var(--av-focus-well)!important; }
.form-control:focus:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)){ box-shadow: var(--focus-ring) !important; background: var(--panel) !important; }
.form-hint, .field-hint, .help-text { margin: 5px 1px 0px !important; color: var(--faint) !important; font-size: 10.5px !important; line-height: 1.38 !important; }
.has-error input:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .is-invalid input:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .has-error select:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .is-invalid select:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .has-error textarea:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .is-invalid textarea:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), input.is-invalid:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), select.is-invalid:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), textarea.is-invalid:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)) { border-color: transparent!important; background: var(--av-well)!important; box-shadow: var(--av-shadow-well)!important; }
.form-error, .field-error, .error-text { margin: 5px 1px 0px !important; color: rgb(179, 50, 66) !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.35 !important; }
.list, .profile-card, .list-card { overflow: hidden !important; }
.list-row, .settings-row, .profile-action-row, .menu-row, .option-row { display: flex !important; min-height: 59px !important; align-items: center !important; gap: 11px !important; padding: 10px 12px !important; background: transparent !important; transition: background 0.15s !important; }
.list-row:last-child, .settings-row:last-child, .profile-action-row:last-child, .menu-row:last-child, .option-row:last-child { border-bottom: 0px !important; }
.row-icon, .settings-row-icon, .profile-action-icon, .menu-icon { display: grid !important; width: 33px !important; height: 33px !important; flex: 0 0 33px !important; place-items: center !important; border-radius: 11px !important; color: var(--accent-strong) !important; font-size: 15px !important; background: var(--accent-soft) !important; }
.row-copy, .settings-row-copy, .profile-action-copy, .menu-copy { min-width: 0px !important; flex: 1 1 0% !important; }
.row-title, .settings-row-title, .profile-action-title, .menu-title { overflow: hidden !important; color: var(--text) !important; font-size: 13px !important; font-weight: 820 !important; line-height: 1.27 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.row-description, .settings-row-desc, .profile-action-desc, .menu-description { overflow: hidden !important; margin-top: 2px !important; color: var(--muted) !important; font-size: 11px !important; line-height: 1.3 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.link-row::after, .profile-action-row::after, .menu-row.link::after { flex: 0 0 auto; color: var(--faint); font-size: 19px; line-height: 1; content: ""; display:inline-block;width:18px;height:18px;background:currentColor;mask:var(--av-icon-chevron-mask) center/contain no-repeat;-webkit-mask:var(--av-icon-chevron-mask) center/contain no-repeat; }
@media (hover: hover) and (pointer: fine) {
.list-row:hover, .settings-row.link-row:hover, .profile-action-row:hover, .menu-row:hover, .option-row:hover { background: var(--panel-2) !important; }
}
.badge, .chip, .tag, .status-badge, .notice-level-chip, .notice-state-chip { display: inline-flex !important; min-height: 22px !important; box-sizing: border-box !important; align-items: center !important; gap: 4px !important; padding: 0px 8px !important; border: 1px solid transparent !important; border-radius: 999px !important; color: var(--accent-strong) !important; font-size: 9px !important; font-weight: 850 !important; letter-spacing: 0.06em !important; line-height: 1 !important; text-transform: uppercase !important; background: var(--accent-soft) !important; }
.badge.success, .chip.success, .tag.success, .status-success { color: rgb(35, 122, 79) !important; background: var(--success-soft) !important; }
.badge.warning, .chip.warning, .tag.warning, .status-warning { color: rgb(168, 106, 0) !important; background: var(--warning-soft) !important; }
.badge.danger, .chip.danger, .tag.danger, .status-danger { color: rgb(179, 50, 66) !important; background: var(--danger-soft) !important; }
.empty-state, .error-state, .loading-state, .app-state { display: flex !important; min-height: 200px !important; align-items: center !important; justify-content: center !important; padding: 22px 16px !important; text-align: center !important; background: var(--panel-2) !important; }
.empty-state-inner, .error-state-inner, .loading-state-inner, .app-state-inner { width: min(300px, 100%) !important; }
.state-icon, .empty-state-icon, .error-state-icon, .loading-state-icon { display: grid !important; width: 50px !important; height: 50px !important; place-items: center !important; margin: 0px auto 12px !important; border-radius: 16px !important; color: var(--accent-strong) !important; font-size: 22px !important; background: var(--accent-soft) !important; }
.state-title, .empty-state-title, .error-state-title, .loading-state-title { color: var(--text) !important; font-size: 15px !important; font-weight: 850 !important; line-height: 1.28 !important; }
.state-text, .empty-state-text, .error-state-text, .loading-state-text { margin-top: 5px !important; color: var(--muted) !important; font-size: 12px !important; line-height: 1.48 !important; }
.error-state { border-color: rgba(219, 89, 99, 0.32) !important; background: linear-gradient(120deg,rgba(219,89,99,.06),var(--panel-2) 66%) !important; }
.error-state .state-icon, .error-state-icon { color: rgb(179, 50, 66) !important; background: var(--danger-soft) !important; }
.loading-spinner, .state-spinner { width: 24px !important; height: 24px !important; border-width: 3px !important; border-style: solid !important; border-right-color: rgba(13, 124, 143, 0.16) !important; border-bottom-color: rgba(13, 124, 143, 0.16) !important; border-left-color: rgba(13, 124, 143, 0.16) !important; border-image: none !important; border-top-color: var(--accent) !important; border-radius: 50% !important; animation: 0.72s linear 0s infinite normal none running av-spin !important; }
@keyframes av-spin {
100% { transform: rotate(360deg); }
}
.modal-overlay, .confirm-overlay, .notice-overlay, .overlay { backdrop-filter: none; background: rgba(7, 18, 25, 0.58) !important; }
.app-modal, .confirm-dialog, .modal-dialog { width: min(470px, 100% - 24px) !important; overflow: hidden !important; box-shadow: var(--shadow-modal) !important; background: var(--panel) !important; }
.app-modal-body, .confirm-dialog-body, .modal-dialog-body { padding: 21px 20px 18px !important; }
.app-modal-actions, .confirm-dialog-actions, .modal-dialog-actions { display: flex !important; gap: 8px !important; padding: 0px 20px 20px !important; }
.app-modal-actions .btn, .confirm-dialog-actions .btn, .modal-dialog-actions .btn { flex: 1 1 0% !important; }
.bottom-nav, .bottom-navigation, .tab-bar, .app-bottom-nav { backdrop-filter: none; position: fixed !important; right: 0px !important; bottom: 0px !important; left: 0px !important; z-index: 100 !important; display: flex !important; width: 100% !important; min-height: 64px !important; box-sizing: border-box !important; align-items: stretch !important; justify-content: center !important; box-shadow: rgba(10, 46, 56, 0.36) 0px -10px 26px -24px !important; background: color-mix(in srgb,var(--panel) 86%,transparent) !important; }
.bottom-nav-inner, .tab-bar-inner, .bottom-navigation-inner { display: flex !important; width: min(var(--app-max),100%) !important; align-items: stretch !important; justify-content: space-around !important; }
.bottom-nav-item, .tab-item, .nav-item { display: flex !important; min-width: 56px !important; flex: 1 1 0% !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; border: 0px !important; border-radius: 11px !important; background: transparent !important; color: var(--faint) !important; font-size: 9px !important; font-weight: 760 !important; line-height: 1.05 !important; transition: background 0.16s, color 0.16s !important; }
.bottom-nav-item.active, .tab-item.active, .nav-item.active { color: var(--accent-strong) !important; font-weight: 850 !important; background: var(--accent-soft) !important; }
.bottom-nav-item svg, .tab-item svg, .nav-item svg { width: 19px !important; height: 19px !important; }
html[data-theme="dark"] .card{ border-color: rgba(255, 255, 255, 0.09) !important; }
html[data-theme="dark"] .panel{ border-color: rgba(255, 255, 255, 0.09) !important; }
html[data-theme="dark"] .surface{ border-color: rgba(255, 255, 255, 0.09) !important; }
html[data-theme="dark"] .profile-card{ border-color: rgba(255, 255, 255, 0.09) !important; }
html[data-theme="dark"] .notice-history-card{ border-color: transparent!important; }
html[data-theme="dark"] .schedule-card{ border-color: rgba(255, 255, 255, 0.09) !important; }
html[data-theme="dark"] .info-card{ border-color: rgba(255, 255, 255, 0.09) !important; }
html[data-theme="dark"] .list-card{ border-color: rgba(255, 255, 255, 0.09) !important; }
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]){ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
html[data-theme="dark"] select{ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
html[data-theme="dark"] textarea{ border-color: transparent!important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
html[data-theme="dark"] .form-control{ border-color: rgba(255, 255, 255, 0.12) !important; background: rgba(255, 255, 255, 0.05) !important; }
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):focus{ border-color: transparent!important; background: var(--av-focus-well)!important; }
html[data-theme="dark"] select:focus{ border-color: transparent!important; background: var(--av-focus-well)!important; }
html[data-theme="dark"] textarea:focus{ border-color: transparent!important; background: var(--av-focus-well)!important; }
html[data-theme="dark"] .form-control:focus{ border-color: rgb(116, 209, 216) !important; background: rgba(255, 255, 255, 0.075) !important; }
html[data-theme="dark"] .list-row, html[data-theme="dark"] .settings-row, html[data-theme="dark"] .profile-action-row, html[data-theme="dark"] .menu-row, html[data-theme="dark"] .option-row { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
html[data-theme="dark"] .bottom-nav, html[data-theme="dark"] .bottom-navigation, html[data-theme="dark"] .tab-bar, html[data-theme="dark"] .app-bottom-nav { border-top-color: rgba(255, 255, 255, 0.09) !important; background: rgba(20, 28, 31, 0.86) !important; box-shadow: rgba(0, 0, 0, 0.78) 0px -10px 26px -24px !important; }
html[data-theme="dark"] .error-state { background: linear-gradient(120deg, rgba(219, 89, 99, 0.12), rgba(255, 255, 255, 0.035) 66%) !important; }
html[data-theme="dark"] .badge.success, html[data-theme="dark"] .chip.success, html[data-theme="dark"] .tag.success, html[data-theme="dark"] .status-success { color: rgb(127, 216, 166) !important; }
html[data-theme="dark"] .badge.warning, html[data-theme="dark"] .chip.warning, html[data-theme="dark"] .tag.warning, html[data-theme="dark"] .status-warning { color: rgb(242, 202, 114) !important; }
html[data-theme="dark"] .badge.danger, html[data-theme="dark"] .chip.danger, html[data-theme="dark"] .tag.danger, html[data-theme="dark"] .status-danger { color: rgb(241, 153, 161) !important; }
@media (max-width: 430px) {
:root { --page-x: 12px; --page-y: 14px; }
h1:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .page-title:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)), .screen-title:not(:where(#averaEditor, #averaEditor *, #averaAccounts, #averaAccounts *, #staffPremiumShell, #staffPremiumShell *, #avera-release-dialog, #avera-release-dialog *, #au-dialog, #au-dialog *)) { font-size: 23px !important; }
.card, .panel, .surface, .schedule-card, .info-card { padding: 13px !important; }
}
@media (max-width: 370px) {
:root { --control-h: 40px; }
.list-row, .settings-row, .profile-action-row, .menu-row, .option-row { min-height: 56px !important; padding: 9px 10px !important; }
.row-icon, .settings-row-icon, .profile-action-icon, .menu-icon { width: 30px !important; height: 30px !important; flex-basis: 30px !important; border-radius: 10px !important; font-size: 14px !important; }
.app-modal-actions, .confirm-dialog-actions, .modal-dialog-actions { flex-direction: column-reverse !important; padding: 0px 16px 16px !important; }
.app-modal-body, .confirm-dialog-body, .modal-dialog-body { padding: 19px 16px 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
*, ::before, ::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
html[data-theme="dark"] { --schedule-title: #edf5f5; --schedule-meta: #c1d0d2; --schedule-meta-border: rgba(193,208,210,.13); --schedule-meta-bg: rgba(255,255,255,.035); }
html[data-theme="dark"] .lesson .codechip { display: inline-flex !important; min-height: 23px !important; box-sizing: border-box !important; align-items: center !important; padding: 3px 8px !important; border: 1px solid !important; border-radius: 8px !important; font-family: var(--av-font-sans) !important; font-size: 10px !important; font-weight: 820 !important; letter-spacing: 0.04em !important; line-height: 1.1 !important; text-shadow: none !important; font-variant-numeric: tabular-nums !important; box-shadow: rgba(255, 255, 255, 0.09) 0px 1px 0px inset, rgba(0, 0, 0, 0.2) 0px 3px 9px !important; background: color-mix(in srgb, currentcolor 19%, rgb(23, 36, 40) 81%) !important; }
html[data-theme="dark"] .lesson .codechip { background-color: color-mix(in srgb, currentcolor 19%, rgb(23, 36, 40) 81%) !important; }
html[data-theme="dark"] .lesson.special-lesson .codechip { border-color: rgb(185, 166, 234) !important; background: linear-gradient(135deg, rgba(139, 112, 205, 0.31) 0%, rgba(55, 45, 85, 0.7) 100%) !important; color: rgb(221, 211, 251) !important; text-shadow: none !important; }
html[data-theme="dark"] .lesson.special-lesson { border-left-color: rgb(168, 147, 220) !important; background: linear-gradient(
90deg,
rgba(92,73,143,.43) 0%,
var(--panel-2) 68%
) !important; }
html[data-theme="dark"] .pairnum .pn.special-event-num { border-color: rgba(185, 166, 234, 0.48) !important; background: rgb(53, 43, 80) !important; color: rgb(221, 211, 251) !important; }
html[data-theme="dark"] .lesson .lmeta > .badge:not(.time) { color: var(--schedule-meta) !important; font-size: 11.5px !important; font-weight: 740 !important; text-shadow: none !important; background: var(--schedule-meta-bg) !important; }
html[data-theme="dark"] .lesson .lmeta > .badge.time { border-color: rgba(193, 208, 210, 0.18) !important; background: rgba(255, 255, 255, 0.02) !important; color: rgb(174, 191, 194) !important; }
html[data-theme="dark"] .lesson .subject { color: var(--schedule-title) !important; text-shadow: none !important; }
@media (max-width: 390px) {
html[data-theme="dark"] .lesson .codechip { min-height: 21px !important; padding: 3px 7px !important; font-size: 9.5px !important; }
}
@media (prefers-contrast: more) {
html[data-theme="dark"] .lesson .codechip { border-width: 2px !important; background-color: rgb(22, 39, 42) !important; color: rgb(255, 255, 255) !important; text-shadow: none !important; }
html[data-theme="dark"] .lesson .lmeta > .badge:not(.time) { border-color: rgba(255, 255, 255, 0.34) !important; background: rgb(27, 42, 46) !important; color: rgb(255, 255, 255) !important; }
}
body[data-role="staff"] { --admin-page-x: clamp(20px,3vw,48px); --admin-page-y: 24px; }
body[data-role="staff"] .app, body[data-role="staff"] main.app, body[data-role="staff"] .main, body[data-role="staff"] .main-content, body[data-role="staff"] .page-content, body[data-role="staff"] .content, body[data-role="staff"] .view-content { width: 100% !important; max-width: none !important; box-sizing: border-box !important; margin: 0px !important; }
body[data-role="staff"] .topbar-inner, body[data-role="staff"] .app > *, body[data-role="staff"] main.app > *, body[data-role="staff"] .dispatcherTools { width: min(var(--admin-max-width),100%) !important; box-sizing: border-box !important; margin-right: auto !important; margin-left: auto !important; }
body[data-role="staff"] .topbar { position: sticky !important; top: 0px !important; z-index: 80 !important; }
body[data-role="staff"] .topbar-inner { max-width: var(--admin-max-width) !important; padding: 12px 0px !important; }
body[data-role="staff"] .staff-grid { display: grid !important; grid-template-columns: minmax(0px, 1.15fr) minmax(430px, 0.85fr) !important; align-items: start !important; }
body[data-role="staff"] .panel { width: 100% !important; min-width: 0px !important; }
body[data-role="staff"] .staff-box, body[data-role="staff"] .dispatcherTools, body[data-role="staff"] .profile-editor, body[data-role="staff"] .event-editor-grid, body[data-role="staff"] .publishBar, body[data-role="staff"] .bell-admin-panel { min-width: 0px !important; }
body[data-role="staff"] .panel, body[data-role="staff"] .staff-box, body[data-role="staff"] .publishBar, body[data-role="staff"] .dispatcherTools { border-radius: 18px !important; }
body[data-role="staff"] .panel h2, body[data-role="staff"] .panel h3, body[data-role="staff"] .staff-box h3 { overflow-wrap: anywhere !important; }
body[data-role="staff"] .staff-field label, body[data-role="staff"] .staff-box p, body[data-role="staff"] .editor-hint, body[data-role="staff"] .staff-note, body[data-role="staff"] .change-item, body[data-role="staff"] .event-item .event-sub { overflow-wrap: anywhere !important; }
body[data-role="staff"] .btn{ min-height: 38px !important; white-space: normal !important; }
body[data-role="staff"] .mini-btn{ min-height: 38px !important; white-space: normal !important; }
body[data-role="staff"] .staff-tab{ min-height: 38px !important; white-space: normal !important; }
body[data-role="staff"] .bell-admin-tab{ min-height: 38px !important; white-space: normal !important; }
body[data-role="staff"] .weekday-pill{ min-height: 38px !important; white-space: normal !important; }
body[data-role="staff"] .profile-editor-row input { padding: 9px 10px !important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
body[data-role="staff"] .event-editor-grid { grid-template-columns: repeat(2, minmax(250px, 1fr)) !important; }
body[data-role="staff"] .event-editor-grid .wide { grid-column: 1 / -1 !important; }
body[data-role="staff"] .group-checks { grid-template-columns: repeat(4, minmax(0px, 1fr)) !important; max-height: 260px !important; }
@media (max-width: 1050px) {
body[data-role="staff"] .staff-grid { grid-template-columns: 1fr !important; }
body[data-role="staff"] .profile-editor-head, body[data-role="staff"] .profile-editor-row { grid-template-columns: minmax(64px, 0.7fr) repeat(4, minmax(95px, 1fr)) !important; }
body[data-role="staff"] .group-checks { grid-template-columns: repeat(3, minmax(0px, 1fr)) !important; }
}
@media (max-width: 680px) {
body[data-role="staff"] { --admin-page-x: 12px; --admin-page-y: 14px; }
body[data-role="staff"] .staff-grid, body[data-role="staff"] .event-editor-grid { grid-template-columns: 1fr !important; }
body[data-role="staff"] .profile-editor { overflow-x: auto !important; padding-bottom: 4px !important; }
body[data-role="staff"] .profile-editor-head, body[data-role="staff"] .profile-editor-row { min-width: 620px !important; }
body[data-role="staff"] .group-checks { grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; }
}
body[data-role="staff"] { --admin-ink: var(--text); --admin-muted: var(--muted); --admin-surface: var(--panel); --admin-surface-2: var(--panel-2); --admin-line: var(--border-soft); --admin-accent: var(--accent); --admin-accent-text: var(--accent-strong); --admin-radius: 18px; --admin-radius-sm: 12px; --admin-shadow: inset 0 1px 0 rgba(255,255,255,.48),
0 12px 28px -24px rgba(10,46,56,.34); }
body[data-role="staff"] .dispatcherTools { margin-top: 20px !important; padding: 0px !important; }
body[data-role="staff"] .dispatcherTools::before { display: block; margin: 0px 0px 14px; color: var(--admin-accent-text); font-size: 10px; font-weight: 900; letter-spacing: 0.13em; line-height: 1; text-transform: uppercase; content: "ะ ะฐะฑะพัะตะต ะฟัะพัััะฐะฝััะฒะพ"; }
body[data-role="staff"] .staff-tabs { backdrop-filter: none; position: sticky !important; top: 74px !important; z-index: 30 !important; display: flex !important; gap: 7px !important; margin: 0px 0px 18px !important; padding: 7px !important; border-radius: 16px !important; box-shadow: var(--admin-shadow) !important; background: color-mix(
in srgb,
var(--admin-surface) 90%,
transparent
) !important; }
body[data-role="staff"] .staff-tab { min-height: 40px !important; flex: 0 0 auto !important; padding: 0px 14px !important; border: 1px solid transparent !important; border-radius: 11px !important; background: transparent !important; color: var(--admin-muted) !important; font-size: 12px !important; font-weight: 820 !important; line-height: 1 !important; white-space: nowrap !important; transition: background 0.16s, color 0.16s, border-color 0.16s, transform 0.16s !important; }
body[data-role="staff"] .staff-tab:hover { color: var(--admin-ink) !important; background: var(--admin-surface-2) !important; }
body[data-role="staff"] .staff-tab.active { color:var(--a2-legacy-ink,rgb(255, 255, 255))!important; box-shadow:var(--a2-legacy-shadow-inset,rgba(255, 255, 255, 0.25) 0px 1px 0px inset, rgba(13, 124, 143, 0.66) 0px 7px 16px -12px)!important; background: var(--admin-accent) !important; }
body[data-role="staff"] #staffTabPublish, body[data-role="staff"] #staffTabBells, body[data-role="staff"] #staffTabAvailability, body[data-role="staff"] #staffTabAnnouncements { animation: 0.18s ease 0s 1 normal both running admin-section-in; }
@keyframes admin-section-in {
0% { opacity: 0; transform: translateY(4px); }
100% { opacity: 1; transform: translateY(0px); }
}
body[data-role="staff"] .staff-grid { gap: 18px !important; }
body[data-role="staff"] .staff-box { position: relative !important; padding: 20px !important; box-shadow: var(--admin-shadow) !important; background: var(--admin-surface) !important; }
body[data-role="staff"] .staff-box h3 { margin: 0px !important; color: var(--admin-ink) !important; font-size: 16px !important; font-weight: 850 !important; line-height: 1.25 !important; letter-spacing: -0.018em !important; }
body[data-role="staff"] .staff-box > p { max-width: 72ch !important; margin: 5px 0px 16px !important; color: var(--admin-muted) !important; font-size: 12px !important; line-height: 1.5 !important; }
body[data-role="staff"] #staffTabPublish .staff-box:first-child { overflow: hidden !important; background: linear-gradient(
135deg,
color-mix(
in srgb,
var(--admin-accent-soft, var(--accent-soft)) 78%,
var(--admin-surface)
) 0%,
var(--admin-surface) 68%
) !important; }
body[data-role="staff"] #staffTabPublish .staff-box:first-child::before { position: absolute; top: 0px; right: 0px; left: 0px; height: 4px; content: ""; background: var(--grad); }
body[data-role="staff"] .staff-field { gap: 6px !important; margin: 13px 0px !important; }
body[data-role="staff"] .staff-field label { color: var(--admin-muted) !important; font-size: 10.5px !important; font-weight: 850 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; }
body[data-role="staff"] .staff-field input, body[data-role="staff"] .staff-field select { min-height: 42px !important; padding: 10px 11px !important; border-radius: 11px !important; color: var(--av-text-primary)!important; font-size: 13px !important; font-weight: 700 !important; outline: none !important; transition: border-color 0.16s, box-shadow 0.16s, background 0.16s !important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
body[data-role="staff"] .staff-field input:focus, body[data-role="staff"] .staff-field select:focus { box-shadow:var(--av-shadow-well)!important; background: var(--av-focus-well)!important; }
body[data-role="staff"] .week-range-preview { font-variant-numeric: tabular-nums; display: flex !important; min-height: 45px !important; box-sizing: border-box !important; align-items: center !important; gap: 8px !important; margin: 11px 0px 14px !important; padding: 10px 12px !important; border-radius: 12px !important; background: rgba(13, 124, 143, 0.07) !important; color: var(--admin-accent-text) !important; font-size: 12px !important; font-weight: 820 !important; }
body[data-role="staff"] .week-range-preview::before { content: "โท" !important; font-size: 15px !important; }
body[data-role="staff"] #publishWeekBtn { min-width: 220px !important; min-height: 45px !important; margin-top: 2px !important; border-radius: 12px !important; font-size: 13px !important; font-weight: 850 !important; box-shadow: var(--av-shadow-primary)!important; }
body[data-role="staff"] #publishWeekBtn::before { content: "โ" !important; font-size: 17px !important; line-height: 1 !important; }
body[data-role="staff"] .staff-note { margin-top: 12px !important; padding: 10px 11px !important; border-radius: 0px 10px 10px 0px !important; color: var(--admin-muted) !important; font-size: 11px !important; line-height: 1.45 !important; background: var(--admin-surface-2) !important; }
body[data-role="staff"] .change-list { display: grid !important; gap: 8px !important; max-height: 436px !important; overflow: auto !important; padding-right: 3px !important; }
body[data-role="staff"] .change-item { position: relative !important; min-height: 48px !important; box-sizing: border-box !important; padding: 11px 12px 11px 14px !important; border-radius: 12px !important; color: var(--admin-muted) !important; font-size: 12px !important; line-height: 1.42 !important; background: var(--admin-surface-2) !important; }
body[data-role="staff"] .change-item::before { position: absolute; top: 12px; bottom: 12px; left: 0px; width: 3px; border-radius: 0px 3px 3px 0px; content: ""; background: var(--admin-accent); }
body[data-role="staff"] .change-item b { display: block !important; margin-bottom: 3px !important; color: var(--admin-ink) !important; font-size: 12px !important; font-weight: 830 !important; }
body[data-role="staff"] .change-item:hover { }
body[data-role="staff"] .bell-admin-tabs, body[data-role="staff"] .access-admin-tabs { display: flex !important; gap: 7px !important; flex-wrap: wrap !important; margin: 0px 0px 16px !important; padding-bottom: 12px !important; }
body[data-role="staff"] .bell-admin-tab, body[data-role="staff"] .access-admin-tab { min-height: 36px !important; padding: 0px 12px !important; border-radius: 10px !important; color: var(--admin-muted) !important; font-size: 11px !important; font-weight: 820 !important; transition: border-color 0.16s, background 0.16s, color 0.16s !important; background: var(--admin-surface-2) !important; }
body[data-role="staff"] .bell-admin-tab:hover, body[data-role="staff"] .access-admin-tab:hover { color: var(--admin-accent-text) !important; }
body[data-role="staff"] .bell-admin-tab.active, body[data-role="staff"] .access-admin-tab.active { color: var(--admin-accent-text) !important; background: var(--accent-soft) !important; }
body[data-role="staff"] .weekday-pills { gap: 7px !important; margin: 13px 0px 16px !important; }
body[data-role="staff"] .weekday-pill { min-width: 50px !important; min-height: 37px !important; padding: 0px 12px !important; border-radius: 10px !important; color: var(--admin-muted) !important; font-size: 11px !important; font-weight: 820 !important; background: var(--admin-surface-2) !important; }
body[data-role="staff"] .weekday-pill:hover { color: var(--admin-accent-text) !important; }
body[data-role="staff"] .weekday-pill.active { color: var(--admin-accent-text) !important; background: var(--accent-soft) !important; }
body[data-role="staff"] .profile-editor { margin: 14px 0px !important; padding: 10px !important; border-radius: 14px !important; background: var(--admin-surface-2) !important; }
body[data-role="staff"] .profile-editor-head { min-height: 30px !important; align-items: center !important; }
body[data-role="staff"] .profile-editor-row { min-height: 48px !important; padding: 6px 7px !important; border-radius: 10px !important; }
body[data-role="staff"] .profile-editor-row:hover { background: color-mix(
in srgb,
var(--admin-accent-soft, var(--accent-soft)) 40%,
transparent
) !important; }
body[data-role="staff"] .profile-editor-row.has-second { background: color-mix(
in srgb,
var(--accent-soft) 38%,
var(--admin-surface-2)
) !important; }
body[data-role="staff"] .profile-editor-row b { padding-left: 6px !important; color: var(--admin-accent-text) !important; font-size: 12px !important; font-weight: 850 !important; }
body[data-role="staff"] .profile-editor-row input { font-variant-numeric: tabular-nums; min-height: 38px !important; border-radius: 9px !important; font-weight: 750 !important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
body[data-role="staff"] .editor-hint { max-width: 85ch !important; margin: 9px 2px 13px !important; color: var(--admin-muted) !important; font-size: 11px !important; line-height: 1.45 !important; }
body[data-role="staff"] .event-editor-grid { gap: 8px 16px !important; }
body[data-role="staff"] .check-pills { gap: 7px !important; margin: 7px 0px 10px !important; }
body[data-role="staff"] .check-pill span { min-height: 34px !important; box-sizing: border-box !important; padding: 0px 10px !important; border-radius: 9px !important; color: var(--admin-muted) !important; font-size: 11px !important; font-weight: 780 !important; transition: border-color 0.16s, background 0.16s, color 0.16s !important; background: var(--admin-surface-2) !important; }
body[data-role="staff"] .check-pill input:checked + span { color: var(--admin-accent-text) !important; box-shadow: rgba(13, 124, 143, 0.1) 0px 0px 0px 1px !important; background: var(--accent-soft) !important; }
body[data-role="staff"] .group-checks, body[data-role="staff"] .access-departments { padding: 9px !important; border-radius: 13px !important; background: var(--admin-surface-2) !important; }
body[data-role="staff"] .group-check { min-height: 32px !important; padding: 6px 8px !important; border-radius: 8px !important; color: var(--admin-muted) !important; font-size: 11px !important; font-weight: 700 !important; }
body[data-role="staff"] .group-check:hover { color: var(--admin-ink) !important; background: var(--admin-surface) !important; }
body[data-role="staff"] .event-list, body[data-role="staff"] .override-list { display: grid !important; gap: 8px !important; margin-top: 13px !important; }
body[data-role="staff"] .event-item, body[data-role="staff"] .override-item { padding: 12px !important; border-radius: 13px !important; background: var(--admin-surface-2) !important; }
body[data-role="staff"] .event-item .event-name { color: var(--admin-ink) !important; font-size: 13px !important; }
body[data-role="staff"] .event-item .event-sub, body[data-role="staff"] .override-item { color: var(--admin-muted) !important; font-size: 11px !important; line-height: 1.42 !important; }
body[data-role="staff"] .event-type-chip { border: 1px solid rgba(13, 124, 143, 0.14) !important; border-radius: 8px !important; color: var(--admin-accent-text) !important; background: var(--accent-soft) !important; }
body[data-role="staff"] .event-type-chip.lunch { border-color: rgba(217, 146, 24, 0.2) !important; color: var(--warn) !important; background: var(--warn-soft) !important; }
body[data-role="staff"] .event-warning { border: 1px solid rgba(217, 146, 24, 0.18) !important; color: var(--warn) !important; background: var(--warn-soft) !important; }
body[data-role="staff"] .inline-actions, body[data-role="staff"] .access-toolbar { display: flex !important; align-items: flex-end !important; gap: 9px !important; flex-wrap: wrap !important; margin-top: 13px !important; }
body[data-role="staff"] .inline-actions > .btn, body[data-role="staff"] .access-toolbar > .btn, body[data-role="staff"] .event-editor-grid + div .btn { min-height: 40px !important; padding: 0px 14px !important; border-radius: 11px !important; font-size: 12px !important; font-weight: 820 !important; }
body[data-role="staff"] #deleteTemplate, body[data-role="staff"] #deleteEvent, body[data-role="staff"] #v3ClearOverride { border-color: rgba(214, 60, 48, 0.35) !important; background: rgba(214, 60, 48, 0.06) !important; color: var(--danger) !important; }
body[data-theme="dark"][data-role="staff"] { --admin-shadow: inset 0 1px 0 rgba(255,255,255,.045),
0 15px 30px -24px rgba(0,0,0,.86); }
body[data-theme="dark"][data-role="staff"] .staff-tabs { border-color:var(--a2-legacy-border,rgba(255, 255, 255, 0.1))!important; background:var(--a2-legacy-surface,rgba(21, 31, 40, 0.84))!important; }
body[data-theme="dark"][data-role="staff"] .staff-box { border-color:var(--a2-legacy-border,rgba(255, 255, 255, 0.09))!important; }
body[data-theme="dark"][data-role="staff"] .staff-field input, body[data-theme="dark"][data-role="staff"] .staff-field select, body[data-theme="dark"][data-role="staff"] .profile-editor-row input { border-color:transparent!important; background:var(--av-well)!important; box-shadow:var(--av-shadow-well);}
body[data-theme="dark"][data-role="staff"] .staff-field input:focus, body[data-theme="dark"][data-role="staff"] .staff-field select:focus { border-color:transparent!important; box-shadow:var(--av-shadow-well)!important; background:var(--av-focus-well);}
body[data-theme="dark"][data-role="staff"] .week-range-preview { border-color: rgba(116, 209, 216, 0.18) !important; background: rgba(116, 209, 216, 0.08) !important; color: rgb(185, 239, 240) !important; }
body[data-theme="dark"][data-role="staff"] .staff-note, body[data-theme="dark"][data-role="staff"] .profile-editor, body[data-theme="dark"][data-role="staff"] .group-checks, body[data-theme="dark"][data-role="staff"] .access-departments { border-color:var(--a2-legacy-border,rgba(255, 255, 255, 0.09))!important; background:var(--a2-legacy-surface-well,rgba(255, 255, 255, 0.04))!important; }
body[data-theme="dark"][data-role="staff"] .change-item, body[data-theme="dark"][data-role="staff"] .event-item, body[data-theme="dark"][data-role="staff"] .override-item { border-color: rgba(255, 255, 255, 0.09) !important; background: rgba(255, 255, 255, 0.043) !important; }
@media (max-width: 1180px) {
body[data-role="staff"] .staff-tabs { position: static !important; overflow-x: auto !important; }
body[data-role="staff"] .staff-grid { grid-template-columns: 1fr !important; }
body[data-role="staff"] #publishWeekBtn { width: 100% !important; }
}
body[data-role="staff"] { --import-ready: #2e9e63; --import-ready-soft: #e4f6eb; --import-warning: #d99218; --import-warning-soft: #fff2d6; --import-danger: #cf4451; --import-danger-soft: #ffe8eb; }
body[data-theme="dark"][data-role="staff"] { --import-ready: #7fd8a6; --import-ready-soft: rgba(46,158,99,.14); --import-warning: #f2ca72; --import-warning-soft: rgba(245,187,71,.14); --import-danger: #f199a1; --import-danger-soft: rgba(219,89,99,.15); }
body[data-role="staff"] #uploadPanel { position: relative !important; overflow: hidden !important; margin-top: 0px !important; border-radius: 22px !important; box-shadow: var(--admin-shadow) !important; background: linear-gradient(
135deg,
color-mix(in srgb,var(--accent-soft) 75%,var(--panel)) 0%,
var(--panel) 64%
) !important; }
body[data-role="staff"] #uploadPanel::before { position: absolute; top: -105px; right: -82px; width: 280px; height: 280px; border-radius: 50%; content: ""; pointer-events: none; }
body[data-role="staff"] #uploadPanel::after { position: absolute; right: 38px; bottom: -54px; width: 130px; height: 130px; border-radius: 50%; content: ""; pointer-events: none; }
body[data-role="staff"] #uploadPanel .dropzone { position: relative !important; z-index: 1 !important; display: grid !important; min-height: 230px !important; box-sizing: border-box !important; place-content: center !important; justify-items: center !important; padding: 34px 30px !important; border-radius: 18px !important; text-align: center !important; transition: border-color 0.18s, background 0.18s, transform 0.18s, box-shadow 0.18s !important; background: color-mix(
in srgb,
var(--panel) 62%,
transparent
) !important; }
body[data-role="staff"] #uploadPanel .dropzone:hover, body[data-role="staff"] #uploadPanel .dropzone.drag { box-shadow: rgba(255, 255, 255, 0.42) 0px 1px 0px inset, rgba(13, 124, 143, 0.4) 0px 15px 26px -24px !important; transform: translateY(-2px) !important; background: color-mix(
in srgb,
var(--accent-soft) 68%,
var(--panel)
) !important; }
body[data-role="staff"] #uploadPanel .dz-icon { width: 60px !important; height: 60px !important; margin: 0px auto 14px !important; border-radius: 19px !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 0px inset, rgba(13, 124, 143, 0.56) 0px 10px 22px -13px !important; background: var(--accent) !important; }
body[data-role="staff"] #uploadPanel .dz-icon svg { width: 28px !important; height: 28px !important; }
body[data-role="staff"] #uploadPanel .dropzone strong { color: var(--text) !important; font-size: 17px !important; font-weight: 850 !important; line-height: 1.24 !important; letter-spacing: -0.018em !important; }
body[data-role="staff"] #uploadPanel .dropzone strong::after { display: block; margin-top: 6px; color: var(--accent-strong); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; content: "ะะผะฟะพัั ัะฐัะฟะธัะฐะฝะธั"; }
body[data-role="staff"] #uploadPanel .dropzone p { max-width: 620px !important; margin: 10px auto 0px !important; color: var(--muted) !important; font-size: 13px !important; line-height: 1.52 !important; }
body[data-role="staff"] #uploadPanel.loaded { background: linear-gradient(
135deg,
var(--import-ready-soft) 0%,
var(--panel) 62%
) !important; }
body[data-role="staff"] #uploadPanel.loaded .uploadbar { position: relative !important; z-index: 1 !important; min-height: 102px !important; padding: 5px 2px !important; }
body[data-role="staff"] #uploadPanel.loaded .ok-ico { width: 52px !important; height: 52px !important; border-radius: 16px !important; color: rgb(255, 255, 255) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.23),
0 9px 19px -13px color-mix(
in srgb,
var(--import-ready) 62%,
transparent
) !important; background: var(--import-ready) !important; }
body[data-role="staff"] #uploadPanel.loaded .ub-main { padding: 2px 0px !important; }
body[data-role="staff"] #uploadPanel.loaded .ub-t { color: var(--text) !important; font-size: 16px !important; font-weight: 850 !important; line-height: 1.25 !important; letter-spacing: -0.018em !important; }
body[data-role="staff"] #uploadPanel.loaded .ub-s { margin-top: 4px !important; color: var(--muted) !important; font-size: 12px !important; font-weight: 650 !important; line-height: 1.4 !important; }
body[data-role="staff"] #changeFiles { min-height: 39px !important; padding: 0px 13px !important; border-radius: 11px !important; font-size: 12px !important; font-weight: 800 !important; }
body[data-role="staff"] #uploadPanel .statusline { position: relative !important; z-index: 1 !important; margin-top: 13px !important; padding-top: 13px !important; }
body[data-role="staff"] #uploadPanel .status { display: inline-flex !important; min-height: 28px !important; box-sizing: border-box !important; align-items: center !important; padding: 5px 9px !important; border-radius: 8px !important; color: var(--muted) !important; font-size: 11px !important; font-weight: 750 !important; background: var(--panel-2) !important; }
body[data-role="staff"] #uploadPanel .status.ok { color: var(--import-ready) !important; background: var(--import-ready-soft) !important; }
body[data-role="staff"] #uploadPanel .status.err { color: var(--import-danger) !important; background: var(--import-danger-soft) !important; }
body[data-role="staff"] #uploadPanel .filechips { position: relative !important; z-index: 1 !important; gap: 7px !important; margin-top: 10px !important; }
body[data-role="staff"] #uploadPanel .filechips .chip { border-radius: 9px !important; color: var(--text) !important; font-size: 11px !important; font-weight: 720 !important; background: var(--panel) !important; }
body[data-role="staff"] #checkPanel { margin-top: 18px !important; overflow: hidden !important; border-radius: 20px !important; box-shadow: var(--admin-shadow) !important; background: var(--panel) !important; }
body[data-role="staff"] #checkPanel .check-head { display: flex !important; min-height: 58px !important; align-items: center !important; gap: 11px !important; padding: 14px 16px !important; color: var(--text) !important; font-size: 13px !important; font-weight: 820 !important; }
body[data-role="staff"] #checkPanel .check-pill { min-height: 30px !important; padding: 5px 11px !important; border-radius: 999px !important; font-size: 11px !important; font-weight: 850 !important; letter-spacing: 0.025em !important; }
body[data-role="staff"] #checkPanel .check-pill.ok { color: var(--import-ready) !important; background: var(--import-ready-soft) !important; }
body[data-role="staff"] #checkPanel .check-pill.warn { color: var(--import-warning) !important; background: var(--import-warning-soft) !important; }
body[data-role="staff"] #checkPanel .check-pill.bad { color: var(--import-danger) !important; background: var(--import-danger-soft) !important; }
body[data-role="staff"] #checkPanel .check-toggle { min-height: 34px !important; margin-left: auto !important; padding: 0px 10px !important; border-radius: 9px !important; color: var(--accent-strong) !important; font-size: 11px !important; font-weight: 800 !important; background: var(--panel-2) !important; }
body[data-role="staff"] #checkPanel .check-list { display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 11px !important; padding: 14px 16px 16px !important; }
body[data-role="staff"] #checkPanel .conflict { min-height: 118px !important; box-sizing: border-box !important; padding: 14px 15px !important; border-radius: 14px !important; background: var(--panel-2) !important; }
body[data-role="staff"] #checkPanel .conflict.bad { border-left-color: var(--import-danger) !important; background: linear-gradient(
135deg,
var(--import-danger-soft) 0%,
var(--panel-2) 72%
) !important; }
body[data-role="staff"] #checkPanel .conflict .c-head { color: var(--text) !important; font-size: 12.5px !important; font-weight: 840 !important; line-height: 1.35 !important; }
body[data-role="staff"] #checkPanel .conflict .c-head .c-room { margin-left: 2px !important; border-radius: 7px !important; color: rgb(255, 255, 255) !important; font-size: 10.5px !important; font-weight: 850 !important; background: var(--accent) !important; }
body[data-role="staff"] #checkPanel .conflict .c-body { margin-top: 8px !important; gap: 5px !important; }
body[data-role="staff"] #checkPanel .conflict .c-line { color: var(--muted) !important; font-size: 11.5px !important; line-height: 1.4 !important; }
body[data-role="staff"] #checkPanel .conflict .c-actions { margin-top: 11px !important; }
body[data-role="staff"] #checkPanel .conflict .c-open, body[data-role="staff"] #checkPanel .conflict .c-shared { min-height: 32px !important; padding: 0px 10px !important; border-radius: 9px !important; font-size: 11px !important; font-weight: 800 !important; }
body[data-role="staff"] #publishBar { position: relative !important; z-index: 1 !important; display: flex !important; min-height: 64px !important; box-sizing: border-box !important; align-items: center !important; gap: 12px !important; margin-top: 16px !important; padding: 10px 11px 10px 14px !important; border-radius: 14px !important; box-shadow: rgba(255, 255, 255, 0.44) 0px 1px 0px inset, rgba(13, 124, 143, 0.36) 0px 12px 24px -22px !important; background: linear-gradient(
90deg,
color-mix(in srgb,var(--accent-soft) 76%,var(--panel)) 0%,
var(--panel) 78%
) !important; }
body[data-role="staff"] #publishBar span { min-width: 0px !important; flex: 1 1 0% !important; color: var(--accent-strong) !important; font-size: 12px !important; font-weight: 820 !important; line-height: 1.35 !important; }
body[data-role="staff"] #publishBar span::before { margin-right: 7px; color: var(--accent); content: ""; display:inline-block;width:14px;height:14px;background:currentColor;mask:var(--av-icon-check-mask) center/contain no-repeat;-webkit-mask:var(--av-icon-check-mask) center/contain no-repeat; font-size: 14px; font-weight: 900; }
body[data-role="staff"] #publishBtn { min-height: 42px !important; padding: 0px 16px !important; border-radius: 11px !important; font-size: 12px !important; font-weight: 850 !important; white-space: nowrap !important; }
body[data-theme="dark"][data-role="staff"] #uploadPanel { border-color: rgba(116, 209, 216, 0.18) !important; background: linear-gradient(
135deg,
rgba(13,124,143,.16) 0%,
var(--panel) 64%
) !important; }
body[data-theme="dark"][data-role="staff"] #uploadPanel .dropzone { border-color: rgba(116, 209, 216, 0.3) !important; background: rgba(255, 255, 255, 0.024) !important; }
body[data-theme="dark"][data-role="staff"] #uploadPanel .dropzone:hover, body[data-theme="dark"][data-role="staff"] #uploadPanel .dropzone.drag { border-color: rgb(116, 209, 216) !important; background: rgba(116, 209, 216, 0.07) !important; }
body[data-theme="dark"][data-role="staff"] #uploadPanel.loaded { border-color: rgba(127, 216, 166, 0.28) !important; background: linear-gradient(
135deg,
rgba(46,158,99,.15) 0%,
var(--panel) 64%
) !important; }
body[data-theme="dark"][data-role="staff"] #uploadPanel .status, body[data-theme="dark"][data-role="staff"] #uploadPanel .filechips .chip, body[data-theme="dark"][data-role="staff"] #checkPanel .conflict { border-color: rgba(255, 255, 255, 0.09) !important; background: rgba(255, 255, 255, 0.043) !important; }
body[data-theme="dark"][data-role="staff"] #checkPanel { border-color: rgba(255, 255, 255, 0.09) !important; }
body[data-theme="dark"][data-role="staff"] #checkPanel .check-head { border-bottom-color: rgba(255, 255, 255, 0.08) !important; }
body[data-theme="dark"][data-role="staff"] #checkPanel .conflict.bad { background: linear-gradient(135deg, rgba(219, 89, 99, 0.15) 0%, rgba(255, 255, 255, 0.043) 72%) !important; }
body[data-theme="dark"][data-role="staff"] #publishBar { border-color: rgba(116, 209, 216, 0.24) !important; background: linear-gradient(
90deg,
rgba(13,124,143,.16) 0%,
var(--panel) 78%
) !important; }
@media (max-width: 1100px) {
body[data-role="staff"] #checkPanel .check-list { grid-template-columns: 1fr !important; }
}
html[data-theme="dark"] body[data-role="staff"] #uploadPanel, html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded { border-color: rgba(116, 209, 216, 0.18) !important; background: none rgb(21, 31, 40) !important; box-shadow: rgba(255, 255, 255, 0.043) 0px 1px 0px inset, rgba(0, 0, 0, 0.88) 0px 16px 34px -25px !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded { background: linear-gradient(135deg, rgb(27, 51, 46) 0%, rgb(25, 39, 45) 45%, rgb(21, 31, 40) 100%) !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel::before { border-color: rgba(116, 209, 216, 0.09) !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel::after { border-color: rgba(116, 209, 216, 0.06) !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded .uploadbar { position: relative !important; z-index: 2 !important; min-height: 92px !important; padding: 4px 2px !important; background: none transparent !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded .ok-ico { border-color: rgba(127, 216, 166, 0.3) !important; background: rgb(39, 104, 72) !important; color: rgb(233, 255, 241) !important; box-shadow: rgba(255, 255, 255, 0.11) 0px 1px 0px inset, rgba(0, 0, 0, 0.56) 0px 10px 21px -14px !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded .ub-t { color: rgb(237, 248, 244) !important; text-shadow: none !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded .ub-s { color: rgb(185, 207, 202) !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded #changeFiles { border-color: rgba(116, 209, 216, 0.24) !important; background: rgb(29, 48, 55) !important; color: rgb(198, 236, 238) !important; box-shadow: none !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded #changeFiles:hover { border-color: rgb(116, 209, 216) !important; background: rgb(34, 59, 67) !important; color: rgb(239, 255, 255) !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded .statusline { position: relative !important; z-index: 2 !important; border-top-color: rgba(255, 255, 255, 0.08) !important; background: transparent !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded .status { border: 1px solid rgba(127, 216, 166, 0.17) !important; background: rgba(46, 158, 99, 0.12) !important; color: rgb(174, 226, 193) !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded .filechips { position: relative !important; z-index: 2 !important; background: transparent !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded .filechips .chip { border-color: rgba(255, 255, 255, 0.1) !important; background: rgb(27, 42, 48) !important; color: rgb(195, 214, 216) !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded #publishBar { position: relative !important; z-index: 2 !important; border-color: rgba(116, 209, 216, 0.24) !important; background: none rgb(23, 42, 49) !important; box-shadow: rgba(255, 255, 255, 0.043) 0px 1px 0px inset, rgba(0, 0, 0, 0.8) 0px 10px 23px -20px !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded #publishBar span { color: rgb(200, 237, 239) !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded #publishBar span::before { color: rgb(127, 216, 166) !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded #publishBtn { border-color: rgb(35, 150, 165) !important; background: linear-gradient(135deg, rgb(22, 142, 158), rgb(36, 126, 144)) !important; color: rgb(255, 255, 255) !important; }
html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded > *, html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded .uploadbar > *, html[data-theme="dark"] body[data-role="staff"] #uploadPanel.loaded .statusline > * { background-image: none !important; }
#installOverlay { backdrop-filter: none; z-index: 1400 !important; align-items: center !important; padding: 22px !important; background-color: var(--av-surface-1) !important; }
#installOverlay .installBox { position: relative !important; max-height: none !important; padding: 0px !important; border-radius: 25px !important; background-color: var(--av-surface-1)!important; box-shadow: var(--av-shadow-modal)!important; text-align: left !important; }
@keyframes install-sheet-in {
0% { opacity: 0; transform: translateY(10px) scale(0.975); }
100% { opacity: 1; transform: translateY(0px) scale(1); }
}
#installOverlay .installBox::before { position: absolute; z-index: 2; content: ""; background: var(--av-surface-1); }
#installOverlay .install-hero { position: relative !important; display: flex !important; align-items: center !important; gap: 14px !important; padding: 23px 66px 19px 22px !important; background-color: var(--av-surface-1) !important; }
#installOverlay .install-hero::after { position: absolute; top: -48px; right: -35px; width: 135px; height: 135px; border: 1px solid rgba(13, 124, 143, 0.13); border-radius: 50%; content: ""; }
#installOverlay .install-hero-icon { position: relative !important; z-index: 1 !important; display: grid !important; width: 56px !important; height: 56px !important; flex: 0 0 56px !important; place-items: center !important; overflow: hidden !important; padding: 0px !important; border: 2px solid rgba(255, 255, 255, 0.78) !important; border-radius: 17px !important; background-color: var(--av-surface-1) !important; box-shadow: var(--av-shadow-control) !important; }
#installOverlay .install-hero-icon img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; }
#installOverlay .install-hero h2 { position: relative !important; z-index: 1 !important; margin: 0px !important; color: var(--text) !important; font-size: 21px !important; font-weight: 860 !important; line-height: 1.16 !important; letter-spacing: -0.026em !important; }
#installOverlay .install-hero p { position: relative !important; z-index: 1 !important; margin: 5px 0px 0px !important; color: var(--muted) !important; font-size: 12px !important; font-weight: 650 !important; line-height: 1.42 !important; }
#installOverlay .install-platform-tabs { display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 6px !important; margin: 16px 20px 12px !important; padding: 5px !important; border-radius: 14px !important; background-color: var(--av-well) !important; }
#installOverlay .install-platform-tab { min-height: 38px !important; padding: 0px 11px !important; border: 1px solid transparent !important; border-radius: 10px !important; background: transparent !important; color: var(--muted) !important; font-size: 12px !important; font-weight: 650 !important; transition: background 0.16s, color 0.16s, border-color 0.16s, box-shadow 0.16s !important; }
#installOverlay .install-platform-tab.active { border-color: rgba(13, 124, 143, 0.2) !important; background-color: var(--av-surface-1) !important; color: var(--accent-strong) !important; box-shadow: var(--av-shadow-control) !important; }
#installOverlay .install-guide { position: relative !important; margin: 0px 20px !important; padding: 15px 15px 13px !important; border-radius: 16px !important; background-color: var(--av-surface-1) !important; }
#installOverlay .install-guide-title { display: flex !important; align-items: center !important; gap: 7px !important; margin-bottom: 10px !important; color: var(--text) !important; font-size: 13px !important; font-weight: 650 !important; line-height: 1.25 !important; }
#installOverlay .install-guide-title::before { content: "โ"; display: grid !important; width: 24px !important; height: 24px !important; flex: 0 0 24px !important; place-items: center !important; border-radius: 8px !important; background-color: var(--av-surface-1) !important; color: var(--accent-strong) !important; font-size: 15px !important; font-weight: 650 !important; }
#installOverlay .install-guide ol { counter-reset: install-step 0; display: grid !important; gap: 7px !important; margin: 0px !important; padding: 0px !important; list-style: none !important; }
#installOverlay .install-guide li { counter-increment: install-step 1; position: relative !important; min-height: 31px !important; box-sizing: border-box !important; padding: 7px 8px 7px 39px !important; border-radius: 10px !important; background-color: var(--av-surface-1) !important; color: var(--text) !important; font-size: 11.5px !important; font-weight: 620 !important; line-height: 1.42 !important; }
#installOverlay .install-guide li::before { position: absolute !important; top: 50% !important; left: 8px !important; display: grid !important; width: 23px !important; height: 23px !important; place-items: center !important; border-radius: 8px !important; background-color: var(--av-surface-1) !important; color: var(--accent-strong) !important; content: counter(install-step) !important; font-size: 10px !important; font-weight: 650 !important; transform: translateY(-50%) !important; }
#installOverlay .install-guide li b { color: var(--accent-strong) !important; font-weight: 650 !important; }
#installOverlay .install-guide-note { margin-top: 10px !important; padding: 9px 10px 0px !important; color: var(--muted) !important; font-size: 10.5px !important; line-height: 1.46 !important; }
#installOverlay .install-state { margin: 12px 20px 0px !important; padding: 10px 11px !important; border: 1px solid rgba(46, 158, 99, 0.22) !important; border-radius: 12px !important; color: var(--ok) !important; font-size: 11.5px !important; font-weight: 650 !important; line-height: 1.4 !important; background: var(--ok-soft) !important; }
#installOverlay .install-state::before { margin-right: 7px; content: ""; display:inline-block;width:14px;height:14px;background:currentColor;mask:var(--av-icon-check-mask) center/contain no-repeat;-webkit-mask:var(--av-icon-check-mask) center/contain no-repeat; font-size: 14px; font-weight: 650; }
#installOverlay .install-actions { display: flex !important; gap: 8px !important; margin: 16px 20px 20px !important; }
#installOverlay .install-actions .btn { min-height: 44px !important; border-radius: 12px !important; font-size: 12px !important; font-weight: 650 !important; }
#installOverlay .install-actions .btn.primary { flex: 1 1 0% !important; box-shadow: var(--av-shadow-primary)!important; }
#installOverlay .install-actions #installLater { min-width: 112px !important; background-color: var(--av-surface-1) !important; color: var(--muted) !important; }
html[data-theme="dark"] #installOverlay { background-color: var(--av-surface-1) !important; }
html[data-theme="dark"] #installOverlay .installBox { max-height: none !important; border-radius: 23px 23px 17px 17px !important; background: var(--av-surface-1)!important; box-shadow:var(--av-shadow-modal);}
html[data-theme="dark"] #installOverlay .install-hero { border-bottom-color: rgba(255, 255, 255, 0.08) !important; background: var(--av-surface-1) !important; }
html[data-theme="dark"] #installOverlay .install-hero::after { border-color: rgba(116, 209, 216, 0.14) !important; }
html[data-theme="dark"] #installOverlay .install-hero-icon { border-color: rgba(255, 255, 255, 0.14) !important; }
html[data-theme="dark"] #installOverlay .install-platform-tabs { border-color: rgba(255, 255, 255, 0.09) !important; background-image: initial !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: var(--av-well) !important; }
html[data-theme="dark"] #installOverlay .install-platform-tab { color: rgb(159, 180, 183) !important; }
html[data-theme="dark"] #installOverlay .install-platform-tab.active { border-color: rgba(116, 209, 216, 0.21) !important; background-image: initial !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: var(--av-surface-1) !important; color: rgb(185, 239, 240) !important; box-shadow: var(--av-shadow-control) !important; }
html[data-theme="dark"] #installOverlay .install-guide { border-color: rgba(255, 255, 255, 0.09) !important; background-image: initial !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: var(--av-surface-1) !important; }
html[data-theme="dark"] #installOverlay .install-guide li { border-color: rgba(255, 255, 255, 0.08) !important; background-image: initial !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: var(--av-surface-1) !important; color: rgb(230, 240, 241) !important; }
html[data-theme="dark"] #installOverlay .install-guide li::before, html[data-theme="dark"] #installOverlay .install-guide-title::before { background-image: initial !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: var(--av-surface-1) !important; color: rgb(185, 239, 240) !important; }
html[data-theme="dark"] #installOverlay .install-guide li b { color: rgb(185, 239, 240) !important; }
html[data-theme="dark"] #installOverlay .install-guide-note { border-top-color: rgba(255, 255, 255, 0.08) !important; color: rgb(168, 187, 190) !important; }
html[data-theme="dark"] #installOverlay .install-state { border-color: rgba(127, 216, 166, 0.22) !important; background: rgba(46, 158, 99, 0.14) !important; color: rgb(174, 226, 193) !important; }
html[data-theme="dark"] #installOverlay .install-actions #installLater { border-color: rgba(255, 255, 255, 0.11) !important; background-image: initial !important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: var(--av-surface-1) !important; color: rgb(168, 187, 190) !important; }
@media (max-width: 640px) {
#installOverlay { align-items: flex-end !important; padding: 10px !important; }
#installOverlay .installBox { width: 100% !important; max-height: calc(100dvh - 20px) !important; border-radius: 23px 23px 17px 17px !important; }
#installOverlay .install-hero { padding: 20px 61px 17px 17px !important; }
#installOverlay .install-hero-icon { width: 50px !important; height: 50px !important; flex-basis: 50px !important; border-radius: 15px !important; }
#installOverlay .install-hero h2 { font-size: 19px !important; }
#installOverlay .install-platform-tabs { margin: 14px 15px 11px !important; }
#installOverlay .install-guide { margin: 0px 15px !important; padding: 13px !important; }
#installOverlay .install-actions { }
#installOverlay .install-state { margin: 11px 15px 0px !important; }
}
@media (max-width: 370px) {
#installOverlay .install-guide li { font-size: 11px !important; }
#installOverlay .install-actions { flex-direction: column-reverse !important; }
#installOverlay .install-actions #installLater { width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
#installOverlay .installBox { animation: auto ease 0s 1 normal none running none !important; }
}
#installOverlay .installBox::before { background: var(--av-surface-1); top: 12px !important; right: 22px !important; left: 22px !important; height: 3px !important; border-radius: 999px !important; }
html[data-theme="dark"] #installOverlay .installBox { width: min(490px, -32px + 100vw) !important; max-width: 490px !important; background: var(--av-surface-1)!important; box-shadow:var(--av-shadow-modal);}
@media (max-width: 640px) {
#installOverlay { padding: 10px !important; }
#installOverlay .installBox { width: calc(-20px + 100vw) !important; max-width: calc(-20px + 100vw) !important; overflow: hidden !important; border-radius: 23px 23px 17px 17px !important; }
#installOverlay .installBox::before { top: 10px !important; right: 18px !important; left: 18px !important; }
}
#noticeOverlay { z-index: 1600 !important; }
@media (max-width: 640px) {
}
#installOverlay .installBox { width: min(490px, -32px + 100vw) !important; max-width: 490px !important; overflow: hidden !important; isolation: isolate !important; background: var(--av-surface-1)!important; box-shadow:var(--av-shadow-modal);}
#installOverlay .installBox::before { background: var(--av-surface-1); display: none !important; }
#installOverlay .install-hero { overflow: hidden !important; background: linear-gradient(
135deg,
color-mix(in srgb,var(--accent-soft) 74%,var(--panel)) 0%,
var(--panel) 69%
) !important; }
#installOverlay .install-hero::after { z-index: 0 !important; pointer-events: none !important; }
#installOverlay .install-hero > * { position: relative !important; z-index: 1 !important; }
html[data-theme="dark"] #installOverlay .installBox { background-image: none!important; background-position: initial !important; background-size: initial !important; background-repeat: initial !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: var(--av-surface-1)!important; overflow: hidden !important; isolation: isolate !important; box-shadow:var(--av-shadow-modal);}
@media (max-width: 640px) {
#installOverlay .installBox { width: calc(-20px + 100vw) !important; max-width: calc(-20px + 100vw) !important; overflow: hidden !important; isolation: isolate !important; }
}
#noticeOverlay #noticeCloseBtn { display: inline-flex !important; min-width: 0px !important; min-height: 43px !important; flex: 1 1 0% !important; align-items: center !important; justify-content: center !important; border-radius: 12px !important; visibility: visible !important; opacity: 1 !important; }
#noticeOverlay #noticeMuteBtn:not([hidden]) { display: inline-flex !important; min-width: 0px !important; min-height: 43px !important; flex: 1 1 0% !important; align-items: center !important; justify-content: center !important; border-radius: 12px !important; }
@media (max-width: 370px) {
#noticeOverlay #noticeCloseBtn, #noticeOverlay #noticeMuteBtn:not([hidden]) { width: 100% !important; }
}
#roleOverlay .role-choice-head p { max-width: 330px !important; line-height: 1.45 !important; }
#roleOverlay .role-choice-dept { display: block !important; }
body[data-role="staff"] { --admin-max-width: 1460px; }
body[data-role="staff"] #dispatcherTools, body[data-role="staff"] #staffPremiumShell, body[data-role="staff"] #uploadPanel, body[data-role="staff"] #checkPanel, body[data-role="staff"] #staffSearchPanel, body[data-role="staff"] #view { width: min(var(--admin-max-width),100%) !important; max-width: var(--admin-max-width) !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; }
body[data-role="staff"] #staffPremiumShell { margin-top: 14px !important; }
body[data-role="staff"] #staffTabBells .staff-grid { grid-template-columns: minmax(0px, 1.38fr) minmax(330px, 0.62fr) !important; }
body[data-role="staff"] .profile-editor { overflow: auto hidden !important; background: var(--admin-surface-2) !important; }
body[data-role="staff"] .profile-editor-head, body[data-role="staff"] .profile-editor-row { grid-template-columns: 58px repeat(4, minmax(0px, 1fr)) !important; gap: 8px !important; width: 100% !important; min-width: 0px !important; }
body[data-role="staff"] .profile-editor-row input { width: 100% !important; min-width: 0px !important; box-sizing: border-box !important; background: var(--av-well)!important; box-shadow:var(--av-shadow-well);}
body[data-role="staff"] .staff-box-titlebar { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 14px !important; }
body[data-role="staff"] .staff-box-titlebar > div { min-width: 0px !important; }
body[data-role="staff"] .staff-box-titlebar p { margin: 5px 0px 0px !important; color: var(--admin-muted) !important; font-size: 12px !important; line-height: 1.45 !important; }
body[data-role="staff"] #v3ClearAllOverrides { min-height: 35px !important; flex: 0 0 auto !important; padding: 0px 11px !important; border-color: rgba(211, 71, 84, 0.28) !important; background: rgba(211, 71, 84, 0.07) !important; color: rgb(201, 76, 88) !important; font-size: 11px !important; white-space: nowrap !important; }
body[data-role="staff"] #v3ClearAllOverrides:disabled { opacity: 0.42 !important; cursor: default !important; }
body[data-role="staff"] .notice-flags { display: grid !important; grid-template-columns: repeat(2, minmax(0px, 1fr)) !important; gap: 9px !important; margin: 8px 0px 4px !important; }
body[data-role="staff"] .notice-option-toggle { position: relative !important; display: grid !important; grid-template-columns: auto minmax(0px, 1fr) !important; align-items: center !important; gap: 10px !important; min-width: 0px !important; padding: 11px 12px !important; border-radius: 13px !important; cursor: pointer !important; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s !important; background: var(--admin-surface-2) !important; }
body[data-role="staff"] .notice-option-toggle:hover { background: color-mix(in srgb,var(--accent-soft) 34%,var(--admin-surface-2)) !important; }
body[data-role="staff"] .notice-option-toggle input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; }
body[data-role="staff"] .notice-option-switch { position: relative !important; width: 36px !important; height: 21px !important; border-radius: 999px !important; transition: 0.16s !important; background: color-mix(in srgb,var(--admin-muted) 12%,var(--admin-surface)) !important; }
body[data-role="staff"] .notice-option-switch i { position: absolute !important; left: 3px !important; top: 3px !important; width: 13px !important; height: 13px !important; border-radius: 50% !important; transition: 0.16s !important; background: var(--admin-muted) !important; }
body[data-role="staff"] .notice-option-toggle input:checked + .notice-option-switch { background: var(--admin-accent) !important; }
body[data-role="staff"] .notice-option-toggle input:checked + .notice-option-switch i { transform: translateX(15px) !important; background:var(--a2-legacy-field,rgb(255, 255, 255))!important; }
body[data-role="staff"] .notice-option-copy { min-width: 0px !important; }
body[data-role="staff"] .notice-option-copy b { display: block !important; color: var(--admin-ink) !important; font-size: 11.5px !important; line-height: 1.25 !important; }
body[data-role="staff"] .notice-option-copy small { display: block !important; margin-top: 2px !important; color: var(--admin-muted) !important; font-size: 9.5px !important; line-height: 1.35 !important; }
body[data-role="staff"] .notice-option-toggle:has(input:checked) { background: color-mix(in srgb,var(--accent-soft) 45%,var(--admin-surface-2)) !important; }
body[data-role="staff"] .notice-admin-preview { margin-top: 16px !important; padding-top: 15px !important; }
body[data-role="staff"] .notice-preview-heading { margin-bottom: 9px !important; }
body[data-role="staff"] .notice-preview-heading b { display: block !important; color: var(--admin-ink) !important; font-size: 13px !important; font-weight: 850 !important; }
body[data-role="staff"] .notice-preview-heading span { display: block !important; margin-top: 2px !important; color: var(--admin-muted) !important; font-size: 10.5px !important; }
body[data-role="staff"] .notice-preview-single { max-width: 620px !important; padding: 10px !important; border-radius: 15px !important; background: linear-gradient(155deg,var(--admin-surface-2),color-mix(in srgb,var(--admin-surface) 88%,var(--accent-soft))) !important; }
body[data-role="staff"] .notice-preview-popup { position: relative !important; overflow: hidden !important; min-height: 132px !important; padding: 13px !important; border-left-width: 4px !important; border-radius: 13px !important; box-shadow:var(--a2-legacy-shadow-control,rgba(0, 0, 0, 0.45) 0px 12px 24px -22px)!important; background: var(--admin-surface) !important; }
body[data-role="staff"] .notice-preview-popup.info { border-left-color:var(--a2-legacy-border,rgb(24, 167, 183))!important; }
body[data-role="staff"] .notice-preview-popup.important { border-left-color:var(--a2-legacy-border,rgb(215, 154, 33))!important; }
body[data-role="staff"] .notice-preview-popup.urgent { border-left-color:var(--a2-legacy-border,rgb(211, 75, 89))!important; }
body[data-role="staff"] .notice-preview-level { margin-bottom: 5px !important; color: var(--admin-accent-text) !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; }
body[data-role="staff"] .notice-preview-popup.important .notice-preview-level { color:var(--a2-legacy-warning,rgb(169, 110, 0))!important; }
body[data-role="staff"] .notice-preview-popup.urgent .notice-preview-level { color:var(--a2-legacy-danger,rgb(196, 67, 80))!important; }
body[data-role="staff"] .notice-preview-popup h4 { margin: 0px 0px 5px !important; color: var(--admin-ink) !important; font-size: 14px !important; line-height: 1.25 !important; }
body[data-role="staff"] .notice-preview-popup p { margin: 0px !important; color: var(--admin-muted) !important; font-size: 11px !important; line-height: 1.42 !important; }
body[data-role="staff"] .notice-preview-meta { margin-top: 9px !important; color: var(--admin-muted) !important; font-size: 9.5px !important; }
body[data-role="staff"] .notice-preview-actions { display: flex !important; gap: 6px !important; margin-top: 10px !important; }
body[data-role="staff"] .notice-preview-actions span { display: inline-flex !important; min-height: 28px !important; align-items: center !important; padding: 0px 9px !important; border-radius: 8px !important; color: var(--admin-ink) !important; font-size: 9.5px !important; font-weight: 800 !important; background: var(--admin-surface-2) !important; }
@media (max-width: 760px) {
body[data-role="staff"] .notice-flags { grid-template-columns: 1fr !important; }
}
html[data-theme="dark"] body[data-role="teacher"] select { color-scheme: dark !important; background-color: var(--av-well)!important; color: var(--av-text-primary)!important; border-color: transparent!important; box-shadow:var(--av-shadow-well);}
html[data-theme="dark"] body[data-role="teacher"] select option, html[data-theme="dark"] body[data-role="teacher"] select optgroup { background: rgb(23, 36, 45) !important; color: rgb(238, 246, 250) !important; }
html[data-theme="dark"] body[data-role="teacher"] select option:disabled { color: rgb(115, 139, 152) !important; }
.teacher-announcement-preview { width: 100% !important; box-sizing: border-box !important; margin: 14px 0px !important; padding: 14px !important; border-radius: 17px !important; background: var(--panel-2) !important; }
.teacher-announcement-preview-head { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; gap: 10px !important; margin-bottom: 10px !important; }
.teacher-announcement-preview-head b { display: block !important; font-size: 14px !important; color: var(--text) !important; }
.teacher-announcement-preview-head span { display: block !important; margin-top: 2px !important; font-size: 10.5px !important; color: var(--muted) !important; }
.teacher-announcement-preview-card { --teacher-preview-color: var(--accent); padding: 13px 14px !important; border-radius: 13px !important; box-shadow: var(--shadow-sm) !important; background: var(--panel) !important; }
.teacher-announcement-preview-card.important { --teacher-preview-color: #d29a2d; }
.teacher-announcement-preview-card.urgent { --teacher-preview-color: #d24b59; }
.teacher-announcement-preview-level { font-size: 9.5px !important; font-weight: 900 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; color: var(--teacher-preview-color) !important; }
.teacher-announcement-preview-card h4 { margin: 5px 0px !important; font-size: 15px !important; line-height: 1.28 !important; color: var(--text) !important; }
.teacher-announcement-preview-text { margin: 0px !important; font-size: 11.5px !important; line-height: 1.45 !important; color: var(--muted) !important; white-space: pre-wrap !important; }
.teacher-announcement-preview-meta { margin-top: 10px !important; font-size: 10px !important; color: var(--faint) !important; }
.teacher-announcement-preview-actions { display: flex !important; gap: 6px !important; margin-top: 10px !important; }
.teacher-announcement-preview-actions span { display: inline-flex !important; align-items: center !important; min-height: 28px !important; padding: 0px 9px !important; border-radius: 8px !important; font-size: 9.5px !important; font-weight: 750 !important; color: var(--text) !important; background: var(--panel-2) !important; }
html[data-theme="dark"] body[data-role="teacher"] .teacher-announcement-preview { background: rgb(17, 29, 37) !important; border-color: rgba(255, 255, 255, 0.09) !important; }
html[data-theme="dark"] body[data-role="teacher"] .teacher-announcement-preview-card { background: rgb(13, 23, 30) !important; border-top-color: rgba(255, 255, 255, 0.08) !important; border-right-color: rgba(255, 255, 255, 0.08) !important; border-bottom-color: rgba(255, 255, 255, 0.08) !important; border-left-color: var(--teacher-preview-color) !important; }
body[data-role="staff"] .avera-teacher-admin { width: 100% !important; max-width: none !important; box-sizing: border-box !important; }
#aboutOverlay { overflow: hidden auto !important; align-items: flex-start !important; overscroll-behavior: contain !important; scrollbar-width: none !important; padding: 24px 14px !important; background: var(--av-surface-1) !important; }
#aboutOverlay::-webkit-scrollbar { display: none !important; width: 0px !important; height: 0px !important; }
#aboutOverlay .about-avera { flex: 0 0 auto !important; width: min(680px, 100%) !important; max-width: 680px !important; max-height: none !important; overflow: visible !important; margin: auto !important; padding: 18px 18px 20px !important; box-sizing: border-box !important; border-radius: 28px !important; }
.about-avera .about-like { position: relative !important; z-index: 5 !important; pointer-events: auto !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; background: var(--panel-2) !important; }
#installOverlay .install-actions button { position: relative !important; z-index: 20 !important; pointer-events: auto !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; }
.avera-about-brandrow { display: grid !important; grid-template-columns: auto minmax(0px, 1fr) !important; align-items: start !important; gap: 13px !important; padding-right: 46px !important; }
.about-avera .about-version { position: static !important; display: inline-flex !important; place-self: auto !important; margin: 8px 0px 0px !important; white-space: nowrap !important; }
.avera-wordmark { min-width: 0px !important; padding-top: 3px !important; display: block !important; }
.avera-wordmark span { display: block !important; max-width: 320px !important; white-space: normal !important; line-height: 1.32 !important; letter-spacing: 0.075em !important; }
@media (max-width: 640px) {
#aboutOverlay { align-items: flex-start !important; }
#aboutOverlay .about-avera { width: 100% !important; max-width: none !important; max-height: none !important; overflow: visible !important; margin: 0px !important; border-radius: 24px !important; }
}
@media (max-width: 520px) {
.avera-about-brandrow { grid-template-columns: 54px minmax(0px, 1fr) !important; gap: 10px !important; padding-right: 42px !important; }
.about-avera .about-app-logo { width: 54px !important; height: 54px !important; min-width: 54px !important; border-radius: 17px !important; }
.avera-wordmark { padding: 1px 0px 0px !important; }
.avera-wordmark strong { font-size: 22px !important; }
.avera-wordmark span { font-size: 8.5px !important; max-width: none !important; line-height: 1.28 !important; letter-spacing: 0.055em !important; }
.about-avera .about-version { position: static !important; padding: 5px 7px !important; font-size: 8.5px !important; margin: 7px 0px 0px !important; }
}
@media (max-width: 380px) {
.avera-about-brandrow { grid-template-columns: 50px minmax(0px, 1fr) !important; gap: 8px !important; padding-right: 40px !important; }
.about-avera .about-app-logo { width: 50px !important; height: 50px !important; min-width: 50px !important; }
.about-avera .about-version { padding: 4px 6px !important; font-size: 8px !important; margin-top: 6px !important; }
.avera-wordmark strong { font-size: 20px !important; }
.avera-wordmark span { font-size: 8px !important; }
}
@media (max-width: 1180px) {
body[data-role="staff"] #staffTabBells .staff-grid { grid-template-columns: 1fr !important; }
}
.about-version-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.about-avera .about-version-row .about-version { margin: 0px !important; }
@media (max-width: 640px) {
.about-version-row { margin-top: 8px; gap: 6px; }
.about-avera .about-version-row .about-version { font-size: 10px !important; padding: 5px 8px !important; }
}
.about-avera .avera-about-hero-card { position: relative !important; }
.about-avera .avera-about-brandrow { padding-right: 50px !important; }
@media (max-width: 640px) {
.about-avera .avera-about-brandrow { padding-right: 44px !important; }
}
.avera-teacher-profile-dialog { width: min(860px, -36px + 100vw) !important; max-width: 860px !important; padding: 24px !important; }
.avera-teacher-profile-dialog, .avera-teacher-profile-dialog * { scrollbar-width: none !important; }
.avera-teacher-profile-dialog::-webkit-scrollbar, .avera-teacher-profile-dialog ::-webkit-scrollbar { display: none !important; width: 0px !important; height: 0px !important; }
.avera-teacher-profile-dialog input[type="checkbox"], .avera-teacher-profile-dialog input[type="radio"] { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; max-width: 18px !important; max-height: 18px !important; padding: 0px !important; margin: 0px !important; border-radius: 5px !important; box-shadow: none !important; accent-color: var(--accent) !important; flex: 0 0 18px !important; }
.avera-teacher-profile-dialog label:has(input[type="checkbox"]), .avera-teacher-profile-dialog label:has(input[type="radio"]) { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; min-height: 46px !important; margin: 0px !important; padding: 10px 12px !important; border-radius: 13px !important; color: var(--text) !important; font-size: 12px !important; font-weight: 750 !important; cursor: pointer !important; box-sizing: border-box !important; background: var(--panel) !important; }
.avera-teacher-profile-dialog label:has(input[type="checkbox"]):hover, .avera-teacher-profile-dialog label:has(input[type="radio"]):hover { background: color-mix(in srgb,var(--accent-soft) 45%,var(--panel)) !important; }
.avera-teacher-profile-dialog button { min-height: 42px !important; }
.avera-profile-save-status { display: inline-flex !important; align-items: center !important; gap: 7px !important; min-height: 30px !important; margin-left: 8px !important; padding: 6px 10px !important; border-radius: 10px !important; font-size: 11px !important; font-weight: 800 !important; vertical-align: middle !important; color: var(--muted) !important; opacity: 0 !important; transform: translateY(2px) !important; transition: 0.16s !important; pointer-events: none !important; background: var(--panel-2) !important; }
.avera-profile-save-status.show { opacity: 1 !important; transform: none !important; }
.avera-profile-save-status.ok { color: var(--ok) !important; background: var(--ok-soft) !important; }
.avera-profile-save-status.err { color: var(--danger,#b54747) !important; background: rgb(255, 240, 240) !important; border-color: rgb(242, 202, 202) !important; }
html[data-theme="dark"] .avera-profile-save-status.err { background: rgba(181, 71, 71, 0.14) !important; border-color: rgba(221, 110, 110, 0.24) !important; color: rgb(255, 155, 155) !important; }
@media (max-width: 760px) {
.avera-teacher-profile-dialog { width: 100% !important; max-width: none !important; }
.avera-teacher-profile-dialog [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
.avera-profile-save-status { display: flex !important; width: max-content !important; margin: 8px 0px 0px !important; }
.avera-teacher-profile-dialog label:has(input[type="checkbox"]), .avera-teacher-profile-dialog label:has(input[type="radio"]) { min-height: 44px !important; }
}
.avera-origin-part { align-items: center !important; text-align: center !important; background: color-mix(in srgb,var(--panel) 82%,transparent) !important; }
.avera-origin-part small { width: 100% !important; text-align: center !important; }
.avera-origin-formula { justify-items: center !important; }
.avera-origin-formula > i { justify-self: center !important; }
@keyframes avera-settings-backdrop-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes avera-settings-dialog-in {
0% { opacity: 0; transform: translateY(14px) scale(0.975); }
100% { opacity: 1; transform: translateY(0px) scale(1); }
}
#feedbackOverlay.open, #aboutOverlay.open, #installOverlay.open { animation: 0.2s ease-out 0s 1 normal both running avera-settings-backdrop-in !important; }
#feedbackOverlay.open > .feedbackBox{ animation: 0.24s cubic-bezier(0.2, 0.78, 0.22, 1) 0s 1 normal both running avera-settings-dialog-in !important; transform-origin: 50% 18% !important; }
#aboutOverlay.open > .about-avera{ animation: 0.24s cubic-bezier(0.2, 0.78, 0.22, 1) 0s 1 normal both running avera-settings-dialog-in !important; transform-origin: 50% 18% !important; }
@media (max-width: 640px) {
#feedbackOverlay.open > .feedbackBox { animation-name: avera-settings-sheet-in !important; transform-origin: 50% 100% !important; }
}
@keyframes avera-settings-sheet-in {
0% { opacity: 0; transform: translateY(24px) scale(0.992); }
100% { opacity: 1; transform: translateY(0px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
#feedbackOverlay.open{ animation: auto ease 0s 1 normal none running none !important; }
#aboutOverlay.open{ animation: auto ease 0s 1 normal none running none !important; }
#installOverlay.open{ animation: auto ease 0s 1 normal none running none !important; }
#feedbackOverlay.open > .feedbackBox{ animation: auto ease 0s 1 normal none running none !important; }
#aboutOverlay.open > .about-avera{ animation: auto ease 0s 1 normal none running none !important; }
}
.avera-boot-splash { position: fixed; inset: 0px; z-index: 999999; display: none; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 14% 88%, rgba(13, 124, 143, 0.15), transparent 29%), radial-gradient(circle at 87% 12%, rgba(52, 211, 153, 0.17), transparent 27%), linear-gradient(rgb(237, 247, 247) 0%, rgb(238, 246, 247) 54%, rgb(234, 244, 245) 100%); opacity: 1; visibility: visible; transition: opacity 0.19s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.19s cubic-bezier(0.4, 0, 0.2, 1); }
html.avera-boot-enabled .avera-boot-splash { display: flex; }
.avera-boot-splash::before, .avera-boot-splash::after { content: ""; position: absolute; border: 1px solid rgba(13, 124, 143, 0.12); border-radius: 50%; pointer-events: none; }
.avera-boot-splash::before { width: min(74vw, 520px); height: min(74vw, 520px); right: -35%; top: -18%; box-shadow: rgba(13, 124, 143, 0.024) 0px 0px 0px 54px, rgba(52, 211, 153, 0.02) 0px 0px 0px 110px; }
.avera-boot-splash::after { width: min(62vw, 430px); height: min(62vw, 430px); left: -28%; bottom: -16%; box-shadow: rgba(13, 124, 143, 0.024) 0px 0px 0px 48px; }
.avera-boot-splash__inner { position: relative; z-index: 2; width: min(460px, 88vw); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.avera-boot-splash__eyebrow { margin-bottom: 18px; color: rgb(67, 128, 138); font-size: 10px; line-height: 1.2; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0; transform: translateY(8px); animation: 0.52s cubic-bezier(0.22, 0.8, 0.3, 1) 0.08s 1 normal forwards running avera-splash-piece; }
.avera-boot-splash__brandrow { display: flex; align-items: center; justify-content: center; gap: 12px; opacity: 0; transform: translateY(10px) scale(0.985); animation: 0.62s cubic-bezier(0.18, 0.82, 0.22, 1) 0.18s 1 normal forwards running avera-splash-brand; }
.avera-boot-splash__brand { color: rgb(16, 37, 45); font-size: clamp(46px, 12vw, 70px); line-height: 0.95; font-weight: 900; letter-spacing: -0.055em; }
.avera-boot-splash__glyph { display: grid; grid-template-columns: repeat(2, 7px); gap: 4px; margin-top: 5px; }
.avera-boot-splash__glyph i { width: 7px; height: 7px; border-radius: 2.5px; background: rgb(35, 184, 167); box-shadow: rgba(19, 166, 151, 0.2) 0px 2px 8px; }
.avera-boot-splash__glyph i:nth-child(2) { background: rgb(107, 212, 166); }
.avera-boot-splash__glyph i:nth-child(3) { background: rgb(12, 141, 155); }
.avera-boot-splash__glyph i:nth-child(4) { background: rgb(73, 203, 176); }
.avera-boot-splash__line { width: 0px; height: 1px; margin: 23px 0px 17px; background: linear-gradient(90deg, transparent, rgba(13, 124, 143, 0.38), transparent); animation: 0.64s cubic-bezier(0.22, 0.8, 0.3, 1) 0.48s 1 normal forwards running avera-splash-line; }
.avera-boot-splash__tag { color: rgb(86, 117, 129); font-size: clamp(15px, 4.2vw, 18px); line-height: 1.35; font-weight: 560; letter-spacing: -0.01em; opacity: 0; transform: translateY(8px); animation: 0.56s cubic-bezier(0.22, 0.8, 0.3, 1) 0.58s 1 normal forwards running avera-splash-piece; }
.avera-boot-splash__pulse { position: absolute; left: 50%; top: 50%; width: 330px; height: 330px; border-radius: 50%; transform: translate(-50%, -50%) scale(0.72); background: radial-gradient(circle, rgba(33, 193, 171, 0.075), rgba(33, 193, 171, 0) 68%); opacity: 0; animation: 1.35s ease-out 0.18s 1 normal forwards running avera-splash-pulse; pointer-events: none; }
.avera-boot-splash.is-leaving { opacity: 0; visibility: hidden; }
.avera-boot-splash.is-leaving .avera-boot-splash__inner { transform: scale(0.985) translateY(-5px); opacity: 0; transition: transform 0.19s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.17s; }
@keyframes avera-splash-piece {
100% { opacity: 1; transform: none; }
}
@keyframes avera-splash-brand {
100% { opacity: 1; transform: none; }
}
@keyframes avera-splash-line {
100% { width: min(270px, 62vw); }
}
@keyframes avera-splash-pulse {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.68); }
30% { opacity: 1; }
100% { opacity: 0.45; transform: translate(-50%, -50%) scale(1.08); }
}
@media (max-width: 420px) {
.avera-boot-splash__eyebrow { font-size: 9px; margin-bottom: 16px; }
.avera-boot-splash__brandrow { gap: 10px; }
.avera-boot-splash__glyph { grid-template-columns: repeat(2, 6px); gap: 3px; }
.avera-boot-splash__glyph i { width: 6px; height: 6px; }
.avera-boot-splash__line { margin: 20px 0px 15px; }
}
@media (prefers-reduced-motion: reduce) {
.avera-boot-splash, .avera-boot-splash * { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
.avera-boot-splash__eyebrow, .avera-boot-splash__brandrow, .avera-boot-splash__tag { opacity: 1 !important; transform: none !important; }
.avera-boot-splash__line { width: min(270px, 62vw) !important; }
}
.lunch-app-icon--bell { width:22px !important; height:22px !important; padding:0 !important; box-sizing:border-box !important; border-radius:0 !important; background:transparent !important; border:0 !important; filter:none !important; color:var(--warn) !important; object-fit:initial !important; flex:0 0 22px !important; box-shadow:none !important; }
html[data-theme="dark"] .lunch-app-icon--bell { color:var(--warn) !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
.avera-connection-led { width: 18px; height: 34px; flex: 0 0 18px; border: 0px; background: transparent; padding: 0px; display: grid; place-items: center; cursor: pointer; border-radius: 999px; }
.avera-connection-led span { width: 8px; height: 8px; border-radius: 50%; background: rgb(227, 165, 38); box-shadow: color-mix(in srgb, rgb(227, 165, 38) 13%, transparent 87%) 0px 0px 0px 4px; transition: background 0.18s, box-shadow 0.18s; }
.avera-connection-led.online span { background: rgb(34, 169, 111); box-shadow: color-mix(in srgb, rgb(34, 169, 111) 13%, transparent 87%) 0px 0px 0px 4px; }
.avera-connection-led.checking span { animation: 1.2s ease-in-out 0s infinite normal none running averaLedPulse; background: rgb(227, 165, 38) !important; box-shadow: color-mix(in srgb, rgb(227, 165, 38) 13%, transparent 87%) 0px 0px 0px 4px !important; }
@keyframes averaLedPulse {
50% { transform: scale(0.72); opacity: 0.65; }
}
.avera-connection-pop { position: fixed; z-index: 13020; width: min(285px, -24px + 100vw); padding: 12px 13px; border-radius: 15px; box-shadow: rgba(9, 35, 45, 0.42) 0px 20px 55px -22px; color: var(--text); font-size: 11px; line-height: 1.45; opacity: 0; transform: translateY(-5px) scale(0.98); pointer-events: none; transition: 0.16s; background: var(--panel); }
.avera-connection-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.avera-connection-pop b { display: flex; align-items: center; gap: 7px; font-size: 12px; margin-bottom: 5px; }
.avera-connection-pop b::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(227, 165, 38); }
.avera-connection-pop.online b::before { background: rgb(34, 169, 111); }
.avera-connection-pop span { display: block; color: var(--muted); margin-top: 2px; }
.lunch-app-icon--status { width:24px !important; height:24px !important; margin:0 7px 0 0 !important; padding:0 !important; border-radius:0 !important; box-sizing:border-box !important; vertical-align:middle !important; color:var(--av-break-accent,var(--warn)) !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
#roleOverlay .role-choice-line, #roleOverlay .role-choice-dept { display: block !important; }
#roleOverlay .role-choice-dept { margin-top: 2px !important; color: inherit !important; font-size: inherit !important; font-weight: inherit !important; letter-spacing: 0px !important; text-transform: none !important; }
html[data-theme="dark"] body[data-role="staff"] #checkPanel .conflict { background: linear-gradient(135deg, rgba(210, 151, 34, 0.075), rgba(255, 255, 255, 0.027) 68%) !important; border-color: rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) rgba(255, 255, 255, 0.08) rgb(215, 155, 32) !important; box-shadow: none !important; }
html[data-theme="dark"] body[data-role="staff"] #checkPanel .conflict.bad { background: linear-gradient(135deg, rgba(195, 58, 72, 0.12), rgba(255, 255, 255, 0.027) 70%) !important; border-color: rgba(229, 92, 105, 0.15) rgba(229, 92, 105, 0.15) rgba(229, 92, 105, 0.15) rgb(225, 91, 104) !important; box-shadow: none !important; }
html[data-theme="dark"] body[data-role="staff"] #checkPanel .conflict .c-head { color: rgb(238, 247, 248) !important; }
html[data-theme="dark"] body[data-role="staff"] #checkPanel .conflict .c-line { color: rgb(145, 171, 181) !important; }
html[data-theme="dark"] body[data-role="staff"] #checkPanel .conflict .c-line b { color: rgb(217, 231, 234) !important; }
html[data-theme="dark"] body[data-role="staff"] #checkPanel .conflict .c-open, html[data-theme="dark"] body[data-role="staff"] #checkPanel .conflict .c-shared { background: rgba(0, 0, 0, 0.16) !important; border-color: rgba(255, 255, 255, 0.09) !important; color: rgb(185, 212, 217) !important; }
@media (max-width: 390px) {
.avera-connection-led { width: 15px; flex-basis: 15px; }
}
.feedback-admin-toolbar { gap: 10px !important; }
.feedback-admin-toolbar .staff-field { display: flex !important; flex-direction: column !important; gap: 6px !important; min-width: 0px !important; }
.feedback-admin-toolbar .staff-field label { display: block !important; height: 14px !important; line-height: 14px !important; margin: 0px !important; }
.feedback-admin-toolbar .staff-field select { height: 42px !important; margin: 0px !important; }
@media (max-width: 640px) {
.avera-connection-pop { width: min(330px, -28px + 100vw) !important; left: 50% !important; right: auto !important; border-radius: 18px !important; padding: 13px 14px !important; transform: translate(-50%, -6px) scale(0.985) !important; box-shadow: rgba(7, 35, 45, 0.48) 0px 22px 55px -24px !important; }
.avera-connection-pop.open { transform: translate(-50%, 0px) scale(1) !important; }
}
.feedback-admin-toolbar { grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) !important; align-items: end !important; }
@media (max-width: 640px) {
.feedback-admin-toolbar { grid-template-columns: 1fr !important; }
}
.avera-modal-close { box-sizing: border-box; position: relative; flex: 0 0 38px; display: grid; place-items: center; width: 38px; height: 38px; min-width: 38px; min-height: 38px; margin: 0px; padding: 0px; border-radius: 12px; color: var(--av-text-primary); box-shadow: var(--av-shadow-control); font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; font-size: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; line-height: 1; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.16s, color 0.16s, border-color 0.16s, transform 0.16s, box-shadow 0.16s; background: var(--av-control-bg); }
.avera-modal-close svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentcolor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
html[data-theme="dark"] .avera-modal-close { border-color: transparent; background: var(--av-control-bg); box-shadow:var(--av-shadow-control);}
@media (hover: hover) and (pointer: fine) {
.avera-modal-close:hover { color: var(--av-text-primary); box-shadow: var(--av-shadow-control); transform: rotate(4deg) scale(1.02); background: var(--av-focus-action); }
}
.avera-modal-close:active { transform: scale(0.92); }
.avera-modal-close:focus-visible { outline-offset: 3px; background:var(--av-focus-action);}
.avera-modal-close--corner { position: absolute; top: 14px; left: auto; right: 14px; z-index: 80; }
@media (max-width: 640px) {
.avera-modal-close--corner { top: 12px; left: auto; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.avera-modal-close { transition: none; }
.avera-modal-close:hover, .avera-modal-close:active { transform: none; }
}
#loginOverlay > .roleBox { position: relative; }
#loginOverlay h2 { padding-right: 44px; }
.avera-whats-new-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.avera-whats-new-head h2 { min-width: 0px; }
.avera-whats-new { box-sizing: border-box; width: min(520px, 100% - 24px); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; color: var(--text); box-shadow: var(--shadow-lg); overflow: auto; overscroll-behavior: contain; font: inherit; animation: 0.18s ease-out 0s 1 normal none running avera-whats-new-in; background: var(--panel); }
.avera-whats-new::backdrop { background: rgba(9, 17, 23, 0.55); }
.avera-whats-new h2 { margin: 0px; font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
.avera-whats-new .release-version { margin: 8px 0px 22px; color: var(--accent-strong); font-size: 14px; font-weight: 700; }
.avera-whats-new h3 { margin: 20px 0px 10px; font-size: 16px; line-height: 1.4; }
.avera-whats-new ul { margin: 0px; padding-left: 20px; font-size: 14px; line-height: 1.55; }
.avera-whats-new li + li { margin-top: 8px; }
.avera-whats-new .avera-whats-new-ack { display: block; margin-top: 24px; width: 100%; min-height: 44px; padding: 10px 16px; border: 0px; color: var(--panel); font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-weight: 700; cursor: pointer; background: var(--accent); }
.avera-whats-new .avera-whats-new-ack:focus-visible { outline-offset: 3px; }
@keyframes avera-whats-new-in {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: none; }
}
@media (max-width: 360px) {
.avera-whats-new { padding: 20px; }
.avera-whats-new h2 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
.avera-whats-new { animation: auto ease 0s 1 normal none running none; }
}
:root { --avera-dialog-title-size: 22px; --avera-dialog-title-weight: 400; --avera-dialog-label-size: 12px; --avera-dialog-label-weight: 500; --avera-group-tab-size: 12px; --avera-group-tab-weight: 400; --bg: #f3f8f7; --panel: #fff; --panel-2: #edf4f2; --text: #243b42; --muted: #546b75; --faint: #617984; --accent: #00858b; --accent-strong: #00757c; --accent-soft: #e2f2ef; --border: #cfdfde; --border-soft: #d8e5e3; --grad: linear-gradient(110deg,#00868f,#56d6a5); --danger: #a93542; --danger-soft: #ffebed; --warn: #91551a; --warn-soft: #fff1dd; --warning: var(--warn); --warning-soft: var(--warn-soft); --ok: #197953; --ok-soft: #e1f3e9; --success: var(--ok); --success-soft: var(--ok-soft); --shadow-sm: 0 1px 3px #133f2b08; --shadow: 0 6px 24px #133f2b08; --shadow-lg: 0 18px 55px #15382f22; --radius: 20px; --radius-sm: 12px; --ui-focus: #00767e; --ui-time-track: #bcdfd9; --ui-time-fill: #00858b; --ui-motion: 180ms; }
html[data-theme="dark"] { color-scheme: dark; --danger: #ffb5be; --danger-soft: #3e2930; --warn: #f4cca0; --warn-soft: #382f24; --ok: #92ddba; --ok-soft: #213e34; --shadow-sm: none; --shadow: 0 6px 24px #0002; --shadow-lg: 0 18px 55px #0005; --ui-focus: #82d9ca; }
body { font-family: var(--av-font-sans); font-weight: 400; line-height: 1.45; color: var(--text); background: var(--bg); }
#mobileShell { display: none; min-height: 100dvh; color: var(--text); background: var(--bg); }
body[data-role="student"] #mobileShell, body[data-role="teacher"] #mobileShell { display: block; }
.mobile-head { position: sticky; top: 0px; z-index: 90; background: var(--panel); }
.mobile-head-inner { max-width: 760px; margin: auto; display: flex; align-items: center; gap: 12px; }
.mobile-id-copy { flex: 1 1 0%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0px; }
#mobileRoleLabel { flex: 0 0 100%; font-size: 18px; font-weight: 400; line-height: 1.15; letter-spacing: -0.02em; color: var(--text); }
#mobileEntityName { font-size: 11px; line-height: 1.4; font-weight: 400; color: var(--muted); overflow-wrap: normal; min-width: 0px; }
body[data-role="teacher"] #mobileEntityName { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; width: 100%; max-width: 100%; }
.mobile-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
#mobileStatusDot { border: 0px; background: transparent; width: 24px; height: 40px; display: grid; place-items: center; padding: 0px; cursor: pointer; position: relative; border-radius: 10px; }
#mobileStatusDot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background: rgb(155, 116, 14); box-shadow: rgba(170, 135, 38, 0.09) 0px 0px 0px 5px; }
#mobileStatusDot.online::before, #mobileStatusDot.ok::before { background: rgb(25, 121, 83); box-shadow: rgba(25, 121, 83, 0.086) 0px 0px 0px 5px; }
#mobileStatusDot.offline::before { background: rgb(170, 118, 34); }
#mobileContent { max-width: 760px; margin: auto; box-sizing: border-box; }
.avera-day-context { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; line-height: 1.4; color: var(--muted); margin: 0px 0px 16px; }
.avera-day-context span:last-child { text-align: right; }
.status-sub { font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 12px; line-height: 1.5; }
.avera-time { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.avera-time-copy { font-size: 12px; font-weight: 400; line-height: 1.4; order: 2; }
.avera-time-track { height: 3px; border-radius: 4px; overflow: hidden; order: 1; background: var(--ui-time-track); }
.avera-time-track > span { height: 100%; display: block; border-radius: inherit; transition: width 180ms linear; background: var(--ui-time-fill); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 26px 0px 14px; }
.section-head h3 { margin: 0px; color: var(--text); font-size: 19px; font-weight: 400; line-height: 1.3; letter-spacing: -0.025em; }
.section-head > span { font-size: 12px; color: var(--muted); white-space: nowrap; }
.m-current-label { display: block; margin-bottom: 7px; color: var(--accent-strong); font-size: 12px; line-height: 1.3; font-weight: 400; letter-spacing: 0px; }
.e-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 24px; }
.e-icon svg { width: 24px; height: 24px; stroke-width: 1.6; }
.e-main { min-width: 0px; }
.e-name { font-size: 14px; line-height: 1.4; font-weight: 400; }
.e-meta { font-size: 12px; line-height: 1.4; font-weight: 400; color: var(--muted); }
.lunch-app-icon { display:inline-grid; place-items:center; flex:0 0 auto; color:var(--av-break-accent,var(--warn)); background:transparent !important; box-shadow:none !important; border:0 !important; filter:drop-shadow(0 4px 7px color-mix(in srgb,var(--av-break-accent,var(--warn)) 16%,transparent)); }
.lunch-app-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.95; stroke-linecap:round; stroke-linejoin:round; }
.lunch-app-icon .lunch-icon-fill { fill:color-mix(in srgb,currentColor 16%,transparent); stroke:none; }
.m-event.lunch .e-icon { flex:0 0 34px; background:transparent !important; color:var(--av-break-accent,var(--warn)) !important; box-shadow:none !important; }
html[data-theme="dark"] .m-event.lunch .e-icon { flex:0 0 34px; background:transparent !important; color:var(--av-break-accent,var(--warn)) !important; box-shadow:none !important; }
.m-page-head, .m-datebar { display: flex; align-items: center; justify-content: space-between; margin: 0px 0px 22px; gap: 12px; }
.m-page-title { display: flex; align-items: center; gap: 12px; }
.m-page-icon { display: none; }
.m-page-head h2, .m-datebar h2 { font-size: 25px; font-weight: 400; letter-spacing: -0.02em; margin: 0px; }
.m-page-head p, .m-datebar p { font-size: 13px; color: var(--muted); margin: 5px 0px 0px; }
.settings-card { border-radius: 22px; overflow: hidden; padding: 0px; margin: 0px 0px 18px; box-shadow: none; background: var(--panel); }
.setting-row { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 16px 18px; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; background: transparent; gap: 14px; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.setting-row:last-child { border-bottom: 0px; }
.setting-row b { display: block; font-size: 15px; font-weight: 400; }
.setting-row span span { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 4px; }
.setting-row .arrow { font-size: 20px; color: var(--muted); }
.setting-row:hover { background: var(--panel-2); }
@media (min-width: 1024px) {
#mobileContent { padding-top: 30px; padding-left: 32px; padding-right: 32px; }
.mobile-head { padding: 20px 32px; }
#mobileRoleLabel { font-size: 21px; }
#mobileEntityName { font-size: 13px; }
.section-head h3 { font-size: 23px; }
}
@media (max-width: 360px) {
.mobile-head { padding-left: 14px; padding-right: 14px; }
.mobile-head-inner { gap: 6px; }
.mobile-head-actions { gap: 5px; }
#mobileRoleLabel { font-size: 16px; }
#mobileEntityName { font-size: 10px; }
#mobileStatusDot { width: 20px; }
#mobileContent { }
}
@media (prefers-reduced-motion: reduce) {
.avera-time-track > span { transition: none; }
}
.lesson-title { display: block; }
.lesson-person small { display: block; font-size: 10px; line-height: 1.3; margin-bottom: 3px; color: var(--muted); font-weight: 400; }
.lesson-person > span { display: block; font-size: 12px; font-weight: 500; line-height: 1.45; color: var(--muted); }
.lesson-groups > span { width: fit-content; padding: 4px 8px; border-radius: 6px; color: var(--accent-strong); font-size: 13px; font-weight: 650; background: var(--accent-soft); }
html[data-theme="dark"] { --bg: #0b1116 !important; --panel: #151f28 !important; --panel-2: #1a2731 !important; --text: #e9f0f4 !important; --muted: #93a9b5 !important; --faint: #66808e !important; --accent: #16b8b0 !important; --accent-strong: #7de0d2 !important; --accent-soft: rgba(22,184,176,.11) !important; --border: #2b404b !important; --border-soft: #22343e !important; --ui-time-track: #314650 !important; --ui-time-fill: #52cfc1 !important; }
html[data-theme="dark"] body::before { background: radial-gradient(48rem 28rem at 8% -8%, rgba(22, 184, 176, 0.07), transparent 60%), radial-gradient(42rem 26rem at 100% 0%, rgba(87, 106, 170, 0.055), transparent 60%) !important; }
#mobileContent.mobile-page-out-left { animation: 0.15s cubic-bezier(0.4, 0, 1, 1) 0s 1 normal both running avPageOutLeft; pointer-events: none; }
#mobileContent.mobile-page-out-right { animation: 0.15s cubic-bezier(0.4, 0, 1, 1) 0s 1 normal both running avPageOutRight; pointer-events: none; }
#mobileContent.mobile-page-in-right { animation: 0.22s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal both running avPageInRight; }
#mobileContent.mobile-page-in-left { animation: 0.22s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal both running avPageInLeft; }
@keyframes avPageOutLeft {
100% { opacity: 0.18; transform: translate3d(-22px, 0px, 0px); }
}
@keyframes avPageOutRight {
100% { opacity: 0.18; transform: translate3d(22px, 0px, 0px); }
}
@keyframes avPageInRight {
0% { opacity: 0.15; transform: translate3d(22px, 0px, 0px); }
100% { opacity: 1; transform: none; }
}
@keyframes avPageInLeft {
0% { opacity: 0.15; transform: translate3d(-22px, 0px, 0px); }
100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
#mobileContent.mobile-page-out-left, #mobileContent.mobile-page-out-right, #mobileContent.mobile-page-in-right, #mobileContent.mobile-page-in-left { animation: auto ease 0s 1 normal none running none !important; }
}
.notice-empty.notice-empty--premium { display: grid !important; justify-items: center !important; gap: 8px !important; padding: 34px 22px !important; border: 0px !important; border-radius: 22px !important; color: var(--text,#20383f) !important; box-shadow: rgba(42, 63, 72, 0.1) 0px 2px 5px inset, rgba(255, 255, 255, 0.76) 0px -1px 1px inset !important; background: var(--panel-2,var(--surface,#eef3f3)) !important; }
.notice-empty--premium .notice-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 2px; border-radius: 17px; color: var(--accent-strong,var(--accent,#008f91)); box-shadow: rgba(255, 255, 255, 0.72) 0px 1px 0px inset; background: color-mix(in srgb,var(--accent,#008f91) 10%,transparent); }
.notice-empty--premium .notice-empty-icon svg { width: 25px; height: 25px; fill: none; stroke: currentcolor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.notice-empty--premium b { font-size: 15px; letter-spacing: -0.01em; }
.notice-empty--premium > span:last-child { max-width: 310px; color: var(--muted,#6a7f87); font-size: 11.5px; line-height: 1.5; }
html[data-theme="dark"] .notice-empty.notice-empty--premium { background: rgb(16, 30, 36) !important; color: rgb(229, 238, 240) !important; box-shadow: rgba(0, 0, 0, 0.48) 0px 4px 9px inset, rgba(255, 255, 255, 0.02) 0px 0px 0px 1px !important; }
html[data-theme="dark"] .notice-empty--premium .notice-empty-icon { background: rgba(67, 203, 191, 0.09); color: rgb(84, 216, 204); box-shadow: none; }
/* RC27 ยท shared lunch icon supplied by the product owner */
.lunch-app-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;background:transparent!important;border:0!important;box-shadow:none!important;overflow:visible!important;line-height:0!important;color:inherit!important}
.lunch-app-icon img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;pointer-events:none!important;user-select:none!important;-webkit-user-drag:none!important;filter:drop-shadow(0 3px 5px rgba(171,96,0,.10))!important}
.lunch-app-icon--event{width:44px!important;height:32px!important}
.m-event.lunch .e-icon{display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 52px!important;width:52px!important;min-width:52px!important;background:transparent!important;box-shadow:none!important}
.m-event.lunch .lunch-app-icon--event{width:46px!important;height:32px!important;filter:none!important}
.lunch-app-icon--status{width:32px!important;height:23px!important;margin:0 8px 0 0!important;vertical-align:middle!important}
.lunch-app-icon--bell{width:31px!important;height:22px!important;margin:0!important;filter:none!important}
.lunch-app-icon--bell-compact{width:24px!important;height:17px!important;margin-right:6px!important}
.bellsv2-event-icon.has-lunch-icon{display:flex!important;align-items:center!important;justify-content:center!important;background:transparent!important;box-shadow:none!important}
.bellsv2-event-icon.has-lunch-icon::before{display:none!important}
.bellsv2-compact-row.is-lunch{display:grid!important;grid-template-columns:24px auto 1fr!important;align-items:center!important;column-gap:5px!important}
.bellsv2-compact-row.is-lunch>span:last-child{justify-self:end!important}
html[data-theme="dark"] .lunch-app-icon img{filter:brightness(1.10) saturate(1.06) drop-shadow(0 3px 7px rgba(0,0,0,.28))!important}
html[data-theme="dark"] .m-event.lunch .e-icon{background:transparent!important;box-shadow:none!important}
@media(max-width:370px){.m-event.lunch .e-icon{flex-basis:48px!important;width:48px!important;min-width:48px!important}.m-event.lunch .lunch-app-icon--event{width:42px!important;height:29px!important}}
/* RC22 โ desktop/tablet special-event palette and custom icon tokens. */
.lesson.special-lineup{background:linear-gradient(90deg,#fff6df,var(--panel-2));border-left-color:#b97616!important}
.lesson.special-lineup:hover{box-shadow:rgba(151,96,15,.13) 0 5px 18px}
.lesson.special-lineup .badge{background:#f8e9c6;color:#87520d}
.lesson.special-lineup .special-subject-icon{background:#f6e5bd;color:#aa6d13;box-shadow:inset 0 0 0 1px rgba(185,118,22,.18)}
.lesson.special-meeting{background:linear-gradient(90deg,#f7f3ff,var(--panel-2));border-left-color:#7a67c7!important}
.lesson.special-meeting:hover{box-shadow:rgba(91,74,159,.12) 0 5px 18px}
.lesson.special-meeting .badge{background:#eee8ff;color:#6251a7}
.lesson.special-meeting .special-subject-icon{background:#ebe5ff;color:#715ec0;box-shadow:inset 0 0 0 1px rgba(122,103,199,.18)}
.lesson.special-classhour .special-subject-icon{box-shadow:inset 0 0 0 1px rgba(107,95,194,.18)}
.special-subject-icon{width:28px;height:28px;border-radius:9px;margin-right:8px;vertical-align:-9px}
.special-subject-icon svg{width:17px;height:17px;stroke-linecap:round;stroke-linejoin:round}
.pairnum .pn.special-event-num.special-lineup{background:#f7e8c5;color:#a86a10;box-shadow:inset 0 0 0 1px rgba(185,118,22,.16)}
.pairnum .pn.special-event-num.special-meeting{background:#ece6ff;color:#6f5bbb;box-shadow:inset 0 0 0 1px rgba(122,103,199,.16)}
html[data-theme="dark"] .lesson.special-lineup{background:linear-gradient(90deg,rgba(185,118,22,.18),var(--panel-2))!important;border-left-color:#e0a74a!important}
html[data-theme="dark"] .lesson.special-lineup .badge{background:rgba(224,167,74,.14);color:#f3ca83}
html[data-theme="dark"] .lesson.special-lineup .special-subject-icon{background:rgba(224,167,74,.15)!important;color:#efbd66!important;box-shadow:inset 0 0 0 1px rgba(224,167,74,.22)}
html[data-theme="dark"] .lesson.special-meeting{background:linear-gradient(90deg,rgba(137,117,208,.16),var(--panel-2))!important;border-left-color:#a99be6!important}
html[data-theme="dark"] .lesson.special-meeting .badge{background:rgba(169,155,230,.16);color:#d0c7f5}
html[data-theme="dark"] .lesson.special-meeting .special-subject-icon{background:rgba(169,155,230,.15)!important;color:#c7bcf1!important;box-shadow:inset 0 0 0 1px rgba(169,155,230,.22)}
html[data-theme="dark"] .pairnum .pn.special-event-num.special-lineup{background:rgba(224,167,74,.15)!important;color:#efbd66!important;box-shadow:inset 0 0 0 1px rgba(224,167,74,.22)}
html[data-theme="dark"] .pairnum .pn.special-event-num.special-meeting{background:rgba(169,155,230,.15)!important;color:#c7bcf1!important;box-shadow:inset 0 0 0 1px rgba(169,155,230,.22)}
/* RC23 โ desktop/tablet class-hour card matches the modern special-event family. */
.lesson.special-classhour{background:linear-gradient(90deg,#f3efff,var(--panel-2));border-left-color:#715fd0!important;box-shadow:0 4px 14px rgba(83,65,158,.055)}
.lesson.special-classhour:hover{box-shadow:rgba(83,65,158,.13) 0 5px 18px}
.lesson.special-classhour .badge{background:#ebe5ff;color:#5745ad}
.lesson.special-classhour .special-subject-icon{background:#e8e1ff!important;color:#6b57c6!important;box-shadow:inset 0 0 0 1px rgba(113,95,208,.2),0 3px 9px rgba(83,65,158,.07)}
.pairnum .pn.special-event-num.special-classhour{background:#e8e1ff;color:#6b57c6;box-shadow:inset 0 0 0 1px rgba(113,95,208,.18)}
html[data-theme="dark"] .lesson.special-classhour{background:linear-gradient(90deg,rgba(133,112,216,.18),var(--panel-2))!important;border-left-color:#aa9bea!important;box-shadow:0 5px 16px rgba(0,0,0,.12)}
html[data-theme="dark"] .lesson.special-classhour .badge{background:rgba(170,155,234,.15);color:#d5cdf8}
html[data-theme="dark"] .lesson.special-classhour .special-subject-icon{background:rgba(156,136,229,.17)!important;color:#d0c5f5!important;box-shadow:inset 0 0 0 1px rgba(170,155,234,.23),0 3px 9px rgba(0,0,0,.14)}
html[data-theme="dark"] .pairnum .pn.special-event-num.special-classhour{background:rgba(156,136,229,.17)!important;color:#d0c5f5!important;box-shadow:inset 0 0 0 1px rgba(170,155,234,.23)}
/* rev177: academic events in desktop/classic schedule. */
.lesson.av-academic-practice-edu{--av-academic-accent:#23a890;--av-academic-ink:#08775f;--av-academic-tint:#e4f6ef}
.lesson.av-academic-practice-prod{--av-academic-accent:#8076cb;--av-academic-ink:#554aa9;--av-academic-tint:#efedfa}
.lesson.av-academic-diff-credit{--av-academic-accent:#e09b27;--av-academic-ink:#935d08;--av-academic-tint:#fff0d4}
.lesson.av-academic-exam{--av-academic-accent:#db4766;--av-academic-ink:#a32245;--av-academic-tint:#ffe5ed}
.lesson[class*="av-academic-"]{border-left-color:var(--av-academic-accent)!important;background:linear-gradient(90deg,var(--av-academic-tint),var(--panel-2))}
.lesson[class*="av-academic-"] .av-academic-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:8px;background:var(--av-academic-accent);color:white;font-weight:800;font-size:11px}
.lesson[class*="av-academic-"] .av-academic-badge svg{width:14px;height:14px}
html[data-theme="dark"] .lesson[class*="av-academic-"]{background:linear-gradient(90deg,color-mix(in srgb,var(--av-academic-accent) 19%,var(--panel-2)),var(--panel-2))!important;border-left-color:var(--av-academic-accent)!important}