:root {
  font-family:
    "Montserrat",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #153354;
  font-synthesis: none;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
}
.login-page {
  background: #e8f2f8;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.shell {
  width: min(1250px, 100%);
  min-height: min(790px, calc(100vh - 48px));
  background: white;
  border-radius: 22px;
  box-shadow: 0 18px 70px #0a345219;
  display: grid;
  grid-template-columns: 51% 49%;
  overflow: hidden;
}
.login-panel {
  padding: 38px clamp(34px, 7vw, 108px) 26px;
  display: flex;
  flex-direction: column;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 68px;
}
.school-mark {
  width: 59px;
  height: 65px;
  object-fit: contain;
}
.brand-type {
  display: flex;
  flex-direction: column;
  line-height: 1.02;
  color: #0e3255;
  letter-spacing: 0.13em;
}
.brand-type span {
  font-size: 10px;
  font-weight: 800;
}
.brand-type strong {
  font-size: 19px;
  letter-spacing: 0.14em;
  font-weight: 900;
  margin-top: 3px;
}
.brand-type small {
  font-size: 10px;
  letter-spacing: 0.16em;
  margin-top: 5px;
  color: #a77c39;
  text-transform: uppercase;
}
.login-content {
  max-width: 400px;
  margin: auto 0;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 850;
  color: #d1953c;
  display: flex;
  align-items: center;
  gap: 9px;
}
.eyebrow-line {
  width: 17px;
  height: 2px;
  background: #d1953c;
}
.login-content h1 {
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(32px, 3.15vw, 45px);
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: #123858;
  margin: 13px 0 11px;
  font-weight: 600;
}
.login-content h1 em,
.visual-heading h2 em {
  color: #df9f44;
  font-weight: normal;
}
.intro {
  color: #72849a;
  line-height: 1.6;
  font-size: 13px;
  margin: 0 0 32px;
}
.form-heading h2 {
  font-size: 20px;
  letter-spacing: -0.035em;
  margin: 0 0 4px;
}
.form-heading span {
  font-size: 12px;
  color: #7a8ca0;
}
.form-heading {
  margin-bottom: 23px;
}
form label {
  display: block;
  font-size: 11px;
  font-weight: 750;
  margin-bottom: 8px;
  color: #294464;
}
.field {
  height: 47px;
  border: 1px solid #dce8f0;
  border-radius: 8px;
  background: #f8fbfd;
  display: flex;
  align-items: center;
  padding: 0 13px;
  gap: 11px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.field:focus-within {
  border-color: #668cba;
  box-shadow: 0 0 0 3px #e1eef8;
}
.field svg {
  width: 16px;
  height: 16px;
  stroke: #889fba;
  fill: none;
  stroke-width: 1.8;
  flex: none;
}
.field input {
  background: transparent;
  border: 0;
  outline: 0;
  width: 100%;
  min-width: 0;
  font-size: 12px;
  color: #153354;
}
.field input::placeholder {
  color: #a2b0c0;
}
.password-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 17px;
}
.password-label button {
  border: 0;
  background: none;
  color: #a77b3f;
  font-size: 11px;
  padding: 0 0 8px;
}
.toggle {
  border: 0;
  background: none;
  color: #7893ae;
  font-size: 10px;
}
.primary-button {
  background: #133b62;
  color: white;
  border: 0;
  border-radius: 8px;
  width: 100%;
  height: 47px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 750;
  margin-top: 20px;
  box-shadow: 0 7px 14px #193d6426;
}
.primary-button:hover {
  background: #0b2d50;
}
.primary-button:disabled {
  opacity: 0.65;
}
.primary-button span {
  font-size: 20px;
  line-height: 0;
}
.divider {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 20px 0;
  color: #9babba;
  font-size: 10px;
}
.divider:before,
.divider:after {
  content: "";
  height: 1px;
  background: #e6edf2;
  flex: 1;
}
.google-button {
  height: 47px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid #dce8f0;
  border-radius: 8px;
  color: #28415a;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;
  background: #fff;
}
.google-button:hover {
  background: #f6fafc;
}
.google-button svg {
  width: 17px;
  height: 17px;
}
.audience {
  text-align: center;
  color: #99a7b4;
  font-size: 10px;
  margin: 11px 0 0;
}
.login-footer {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 10px;
  color: #8d9fb0;
  margin-top: 28px;
}
.login-footer img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  margin-left: 2px;
}
.login-footer strong {
  font-size: 10px;
  color: #173b64;
}
.visual-panel {
  background: #eef7fc;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 55px 28px 40px;
}
.visual-panel:before {
  content: "";
  position: absolute;
  width: 800px;
  height: 800px;
  border: 1px solid #ffffff99;
  border-radius: 50%;
  left: -135px;
  bottom: -420px;
}
.visual-panel:after {
  content: "";
  position: absolute;
  width: 570px;
  height: 570px;
  border: 1px solid #ffffffad;
  border-radius: 50%;
  left: -16px;
  bottom: -292px;
}
.visual-halo {
  position: absolute;
  width: 390px;
  height: 390px;
  border-radius: 50%;
  background: #e1f1fa;
  top: 27%;
  left: 50%;
  transform: translateX(-50%);
}
.visual-heading {
  position: relative;
  text-align: center;
  z-index: 1;
  margin-top: 5px;
}
.visual-heading > span {
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 800;
  color: #cb974d;
}
.visual-heading h2 {
  font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1.14;
  margin: 13px 0 9px;
  color: #173f64;
}
.visual-heading p {
  font-size: 12px;
  color: #718ca4;
  margin: 0;
}
.hero-art {
  position: relative;
  z-index: 1;
  width: min(100%, 540px);
  max-height: 410px;
  object-fit: contain;
  margin-top: 18px;
  filter: drop-shadow(0 16px 15px #346b8c18);
}
.visual-caption {
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  border-radius: 50px;
  background: #ffffffd9;
  padding: 9px 17px;
  color: #56738e;
  font-size: 11px;
  box-shadow: 0 5px 18px #4487aa16;
}
.caption-icon {
  color: #e5a349;
  font-size: 17px;
}
.star {
  position: absolute;
  z-index: 1;
  color: #e4a34f;
  font-size: 22px;
}
.star-one {
  left: 13%;
  top: 26%;
}
.star-two {
  right: 13%;
  top: 30%;
  font-size: 18px;
  color: #78bdba;
}
.star-three {
  right: 20%;
  bottom: 22%;
  color: #f5bb73;
}
.star-four {
  left: 16%;
  bottom: 28%;
  color: #8dc2bb;
}
.notice {
  padding: 10px 12px;
  background: #fff1e9;
  color: #a84d28;
  border-radius: 7px;
  font-size: 12px;
  margin: -8px 0 14px;
}
.notice[hidden] {
  display: none;
}
.app-page {
  background: #f0f7fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.app-header {
  height: 75px;
  background: white;
  border-bottom: 1px solid #dfebf1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 max(25px, calc((100vw - 1100px) / 2));
  position: relative;
  z-index: 20;
}
.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-brand img {
  width: 45px;
  height: 45px;
  object-fit: contain;
}
.profile-area {
  position: relative;
}
.profile-trigger {
  border: 1px solid transparent;
  background: transparent;
  color: #173f64;
  min-height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 9px 5px 6px;
  transition:
    background 0.2s,
    border-color 0.2s;
}
.profile-trigger:hover,
.profile-trigger[aria-expanded="true"] {
  background: #f3f8fb;
  border-color: #dbe8f0;
}
.profile-avatar-wrap {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: none;
  background: linear-gradient(145deg, #255782, #6aa8ba);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #dbe8f0;
}
.profile-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-initials {
  color: #fff;
  font-weight: 800;
  font-size: 13px;
}
.profile-short-name {
  font-size: 12px;
  font-weight: 700;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-chevron {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.2s;
}
.profile-trigger[aria-expanded="true"] .profile-chevron {
  transform: rotate(180deg);
}
.profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(320px, calc(100vw - 30px));
  padding: 10px;
  background: #fff;
  border: 1px solid #dce8ef;
  border-radius: 16px;
  box-shadow: 0 20px 55px #173c5c24;
}
.profile-menu[hidden] {
  display: none;
}
.profile-summary {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 10px 9px 16px;
}
.profile-avatar-large {
  width: 48px;
  height: 48px;
}
.profile-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.profile-copy strong,
.profile-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-copy strong {
  color: #173f64;
  font-size: 13px;
}
.profile-copy span {
  color: #7890a4;
  font-size: 11px;
}
.profile-actions {
  border-top: 1px solid #e7eef2;
  padding-top: 8px;
}
.profile-menu-item {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #294966;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
  text-align: left;
}
.profile-menu-item:hover {
  background: #f1f7fa;
}
.profile-menu-item svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  flex: none;
}
.profile-menu-item > span:last-child {
  margin-left: auto;
}
.profile-logout {
  color: #ae4c48;
}
.app-main {
  width: min(850px, calc(100% - 40px));
  margin: 90px auto;
  flex: 1;
}
.app-main h1 {
  font-family: Georgia, serif;
  font-size: 48px;
  color: #173f64;
  margin: 12px 0;
}
.app-main > p {
  color: #70879c;
}
.preview-card {
  background: white;
  border: 1px solid #dbe8f0;
  border-radius: 18px;
  padding: 28px;
  display: flex;
  gap: 18px;
  box-shadow: 0 15px 40px #123d5b0c;
  margin-top: 30px;
}
.preview-icon {
  background: #fff1d9;
  color: #ca8b37;
  width: 45px;
  height: 45px;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 12px;
  font-size: 24px;
}
.preview-card p {
  color: #70879c;
  font-size: 14px;
  line-height: 1.6;
}
.account {
  font-size: 12px;
  color: #8193a6;
  margin-top: 20px;
}
.app-footer {
  min-height: 62px;
  border-top: 1px solid #dce8ef;
  background: #fff;
  color: #8193a6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 20px;
  font-size: 11px;
}
.app-footer img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.app-footer strong {
  color: #173f64;
  font-size: 11px;
}
@media (max-width: 850px) {
  .shell {
    grid-template-columns: 1fr;
    max-width: 620px;
  }
  .visual-panel {
    min-height: 340px;
    order: -1;
    padding: 30px;
  }
  .visual-heading h2 {
    font-size: 35px;
    margin: 6px 0;
  }
  .hero-art {
    max-height: 190px;
    margin: 2px;
  }
  .visual-caption {
    display: none;
  }
  .login-panel {
    padding: 30px 11%;
  }
  .login-content {
    max-width: none;
    margin: 35px 0;
  }
  .visual-halo {
    top: 10%;
    height: 300px;
    width: 300px;
  }
  .login-footer {
    justify-content: center;
  }
}
@media (max-width: 520px) {
  .login-page {
    padding: 0;
    background: white;
  }
  .shell {
    border-radius: 0;
    min-height: 100vh;
    box-shadow: none;
  }
  .visual-panel {
    min-height: 235px;
    padding: 20px;
  }
  .visual-heading > span {
    font-size: 8px;
  }
  .visual-heading h2 {
    font-size: 27px;
  }
  .visual-heading p {
    font-size: 10px;
  }
  .hero-art {
    max-height: 105px;
  }
  .login-panel {
    padding: 21px 25px 23px;
  }
  .brand {
    position: absolute;
    top: 18px;
    left: 20px;
    z-index: 2;
    background: #ffffffdc;
    padding: 3px 8px;
    border-radius: 10px;
    min-height: 44px;
  }
  .school-mark {
    width: 35px;
    height: 42px;
  }
  .brand-type strong {
    font-size: 12px;
  }
  .brand-type span,
  .brand-type small {
    font-size: 7px;
  }
  .login-content {
    margin: 25px 0 4px;
  }
  .login-content h1 {
    font-size: 31px;
  }
  .intro {
    margin-bottom: 24px;
  }
  .login-footer {
    margin-top: 26px;
  }
  .app-main {
    margin: 55px auto;
  }
  .app-main h1 {
    font-size: 38px;
  }
  .app-header {
    padding: 0 15px;
  }
  .app-brand strong {
    display: none;
  }
  .profile-short-name {
    display: none;
  }
  .profile-trigger {
    gap: 5px;
    padding-right: 6px;
  }
  .profile-menu {
    right: -2px;
  }
}

/* Painel do desenvolvedor */
.app-page { background:#f4f8fb; color:#173b5d; }
.app-header { position:sticky; top:0; height:72px; padding:0 28px; box-shadow:0 2px 14px #123b5d0a; }
.app-brand div { display:flex; flex-direction:column; gap:2px; }
.app-brand div strong { font-size:14px; }
.app-brand div span { color:#8a9bab; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }
.profile-identity { display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.profile-identity strong { font-size:12px; }.profile-identity small { font-size:9px; color:#a47b3d; }
.mobile-menu-button { display:none; border:0; background:transparent; color:#173b5d; font-size:22px; padding:5px; }
.app-layout { display:grid; grid-template-columns:250px minmax(0,1fr); flex:1; width:100%; }
.material-symbols-rounded { font-family:"Material Symbols Rounded"; font-weight:normal; font-style:normal; font-size:20px; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-feature-settings:"liga"; -webkit-font-smoothing:antialiased; font-feature-settings:"liga"; }
.sidebar { background:#fff; color:#173f64; border-right:1px solid #dfe9ef; padding:24px 15px; display:flex; flex-direction:column; min-height:calc(100vh - 134px); box-shadow:4px 0 20px #173f6405; }
.developer-badge { display:flex; align-items:center; gap:11px; padding:0 10px 22px; border-bottom:1px solid #e7eef2; }
.developer-badge>span { width:38px; height:38px; border-radius:11px; background:linear-gradient(145deg,#173f64,#497b9f); color:#fff; display:grid; place-items:center; font-weight:800; font-size:12px; box-shadow:0 5px 13px #173f6425; }
.developer-badge div { display:flex; flex-direction:column; gap:3px; }.developer-badge strong { color:#173f64; font-size:12px; }.developer-badge small { color:#8b9dab; font-size:8px; }
.sidebar-nav { display:flex; flex-direction:column; gap:5px; margin-top:22px; }
.nav-section { color:#a2b0ba; font-size:7px; font-weight:800; letter-spacing:.13em; padding:0 13px 6px; }.nav-section-space { margin-top:14px; }
.nav-item { color:#647c8e; text-decoration:none; display:flex; align-items:center; gap:12px; min-height:44px; padding:0 13px; border-radius:10px; font-size:10px; font-weight:650; transition:background .2s,color .2s,transform .2s; }
.nav-item>.material-symbols-rounded { width:21px; text-align:center; font-size:19px; color:#8da0ae; transition:color .2s; }.nav-item:hover { background:#f3f7f9; color:#234c6d; transform:translateX(2px); }.nav-item.active { background:#eaf2f7; color:#173f64; box-shadow:inset 3px 0 #d99c45; }.nav-item.active>.material-symbols-rounded { color:#c4842f; font-variation-settings:"FILL" 1; }
.sidebar-note { margin-top:auto; padding:14px; background:#f5f8fa; border:1px solid #e1e9ee; border-radius:11px; display:flex; flex-direction:row; align-items:flex-start; gap:9px; }.sidebar-note>.material-symbols-rounded { color:#4f846f; font-size:18px; flex:none; }.sidebar-note div { display:flex; flex-direction:column; gap:5px; }
.sidebar-note strong { color:#36586f; font-size:9px; }.sidebar-note div span { color:#899aa7; font-size:8px; line-height:1.5; }
.sidebar-overlay { display:none; }
.workspace { width:min(1280px,100%); padding:30px clamp(22px,4vw,55px) 55px; overflow:hidden; }
.breadcrumb { color:#879aaa; font-size:10px; margin-bottom:24px; }.breadcrumb span { color:#c5d0d7; margin:0 7px; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:22px; margin-bottom:26px; }
.page-heading h1 { margin:7px 0 7px; font-size:30px; letter-spacing:-.04em; }.page-heading p { color:#788d9f; font-size:12px; margin:0; }
.primary-action,.outline-action,.secondary-action { min-height:42px; border-radius:9px; padding:0 17px; border:0; font-size:11px; font-weight:700; }
.primary-action { color:#fff; background:#173f64; box-shadow:0 6px 16px #173f6426; }.primary-action:hover { background:#0f3150; }.primary-action:disabled { opacity:.6; }
.outline-action { color:#173f64; background:#fff; border:1px solid #d9e5ec; }.secondary-action { background:#edf3f6; color:#49647b; }
.stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; }
.stats-grid article { background:#fff; border:1px solid #e0e9ef; border-radius:13px; min-height:86px; padding:17px; display:flex; align-items:center; gap:13px; }
.stats-grid article div { display:flex; flex-direction:column; gap:3px; }.stats-grid strong { font-size:22px; }.stats-grid small { color:#8093a3; font-size:9px; }
.stat-icon { width:41px; height:41px; border-radius:11px; display:grid; place-items:center; font-size:14px; }.stat-icon.blue { color:#315f8c; background:#e7f0f6; }.stat-icon.gold { color:#b47b2c; background:#fff1db; }.stat-icon.teal { color:#438b88; background:#e3f3f1; }.stat-icon.purple { color:#745d9a; background:#eee9f7; }
.management-card { background:#fff; border:1px solid #dfe9ef; border-radius:15px; overflow:hidden; box-shadow:0 10px 30px #153c5a08; }
.tabs { display:flex; gap:4px; padding:0 22px; border-bottom:1px solid #e5edf2; overflow-x:auto; }
.tab { flex:none; min-height:57px; padding:0 13px; border:0; border-bottom:2px solid transparent; background:transparent; color:#7b8e9e; font-size:11px; font-weight:650; }
.tab span { background:#edf3f6; color:#6b8193; border-radius:50px; padding:2px 7px; margin-left:5px; font-size:9px; }.tab.active { color:#173f64; border-bottom-color:#d99c45; }.tab.active span { background:#fff0d9; color:#af7427; }
.tab-panel { padding:25px 24px 28px; }.section-toolbar { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:23px; }
.section-toolbar h2,.coming-panel h2 { font-size:15px; margin:0 0 6px; }.section-toolbar p,.coming-panel p { color:#8497a7; font-size:10px; margin:0; }
.toolbar-actions { display:flex; gap:9px; }.search-box { min-width:210px; height:41px; border:1px solid #dce7ed; border-radius:9px; display:flex; align-items:center; gap:8px; padding:0 12px; color:#8397a7; }
.search-box input { min-width:0; width:100%; border:0; outline:0; background:transparent; color:#254761; font-size:10px; }
.department-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.department-card { min-width:0; border:1px solid #dfe9ee; border-radius:12px; padding:17px; transition:.2s; }.department-card:hover { transform:translateY(-2px); box-shadow:0 10px 25px #153c5a0e; }.department-card.inactive { opacity:.68; }
.department-card-head { display:flex; justify-content:space-between; align-items:center; }.department-symbol { width:39px; height:39px; display:grid; place-items:center; border-radius:10px; color:var(--department-color); background:color-mix(in srgb,var(--department-color) 12%,white); font-size:10px; font-weight:800; }
.status { border-radius:50px; padding:4px 8px; background:#eef1f3; color:#82909b; font-size:8px; font-weight:700; }.status.active { background:#e7f4ef; color:#3d8469; }
.department-card h3 { font-size:13px; margin:15px 0 7px; }.department-card>p { height:32px; overflow:hidden; color:#8495a3; font-size:9px; line-height:1.65; margin:0 0 15px; }
.manager { display:flex; align-items:center; gap:8px; padding:10px 0; border-top:1px solid #edf2f5; }.manager>span { width:28px; height:28px; border-radius:50%; background:#edf3f6; display:grid; place-items:center; color:#607f96; }.manager div { display:flex; flex-direction:column; gap:2px; min-width:0; }.manager small { color:#94a3ae; font-size:7px; }.manager strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.department-card-actions { display:flex; gap:7px; }.department-card-actions button { flex:1; height:32px; border:1px solid #e0e8ed; border-radius:7px; background:#fff; color:#4f6c82; font-size:9px; font-weight:650; }.department-card-actions button:hover { background:#f3f7f9; }
.empty-state,.coming-panel { text-align:center; padding:55px 25px; }.empty-state>span,.coming-panel>span { width:52px; height:52px; margin:auto; border-radius:15px; display:grid; place-items:center; background:#eaf2f6; color:#315f8c; }.empty-state h3 { font-size:14px; margin:15px 0 6px; }.empty-state p { color:#8496a5; font-size:10px; margin:0 0 18px; }.no-results { grid-column:1/-1; text-align:center; color:#8496a5; font-size:11px; padding:35px; }
.protected-role { max-width:490px; margin:22px auto 0; padding:15px; border:1px solid #e1e8ed; border-radius:10px; display:flex; flex-direction:column; gap:5px; text-align:left; }.protected-role strong { font-size:10px; color:#b37a2b; }.protected-role span { color:#7f919f; font-size:9px; }
.department-dialog { width:min(580px,calc(100% - 28px)); border:0; border-radius:16px; padding:0; box-shadow:0 25px 80px #0d2e4650; }.department-dialog::backdrop { background:#0c2d4470; backdrop-filter:blur(2px); }
.department-dialog form { padding:25px; }.modal-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; }.modal-header h2 { font-size:20px; margin:7px 0 0; }.icon-button { border:0; background:#edf3f6; color:#5d7487; width:34px; height:34px; border-radius:9px; font-size:21px; }
.department-dialog label { display:flex; flex-direction:column; gap:7px; color:#294762; font-size:10px; font-weight:700; margin-bottom:16px; }.department-dialog input:not([type=checkbox]):not([type=color]),.department-dialog textarea,.color-field { width:100%; border:1px solid #dce7ed; border-radius:9px; background:#f9fbfc; padding:11px 12px; outline:0; color:#23445e; font-size:11px; resize:vertical; }.department-dialog input:focus,.department-dialog textarea:focus { border-color:#6f94ae; box-shadow:0 0 0 3px #e8f1f6; }
.form-row { display:grid; grid-template-columns:1fr 180px; gap:13px; }.color-field { height:42px; display:flex; align-items:center; gap:10px; padding:6px 10px; }.color-field input { width:30px; height:27px; border:0; padding:0; background:transparent; }.color-field span { font-size:10px; color:#6e8292; }
.switch-row { flex-direction:row!important; align-items:center; border:1px solid #e1e9ee; border-radius:10px; padding:12px; }.switch-row input { display:none; }.switch-row>span { width:37px; height:21px; border-radius:20px; background:#c9d3da; position:relative; flex:none; }.switch-row>span:after { content:""; width:15px; height:15px; border-radius:50%; background:#fff; position:absolute; top:3px; left:3px; transition:.2s; }.switch-row input:checked+span { background:#428675; }.switch-row input:checked+span:after { transform:translateX(16px); }.switch-row div { display:flex; flex-direction:column; gap:3px; }.switch-row small { color:#8697a4; font-size:8px; font-weight:400; }
.modal-actions { display:flex; justify-content:flex-end; gap:9px; padding-top:7px; }.form-error { color:#a8473f; background:#fff0ee; padding:9px; border-radius:8px; font-size:10px; }.toast { position:fixed; right:25px; bottom:25px; z-index:100; background:#173f64; color:#fff; border-radius:10px; padding:13px 17px; box-shadow:0 12px 35px #123c5c35; font-size:10px; }

@media(max-width:1050px){.stats-grid{grid-template-columns:repeat(2,1fr)}.department-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.app-layout{grid-template-columns:1fr}.mobile-menu-button{display:block}.sidebar{position:fixed; z-index:45; left:0; top:72px; bottom:0; width:260px; transform:translateX(-100%); transition:.25s; min-height:0}.sidebar-open .sidebar{transform:none}.sidebar-overlay{position:fixed; z-index:40; inset:72px 0 0; border:0; background:#0b2b4166}.sidebar-open .sidebar-overlay{display:block}.workspace{padding:24px 17px 40px}.page-heading{align-items:flex-start;flex-direction:column}.section-toolbar{align-items:flex-start;flex-direction:column}.toolbar-actions{width:100%}.search-box{flex:1}.department-grid{grid-template-columns:1fr}.app-brand div{display:none}.profile-identity{display:none}.form-row{grid-template-columns:1fr}.app-footer{position:relative}.stats-grid{gap:9px}.stats-grid article{padding:13px}.tabs{padding:0 10px}}
@media(max-width:430px){.stats-grid{grid-template-columns:1fr 1fr}.stats-grid article{min-height:74px}.stat-icon{width:34px;height:34px}.stats-grid strong{font-size:18px}.toolbar-actions{flex-direction:column}.search-box{min-width:100%;width:100%}.tab-panel{padding:20px 15px}.page-heading .primary-action{width:100%}.department-dialog form{padding:20px}.modal-actions button{flex:1}}