/* Sistema visual refinado — carregado depois dos estilos de cada hub. */
.prototype-body {
  --ui-depth-1: 3px 3px 0 var(--ink);
  --ui-depth-2: 4px 4px 0 var(--ink);
  --ui-depth-3: 6px 6px 0 var(--ink);
  --ui-radius-card: 10px;
  --ui-label: 9.5px;
  --ui-caption: 10px;
  --ui-control: 42px;
  --line: 2px solid var(--ink);
}

/* =========================================================
   SIMULADOS — registro, modelos e histórico
   ========================================================= */

[data-screen="simulados"] {
  --sim-soft: #f0eee8;
  --sim-line: #c9c5ba;
  --sim-yellow: #f5ca3d;
}

.sim-page-heading {
  align-items: flex-end;
}

.sim-page-heading > div:last-child {
  display: flex;
  gap: 9px;
}

.sim-mode-tabs,
.sim-summary-strip,
.sim-register-card,
.sim-models-card,
.sim-history-toolbar,
.sim-history-list,
.sim-history-detail {
  border: 2px solid var(--ink, #181818);
  box-shadow: 6px 6px 0 var(--ink, #181818);
}

.sim-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 24px;
  padding: 8px;
  gap: 8px;
  background: var(--sim-soft);
}

.sim-mode-tabs > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 66px;
  border: 1.5px solid transparent;
  border-radius: 5px;
  padding: 10px 13px;
  background: transparent;
  color: var(--ink, #181818);
  font: inherit;
  text-align: left;
}

.sim-mode-tabs > button > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  background: #faf8f2;
  font-size: 9px;
  font-weight: 900;
}

.sim-mode-tabs > button strong,
.sim-mode-tabs > button small {
  display: block;
}

.sim-mode-tabs > button strong {
  font-size: 11px;
}

.sim-mode-tabs > button small {
  margin-top: 3px;
  color: #68645c;
  font-size: 8px;
}

.sim-mode-tabs > button.is-active {
  border-color: var(--ink, #181818);
  background: var(--sim-yellow);
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.sim-mode-tabs > button.is-active > span {
  background: #fffdf8;
}

.sim-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 30px;
  overflow: hidden;
}

.sim-summary-strip > div {
  display: flex;
  min-height: 104px;
  flex-direction: column;
  justify-content: center;
  padding: 19px 24px;
  border-right: 1px solid var(--sim-line);
}

.sim-summary-strip > div:last-child {
  border-right: 0;
}

.sim-summary-strip span,
.sim-section-heading > span {
  color: #625f57;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.sim-summary-strip strong {
  margin: 5px 0 3px;
  font-size: 24px;
  line-height: 1;
}

.sim-summary-strip small {
  color: #68645c;
  font-size: 8px;
}

.sim-register-section,
.sim-history-section {
  margin-bottom: 30px;
}

.sim-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.sim-section-heading h2 {
  margin: 3px 0 0;
  font-size: 23px;
}

.sim-register-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .75fr);
  gap: 22px;
  align-items: start;
}

.sim-register-card,
.sim-models-card,
.sim-history-detail {
  overflow: hidden;
}

.sim-register-fields {
  display: grid;
  grid-template-columns: 1.5fr .72fr .58fr .72fr 1.1fr;
  gap: 12px;
  padding: 22px 24px;
  border-bottom: 1.5px solid var(--ink, #181818);
  background: var(--sim-soft);
}

.sim-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.sim-field > span,
.sim-model-create > div > span {
  color: var(--ink, #181818);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sim-field input,
.sim-field select,
.sim-field textarea,
.sim-input-suffix {
  box-sizing: border-box;
  width: 100%;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 10px;
  font-weight: 720;
}

.sim-field input,
.sim-field select,
.sim-input-suffix {
  height: 43px;
}

.sim-field input,
.sim-field select,
.sim-field textarea {
  padding: 0 11px;
}

.sim-field textarea {
  min-height: 76px;
  padding-top: 11px;
  resize: none;
}

.sim-input-suffix {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.sim-input-suffix input {
  min-width: 0;
  border: 0;
  background: transparent;
}

.sim-input-suffix b {
  align-self: stretch;
  display: grid;
  min-width: 36px;
  place-items: center;
  border-left: 1px solid var(--ink, #181818);
  background: #e7e3d9;
  font-size: 8px;
}

.sim-subject-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 13px;
}

.sim-subject-heading h3,
.sim-models-heading h3 {
  margin: 3px 0 0;
  font-size: 18px;
}

.sim-subject-table {
  padding: 0 24px;
}

.sim-subject-table > div {
  display: grid;
  grid-template-columns: minmax(130px, 1.1fr) 72px 72px minmax(150px, 1fr) 30px;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  border-bottom: 1px solid var(--sim-line);
}

.sim-subject-table .sim-table-head {
  min-height: 34px;
  color: #625f57;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.sim-subject-table > div > strong {
  font-size: 10px;
}

.sim-subject-table input {
  box-sizing: border-box;
  width: 100%;
  height: 34px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  background: #faf8f2;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  text-align: center;
}

.sim-subject-table > div > span {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.sim-subject-table > div > span b {
  font-size: 9px;
}

.sim-subject-table > div > span i,
.sim-history-list i,
.sim-history-subjects i {
  display: block;
  height: 6px;
  border: 1px solid var(--ink, #181818);
  background: #e6e2d8;
}

.sim-subject-table > div > span i em,
.sim-history-list i em,
.sim-history-subjects i b {
  display: block;
  height: 100%;
  background: var(--sim-yellow);
}

.sim-subject-table > div > button {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  background: #ebe7df;
  font: inherit;
  font-size: 15px;
}

.sim-subject-table .sim-table-total {
  min-height: 48px;
  background: var(--sim-soft);
}

.sim-table-total > b,
.sim-table-total > span {
  font-size: 11px;
  font-weight: 900;
}

.sim-optional-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 18px 24px;
  border: 1px solid var(--sim-line);
  border-radius: 5px;
  padding: 15px 16px;
  background: var(--sim-soft);
}

.sim-optional-block span {
  display: block;
  margin-top: 4px;
  color: #68645c;
  font-size: 8px;
}

.sim-observation-field {
  margin: 0 24px 20px;
}

.sim-register-footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 17px 24px;
  border-top: 1.5px solid var(--ink, #181818);
  background: var(--sim-soft);
}

.sim-models-card {
  position: sticky;
  top: 18px;
}

.sim-models-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 21px 20px;
  border-bottom: 1.5px solid var(--ink, #181818);
  background: var(--sim-soft);
}

.sim-models-heading > button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  background: var(--sim-yellow);
  box-shadow: 3px 3px 0 var(--ink, #181818);
  font: inherit;
  font-size: 18px;
  font-weight: 800;
}

.sim-model-list {
  padding: 10px;
}

.sim-model-list > button {
  display: grid;
  width: 100%;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  border: 1.5px solid transparent;
  border-bottom-color: var(--sim-line);
  padding: 9px;
  background: transparent;
  color: var(--ink, #181818);
  font: inherit;
  text-align: left;
}

.sim-model-list > button > span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  background: #faf8f2;
  font-size: 8px;
  font-weight: 900;
}

.sim-model-list strong,
.sim-model-list small {
  display: block;
}

.sim-model-list strong {
  font-size: 9px;
}

.sim-model-list small {
  margin-top: 3px;
  color: #68645c;
  font-size: 7.5px;
}

.sim-model-list > button > b {
  font-size: 8px;
}

.sim-model-list > button.is-selected {
  border-color: var(--ink, #181818);
  border-radius: 5px;
  background: #fff7d9;
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.sim-model-list > button.is-selected > span {
  background: var(--sim-yellow);
}

.sim-model-create {
  margin: 9px 18px 18px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 6px;
  padding: 16px;
  background: var(--sim-soft);
}

.sim-model-create .sim-field {
  margin-top: 13px;
}

.sim-model-create > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 13px;
}

.sim-model-create > div button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 8px;
  font-weight: 900;
  text-decoration: underline;
}

.sim-model-create > .dark-action {
  width: 100%;
  margin-top: 18px;
}

.sim-models-card > footer {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 20px;
  border-top: 1px solid var(--sim-line);
  color: #625f57;
  font-size: 8px;
}

.sim-models-card > footer strong {
  margin-bottom: 3px;
  color: var(--ink, #181818);
  font-size: 9px;
}

.sim-history-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .8fr) minmax(150px, .8fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 20px;
  padding: 17px 20px;
}

.sim-history-toolbar label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.sim-history-toolbar label span {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.sim-history-toolbar input,
.sim-history-toolbar select {
  box-sizing: border-box;
  width: 100%;
  height: 41px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 11px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}

.sim-history-workspace {
  display: grid;
  grid-template-columns: minmax(290px, .75fr) minmax(0, 1.7fr);
  gap: 22px;
  align-items: start;
}

.sim-history-list {
  padding: 10px;
}

.sim-history-list > button {
  display: grid;
  width: 100%;
  grid-template-columns: 44px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  border: 1.5px solid transparent;
  border-bottom-color: var(--sim-line);
  padding: 10px;
  background: transparent;
  color: var(--ink, #181818);
  font: inherit;
  text-align: left;
}

.sim-history-list > button.is-selected {
  border-color: var(--ink, #181818);
  border-radius: 5px;
  background: #fff7d9;
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.sim-history-date {
  display: flex;
  width: 40px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  background: #faf8f2;
}

.sim-history-date b {
  font-size: 14px;
  line-height: 1;
}

.sim-history-date small {
  margin-top: 3px;
  font-size: 7px;
  font-weight: 900;
}

.sim-history-list strong,
.sim-history-list small {
  display: block;
}

.sim-history-list strong {
  font-size: 9px;
}

.sim-history-list small {
  margin: 4px 0 8px;
  color: #68645c;
  font-size: 7.5px;
}

.sim-history-list > button > b {
  font-size: 13px;
  text-align: right;
}

.sim-history-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 23px 24px;
  border-bottom: 1.5px solid var(--ink, #181818);
  background: var(--sim-soft);
}

.sim-history-detail-heading h2 {
  margin: 4px 0 6px;
  font-size: 22px;
}

.sim-history-detail-heading > div:first-child > span {
  color: #625f57;
  font-size: 8px;
}

.sim-history-detail-heading > div:last-child {
  display: flex;
  gap: 8px;
}

.sim-history-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--sim-line);
}

.sim-history-metrics > div {
  display: flex;
  min-height: 88px;
  flex-direction: column;
  justify-content: center;
  padding: 17px 22px;
  border-right: 1px solid var(--sim-line);
}

.sim-history-metrics > div:last-child {
  border-right: 0;
}

.sim-history-metrics span {
  margin-bottom: 6px;
  color: #625f57;
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

.sim-history-metrics strong {
  font-size: 20px;
}

.sim-history-subjects {
  padding: 12px 24px;
}

.sim-history-subjects > div {
  display: grid;
  grid-template-columns: minmax(90px, .8fr) minmax(160px, 2fr) 70px 42px;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  border-bottom: 1px solid var(--sim-line);
  font-size: 9px;
}

.sim-history-subjects > div:last-child {
  border-bottom: 0;
}

.sim-history-subjects strong,
.sim-history-subjects em {
  text-align: right;
}

.sim-history-subjects em {
  font-style: normal;
  font-weight: 900;
}

.sim-history-note {
  margin: 8px 24px 22px;
  border: 1px solid var(--sim-line);
  border-radius: 5px;
  padding: 14px 15px;
  background: var(--sim-soft);
}

.sim-history-note span {
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.sim-history-note p {
  margin: 6px 0 0;
  color: #4f4c45;
  font-size: 9px;
}

@media (max-width: 1120px) {
  .sim-register-layout,
  .sim-history-workspace {
    grid-template-columns: 1fr;
  }

  .sim-models-card {
    position: static;
  }

  .sim-register-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sim-name-field {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .sim-page-heading {
    align-items: stretch;
  }

  .sim-page-heading > div:last-child {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sim-mode-tabs,
  .sim-summary-strip {
    grid-template-columns: 1fr;
  }

  .sim-mode-tabs > button {
    min-height: 60px;
  }

  .sim-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sim-summary-strip > div {
    min-height: 88px;
    padding: 15px 17px;
  }

  .sim-summary-strip > div:nth-child(2) {
    border-right: 0;
  }

  .sim-summary-strip > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--sim-line);
  }

  .sim-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .sim-register-fields,
  .sim-history-toolbar {
    grid-template-columns: 1fr;
  }

  .sim-register-fields,
  .sim-subject-heading,
  .sim-register-footer,
  .sim-history-detail-heading {
    padding-right: 20px;
    padding-left: 20px;
  }

  .sim-subject-heading,
  .sim-optional-block,
  .sim-history-detail-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .sim-subject-table {
    padding: 0 20px;
  }

  .sim-subject-table .sim-table-head {
    display: none;
  }

  .sim-subject-table > div {
    grid-template-columns: minmax(0, 1fr) 60px 60px 28px;
    min-height: 74px;
  }

  .sim-subject-table > div > span {
    grid-column: 1 / 4;
    grid-row: 2;
  }

  .sim-subject-table > div > button {
    grid-column: 4;
    grid-row: 1;
  }

  .sim-subject-table .sim-table-total {
    grid-template-columns: minmax(0, 1fr) 60px 60px 28px;
    min-height: 52px;
  }

  .sim-optional-block,
  .sim-observation-field {
    margin-right: 20px;
    margin-left: 20px;
  }

  .sim-register-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .sim-register-footer button,
  .sim-optional-block button {
    width: 100%;
  }

  .sim-history-toolbar {
    padding: 18px;
  }

  .sim-history-detail-heading > div:last-child {
    width: 100%;
  }

  .sim-history-detail-heading > div:last-child button {
    flex: 1;
  }

  .sim-history-metrics {
    grid-template-columns: 1fr;
  }

  .sim-history-metrics > div {
    min-height: 70px;
    border-right: 0;
    border-bottom: 1px solid var(--sim-line);
  }

  .sim-history-metrics > div:last-child {
    border-bottom: 0;
  }

  .sim-history-subjects {
    padding-right: 20px;
    padding-left: 20px;
  }

  .sim-history-subjects > div {
    grid-template-columns: minmax(74px, .7fr) minmax(80px, 1fr) 48px;
  }

  .sim-history-subjects > div > strong {
    display: none;
  }

  .sim-history-note {
    margin-right: 20px;
    margin-left: 20px;
  }
}

/* =========================================================
   RAIO X — recorte de prova e leitura de incidência
   ========================================================= */

[data-screen="raio-x"] {
  --xray-soft: #f0eee8;
  --xray-line: #c9c5ba;
  --xray-yellow: #f5ca3d;
}

.xray-page-heading {
  align-items: flex-end;
}

.xray-filter-panel,
.xray-scope-strip,
.xray-distribution-card,
.xray-incidence-card,
.xray-detail-card {
  border: 2px solid var(--ink, #181818);
  box-shadow: 6px 6px 0 var(--ink, #181818);
}

.xray-filter-panel {
  margin-bottom: 24px;
  overflow: hidden;
}

.xray-filter-heading,
.xray-card-heading,
.xray-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.xray-filter-heading {
  padding: 24px 26px 20px;
  border-bottom: 2px solid var(--ink, #181818);
  background: var(--xray-soft);
}

.xray-filter-heading h2,
.xray-card-heading h2,
.xray-detail-heading h2 {
  margin: 3px 0 0;
  font-size: 22px;
  line-height: 1.1;
}

.xray-group-note,
.xray-result-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 6px;
  padding: 10px 12px;
  background: #fffdf8;
  color: #34332f;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.xray-group-note i {
  width: 8px;
  height: 8px;
  border: 1.5px solid var(--ink, #181818);
  background: var(--xray-yellow);
}

.xray-primary-filters {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(540px, 2fr);
  gap: 16px;
  padding: 24px 26px 16px;
}

.xray-dependent-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 0 26px 24px;
}

.xray-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
}

.xray-field > span {
  color: var(--ink, #181818);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.xray-field select {
  width: 100%;
  height: 45px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 12px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 11px;
  font-weight: 750;
}

.xray-year-options {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.xray-year-options.is-disabled {
  opacity: .55;
}

.xray-year-options button:disabled,
.xray-field select:disabled {
  cursor: not-allowed;
  opacity: .58;
}

.xray-year-options button,
.xray-detail-tabs button {
  min-width: 56px;
  height: 45px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 10px;
  font-weight: 850;
}

.xray-year-options button.is-active,
.xray-detail-tabs button.is-active {
  background: var(--xray-yellow);
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.xray-filter-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 26px;
  border-top: 1.5px solid var(--ink, #181818);
  background: var(--xray-soft);
}

.xray-filter-footer p {
  margin: 0;
  color: #4e4b44;
  font-size: 10px;
}

.xray-filter-footer strong {
  color: var(--ink, #181818);
}

.xray-scope-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 24px;
  padding: 0;
  overflow: hidden;
}

.xray-scope-strip > div {
  display: flex;
  min-height: 94px;
  flex-direction: column;
  justify-content: center;
  padding: 20px 24px;
  border-right: 1px solid var(--xray-line);
}

.xray-scope-strip > div:last-child {
  border-right: 0;
}

.xray-scope-strip span {
  margin-bottom: 5px;
  color: #625f57;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.xray-scope-strip strong {
  font-size: 23px;
  line-height: 1.1;
}

.xray-analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 24px;
  margin-bottom: 24px;
}

.xray-distribution-card,
.xray-incidence-card {
  min-height: 486px;
  overflow: hidden;
}

.xray-card-heading {
  min-height: 104px;
  padding: 22px 24px;
  border-bottom: 1.5px solid var(--ink, #181818);
}

.xray-card-heading > div > span {
  display: block;
  margin-top: 7px;
  color: #68645c;
  font-size: 9px;
}

.xray-distribution-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  padding: 32px 26px;
}

.xray-donut {
  position: relative;
  display: grid;
  width: 190px;
  height: 190px;
  place-items: center;
  border: 2px solid var(--ink, #181818);
  border-radius: 50%;
  background: conic-gradient(
    var(--xray-yellow) 0 24%,
    #1d1d1d 24% 45%,
    #8c8981 45% 63%,
    #d0ccc1 63% 79%,
    #f6f3ec 79% 100%
  );
  box-shadow: 5px 5px 0 var(--ink, #181818);
}

.xray-donut::after {
  position: absolute;
  width: 112px;
  height: 112px;
  border: 2px solid var(--ink, #181818);
  border-radius: 50%;
  background: #fffdf8;
  content: "";
}

.xray-donut > div {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.xray-donut strong {
  font-size: 28px;
  line-height: 1;
}

.xray-donut span {
  margin-top: 5px;
  color: #625f57;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.xray-legend {
  min-width: 0;
}

.xray-legend > div {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  border-bottom: 1px solid var(--xray-line);
}

.xray-legend > div:last-child {
  border-bottom: 0;
}

.xray-legend i {
  width: 11px;
  height: 11px;
  border: 1px solid var(--ink, #181818);
}

.xray-legend .tone-1 { background: var(--xray-yellow); }
.xray-legend .tone-2 { background: #1d1d1d; }
.xray-legend .tone-3 { background: #8c8981; }
.xray-legend .tone-4 { background: #d0ccc1; }
.xray-legend .tone-5 { background: #f6f3ec; }

.xray-legend span {
  min-width: 0;
  font-size: 11px;
  font-weight: 780;
}

.xray-legend b {
  color: #716d65;
  font-size: 9px;
}

.xray-legend strong {
  min-width: 34px;
  font-size: 13px;
  text-align: right;
}

.xray-incidence-list {
  padding: 10px 24px 15px;
}

.xray-incidence-list > div {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 14px;
  min-height: 70px;
  border-bottom: 1px solid var(--xray-line);
}

.xray-incidence-list > div:last-child {
  border-bottom: 0;
}

.xray-rank {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  background: #faf8f2;
  font-size: 9px;
  font-weight: 900;
}

.xray-incidence-list > div:first-child .xray-rank {
  background: var(--xray-yellow);
}

.xray-incidence-list > div > div {
  min-width: 0;
}

.xray-incidence-list strong,
.xray-incidence-list small {
  display: block;
}

.xray-incidence-list strong {
  font-size: 11px;
}

.xray-incidence-list small {
  margin-top: 3px;
  color: #68645c;
  font-size: 8px;
}

.xray-incidence-list i {
  display: block;
  height: 5px;
  margin-top: 8px;
  border: 1px solid var(--ink, #181818);
  background: #e6e2d8;
}

.xray-incidence-list i b {
  display: block;
  height: 100%;
  background: var(--xray-yellow);
}

.xray-incidence-list em {
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.xray-detail-card {
  margin-bottom: 28px;
  overflow: hidden;
}

.xray-detail-heading {
  padding: 22px 24px;
  border-bottom: 1.5px solid var(--ink, #181818);
  background: var(--xray-soft);
}

.xray-detail-tabs {
  display: flex;
  gap: 7px;
}

.xray-detail-tabs button {
  min-width: 88px;
  height: 38px;
}

.xray-detail-table {
  padding: 0 24px;
}

.xray-detail-table > div {
  display: grid;
  grid-template-columns: 62px minmax(220px, 1.8fr) minmax(120px, 1fr) 90px 90px 118px;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  border-bottom: 1px solid var(--xray-line);
  font-size: 10px;
}

.xray-detail-table .xray-table-head {
  min-height: 42px;
  color: #625f57;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.xray-detail-table > div > span:first-child {
  font-weight: 900;
}

.xray-detail-table em {
  font-style: normal;
  font-weight: 900;
}

.xray-detail-table button {
  height: 34px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  background: #faf8f2;
  font: inherit;
  font-size: 9px;
  font-weight: 850;
}

.xray-detail-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
  background: var(--xray-soft);
  color: #5e5a53;
  font-size: 9px;
}

@media (max-width: 1050px) {
  .xray-primary-filters {
    grid-template-columns: 1fr;
  }

  .xray-dependent-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xray-analysis-grid {
    grid-template-columns: 1fr;
  }

  .xray-detail-table > div {
    grid-template-columns: 50px minmax(190px, 1.8fr) minmax(100px, 1fr) 70px 72px 105px;
  }
}

@media (max-width: 700px) {
  .xray-page-heading {
    align-items: stretch;
  }

  .xray-page-heading .outline-action {
    width: 100%;
  }

  .xray-filter-heading,
  .xray-card-heading,
  .xray-detail-heading,
  .xray-filter-footer,
  .xray-detail-card > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .xray-filter-heading,
  .xray-card-heading,
  .xray-detail-heading {
    padding: 20px;
  }

  .xray-group-note,
  .xray-result-tag {
    align-self: flex-start;
  }

  .xray-primary-filters,
  .xray-dependent-filters {
    grid-template-columns: 1fr;
    padding-right: 20px;
    padding-left: 20px;
  }

  .xray-primary-filters {
    padding-top: 20px;
  }

  .xray-dependent-filters {
    padding-bottom: 20px;
  }

  .xray-year-options {
    flex-wrap: wrap;
  }

  .xray-year-options button {
    flex: 1 0 58px;
  }

  .xray-filter-footer {
    padding: 18px 20px;
  }

  .xray-filter-footer .dark-action {
    width: 100%;
  }

  .xray-scope-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .xray-scope-strip > div {
    min-height: 86px;
    padding: 16px 18px;
  }

  .xray-scope-strip > div:nth-child(2) {
    border-right: 0;
  }

  .xray-scope-strip > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--xray-line);
  }

  .xray-scope-strip strong {
    font-size: 20px;
  }

  .xray-distribution-card,
  .xray-incidence-card {
    min-height: 0;
  }

  .xray-distribution-body {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 28px 20px 20px;
  }

  .xray-legend {
    width: 100%;
  }

  .xray-incidence-list {
    padding: 8px 20px 14px;
  }

  .xray-incidence-list > div {
    grid-template-columns: 34px minmax(0, 1fr) 47px;
    gap: 10px;
  }

  .xray-detail-tabs {
    overflow-x: auto;
  }

  .xray-detail-tabs button {
    flex: 1 0 86px;
  }

  .xray-detail-table {
    padding: 0;
  }

  .xray-detail-table .xray-table-head {
    display: none;
  }

  .xray-detail-table > div {
    position: relative;
    grid-template-columns: 34px minmax(0, 1fr) 62px;
    gap: 10px;
    min-height: 86px;
    padding: 14px 20px;
  }

  .xray-detail-table > div > span:nth-child(3),
  .xray-detail-table > div > b {
    grid-column: 2;
    color: #68645c;
    font-size: 8px;
  }

  .xray-detail-table > div > span:nth-child(3) {
    grid-row: 2;
  }

  .xray-detail-table > div > b {
    display: none;
  }

  .xray-detail-table > div > em {
    grid-column: 3;
    grid-row: 1;
    text-align: right;
  }

  .xray-detail-table > div > button {
    grid-column: 2 / 4;
    grid-row: 3;
  }

  .xray-detail-card > footer .outline-action {
    width: 100%;
  }
}

.screen:is(
  [data-screen="dashboard"],
  [data-screen="avisos"],
  [data-screen="banco"],
  [data-screen="desempenho"],
  [data-screen="erros"]
) .test-card {
  border-width: 2px;
  border-radius: var(--ui-radius-card);
}

.screen:is(
  [data-screen="dashboard"],
  [data-screen="avisos"],
  [data-screen="banco"],
  [data-screen="desempenho"],
  [data-screen="erros"]
) .eyebrow {
  font-size: var(--ui-label) !important;
  line-height: 1.2;
  letter-spacing: .13em;
}

.screen:is(
  [data-screen="dashboard"],
  [data-screen="avisos"],
  [data-screen="banco"],
  [data-screen="desempenho"],
  [data-screen="erros"]
) small {
  font-size: var(--ui-caption);
  line-height: 1.35;
}

.screen:is(
  [data-screen="avisos"],
  [data-screen="banco"],
  [data-screen="desempenho"],
  [data-screen="erros"]
) label > span,
.screen:is(
  [data-screen="avisos"],
  [data-screen="banco"],
  [data-screen="desempenho"],
  [data-screen="erros"]
) .performance-metric > span,
.screen:is(
  [data-screen="avisos"],
  [data-screen="banco"],
  [data-screen="desempenho"],
  [data-screen="erros"]
) .errors-metric > span,
.screen:is(
  [data-screen="avisos"],
  [data-screen="banco"],
  [data-screen="desempenho"],
  [data-screen="erros"]
) .bank-summary span,
.screen:is(
  [data-screen="avisos"],
  [data-screen="banco"],
  [data-screen="desempenho"],
  [data-screen="erros"]
) .notice-summary span {
  font-size: var(--ui-label);
}

.screen:is(
  [data-screen="avisos"],
  [data-screen="banco"],
  [data-screen="desempenho"],
  [data-screen="erros"]
) :is(input, select) {
  min-height: var(--ui-control);
  font-size: 10px;
}

.screen:is(
  [data-screen="dashboard"],
  [data-screen="avisos"],
  [data-screen="banco"],
  [data-screen="desempenho"],
  [data-screen="erros"]
) :is(.dark-action, .outline-action) {
  min-height: 41px;
  padding-inline: 14px;
  font-size: 10px;
}

/* Profundidade: controles, resumos e conteúdo principal. */
.performance-controls,
.errors-controls,
.bank-filter-panel,
.errors-filter-panel,
.performance-external-entry {
  box-shadow: var(--ui-depth-1);
}

.notice-summary,
.bank-summary,
.bank-progress,
.performance-metric,
.errors-metric,
.performance-goal-card,
.performance-summary-card,
.errors-distribution,
.errors-recurring {
  box-shadow: var(--ui-depth-2);
}

.notice-grid .notice-card,
.question-card.question-featured,
.performance-chart-card,
.performance-hit-error,
.performance-ranking-card,
.performance-subject-table,
.error-question-card {
  box-shadow: var(--ui-depth-3);
}

/* Sidebar. */
.prototype-nav .nav-section-heading {
  font-size: 9.5px;
}

.prototype-nav .nav-copy strong {
  font-size: 12px;
}

.prototype-nav .nav-copy small {
  color: #a09ea7;
  font-size: 9px;
}

.prototype-nav .nav-cluster .nav-link,
.prototype-nav .nav-cluster .nav-link[data-view] {
  min-height: 54px;
}

/* Controles temporais. */
.performance-controls,
.errors-controls {
  grid-template-columns: minmax(240px, .75fr) minmax(350px, 1.05fr) minmax(245px, .8fr);
  gap: 0;
}

.performance-controls > *,
.errors-controls > * {
  min-height: 50px;
  justify-content: center;
  padding-inline: 24px;
}

.performance-controls > :first-child,
.errors-controls > :first-child {
  padding-left: 0;
}

.performance-controls > :last-child,
.errors-controls > :last-child {
  padding-right: 0;
}

.performance-controls > * + *,
.errors-controls > * + * {
  border-left: 1px solid #c8c3b9;
}

.performance-date-nav,
.errors-date-nav {
  justify-content: flex-start;
}

/* Métricas e semântica do amarelo. */
.performance-metric.primary {
  min-height: 122px;
}

.performance-metric {
  min-height: 98px;
  padding: 18px 20px;
}

.performance-metric:nth-child(2) {
  background: var(--surface);
}

.performance-metric:nth-child(4) {
  background: #fff8dc;
}

.performance-metric > strong,
.errors-metric > strong {
  margin-block: 11px 6px;
}

.errors-metric {
  min-height: 116px;
  padding: 18px 20px;
}

/* Registro externo. */
.performance-external-entry {
  grid-template-columns: 1fr;
  gap: 18px;
  padding: 22px 24px 24px;
}

.performance-entry-heading {
  padding-bottom: 17px;
  border-bottom: 1px dashed #aaa59b;
}

.performance-entry-fields {
  grid-template-columns: 1fr 1.2fr .65fr .65fr auto;
}

/* Dashboard. */
[data-screen="dashboard"] .test-card p,
[data-screen="dashboard"] .test-card small,
[data-screen="dashboard"] .dashboard-actions small {
  font-size: 10px;
  line-height: 1.35;
}

[data-screen="dashboard"] .dashboard-actions .test-card {
  min-height: 94px;
  padding: 17px;
}

/* Avisos. */
.notice-grid .notice-card p {
  font-size: 12.5px;
}

.notice-grid .notice-card footer > span,
.notice-card .notice-card-top > span:last-child,
.notice-card .notice-card-top time {
  font-size: 9.5px;
}

/* Banco. */
.bank-filter-section-title small,
.bank-select-grid label > small,
.bank-filter-footer > span,
.bank-list-heading p,
.question-identification small,
.question-image-preview small,
.question-content > footer > span {
  font-size: 9.5px;
}

.bank-filter-panel .chip {
  min-height: 36px;
  font-size: 9.5px;
}

/* Desempenho e erros. */
.performance-metric > small,
.performance-entry-heading small,
.performance-goal-card footer > span,
.performance-summary-card > div span,
.errors-metric > small,
.error-question-top > div small,
.error-question-card footer > span {
  font-size: 9.5px;
}

@media (max-width: 1100px) {
  .performance-controls,
  .errors-controls {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .performance-controls > *,
  .errors-controls > * {
    padding-inline: 0;
  }

  .performance-controls > * + *,
  .errors-controls > * + * {
    border-left: 0;
  }

  .performance-controls > :last-child,
  .errors-controls > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .screen {
    width: min(100% - 28px, 1480px);
    padding-top: 25px;
  }

  .screen-intro h1,
  .screen-header h1 {
    font-size: 32px;
  }

  .performance-controls,
  .errors-controls {
    grid-template-columns: 1fr;
  }

  .performance-controls > :last-child,
  .errors-controls > :last-child {
    grid-column: auto;
  }

  .performance-entry-fields {
    grid-template-columns: 1fr 1fr;
  }
}

/* =========================================================
   HIERARQUIA SEMÂNTICA GLOBAL — TODOS OS HUBS

   Amarelo: ação principal e contexto atual.
   Verde: sucesso, conclusão e progresso.
   Rosa: erro, atenção e ação destrutiva.
   Azul-cinza: filtros, formulários e controles.
   Areia: métricas e resumos numéricos.
   Branco: conteúdo, histórico e análise.
   ========================================================= */
.prototype-body {
  --semantic-control: #dfe6eb;
  --semantic-control-strong: #c7d4dc;
  --semantic-stat: #f1e5c4;
  --semantic-content: #fbfaf6;
  --semantic-current: #fff3c4;
  --semantic-success: #a7dfbb;
  --semantic-success-soft: #def1e4;
  --semantic-danger: #f3a6c6;
  --semantic-danger-soft: #f8dce8;
  --semantic-data: #748b98;
}

/* Ações principais mantêm a elevação neobrutalista. */
.screen:not([data-screen$="-legacy"]) .dark-action {
  border: 2px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 950;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.screen:not([data-screen$="-legacy"]) .dark-action:hover {
  background: #ffd65a;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

.screen:not([data-screen$="-legacy"]) .dark-action:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}

.screen:not([data-screen$="-legacy"]) .dark-action:disabled {
  background: #dedbd3;
  color: #77736b;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

/* Ações secundárias permanecem no plano do conteúdo. */
.screen:not([data-screen$="-legacy"]) .outline-action {
  border: 2px solid var(--ink);
  background: var(--semantic-content);
  color: var(--ink);
  box-shadow: none;
  font-weight: 850;
  transition: background 120ms ease, transform 120ms ease;
}

.screen:not([data-screen$="-legacy"]) .outline-action:hover {
  background: var(--semantic-control);
  box-shadow: none;
  transform: none;
}

.screen:not([data-screen$="-legacy"]) .outline-action:active {
  background: var(--semantic-control-strong);
  box-shadow: none;
  transform: translateY(1px);
}

.screen:not([data-screen$="-legacy"]) :is(.outline-action.danger, button.danger) {
  background: var(--semantic-danger-soft);
  color: var(--ink);
}

.screen:not([data-screen$="-legacy"]) :is(.outline-action.danger, button.danger):hover {
  background: var(--semantic-danger);
}

/* Profundidade consistente dos conjuntos principais. */
.screen:not([data-screen$="-legacy"]) .test-card {
  border-width: 2px;
  border-radius: var(--ui-radius-card);
  box-shadow: 5px 5px 0 var(--ink);
}

/* Resumos e estatísticas compartilham a mesma superfície areia. */
:is(
  .notice-summary,
  .bank-summary,
  .lists-summary,
  .xray-scope-strip,
  .sim-summary-strip,
  .red-summary-strip,
  .rev-summary-strip,
  .anno-summary-strip,
  .graphx-context-strip,
  .timex-summary-strip
) {
  background: var(--semantic-stat);
  box-shadow: 4px 4px 0 var(--ink) !important;
}

:is(
  .notice-summary,
  .bank-summary,
  .lists-summary,
  .xray-scope-strip,
  .sim-summary-strip,
  .red-summary-strip,
  .rev-summary-strip,
  .anno-summary-strip,
  .graphx-context-strip,
  .timex-summary-strip
) > div {
  background: transparent;
}

:is(
  .performance-metric,
  .errors-metric,
  .sim-history-metrics > div,
  .red-history-metrics > div,
  .graphx-toolbar-count,
  .graphx-toolbar-period,
  .admx-metric
) {
  background: var(--semantic-stat) !important;
}

/* Filtros, formulários, editores e barras de controle. */
:is(
  .performance-controls,
  .performance-external-entry,
  .errors-controls,
  .errors-filter-panel,
  .bank-filter-panel,
  .bank-list-panel,
  .list-generator-panel,
  .list-create-bar,
  .xray-filter-panel,
  .sim-register-card,
  .sim-models-card,
  .sim-history-toolbar,
  .red-register-card,
  .red-history-toolbar,
  .rev-create-card,
  .rev-plans-toolbar,
  .anno-create-card,
  .anno-axis-card,
  .anno-library-toolbar,
  .anno-library-filters,
  .graphx-toolbar,
  .timex-new-subject-card,
  .crx-editor,
  .arx-upload,
  .cfgx-nav,
  .fbx-form,
  .admx-system,
  .admx-notices
) {
  background: var(--semantic-control) !important;
}

/* Conteúdo, análises e históricos ficam em uma superfície neutra única. */
:is(
  .notice-card,
  .question-card,
  .list-preview-panel,
  .lists-manager,
  .list-selected-detail,
  .xray-distribution-card,
  .xray-incidence-card,
  .xray-detail-card,
  .sim-history-list,
  .sim-history-detail,
  .red-history-list,
  .red-history-detail,
  .rev-plan-card,
  .anno-repertory-card,
  .graphx-main-card,
  .graphx-subject-card,
  .graphx-comparison-card,
  .timex-subject-card,
  .timex-history-card,
  .crx-board,
  .crx-load,
  .arx-browser,
  .cfgx-section,
  .fbx-guide,
  .fbx-history,
  .admx-activity,
  .admx-feedbacks,
  .admx-report,
  .admx-pdf,
  .admx-permissions
) {
  background: var(--semantic-content) !important;
}

/* Informações novas/em andamento usam azul-cinza, não amarelo. */
[data-screen="avisos"] .notice-card.is-new,
[data-screen="dashboard"] .session-card,
[data-screen="dashboard"] .inline-card,
[data-screen="banco"] .bank-progress {
  background: var(--semantic-control) !important;
}

/* O que exige atenção agora recebe amarelo claro; o amarelo forte fica no CTA. */
:is(
  .performance-goal-card,
  .timex-active-card,
  .crx-today,
  .rev-plan-featured
) {
  background: var(--semantic-current) !important;
}

/* Navegação interna e seleções são azul-cinza, sem competir com CTAs. */
:is(
  .sim-mode-tabs,
  .red-mode-tabs,
  .anno-mode-tabs,
  .graphx-mode-tabs
) {
  background: var(--semantic-content) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
}

:is(
  .sim-mode-tabs,
  .red-mode-tabs,
  .anno-mode-tabs,
  .graphx-mode-tabs
) > button.is-active,
.xray-year-options > button.is-active,
.xray-detail-tabs > button.is-active,
.list-strategy.is-selected,
.list-distribution.is-selected,
.sim-model-list > button.is-selected,
.sim-history-list > button.is-selected,
.red-history-list > button.is-selected,
.rev-status-tabs > button.is-active,
.anno-axis-list > button.is-active,
.anno-library-filters > button.is-active,
.graphx-record-list > .is-current,
.timex-history-tabs > button.is-active,
.cfgx-nav button.is-active,
.fbx-history-filters > button.is-active,
.admx-tabs > button.is-active {
  border-color: var(--ink);
  background: var(--semantic-control-strong) !important;
  color: var(--ink);
  box-shadow: none !important;
}

/* Hoje/agora continua sendo um estado temporal amarelo. */
:is(
  .performance-date-nav .today,
  .errors-date-nav .today,
  .bank-choice-row .is-today,
  .crx-day.is-today,
  .crx-item.is-current
) {
  background: var(--yellow) !important;
  color: var(--ink) !important;
}

/* Conclusão e progresso são sempre verdes. */
:is(
  .rev-cycle-steps .is-done,
  .rev-compact-steps .is-done,
  .crx-item.is-done,
  .timex-subject-card.is-complete
) {
  background: var(--semantic-success-soft) !important;
}

:is(
  .performance-goal-track > i,
  .weekly-progress > i,
  .rev-plan-progress b,
  .sim-subject-table i > em,
  .sim-history-list i > em,
  .red-competence-card i > em,
  .red-history-list i > em,
  .timex-subject-card i > b,
  .crx-load i > b
) {
  background: var(--semantic-success) !important;
}

/* Erros e alertas têm rosa próprio. */
:is(
  .error-badge,
  .wrong-badge,
  .errors-recurring > #errorsRecurringList > div > b,
  .admx-status.is-error
) {
  background: var(--semantic-danger) !important;
  color: var(--ink) !important;
}

/* Dados neutros de gráficos não usam a cor de ação. */
:is(
  .xray-incidence-list i > b,
  .performance-bars span,
  .graphx-subject-bars i > b,
  .graphx-comparison-bars i > b
) {
  background: var(--semantic-data) !important;
}

[data-screen="graficos"] .graphx-area-fill {
  fill: #dce4e8;
}

[data-screen="graficos"] .graphx-main-line {
  stroke: var(--semantic-data);
}

[data-screen="graficos"] .graphx-points circle {
  fill: var(--semantic-content);
  stroke: var(--semantic-data);
}

/* Componentes compactos não ganham a mesma sombra dos cards-pai. */
:is(
  .sim-history-metrics > div,
  .red-history-metrics > div,
  .red-competence-card,
  .arx-folder,
  .arx-file
) {
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .screen:not([data-screen$="-legacy"]) :is(.dark-action, .outline-action) {
    transition: none;
  }
}

/* Desempenho — hierarquia visual de ações.
   Escopo deliberadamente limitado a este hub para validação. */
[data-screen="desempenho"] {
  --performance-neutral: #dfe6eb;
  --performance-neutral-strong: #cbd6dd;
  --performance-stat: #f1e5c4;
  --performance-analysis: #fbfaf6;
  --performance-success: #a7dfbb;
  --performance-success-soft: #def1e4;
  --performance-danger: #f3a6c6;
  --performance-danger-soft: #f8dce8;
}

[data-screen="desempenho"] :is(
  .performance-controls,
  .performance-external-entry,
  .performance-chart-card,
  .performance-goal-card,
  .performance-summary-card,
  .performance-hit-error,
  .performance-ranking-card,
  .performance-subject-table
) {
  box-shadow: 5px 5px 0 var(--ink);
}

[data-screen="desempenho"] .performance-controls {
  background: var(--performance-neutral);
}

[data-screen="desempenho"] .performance-metric {
  box-shadow: 4px 4px 0 var(--ink);
}

[data-screen="desempenho"] .performance-metric {
  background: var(--performance-stat);
}

[data-screen="desempenho"] .performance-external-entry {
  background: var(--performance-neutral);
}

[data-screen="desempenho"] .performance-metric > span {
  width: fit-content;
  padding: 4px 7px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: #fbfaf6;
  color: var(--ink);
}

[data-screen="desempenho"] .performance-metric:nth-child(2) > span,
[data-screen="desempenho"] .performance-metric:nth-child(6) > span {
  background: var(--performance-success);
}

[data-screen="desempenho"] .performance-metric:nth-child(3) > span,
[data-screen="desempenho"] .performance-metric:nth-child(7) > span {
  background: var(--performance-danger);
}

[data-screen="desempenho"] .performance-metric:nth-child(4) > span {
  background: var(--ink);
  color: #fff;
}

[data-screen="desempenho"] .performance-entry-icon {
  background: var(--yellow);
  box-shadow: 3px 3px 0 var(--ink);
}

[data-screen="desempenho"] .performance-period button,
[data-screen="desempenho"] .performance-date-nav button,
[data-screen="desempenho"] .performance-ranking-tabs button {
  border-width: 2px;
  background: #fbfaf6;
  box-shadow: none;
  transition: background 130ms ease, color 130ms ease;
}

[data-screen="desempenho"] .performance-period button:hover,
[data-screen="desempenho"] .performance-date-nav button:hover,
[data-screen="desempenho"] .performance-ranking-tabs button:hover {
  background: var(--performance-neutral);
}

[data-screen="desempenho"] .performance-period button.is-active,
[data-screen="desempenho"] .performance-ranking-tabs button.is-active {
  background: var(--ink);
  color: #fff;
  box-shadow: none;
}

[data-screen="desempenho"] .performance-date-nav .today {
  background: var(--yellow);
  box-shadow: none;
}

[data-screen="desempenho"] .performance-bars span,
[data-screen="desempenho"] .performance-ranking-card:has([data-performance-ranking="strong"].is-active) .performance-ranking b {
  background: var(--yellow);
}

[data-screen="desempenho"] .hit-error-days b {
  background: var(--performance-success);
}

[data-screen="desempenho"] .performance-ranking-card:has([data-performance-ranking="weak"].is-active) .performance-ranking b {
  background: var(--performance-danger);
}

[data-screen="desempenho"] .hit-error-total {
  box-shadow: 3px 3px 0 var(--ink);
}

[data-screen="desempenho"] .hit-error-total .hit-segment {
  background: var(--performance-success);
}

[data-screen="desempenho"] .hit-error-total .error-segment {
  background: var(--performance-danger);
}

[data-screen="desempenho"] .performance-goal-card {
  background: #fff6d4;
}

[data-screen="desempenho"] :is(
  .performance-chart-card,
  .performance-summary-card,
  .performance-hit-error,
  .performance-ranking-card,
  .performance-subject-table
) {
  background: var(--performance-analysis);
}

[data-screen="desempenho"] #performanceDistributionTotal {
  border-color: var(--ink);
  background: var(--performance-danger);
  color: var(--ink);
}

[data-screen="desempenho"] .performance-action-primary {
  min-height: 43px;
  border: 2px solid var(--ink);
  background: var(--yellow);
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 950;
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

[data-screen="desempenho"] .performance-action-primary:hover {
  background: #ffd65a;
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 var(--ink);
}

[data-screen="desempenho"] .performance-action-primary:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}

[data-screen="desempenho"] .performance-action-secondary {
  border: 2px solid var(--ink);
  background: #fbfaf6;
  color: var(--ink);
  box-shadow: none;
  transition: background 130ms ease;
}

[data-screen="desempenho"] .performance-action-secondary:hover {
  background: var(--performance-neutral);
  transform: none;
  box-shadow: none;
}

[data-screen="desempenho"] .performance-action-secondary:active {
  background: var(--performance-neutral-strong);
  transform: none;
  box-shadow: none;
}

[data-screen="desempenho"] .performance-action-tertiary {
  min-height: auto;
  padding: 3px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

[data-screen="desempenho"] .performance-action-tertiary:hover {
  background: transparent;
  transform: none;
  box-shadow: none;
  text-decoration-thickness: 2px;
}

[data-screen="desempenho"] .performance-action-tertiary:active {
  opacity: .65;
  transform: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-screen="desempenho"] .performance-action-primary {
    transition: none;
  }
}

/* =========================================================
   Listas
   ========================================================= */
[data-screen="listas"] .test-card {
  border-width: 2px;
  border-radius: var(--ui-radius-card);
}

[data-screen="listas"] .eyebrow {
  font-size: var(--ui-label) !important;
  line-height: 1.2;
  letter-spacing: .13em;
}

[data-screen="listas"] small {
  font-size: var(--ui-caption);
  line-height: 1.35;
}

[data-screen="listas"] :is(input, select) {
  min-height: var(--ui-control);
  font-size: 10px;
}

[data-screen="listas"] :is(.dark-action, .outline-action) {
  min-height: 41px;
  padding-inline: 14px;
  font-size: 10px;
}

.lists-summary {
  display: grid;
  grid-template-columns: 140px 150px 170px minmax(230px, 1fr);
  align-items: center;
  margin-bottom: 25px;
  padding: 20px 24px;
  box-shadow: var(--ui-depth-2);
}

.lists-summary > div {
  display: flex;
  min-height: 48px;
  flex-direction: column;
  justify-content: center;
  padding-right: 24px;
}

.lists-summary > div + div {
  padding-left: 24px;
  border-left: 1px solid #c9c4ba;
}

.lists-summary span {
  color: var(--muted);
  font-size: var(--ui-label);
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.lists-summary strong {
  margin-top: 3px;
  font-size: 25px;
  line-height: 1;
}

.lists-summary .lists-quota {
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  justify-self: end;
  gap: 8px;
  padding: 0 12px;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  color: var(--ink);
  background: #eeebe4;
  box-shadow: 2px 2px 0 var(--ink);
}

.lists-quota i {
  width: 7px;
  height: 7px;
  border: 1px solid var(--ink);
  background: var(--yellow);
}

.list-generator-panel {
  margin-bottom: 25px;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--ui-depth-3);
}

.list-generator-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px 26px;
  border-bottom: 2px solid var(--ink);
  background: #eeebe4;
}

.list-generator-heading h2 {
  margin: 4px 0 6px;
  font-size: 23px;
}

.list-generator-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
}

.list-generator-step {
  padding: 25px 26px 27px;
}

.list-generator-step + .list-generator-step {
  border-top: 1px solid #bdb8ae;
}

.list-step-heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 19px;
}

.list-step-heading > strong {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  background: var(--yellow);
  box-shadow: 2px 2px 0 var(--ink);
  font-size: 9px;
}

.list-step-heading h3 {
  margin: 0 0 3px;
  font-size: 15px;
}

.list-step-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 9.5px;
}

.list-strategy-grid,
.list-distribution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.list-strategy,
.list-distribution {
  position: relative;
  display: flex;
  min-height: 104px;
  align-items: flex-start;
  flex-direction: column;
  gap: 7px;
  padding: 17px 17px 16px 47px;
  border: 1.5px solid var(--ink);
  border-radius: 7px;
  color: var(--ink);
  background: #f7f4ed;
  cursor: pointer;
  text-align: left;
}

.list-strategy > span,
.list-distribution > span {
  position: absolute;
  top: 18px;
  left: 17px;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--surface);
}

.list-strategy.is-selected,
.list-distribution.is-selected {
  background: #fff8dc;
  box-shadow: 3px 3px 0 var(--ink);
}

.list-strategy.is-selected > span::after,
.list-distribution.is-selected > span::after {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  content: "";
  background: var(--yellow);
}

.list-strategy strong,
.list-distribution strong {
  font-size: 11px;
}

.list-strategy small,
.list-distribution small {
  color: var(--muted);
  font-size: 9.5px;
}

.list-primary-fields {
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 12px;
  margin-bottom: 13px;
}

.list-primary-fields label,
.list-filter-grid label,
.list-create-bar label,
.list-selected-actions label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.list-primary-fields label > span,
.list-filter-grid label > span,
.list-create-bar label > span,
.list-selected-actions label > span,
.list-exam-selector label > span {
  font-size: var(--ui-label);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.list-primary-fields input,
.list-filter-grid select,
.list-exam-selector input,
.list-create-bar input,
.list-create-bar select,
.list-selected-actions select {
  width: 100%;
  min-height: var(--ui-control);
  padding: 0 11px;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  outline: 0;
  color: var(--ink);
  background: #f7f4ed;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
}

.list-exam-selector {
  display: grid;
  grid-template-columns: 1fr auto minmax(230px, .7fr);
  align-items: end;
  gap: 11px;
  margin-bottom: 13px;
  padding: 16px;
  border: 1.5px solid var(--ink);
  border-radius: 7px;
  background: #eeebe4;
}

.list-exam-selector > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.list-exam-selector > div span {
  font-size: var(--ui-label);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.list-exam-selector > div strong {
  font-size: 12px;
}

.list-exam-selector label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.list-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.list-years {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px dashed #aaa59b;
}

.list-years > span {
  font-size: var(--ui-label);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.list-years > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.list-years .chip {
  min-height: 35px;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  color: var(--ink);
  background: #f7f4ed;
  font-size: 9.5px;
  font-weight: 850;
}

.list-years .chip.is-selected {
  background: var(--yellow);
  box-shadow: 2px 2px 0 var(--ink);
}

.list-generator-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.list-generator-options label {
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border: 1px solid #aaa59b;
  border-radius: 6px;
  background: #eeebe4;
  font-size: 9.5px;
  font-weight: 750;
}

.list-generator-options input {
  width: 18px;
  height: 18px;
  accent-color: var(--yellow);
}

.list-generator-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 26px;
  border-top: 2px solid var(--ink);
  background: #eeebe4;
}

.list-generator-footer > span {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
}

.list-preview-panel {
  margin-bottom: 28px;
  padding: 25px 26px;
  box-shadow: var(--ui-depth-3);
}

.list-preview-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.list-preview-heading h2 {
  margin: 4px 0 5px;
  font-size: 22px;
}

.list-preview-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 9.5px;
}

.list-preview-heading > div:last-child {
  display: flex;
  gap: 9px;
}

.list-preview-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin-bottom: 22px;
}

.list-preview-metrics > div {
  display: flex;
  min-height: 73px;
  flex-direction: column;
  justify-content: center;
  padding: 12px 14px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: #f5f2eb;
}

.list-preview-metrics span {
  color: var(--muted);
  font-size: var(--ui-label);
  font-weight: 900;
  text-transform: uppercase;
}

.list-preview-metrics strong {
  margin-top: 5px;
  font-size: 20px;
}

.list-preview-questions {
  display: grid;
}

.list-preview-questions > div {
  display: grid;
  min-height: 66px;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #c9c4ba;
}

.list-preview-questions > div > span,
.list-selected-questions > div > span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: #eeebe4;
  font-size: 8px;
  font-weight: 900;
}

.list-preview-questions > div > div,
.list-selected-questions > div > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.list-preview-questions strong,
.list-selected-questions strong {
  font-size: 10px;
}

.list-preview-questions small,
.list-selected-questions small {
  color: var(--muted);
  font-size: 9.5px;
}

.list-preview-questions button,
.list-selected-questions button {
  min-height: 34px;
  padding: 0 10px;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  color: var(--ink);
  background: #f7f4ed;
  font-size: 9px;
  font-weight: 850;
}

.lists-library {
  padding-top: 3px;
}

.lists-library-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.lists-library-heading h2 {
  margin: 4px 0 0;
  font-size: 22px;
}

.lists-library-heading > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.list-create-bar {
  display: grid;
  grid-template-columns: 1.2fr .65fr auto 1fr;
  align-items: end;
  gap: 11px;
  margin-bottom: 22px;
  padding: 20px 22px;
  box-shadow: var(--ui-depth-1);
}

.lists-management-workspace {
  display: grid;
  grid-template-columns: minmax(260px, .55fr) minmax(0, 1.45fr);
  align-items: start;
  gap: 22px;
}

.lists-manager {
  display: grid;
  gap: 7px;
  padding: 10px;
  box-shadow: var(--ui-depth-2);
}

.lists-manager > button {
  display: grid;
  min-height: 72px;
  grid-template-columns: 35px 1fr;
  align-items: center;
  gap: 11px;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--ink);
  background: transparent;
  text-align: left;
}

.lists-manager > button + button {
  border-top-color: #c9c4ba;
  border-radius: 0;
}

.lists-manager > button.is-selected {
  border: 1.5px solid var(--ink);
  border-radius: 7px;
  background: #fff8dc;
  box-shadow: 2px 2px 0 var(--ink);
}

.list-manager-icon {
  display: grid;
  width: 33px;
  height: 33px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 5px;
  background: var(--surface);
  font-size: 8px;
  font-weight: 900;
}

.lists-manager > button > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.lists-manager strong {
  font-size: 10px;
}

.lists-manager small {
  color: var(--muted);
  font-size: 9px;
}

.list-selected-detail {
  padding: 24px;
  box-shadow: var(--ui-depth-3);
}

.list-selected-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #aaa59b;
}

.list-selected-heading h2 {
  margin: 4px 0 5px;
  font-size: 22px;
}

.list-selected-heading > div:first-child > span {
  color: var(--muted);
  font-size: 9.5px;
}

.list-selected-heading > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.list-selected-heading .danger {
  background: #e7e2da;
}

.list-selected-progress {
  display: grid;
  grid-template-columns: 150px 1fr 38px;
  align-items: center;
  gap: 15px;
  padding: 20px 0;
}

.list-selected-progress > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.list-selected-progress > div strong {
  font-size: 20px;
}

.list-selected-progress > div span,
.list-selected-progress em {
  color: var(--muted);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 850;
}

.list-selected-progress > i {
  height: 13px;
  overflow: hidden;
  border: 1.5px solid var(--ink);
  border-radius: 3px;
  background: #e5e1d8;
}

.list-selected-progress > i b {
  display: block;
  height: 100%;
  border-right: 1.5px solid var(--ink);
  background: var(--yellow);
}

.list-selected-actions {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 11px;
  margin-bottom: 17px;
  padding: 16px;
  border: 1px solid #aaa59b;
  border-radius: 7px;
  background: #eeebe4;
}

.list-selected-questions {
  display: grid;
}

.list-selected-questions > div {
  display: grid;
  min-height: 66px;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  border-top: 1px solid #c9c4ba;
}

.list-selected-questions .done {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--green);
}

.list-selected-detail > footer {
  margin-top: 17px;
  padding-top: 16px;
  border-top: 1px dashed #aaa59b;
  color: var(--muted);
  font-size: 9.5px;
}

@media (max-width: 1100px) {
  .list-filter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .list-create-bar {
    grid-template-columns: 1fr 1fr;
  }

  .lists-management-workspace {
    grid-template-columns: 1fr;
  }

  .lists-manager {
    grid-template-columns: repeat(3, 1fr);
  }

  .lists-manager > button + button {
    border-top-color: transparent;
  }
}

@media (max-width: 720px) {
  .lists-summary {
    grid-template-columns: 1fr 1fr;
    gap: 17px 0;
  }

  .lists-summary > div:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }

  .lists-quota {
    grid-column: 1 / -1;
    justify-self: stretch !important;
    justify-content: center;
  }

  .list-generator-heading,
  .list-preview-heading,
  .list-selected-heading,
  .list-generator-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .list-strategy-grid,
  .list-distribution-grid,
  .list-primary-fields,
  .list-filter-grid,
  .list-generator-options,
  .list-preview-metrics,
  .list-create-bar,
  .lists-manager {
    grid-template-columns: 1fr;
  }

  .list-exam-selector {
    grid-template-columns: 1fr;
  }

  .list-preview-heading > div:last-child,
  .list-selected-heading > div:last-child {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .list-selected-progress {
    grid-template-columns: 1fr;
  }

  .list-selected-actions {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   REDAÇÕES — correção, competências e histórico
   ========================================================= */

[data-screen="redacoes"] {
  --red-soft: #f0eee8;
  --red-line: #c9c5ba;
  --red-yellow: #f5ca3d;
}

.red-page-heading {
  align-items: flex-end;
}

.red-mode-tabs,
.red-summary-strip,
.red-register-card,
.red-history-toolbar,
.red-history-list,
.red-history-detail {
  border: 2px solid var(--ink, #181818);
  box-shadow: 6px 6px 0 var(--ink, #181818);
}

.red-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 24px;
  padding: 8px;
  background: var(--red-soft);
}

.red-mode-tabs > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 66px;
  border: 1.5px solid transparent;
  border-radius: 5px;
  padding: 10px 13px;
  background: transparent;
  color: var(--ink, #181818);
  font: inherit;
  text-align: left;
}

.red-mode-tabs > button > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  background: #faf8f2;
  font-size: 9px;
  font-weight: 900;
}

.red-mode-tabs strong,
.red-mode-tabs small {
  display: block;
}

.red-mode-tabs strong {
  font-size: 11px;
}

.red-mode-tabs small {
  margin-top: 3px;
  color: #68645c;
  font-size: 8px;
}

.red-mode-tabs > button.is-active {
  border-color: var(--ink, #181818);
  background: var(--red-yellow);
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.red-mode-tabs > button.is-active > span {
  background: #fffdf8;
}

.red-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 30px;
  overflow: hidden;
}

.red-summary-strip > div {
  display: flex;
  min-height: 104px;
  flex-direction: column;
  justify-content: center;
  padding: 19px 24px;
  border-right: 1px solid var(--red-line);
}

.red-summary-strip > div:last-child {
  border-right: 0;
}

.red-summary-strip span,
.red-section-heading > span {
  color: #625f57;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.red-summary-strip strong {
  margin: 5px 0 3px;
  font-size: 24px;
  line-height: 1;
}

.red-summary-strip small {
  color: #68645c;
  font-size: 8px;
}

.red-register-section,
.red-history-section {
  margin-bottom: 30px;
}

.red-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.red-section-heading h2 {
  margin: 3px 0 0;
  font-size: 23px;
}

.red-register-card,
.red-history-detail {
  overflow: hidden;
}

.red-register-heading {
  display: grid;
  grid-template-columns: minmax(300px, 1.8fr) minmax(140px, .55fr) auto;
  align-items: end;
  gap: 14px;
  padding: 22px 24px;
  border-bottom: 1.5px solid var(--ink, #181818);
  background: var(--red-soft);
}

.red-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.red-field > span {
  color: var(--ink, #181818);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.red-field input,
.red-field textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 11px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 10px;
  font-weight: 720;
}

.red-field input {
  height: 43px;
}

.red-field textarea {
  min-height: 126px;
  padding-top: 12px;
  resize: none;
}

.red-type-tag {
  display: inline-flex;
  height: 43px;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 13px;
  background: #fffdf8;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.red-type-tag i {
  width: 8px;
  height: 8px;
  border: 1px solid var(--ink, #181818);
  background: var(--red-yellow);
}

.red-competence-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 14px;
}

.red-competence-heading h3 {
  margin: 3px 0 0;
  font-size: 18px;
}

.red-competence-heading > span {
  color: #68645c;
  font-size: 8px;
}

.red-competence-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 0 24px 22px;
}

.red-competence-card {
  display: flex;
  min-width: 0;
  min-height: 135px;
  flex-direction: column;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 6px;
  padding: 14px;
  background: #faf8f2;
}

.red-competence-card > span {
  display: grid;
  width: 29px;
  height: 25px;
  place-items: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  background: var(--red-yellow);
  font-size: 8px;
  font-weight: 900;
}

.red-competence-card > strong {
  min-height: 29px;
  margin: 9px 0 5px;
  font-size: 9px;
}

.red-competence-card > div {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.red-competence-card input {
  width: 48px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 20px;
  font-weight: 900;
}

.red-competence-card > div b {
  color: #68645c;
  font-size: 8px;
}

.red-competence-card > i,
.red-score-band > i,
.red-history-list i,
.red-detail-competences i {
  display: block;
  height: 6px;
  border: 1px solid var(--ink, #181818);
  background: #e6e2d8;
}

.red-competence-card > i {
  margin-top: auto;
}

.red-competence-card > i em,
.red-score-band > i em,
.red-history-list i em,
.red-detail-competences i b {
  display: block;
  height: 100%;
  background: var(--red-yellow);
}

.red-score-band {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 18px;
  margin: 0 24px 22px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 6px;
  padding: 16px 18px;
  background: #fff7d9;
}

.red-score-band > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.red-score-band > div span {
  margin-right: 7px;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.red-score-band > div strong {
  font-size: 24px;
}

.red-score-band > div b {
  color: #625f57;
  font-size: 9px;
}

.red-score-band > span {
  font-size: 13px;
  font-weight: 900;
  text-align: right;
}

.red-feedback-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .65fr);
  gap: 16px;
  padding: 0 24px 22px;
}

.red-upload-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 6px;
  padding: 15px;
  background: var(--red-soft);
  text-align: center;
}

.red-upload-field > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.red-upload-icon {
  display: grid;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  place-items: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  background: var(--red-yellow);
  box-shadow: 3px 3px 0 var(--ink, #181818);
  font-size: 17px;
  font-weight: 900;
}

.red-upload-field strong {
  font-size: 10px;
}

.red-upload-field small {
  margin-top: 4px;
  color: #68645c;
  font-size: 8px;
}

.red-upload-field > .outline-action {
  width: 100%;
  margin-top: 12px;
}

.red-upload-file {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
  color: #4f4c45;
  font-size: 8px;
}

.red-upload-file > i {
  width: 7px;
  height: 7px;
  border: 1px solid var(--ink, #181818);
  background: #dfe9dd;
}

.red-upload-file > button {
  border: 0;
  padding: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.red-register-footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 17px 24px;
  border-top: 1.5px solid var(--ink, #181818);
  background: var(--red-soft);
}

.red-history-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .75fr) minmax(150px, .75fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 20px;
  padding: 17px 20px;
}

.red-history-toolbar label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.red-history-toolbar label span {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.red-history-toolbar input,
.red-history-toolbar select {
  box-sizing: border-box;
  width: 100%;
  height: 41px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 11px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}

.red-history-workspace {
  display: grid;
  grid-template-columns: minmax(300px, .75fr) minmax(0, 1.7fr);
  gap: 22px;
  align-items: start;
}

.red-history-list {
  padding: 10px;
}

.red-history-list > button {
  display: grid;
  width: 100%;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 82px;
  border: 1.5px solid transparent;
  border-bottom-color: var(--red-line);
  padding: 10px;
  background: transparent;
  color: var(--ink, #181818);
  font: inherit;
  text-align: left;
}

.red-history-list > button.is-selected {
  border-color: var(--ink, #181818);
  border-radius: 5px;
  background: #fff7d9;
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.red-history-score {
  display: flex;
  width: 50px;
  height: 48px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  background: #faf8f2;
}

.red-history-score b {
  font-size: 13px;
  line-height: 1;
}

.red-history-score small {
  margin-top: 4px;
  font-size: 6px;
  font-weight: 900;
}

.red-history-list strong,
.red-history-list small {
  display: block;
}

.red-history-list strong {
  font-size: 9px;
}

.red-history-list small {
  margin: 4px 0 9px;
  color: #68645c;
  font-size: 7.5px;
}

.red-detail-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 23px 24px;
  border-bottom: 1.5px solid var(--ink, #181818);
  background: var(--red-soft);
}

.red-detail-heading h2 {
  max-width: 600px;
  margin: 4px 0 7px;
  font-size: 20px;
  line-height: 1.18;
}

.red-detail-heading > div:first-child > span {
  color: #625f57;
  font-size: 8px;
}

.red-detail-heading > div:last-child {
  display: flex;
  gap: 8px;
}

.red-detail-overview {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  border-bottom: 1px solid var(--red-line);
}

.red-detail-total {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
  border-right: 1px solid var(--red-line);
  background: #fff7d9;
}

.red-detail-total span {
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.red-detail-total strong {
  margin: 8px 0 3px;
  font-size: 34px;
  line-height: 1;
}

.red-detail-total b {
  color: #625f57;
  font-size: 9px;
}

.red-detail-competences {
  padding: 12px 22px;
}

.red-detail-competences > div {
  display: grid;
  grid-template-columns: minmax(120px, .85fr) minmax(130px, 1.5fr) 36px;
  align-items: center;
  gap: 11px;
  min-height: 38px;
  font-size: 8px;
}

.red-detail-competences strong {
  text-align: right;
}

.red-detail-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(220px, .7fr);
  gap: 14px;
  padding: 20px 24px 23px;
}

.red-correction-note,
.red-attachment-card {
  border: 1px solid var(--red-line);
  border-radius: 5px;
  padding: 15px;
  background: var(--red-soft);
}

.red-correction-note span {
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.red-correction-note p {
  margin: 8px 0 0;
  color: #4f4c45;
  font-size: 9px;
  line-height: 1.55;
}

.red-attachment-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.red-paper-preview {
  display: flex;
  width: 54px;
  height: 68px;
  box-sizing: border-box;
  flex-direction: column;
  gap: 8px;
  border: 1.5px solid var(--ink, #181818);
  padding: 12px 7px 7px;
  background: #fffdf8;
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.red-paper-preview i {
  height: 1px;
  background: #aaa69d;
}

.red-attachment-card strong,
.red-attachment-card small {
  display: block;
}

.red-attachment-card strong {
  font-size: 8px;
  overflow-wrap: anywhere;
}

.red-attachment-card small {
  margin-top: 4px;
  color: #68645c;
  font-size: 7px;
}

.red-attachment-card button {
  border: 0;
  margin-top: 8px;
  padding: 0;
  background: transparent;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 8px;
  font-weight: 900;
  text-decoration: underline;
}

@media (max-width: 1050px) {
  .red-competence-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .red-history-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .red-page-heading {
    align-items: stretch;
  }

  .red-page-heading .dark-action {
    width: 100%;
  }

  .red-mode-tabs {
    grid-template-columns: 1fr;
  }

  .red-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .red-summary-strip > div {
    min-height: 88px;
    padding: 15px 17px;
  }

  .red-summary-strip > div:nth-child(2) {
    border-right: 0;
  }

  .red-summary-strip > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--red-line);
  }

  .red-section-heading,
  .red-competence-heading,
  .red-detail-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .red-register-heading,
  .red-competence-grid,
  .red-feedback-layout,
  .red-history-toolbar,
  .red-detail-overview,
  .red-detail-bottom {
    grid-template-columns: 1fr;
  }

  .red-register-heading,
  .red-competence-heading,
  .red-competence-grid,
  .red-feedback-layout,
  .red-register-footer,
  .red-detail-heading,
  .red-detail-bottom {
    padding-right: 20px;
    padding-left: 20px;
  }

  .red-competence-grid {
    gap: 9px;
  }

  .red-competence-card {
    min-height: 112px;
  }

  .red-score-band {
    grid-template-columns: 1fr;
    margin-right: 20px;
    margin-left: 20px;
  }

  .red-score-band > span {
    text-align: left;
  }

  .red-register-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .red-register-footer button {
    width: 100%;
  }

  .red-history-toolbar {
    padding: 18px;
  }

  .red-detail-heading > div:last-child {
    width: 100%;
  }

  .red-detail-heading > div:last-child button {
    flex: 1;
  }

  .red-detail-total {
    border-right: 0;
    border-bottom: 1px solid var(--red-line);
  }

  .red-detail-competences {
    padding: 14px 20px;
  }

  .red-detail-competences > div {
    grid-template-columns: minmax(92px, .8fr) minmax(80px, 1fr) 32px;
  }
}

/* =========================================================
   REVISÕES — ciclos e repetição espaçada
   ========================================================= */

[data-screen="revisoes"] {
  --rev-soft: #f0eee8;
  --rev-line: #c9c5ba;
  --rev-yellow: #f5ca3d;
}

.rev-page-heading {
  align-items: flex-end;
}

.rev-summary-strip,
.rev-create-card,
.rev-plans-toolbar,
.rev-plan-card {
  border: 2px solid var(--ink, #181818);
  box-shadow: 6px 6px 0 var(--ink, #181818);
}

.rev-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 30px;
  overflow: hidden;
}

.rev-summary-strip > div {
  display: flex;
  min-height: 104px;
  flex-direction: column;
  justify-content: center;
  padding: 19px 24px;
  border-right: 1px solid var(--rev-line);
}

.rev-summary-strip > div:last-child {
  border-right: 0;
}

.rev-summary-strip span,
.rev-section-heading > span {
  color: #625f57;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.rev-summary-strip strong {
  margin: 5px 0 3px;
  font-size: 24px;
  line-height: 1;
}

.rev-summary-strip small {
  color: #68645c;
  font-size: 8px;
}

.rev-create-section,
.rev-plans-section {
  margin-bottom: 30px;
}

.rev-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.rev-section-heading h2 {
  margin: 3px 0 0;
  font-size: 23px;
}

.rev-create-card,
.rev-plan-card {
  overflow: hidden;
}

.rev-create-fields {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) minmax(150px, .75fr) minmax(140px, .65fr) minmax(185px, .75fr);
  align-items: end;
  gap: 13px;
  padding: 22px 24px;
  border-bottom: 1.5px solid var(--ink, #181818);
  background: var(--rev-soft);
}

.rev-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.rev-field > span {
  color: var(--ink, #181818);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.rev-field input {
  box-sizing: border-box;
  width: 100%;
  height: 43px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 11px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 10px;
  font-weight: 720;
}

.rev-color-field > div {
  display: flex;
  height: 43px;
  align-items: center;
  gap: 8px;
  box-sizing: border-box;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 10px;
  background: #faf8f2;
}

.rev-color-field button {
  width: 23px;
  height: 23px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 3px;
  padding: 0;
  background: var(--rev-yellow);
}

.rev-color-field button:nth-child(2) { background: #9d9990; }
.rev-color-field button:nth-child(3) { background: #fffdf8; }
.rev-color-field button:nth-child(4) { background: #1d1d1d; }

.rev-color-field button.is-active {
  box-shadow: 3px 3px 0 var(--ink, #181818);
  transform: translate(-1px, -1px);
}

.rev-interval-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 14px;
}

.rev-interval-heading h3 {
  margin: 3px 0 4px;
  font-size: 18px;
}

.rev-interval-heading > div > span {
  color: #68645c;
  font-size: 8px;
}

.rev-interval-editor {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 24px 22px;
}

.rev-interval-editor label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.rev-interval-editor label > span {
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.rev-interval-editor label > div {
  display: flex;
  height: 43px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  overflow: hidden;
  background: #faf8f2;
}

.rev-interval-editor input {
  min-width: 0;
  flex: 1;
  border: 0;
  padding: 0 11px;
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
}

.rev-interval-editor b {
  display: grid;
  min-width: 46px;
  place-items: center;
  border-left: 1px solid var(--ink, #181818);
  background: #e7e3d9;
  font-size: 8px;
}

.rev-timeline-preview {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 34px minmax(120px, 1fr) 34px minmax(120px, 1fr) 34px minmax(120px, 1fr);
  align-items: center;
  gap: 7px;
  margin: 0 24px 22px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 6px;
  padding: 16px;
  background: var(--rev-soft);
}

.rev-timeline-preview > div {
  display: flex;
  min-height: 74px;
  flex-direction: column;
  justify-content: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 12px;
  background: #faf8f2;
}

.rev-timeline-preview > div.is-origin {
  background: #fff7d9;
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.rev-timeline-preview > div span {
  font-size: 7.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.rev-timeline-preview > div strong {
  margin: 6px 0 3px;
  font-size: 16px;
}

.rev-timeline-preview > div small {
  color: #68645c;
  font-size: 7px;
}

.rev-timeline-preview > i {
  height: 2px;
  background: var(--ink, #181818);
}

.rev-create-footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 17px 24px;
  border-top: 1.5px solid var(--ink, #181818);
  background: var(--rev-soft);
}

.rev-plans-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) minmax(170px, .75fr) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 20px;
  padding: 17px 20px;
}

.rev-plans-toolbar label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.rev-plans-toolbar label span {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.rev-plans-toolbar input,
.rev-plans-toolbar select {
  box-sizing: border-box;
  width: 100%;
  height: 41px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 11px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}

.rev-status-tabs {
  display: flex;
  gap: 7px;
}

.rev-status-tabs button {
  height: 41px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 14px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 9px;
  font-weight: 850;
}

.rev-status-tabs button.is-active {
  background: var(--rev-yellow);
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.rev-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.rev-plan-featured {
  grid-column: 1 / -1;
}

.rev-plan-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 22px;
  border-bottom: 1px solid var(--rev-line);
  background: var(--rev-soft);
}

.rev-plan-title {
  display: flex;
  align-items: center;
  gap: 13px;
}

.rev-plan-marker {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  background: var(--rev-yellow);
  box-shadow: 3px 3px 0 var(--ink, #181818);
  font-size: 9px;
  font-weight: 900;
}

.rev-plan-marker.neutral {
  background: #d2cec4;
}

.rev-plan-marker.dark {
  background: #1d1d1d;
  color: #fffdf8;
}

.rev-plan-title h3 {
  margin: 3px 0 5px;
  font-size: 18px;
}

.rev-plan-title small {
  color: #68645c;
  font-size: 7.5px;
}

.rev-plan-heading > div:last-child {
  display: flex;
  gap: 8px;
}

.rev-plan-progress {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 15px;
  padding: 18px 22px;
}

.rev-plan-progress > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rev-plan-progress > div span {
  color: #625f57;
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

.rev-plan-progress > div strong {
  font-size: 11px;
}

.rev-plan-progress > i {
  display: block;
  height: 9px;
  border: 1.5px solid var(--ink, #181818);
  background: #e6e2d8;
}

.rev-plan-progress > i b {
  display: block;
  height: 100%;
  background: var(--rev-yellow);
}

.rev-plan-progress > em {
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  text-align: right;
}

.rev-cycle-steps {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) 32px minmax(110px, 1fr) 32px minmax(110px, 1fr) 32px minmax(110px, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 22px 21px;
}

.rev-cycle-steps > label {
  display: flex;
  min-height: 82px;
  align-items: flex-start;
  gap: 9px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 12px;
  background: #faf8f2;
}

.rev-cycle-steps > label.is-done {
  background: #e4eadf;
}

.rev-cycle-steps > label.is-current {
  background: #fff7d9;
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.rev-cycle-steps input,
.rev-compact-steps input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--rev-yellow);
}

.rev-cycle-steps > label span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.rev-cycle-steps b {
  font-size: 8px;
  text-transform: uppercase;
}

.rev-cycle-steps strong {
  margin: 7px 0 4px;
  font-size: 13px;
}

.rev-cycle-steps small {
  color: #68645c;
  font-size: 7px;
}

.rev-cycle-steps > i {
  height: 2px;
  background: var(--ink, #181818);
}

.rev-plan-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 22px;
  border-top: 1px solid var(--rev-line);
  background: var(--rev-soft);
}

.rev-plan-card > footer > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4f4c45;
  font-size: 8px;
}

.rev-plan-card > footer > span i {
  width: 8px;
  height: 8px;
  border: 1px solid var(--ink, #181818);
  background: var(--rev-yellow);
}

.rev-plan-compact .rev-plan-heading {
  min-height: 79px;
}

.rev-plan-compact .rev-plan-heading > div:last-child .outline-action {
  min-width: 0;
  padding-right: 10px;
  padding-left: 10px;
}

.rev-plan-compact .rev-plan-progress {
  grid-template-columns: 130px minmax(0, 1fr) 36px;
  padding-top: 15px;
  padding-bottom: 12px;
}

.rev-compact-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  padding: 0 22px 19px;
}

.rev-compact-steps > label {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 5px;
  border: 1px solid var(--rev-line);
  border-radius: 4px;
  padding: 9px;
  background: #faf8f2;
}

.rev-compact-steps > label.is-done {
  background: #e4eadf;
}

.rev-compact-steps > label.is-current {
  border-color: var(--ink, #181818);
  background: #fff7d9;
  box-shadow: 2px 2px 0 var(--ink, #181818);
}

.rev-compact-steps span,
.rev-compact-steps strong {
  grid-column: 2;
}

.rev-compact-steps span {
  font-size: 7px;
  font-weight: 900;
}

.rev-compact-steps strong {
  margin-top: 3px;
  font-size: 9px;
}

@media (max-width: 1080px) {
  .rev-create-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rev-plan-grid {
    grid-template-columns: 1fr;
  }

  .rev-plan-featured {
    grid-column: auto;
  }
}

@media (max-width: 700px) {
  .rev-page-heading {
    align-items: stretch;
  }

  .rev-page-heading .dark-action {
    width: 100%;
  }

  .rev-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rev-summary-strip > div {
    min-height: 88px;
    padding: 15px 17px;
  }

  .rev-summary-strip > div:nth-child(2) {
    border-right: 0;
  }

  .rev-summary-strip > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--rev-line);
  }

  .rev-section-heading,
  .rev-interval-heading,
  .rev-plan-heading,
  .rev-plan-card > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .rev-create-fields,
  .rev-interval-editor,
  .rev-plans-toolbar,
  .rev-plan-progress {
    grid-template-columns: 1fr;
  }

  .rev-create-fields,
  .rev-interval-heading,
  .rev-interval-editor,
  .rev-create-footer,
  .rev-plan-heading,
  .rev-plan-progress,
  .rev-cycle-steps,
  .rev-compact-steps,
  .rev-plan-card > footer {
    padding-right: 20px;
    padding-left: 20px;
  }

  .rev-timeline-preview {
    grid-template-columns: 1fr;
    margin-right: 20px;
    margin-left: 20px;
  }

  .rev-timeline-preview > i,
  .rev-cycle-steps > i {
    width: 2px;
    height: 18px;
    justify-self: center;
  }

  .rev-create-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .rev-create-footer button,
  .rev-interval-heading button,
  .rev-plan-card > footer button {
    width: 100%;
  }

  .rev-plans-toolbar {
    padding: 18px;
  }

  .rev-status-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .rev-status-tabs button {
    padding: 0 7px;
  }

  .rev-plan-heading > div:last-child {
    width: 100%;
  }

  .rev-plan-heading > div:last-child button {
    flex: 1;
  }

  .rev-plan-progress > em {
    text-align: left;
  }

  .rev-cycle-steps {
    grid-template-columns: 1fr;
  }

  .rev-compact-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================================================
   ANOTAÇÕES — repertórios e eixos temáticos
   ========================================================= */

[data-screen="anotacoes"] {
  --anno-soft: #f0eee8;
  --anno-line: #c9c5ba;
  --anno-yellow: #f5ca3d;
}

.anno-page-heading {
  align-items: flex-end;
}

.anno-page-heading > div:last-child {
  display: flex;
  gap: 9px;
}

.anno-mode-tabs,
.anno-summary-strip,
.anno-create-card,
.anno-axis-card,
.anno-library-toolbar,
.anno-library-filters,
.anno-repertory-card {
  border: 2px solid var(--ink, #181818);
  box-shadow: 6px 6px 0 var(--ink, #181818);
}

.anno-mode-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 24px;
  padding: 8px;
  background: var(--anno-soft);
}

.anno-mode-tabs > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 66px;
  border: 1.5px solid transparent;
  border-radius: 5px;
  padding: 10px 13px;
  background: transparent;
  color: var(--ink, #181818);
  font: inherit;
  text-align: left;
}

.anno-mode-tabs > button > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  background: #faf8f2;
  font-size: 9px;
  font-weight: 900;
}

.anno-mode-tabs strong,
.anno-mode-tabs small {
  display: block;
}

.anno-mode-tabs strong {
  font-size: 11px;
}

.anno-mode-tabs small {
  margin-top: 3px;
  color: #68645c;
  font-size: 8px;
}

.anno-mode-tabs > button.is-active {
  border-color: var(--ink, #181818);
  background: var(--anno-yellow);
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.anno-mode-tabs > button.is-active > span {
  background: #fffdf8;
}

.anno-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 30px;
  overflow: hidden;
}

.anno-summary-strip > div {
  display: flex;
  min-height: 104px;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 19px 24px;
  border-right: 1px solid var(--anno-line);
}

.anno-summary-strip > div:last-child {
  border-right: 0;
}

.anno-summary-strip span,
.anno-section-heading > span {
  color: #625f57;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.anno-summary-strip strong {
  max-width: 100%;
  margin: 5px 0 3px;
  font-size: 22px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.anno-summary-strip small {
  color: #68645c;
  font-size: 8px;
}

.anno-create-section,
.anno-library-section {
  margin-bottom: 30px;
}

.anno-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.anno-section-heading h2 {
  margin: 3px 0 0;
  font-size: 23px;
}

.anno-create-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(300px, .72fr);
  gap: 22px;
  align-items: start;
}

.anno-create-card,
.anno-axis-card,
.anno-repertory-card {
  overflow: hidden;
}

.anno-create-fields {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 22px 24px;
}

.anno-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.anno-field > span,
.anno-axis-colors > span {
  color: var(--ink, #181818);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.anno-field input,
.anno-field textarea {
  box-sizing: border-box;
  width: 100%;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 11px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 10px;
  font-weight: 720;
}

.anno-field input {
  height: 43px;
}

.anno-field textarea {
  min-height: 118px;
  padding-top: 12px;
  line-height: 1.5;
  resize: none;
}

.anno-tags-field > div {
  display: flex;
  min-height: 48px;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  box-sizing: border-box;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 7px;
  background: #faf8f2;
}

.anno-tags-field > div > button {
  height: 30px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  padding: 0 9px;
  background: #fff7d9;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 8px;
  font-weight: 850;
}

.anno-tags-field > div > button b {
  margin-left: 5px;
}

.anno-tags-field > div > input {
  min-width: 170px;
  height: 30px;
  flex: 1;
  border: 0;
  padding: 0 5px;
  background: transparent;
}

.anno-source-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.anno-create-footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding: 17px 24px;
  border-top: 1.5px solid var(--ink, #181818);
  background: var(--anno-soft);
}

.anno-axis-card {
  position: sticky;
  top: 18px;
}

.anno-axis-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px;
  border-bottom: 1.5px solid var(--ink, #181818);
  background: var(--anno-soft);
}

.anno-axis-heading h3 {
  margin: 3px 0 0;
  font-size: 18px;
}

.anno-axis-heading > span {
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  padding: 7px 9px;
  background: #faf8f2;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.anno-axis-list {
  padding: 9px 12px;
}

.anno-axis-list > button {
  display: grid;
  width: 100%;
  grid-template-columns: 12px minmax(0, 1fr) 26px 25px;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  border: 1.5px solid transparent;
  border-bottom-color: var(--anno-line);
  padding: 8px 9px;
  background: transparent;
  color: var(--ink, #181818);
  font: inherit;
  text-align: left;
}

.anno-axis-list > button.is-active {
  border-color: var(--ink, #181818);
  border-radius: 5px;
  background: #fff7d9;
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.anno-axis-list i,
.anno-library-filters i {
  width: 10px;
  height: 10px;
  border: 1px solid var(--ink, #181818);
}

.anno-axis-list span {
  font-size: 9px;
  font-weight: 780;
}

.anno-axis-list strong {
  font-size: 9px;
  text-align: right;
}

.anno-axis-list b {
  font-size: 8px;
  letter-spacing: 1px;
}

.axis-1 { background: var(--anno-yellow); }
.axis-2 { background: #1d1d1d; }
.axis-3 { background: #8e8a82; }
.axis-4 { background: #d5d1c7; }
.axis-5 { background: #faf8f2; }

.anno-axis-create {
  margin: 9px 18px 17px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 6px;
  padding: 15px;
  background: var(--anno-soft);
}

.anno-axis-create .anno-field {
  margin-top: 12px;
}

.anno-axis-colors {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 15px;
}

.anno-axis-colors > span {
  margin-right: auto;
}

.anno-axis-colors button {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 3px;
  padding: 0;
  background: var(--anno-yellow);
}

.anno-axis-colors button:nth-of-type(2) { background: #1d1d1d; }
.anno-axis-colors button:nth-of-type(3) { background: #8e8a82; }
.anno-axis-colors button:nth-of-type(4) { background: #faf8f2; }

.anno-axis-colors button.is-active {
  box-shadow: 2px 2px 0 var(--ink, #181818);
  transform: translate(-1px, -1px);
}

.anno-axis-create > .dark-action {
  width: 100%;
}

.anno-axis-card > footer {
  border-top: 1px solid var(--anno-line);
  padding: 14px 18px;
}

.anno-axis-card > footer button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 8px;
  font-weight: 900;
  text-decoration: underline;
}

.anno-library-toolbar {
  display: grid;
  grid-template-columns: minmax(240px, 1.5fr) minmax(180px, .85fr) minmax(150px, .7fr);
  align-items: end;
  gap: 12px;
  margin-bottom: 20px;
  padding: 17px 20px;
}

.anno-library-toolbar label {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.anno-library-toolbar label span {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.anno-library-toolbar input,
.anno-library-toolbar select {
  box-sizing: border-box;
  width: 100%;
  height: 41px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 11px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
}

.anno-library-layout {
  display: grid;
  grid-template-columns: minmax(225px, .52fr) minmax(0, 2fr);
  gap: 22px;
  align-items: start;
}

.anno-library-filters {
  position: sticky;
  top: 18px;
  overflow: hidden;
}

.anno-library-filters > .eyebrow {
  margin: 0;
  padding: 19px 18px 14px;
  border-bottom: 1px solid var(--anno-line);
  background: var(--anno-soft);
}

.anno-library-filters > button {
  display: flex;
  width: calc(100% - 20px);
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 10px;
  border: 1.5px solid transparent;
  border-bottom-color: var(--anno-line);
  padding: 8px 9px;
  background: transparent;
  color: var(--ink, #181818);
  font: inherit;
  text-align: left;
}

.anno-library-filters > button.is-active {
  margin-top: 9px;
  border-color: var(--ink, #181818);
  border-radius: 5px;
  background: var(--anno-yellow);
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.anno-library-filters > button span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 8.5px;
  font-weight: 770;
}

.anno-library-filters > button strong {
  font-size: 9px;
}

.anno-library-filters > footer {
  margin-top: 9px;
  padding: 14px 18px;
  border-top: 1px solid var(--anno-line);
  background: var(--anno-soft);
  color: #625f57;
  font-size: 7.5px;
}

.anno-repertory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.anno-repertory-card {
  display: flex;
  min-height: 230px;
  flex-direction: column;
  border-top-width: 7px;
  padding: 20px;
}

.anno-repertory-card:nth-child(2) { border-top-color: #8e8a82; }
.anno-repertory-card:nth-child(3) { border-top-color: #d5d1c7; }
.anno-repertory-card:nth-child(4) { border-top-color: #1d1d1d; }

.anno-repertory-card.anno-featured {
  grid-column: 1 / -1;
  min-height: 210px;
  border-top-color: var(--anno-yellow);
}

.anno-repertory-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.anno-repertory-top > div:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.anno-repertory-top > div:first-child span {
  border: 1px solid var(--ink, #181818);
  border-radius: 4px;
  padding: 5px 7px;
  background: #fff7d9;
  font-size: 7px;
  font-weight: 850;
}

.anno-repertory-top > div:last-child {
  display: flex;
  gap: 6px;
}

.anno-repertory-top > div:last-child button {
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  padding: 6px 8px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 7.5px;
  font-weight: 850;
}

.anno-repertory-top > div:last-child button.danger {
  background: #e7e3db;
}

.anno-repertory-card h3 {
  margin: 18px 0 9px;
  font-size: 17px;
  line-height: 1.18;
}

.anno-repertory-card > p {
  margin: 0;
  color: #4f4c45;
  font-size: 9px;
  line-height: 1.6;
}

.anno-repertory-card > footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: auto -20px -20px;
  padding: 14px 20px;
  border-top: 1px solid var(--anno-line);
  background: var(--anno-soft);
}

.anno-repertory-card > footer > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.anno-repertory-card > footer span {
  color: #625f57;
  font-size: 7px;
  font-weight: 850;
  text-transform: uppercase;
}

.anno-repertory-card > footer strong {
  font-size: 8px;
  overflow-wrap: anywhere;
}

@media (max-width: 1080px) {
  .anno-create-layout,
  .anno-library-layout {
    grid-template-columns: 1fr;
  }

  .anno-axis-card,
  .anno-library-filters {
    position: static;
  }

  .anno-library-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 10px;
  }

  .anno-library-filters > .eyebrow,
  .anno-library-filters > footer {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .anno-page-heading {
    align-items: stretch;
  }

  .anno-page-heading > div:last-child {
    display: grid;
    grid-template-columns: 1fr;
  }

  .anno-mode-tabs {
    grid-template-columns: 1fr;
  }

  .anno-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .anno-summary-strip > div {
    min-height: 88px;
    padding: 15px 17px;
  }

  .anno-summary-strip > div:nth-child(2) {
    border-right: 0;
  }

  .anno-summary-strip > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--anno-line);
  }

  .anno-summary-strip strong {
    font-size: 19px;
  }

  .anno-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .anno-source-fields,
  .anno-library-toolbar,
  .anno-repertory-grid,
  .anno-library-filters {
    grid-template-columns: 1fr;
  }

  .anno-create-fields,
  .anno-create-footer {
    padding-right: 20px;
    padding-left: 20px;
  }

  .anno-create-footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .anno-create-footer button {
    width: 100%;
  }

  .anno-library-toolbar {
    padding: 18px;
  }

  .anno-library-filters > .eyebrow,
  .anno-library-filters > footer {
    grid-column: auto;
  }

  .anno-repertory-card.anno-featured {
    grid-column: auto;
  }

  .anno-repertory-top {
    align-items: stretch;
    flex-direction: column;
  }

  .anno-repertory-top > div:last-child {
    width: 100%;
  }

  .anno-repertory-top > div:last-child button {
    flex: 1;
  }

  .anno-repertory-card > footer {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   GRÁFICOS — evolução por tipo e modelo de simulado
   ========================================================= */

[data-screen="graficos"] {
  --graphx-soft: #f0eee8;
  --graphx-line: #c9c5ba;
  --graphx-yellow: #f5ca3d;
}

.graphx-page-heading {
  align-items: flex-end;
}

.graphx-mode-tabs,
.graphx-toolbar,
.graphx-context-strip,
.graphx-main-card,
.graphx-subject-card,
.graphx-comparison-card {
  border: 2px solid var(--ink, #181818);
  box-shadow: 6px 6px 0 var(--ink, #181818);
}

.graphx-mode-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 22px;
  padding: 8px;
  background: var(--graphx-soft);
}

.graphx-mode-tabs > button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 66px;
  border: 1.5px solid transparent;
  border-radius: 5px;
  padding: 10px 13px;
  background: transparent;
  color: var(--ink, #181818);
  font: inherit;
  text-align: left;
}

.graphx-mode-tabs > button > span {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  background: #faf8f2;
  font-size: 9px;
  font-weight: 900;
}

.graphx-mode-tabs strong,
.graphx-mode-tabs small {
  display: block;
}

.graphx-mode-tabs strong {
  font-size: 11px;
}

.graphx-mode-tabs small {
  margin-top: 3px;
  color: #68645c;
  font-size: 8px;
}

.graphx-mode-tabs > button.is-active {
  border-color: var(--ink, #181818);
  background: var(--graphx-yellow);
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.graphx-mode-tabs > button.is-active > span {
  background: #fffdf8;
}

.graphx-toolbar {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(160px, .6fr) minmax(170px, .7fr);
  align-items: end;
  gap: 14px;
  margin-bottom: 20px;
  padding: 18px 20px;
}

.graphx-toolbar > label,
.graphx-toolbar-count,
.graphx-toolbar-period {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 7px;
}

.graphx-toolbar span,
.graphx-axis-control > span {
  color: #625f57;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.graphx-toolbar select {
  box-sizing: border-box;
  width: 100%;
  height: 43px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 11px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 10px;
  font-weight: 720;
}

.graphx-toolbar-count,
.graphx-toolbar-period {
  min-height: 43px;
  justify-content: center;
  border-left: 1px solid var(--graphx-line);
  padding-left: 18px;
}

.graphx-toolbar-count strong,
.graphx-toolbar-period strong {
  font-size: 13px;
}

.graphx-context-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
  overflow: hidden;
}

.graphx-context-strip > div {
  display: grid;
  min-height: 88px;
  align-content: center;
  grid-template-columns: 1fr auto;
  padding: 16px 21px;
  border-right: 1px solid var(--graphx-line);
}

.graphx-context-strip > div:last-child {
  border-right: 0;
}

.graphx-context-strip span {
  grid-column: 1 / -1;
  margin-bottom: 5px;
  color: #625f57;
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

.graphx-context-strip strong {
  font-size: 18px;
}

.graphx-context-strip small {
  align-self: end;
  color: #68645c;
  font-size: 8px;
}

.graphx-main-card {
  margin-bottom: 30px;
  overflow: hidden;
}

.graphx-card-heading,
.graphx-comparison-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 21px 24px;
  border-bottom: 1.5px solid var(--ink, #181818);
  background: var(--graphx-soft);
}

.graphx-card-heading h2,
.graphx-comparison-heading h2 {
  margin: 3px 0 5px;
  font-size: 21px;
}

.graphx-card-heading > div > span {
  color: #68645c;
  font-size: 8px;
}

.graphx-axis-control {
  display: flex;
  min-width: 145px;
  flex-direction: column;
  gap: 6px;
}

.graphx-axis-control select {
  height: 39px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 9px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 9px;
  font-weight: 750;
}

.graphx-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(240px, .62fr);
  gap: 0;
}

.graphx-chart-shell {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  min-height: 360px;
  padding: 30px 26px 22px 18px;
  border-right: 1px solid var(--graphx-line);
}

.graphx-y-labels {
  display: flex;
  height: 250px;
  flex-direction: column;
  justify-content: space-between;
  color: #68645c;
  font-size: 7px;
  font-weight: 750;
}

.graphx-chart-area {
  min-width: 0;
}

.graphx-chart-area svg {
  display: block;
  width: 100%;
  height: 250px;
  overflow: visible;
}

.graphx-grid-lines line,
.graphx-mini-chart .graphx-grid-lines line {
  stroke: #cbc7bd;
  stroke-dasharray: 5 6;
  stroke-width: 1;
}

.graphx-area-fill {
  fill: rgba(245, 202, 61, .15);
}

.graphx-main-line {
  fill: none;
  stroke: var(--ink, #181818);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 5;
}

.graphx-points circle {
  fill: var(--graphx-yellow);
  stroke: var(--ink, #181818);
  stroke-width: 3;
}

.graphx-x-labels {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
  color: #625f57;
  font-size: 7px;
  font-weight: 800;
  text-align: center;
}

.graphx-record-list {
  padding: 12px 18px;
}

.graphx-record-list > div {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 37px;
  align-items: center;
  gap: 10px;
  min-height: 61px;
  border: 1.5px solid transparent;
  border-bottom-color: var(--graphx-line);
  padding: 8px;
}

.graphx-record-list > div.is-current {
  border-color: var(--ink, #181818);
  border-radius: 5px;
  background: #fff7d9;
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.graphx-record-list > div > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--ink, #181818);
  border-radius: 4px;
  font-size: 7px;
  font-weight: 900;
}

.graphx-record-list strong,
.graphx-record-list small {
  display: block;
}

.graphx-record-list strong {
  font-size: 8.5px;
}

.graphx-record-list small {
  margin-top: 3px;
  color: #68645c;
  font-size: 7px;
}

.graphx-record-list > div > b {
  font-size: 10px;
  text-align: right;
}

.graphx-subject-section {
  margin-bottom: 30px;
}

.graphx-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.graphx-section-heading h2 {
  margin: 3px 0 0;
  font-size: 23px;
}

.graphx-section-heading > span {
  color: #625f57;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.graphx-subject-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.graphx-subject-card {
  overflow: hidden;
}

.graphx-subject-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 17px 18px;
  border-bottom: 1px solid var(--graphx-line);
  background: var(--graphx-soft);
}

.graphx-subject-heading > div:first-child {
  display: flex;
  align-items: center;
  gap: 11px;
}

.graphx-subject-index {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 4px;
  background: var(--graphx-yellow);
  box-shadow: 3px 3px 0 var(--ink, #181818);
  font-size: 8px;
  font-weight: 900;
}

.graphx-subject-index.neutral { background: #8e8a82; }
.graphx-subject-index.light { background: #d5d1c7; }
.graphx-subject-index.dark { background: #1d1d1d; color: #fffdf8; }

.graphx-subject-heading h3 {
  margin: 0 0 4px;
  font-size: 15px;
}

.graphx-subject-heading small {
  color: #68645c;
  font-size: 7px;
}

.graphx-subject-heading .graphx-axis-control {
  min-width: 125px;
}

.graphx-mini-chart {
  position: relative;
  padding: 30px 22px 17px;
}

.graphx-mini-value {
  position: absolute;
  top: 17px;
  right: 23px;
  font-size: 15px;
  font-weight: 900;
}

.graphx-mini-chart svg {
  display: block;
  width: 100%;
  height: 150px;
}

.graphx-mini-chart svg > path {
  fill: none;
  stroke: var(--ink, #181818);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.graphx-mini-chart svg > g:last-child circle {
  fill: var(--graphx-yellow);
  stroke: var(--ink, #181818);
  stroke-width: 2.5;
}

.graphx-mini-chart > div {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  color: #625f57;
  font-size: 7px;
  font-weight: 800;
  text-align: center;
}

.graphx-comparison-card {
  margin-bottom: 28px;
  overflow: hidden;
}

.graphx-comparison-table {
  padding: 0 24px 18px;
}

.graphx-comparison-table > div {
  display: grid;
  grid-template-columns: minmax(150px, 1.3fr) repeat(5, minmax(85px, .72fr));
  align-items: center;
  gap: 12px;
  min-height: 54px;
  border-bottom: 1px solid var(--graphx-line);
  font-size: 9px;
}

.graphx-comparison-table .graphx-table-head {
  min-height: 40px;
  color: #625f57;
  font-size: 7.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.graphx-comparison-table > div:not(.graphx-table-head) > span,
.graphx-comparison-table > div:not(.graphx-table-head) > b {
  text-align: center;
}

.graphx-comparison-table > div.is-current {
  margin: 0 -10px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 10px;
  background: #fff7d9;
}

@media (max-width: 1080px) {
  .graphx-main-layout {
    grid-template-columns: 1fr;
  }

  .graphx-chart-shell {
    border-right: 0;
    border-bottom: 1px solid var(--graphx-line);
  }

  .graphx-record-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }
}

@media (max-width: 700px) {
  .graphx-mode-tabs,
  .graphx-toolbar,
  .graphx-context-strip,
  .graphx-subject-grid {
    grid-template-columns: 1fr;
  }

  .graphx-context-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .graphx-context-strip > div {
    min-height: 82px;
    padding: 14px 16px;
  }

  .graphx-context-strip > div:nth-child(2) {
    border-right: 0;
  }

  .graphx-context-strip > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--graphx-line);
  }

  .graphx-toolbar-count,
  .graphx-toolbar-period {
    border-left: 0;
    border-top: 1px solid var(--graphx-line);
    padding: 12px 0 0;
  }

  .graphx-card-heading,
  .graphx-section-heading,
  .graphx-comparison-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .graphx-axis-control {
    width: 100%;
  }

  .graphx-chart-shell {
    grid-template-columns: 25px minmax(0, 1fr);
    min-height: 290px;
    padding: 24px 16px 18px 10px;
  }

  .graphx-y-labels,
  .graphx-chart-area svg {
    height: 195px;
  }

  .graphx-x-labels {
    font-size: 6px;
  }

  .graphx-record-list {
    grid-template-columns: 1fr;
  }

  .graphx-subject-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .graphx-subject-heading .graphx-axis-control {
    min-width: 0;
  }

  .graphx-comparison-table {
    padding: 0;
  }

  .graphx-comparison-table .graphx-table-head {
    display: none;
  }

  .graphx-comparison-table > div {
    grid-template-columns: minmax(130px, 1fr) auto;
    gap: 8px;
    min-height: 124px;
    padding: 15px 20px;
  }

  .graphx-comparison-table > div > strong {
    grid-column: 1 / -1;
    font-size: 11px;
  }

  .graphx-comparison-table > div > span {
    text-align: left !important;
  }

  .graphx-comparison-table > div > span::before {
    display: inline-block;
    min-width: 78px;
    color: #625f57;
    font-size: 7px;
    font-weight: 900;
  }

  .graphx-comparison-table > div > span:nth-child(2)::before { content: "Matemática"; }
  .graphx-comparison-table > div > span:nth-child(3)::before { content: "Português"; }
  .graphx-comparison-table > div > span:nth-child(4)::before { content: "Biologia"; }
  .graphx-comparison-table > div > span:nth-child(5)::before { content: "Física"; }

  .graphx-comparison-table > div > b {
    grid-column: 2;
    grid-row: 1;
    text-align: right !important;
  }

  .graphx-comparison-table > div.is-current {
    margin: 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
}

/* =========================================================
   TEMPO DE ESTUDO — cronômetros e histórico
   ========================================================= */

[data-screen="tempo"] {
  --timex-soft: #f0eee8;
  --timex-line: #c9c5ba;
  --timex-yellow: #f5ca3d;
}

.timex-page-heading {
  align-items: flex-end;
}

.timex-summary-strip,
.timex-active-card,
.timex-new-subject-card,
.timex-subject-card,
.timex-history-card {
  border: 2px solid var(--ink, #181818);
  box-shadow: 6px 6px 0 var(--ink, #181818);
}

.timex-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 30px;
  overflow: hidden;
}

.timex-summary-strip > div {
  display: flex;
  min-height: 104px;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 19px 24px;
  border-right: 1px solid var(--timex-line);
}

.timex-summary-strip > div:last-child {
  border-right: 0;
}

.timex-summary-strip span,
.timex-section-heading > span {
  color: #625f57;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.timex-summary-strip strong {
  max-width: 100%;
  margin: 5px 0 3px;
  font-size: 21px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.timex-summary-strip small {
  color: #68645c;
  font-size: 8px;
}

.timex-timers-section,
.timex-history-section {
  margin-bottom: 30px;
}

.timex-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.timex-section-heading h2 {
  margin: 3px 0 0;
  font-size: 23px;
}

.timex-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .72fr);
  gap: 22px;
  margin-bottom: 22px;
  align-items: stretch;
}

.timex-active-card,
.timex-new-subject-card,
.timex-subject-card,
.timex-history-card {
  overflow: hidden;
}

.timex-active-card {
  background: #fffdf8;
}

.timex-active-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 23px;
  border-bottom: 1.5px solid var(--ink, #181818);
  background: var(--timex-soft);
}

.timex-active-heading > div:first-child {
  display: flex;
  align-items: center;
  gap: 12px;
}

.timex-active-heading h3 {
  margin: 3px 0 0;
  font-size: 19px;
}

.timex-subject-marker {
  display: inline-block;
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 3px;
  background: var(--timex-yellow);
}

.timex-subject-marker.active,
.timex-day-subjects i.active { background: var(--timex-yellow); }
.timex-subject-marker.gray,
.timex-day-subjects i.gray { background: #8e8a82; }
.timex-subject-marker.light,
.timex-day-subjects i.light { background: #d5d1c7; }
.timex-subject-marker.dark,
.timex-day-subjects i.dark { background: #1d1d1d; }

.timex-running-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 8px 10px;
  background: #fff7d9;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.timex-running-status i {
  width: 8px;
  height: 8px;
  border: 1px solid var(--ink, #181818);
  border-radius: 50%;
  background: var(--timex-yellow);
  box-shadow: 0 0 0 3px rgba(245, 202, 61, .25);
}

.timex-clock {
  padding: 27px 22px 13px;
  font-size: clamp(46px, 6vw, 76px);
  font-weight: 950;
  letter-spacing: -.06em;
  line-height: 1;
  text-align: center;
}

.timex-clock span {
  color: var(--timex-yellow);
  -webkit-text-stroke: 1.5px var(--ink, #181818);
}

.timex-session-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 10px 18px 18px;
  color: #625f57;
  font-size: 8px;
}

.timex-session-meta i {
  width: 1px;
  height: 17px;
  background: var(--timex-line);
}

.timex-session-meta strong {
  margin-left: 4px;
  color: var(--ink, #181818);
}

.timex-active-actions {
  display: flex;
  justify-content: center;
  gap: 9px;
  padding: 0 22px 23px;
}

.timex-active-actions .dark-action {
  min-width: 190px;
}

.timex-active-card > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 22px;
  border-top: 1px solid var(--timex-line);
  background: var(--timex-soft);
  color: #625f57;
  font-size: 7.5px;
}

.timex-active-card > footer strong {
  color: var(--ink, #181818);
}

.timex-new-subject-card {
  display: flex;
  flex-direction: column;
  padding: 21px;
  background: var(--timex-soft);
}

.timex-new-subject-card > div:first-child h3 {
  margin: 4px 0 5px;
  font-size: 18px;
}

.timex-new-subject-card > div:first-child > span {
  color: #68645c;
  font-size: 8px;
}

.timex-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 20px;
}

.timex-field > span,
.timex-color-picker > span {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.timex-field input {
  box-sizing: border-box;
  width: 100%;
  height: 43px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 11px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 10px;
  font-weight: 720;
}

.timex-color-picker {
  margin-top: 17px;
}

.timex-color-picker > div {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}

.timex-color-picker button {
  width: 26px;
  height: 26px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 3px;
  padding: 0;
  background: var(--timex-yellow);
}

.timex-color-picker button:nth-child(2) { background: #1d1d1d; }
.timex-color-picker button:nth-child(3) { background: #8e8a82; }
.timex-color-picker button:nth-child(4) { background: #d5d1c7; }
.timex-color-picker button:nth-child(5) { background: #faf8f2; }
.timex-color-picker button:nth-child(6) { background: #bdb8ad; }

.timex-color-picker button.is-active {
  box-shadow: 3px 3px 0 var(--ink, #181818);
  transform: translate(-1px, -1px);
}

.timex-new-subject-card > footer {
  display: grid;
  grid-template-columns: .7fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 22px;
}

.timex-subject-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.timex-subject-card {
  padding: 17px;
}

.timex-subject-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.timex-subject-heading > div {
  display: flex;
  align-items: center;
  gap: 9px;
}

.timex-subject-heading strong {
  font-size: 10px;
}

.timex-subject-heading > button {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 1px solid var(--ink, #181818);
  border-radius: 4px;
  background: var(--timex-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 900;
}

.timex-subject-time {
  margin: 20px 0 5px;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 950;
  letter-spacing: -.04em;
}

.timex-subject-share {
  display: block;
  margin-bottom: 17px;
  color: #68645c;
  font-size: 7.5px;
}

.timex-subject-card > .outline-action {
  width: 100%;
}

.timex-history-tabs {
  display: flex;
  gap: 7px;
}

.timex-history-tabs button {
  height: 39px;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 0 16px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
  font-size: 9px;
  font-weight: 850;
}

.timex-history-tabs button.is-active {
  background: var(--timex-yellow);
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.timex-history-nav {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 13px;
  padding: 17px 20px;
  border-bottom: 1.5px solid var(--ink, #181818);
  background: var(--timex-soft);
}

.timex-history-nav > button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  background: #faf8f2;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
}

.timex-history-nav > div {
  text-align: center;
}

.timex-history-nav span,
.timex-day-heading .eyebrow {
  display: block;
  color: #625f57;
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

.timex-history-nav strong {
  display: block;
  margin-top: 4px;
  font-size: 13px;
}

.timex-history-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(270px, .72fr);
}

.timex-week-panel {
  padding: 22px;
  border-right: 1px solid var(--timex-line);
}

.timex-intensity-legend {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  margin-bottom: 14px;
  color: #625f57;
  font-size: 7px;
}

.timex-intensity-legend i {
  width: 13px;
  height: 13px;
  border: 1px solid var(--ink, #181818);
  background: rgba(245, 202, 61, .12);
}

.timex-intensity-legend i:nth-of-type(2) { background: rgba(245, 202, 61, .3); }
.timex-intensity-legend i:nth-of-type(3) { background: rgba(245, 202, 61, .5); }
.timex-intensity-legend i:nth-of-type(4) { background: rgba(245, 202, 61, .75); }
.timex-intensity-legend i:nth-of-type(5) { background: var(--timex-yellow); }

.timex-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.timex-week-grid > button {
  display: flex;
  min-height: 148px;
  flex-direction: column;
  align-items: center;
  border: 1.5px solid var(--ink, #181818);
  border-radius: 5px;
  padding: 10px 8px;
  background: #faf8f2;
  color: var(--ink, #181818);
  font: inherit;
}

.timex-week-grid > button.is-selected {
  background: #fff7d9;
  box-shadow: 3px 3px 0 var(--ink, #181818);
}

.timex-week-grid > button > span {
  font-size: 7px;
  font-weight: 900;
}

.timex-week-grid > button > strong {
  margin-top: 5px;
  font-size: 15px;
}

.timex-week-grid > button > i {
  width: 100%;
  height: 58px;
  margin: 12px 0 9px;
  border: 1px solid var(--ink, #181818);
  background: rgba(245, 202, 61, var(--intensity));
}

.timex-week-grid > button > small {
  color: #4f4c45;
  font-size: 7px;
  font-weight: 800;
}

.timex-week-total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-top: 17px;
  border: 1px solid var(--timex-line);
  border-radius: 5px;
  padding: 13px 15px;
  background: var(--timex-soft);
}

.timex-week-total span {
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.timex-week-total strong {
  grid-row: 1 / 3;
  grid-column: 2;
  font-size: 18px;
}

.timex-week-total small {
  margin-top: 4px;
  color: #68645c;
  font-size: 7px;
}

.timex-day-detail {
  display: flex;
  flex-direction: column;
}

.timex-day-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  padding: 21px 20px;
  border-bottom: 1px solid var(--timex-line);
  background: var(--timex-soft);
}

.timex-day-heading h3 {
  margin: 5px 0 0;
  font-size: 14px;
}

.timex-day-heading > strong {
  font-size: 20px;
}

.timex-day-subjects {
  padding: 10px 18px;
}

.timex-day-subjects > div {
  display: grid;
  grid-template-columns: minmax(90px, 1fr) 48px 28px;
  align-items: center;
  gap: 8px;
  min-height: 64px;
  border-bottom: 1px solid var(--timex-line);
}

.timex-day-subjects > div > span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  font-weight: 750;
}

.timex-day-subjects > div > span i {
  width: 9px;
  height: 9px;
  border: 1px solid var(--ink, #181818);
}

.timex-day-subjects > div > strong,
.timex-day-subjects > div > b {
  font-size: 8px;
  text-align: right;
}

.timex-day-subjects > div > em {
  grid-column: 1 / -1;
  display: block;
  height: 5px;
  border: 1px solid var(--ink, #181818);
  background: #e6e2d8;
}

.timex-day-subjects > div > em i {
  display: block;
  height: 100%;
  background: var(--timex-yellow);
}

.timex-day-detail > footer {
  margin-top: auto;
  padding: 14px 18px;
  border-top: 1px solid var(--timex-line);
  background: var(--timex-soft);
  color: #625f57;
  font-size: 7.5px;
}

@media (max-width: 1080px) {
  .timex-workspace,
  .timex-history-layout {
    grid-template-columns: 1fr;
  }

  .timex-week-panel {
    border-right: 0;
    border-bottom: 1px solid var(--timex-line);
  }
}

@media (max-width: 700px) {
  .timex-page-heading {
    align-items: stretch;
  }

  .timex-page-heading .dark-action {
    width: 100%;
  }

  .timex-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timex-summary-strip > div {
    min-height: 90px;
    padding: 15px 17px;
  }

  .timex-summary-strip > div:nth-child(2) {
    border-right: 0;
  }

  .timex-summary-strip > div:nth-child(-n+2) {
    border-bottom: 1px solid var(--timex-line);
  }

  .timex-summary-strip strong {
    font-size: 17px;
  }

  .timex-section-heading,
  .timex-active-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .timex-clock {
    font-size: 49px;
  }

  .timex-session-meta,
  .timex-active-actions,
  .timex-active-card > footer {
    align-items: stretch;
    flex-direction: column;
  }

  .timex-session-meta i {
    width: 100%;
    height: 1px;
  }

  .timex-active-actions button {
    width: 100%;
  }

  .timex-subject-grid {
    grid-template-columns: 1fr;
  }

  .timex-history-tabs {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .timex-history-tabs button {
    padding: 0 8px;
  }

  .timex-week-panel {
    padding: 18px;
  }

  .timex-week-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .timex-week-grid > button {
    min-height: 120px;
  }

  .timex-week-grid > button > i {
    height: 40px;
  }
}

/* Cronograma — grade semanal e editor de blocos */
.crx-screen {
  --crx-yellow: #f7cb45;
  --crx-ink: #1d1d1b;
  --crx-paper: #fbfaf6;
  padding-bottom: 48px;
}

.crx-header { align-items: flex-end; }
.crx-header h1 { margin-bottom: 5px; }

.crx-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
  overflow: hidden;
  border: 2px solid var(--crx-ink);
  border-radius: 14px;
  background: var(--crx-paper);
  box-shadow: 6px 6px 0 var(--crx-ink);
}

.crx-summary > div {
  min-height: 102px;
  padding: 19px 21px 16px;
  border-right: 1px solid var(--crx-ink);
}

.crx-summary > div:last-child { border-right: 0; }
.crx-summary > div.is-accent { background: #fff7d8; }
.crx-summary span, .crx-summary small { display: block; }

.crx-summary span {
  margin-bottom: 9px;
  color: #5b594f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.crx-summary strong {
  display: block;
  margin-bottom: 5px;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1;
}

.crx-summary small { color: #6e6b62; font-size: 10px; }

.crx-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 318px;
  align-items: start;
  gap: 18px;
}

.crx-board, .crx-editor, .crx-today, .crx-load {
  padding: 0;
  overflow: hidden;
}

.crx-board-head {
  display: flex;
  min-height: 96px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--crx-ink);
}

.crx-board-head h2, .crx-editor h2, .crx-bottom h2 {
  margin: 3px 0 4px;
  font-size: 20px;
}

.crx-board-head > div:first-child > span { color: #68665f; font-size: 11px; }

.crx-board-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.crx-board-actions label > span {
  display: block;
  margin: 0 0 5px 2px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.crx-board-actions input {
  width: 90px;
  height: 39px;
  padding: 0 12px;
  border: 1px solid var(--crx-ink);
  border-radius: 7px;
  background: #f7f5ee;
  color: var(--crx-ink);
  font: 800 12px inherit;
}

.crx-board-actions button { min-height: 39px; }

.crx-legend {
  display: flex;
  min-height: 45px;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  border-bottom: 1px solid #c5c1b7;
  background: #f0eee7;
}

.crx-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #55534d;
  font-size: 9px;
  font-weight: 800;
}

.crx-legend i {
  width: 10px;
  height: 10px;
  border: 1px solid var(--crx-ink);
  border-radius: 2px;
}

.crx-legend i.yellow { background: var(--crx-yellow); }
.crx-legend i.dark { background: var(--crx-ink); }
.crx-legend i.gray { background: #aaa79f; }
.crx-legend i.white { background: #fff; }

.crx-legend b {
  margin-left: auto;
  color: var(--crx-ink);
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.crx-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  background: #e7e4dc;
}

.crx-table {
  display: grid;
  grid-template-columns: 66px repeat(7, minmax(105px, 1fr));
  min-width: 830px;
  gap: 1px;
  background: #b8b4aa;
}

.crx-corner, .crx-day, .crx-time, .crx-slot {
  min-height: 84px;
  background: var(--crx-paper);
}

.crx-corner, .crx-day { min-height: 59px; }
.crx-corner, .crx-day { display: flex; align-items: center; justify-content: center; }

.crx-corner span, .crx-day span {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.crx-day { flex-direction: column; gap: 4px; }
.crx-day span { color: #77746b; }
.crx-day strong { font-size: 10px; }
.crx-day.is-today { background: var(--crx-yellow); }
.crx-day.is-today span { color: var(--crx-ink); }
.crx-day.weekend { background: #eceae4; }

.crx-time {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background: #eceae4;
}

.crx-time strong { font-size: 10px; }

.crx-time button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #8c8981;
  font-size: 13px;
  line-height: 1;
}

.crx-slot {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  border: 0;
  border-left: 5px solid transparent;
  border-radius: 0;
  color: var(--crx-ink);
  text-align: left;
}

.crx-slot strong, .crx-slot small {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crx-slot strong { font-size: 10px; }
.crx-slot small { color: #67645d; font-size: 8px; }
.crx-slot.questions { border-left-color: var(--crx-yellow); background: #fff7d8; }
.crx-slot.theory { border-left-color: var(--crx-ink); background: #f8f7f2; }
.crx-slot.review { border-left-color: #89867e; background: #eeece6; }

.crx-slot.rest {
  align-items: center;
  border-left: 0;
  background: #e5e3dc;
  color: #747169;
  text-align: center;
}

.crx-slot.empty {
  align-items: center;
  border-left: 0;
  background: #fbfaf6;
  color: #aaa79e;
  font-size: 18px;
  text-align: center;
}

.crx-slot.is-selected {
  position: relative;
  z-index: 1;
  border-left-color: var(--crx-yellow);
  background: var(--crx-ink);
  color: #fff;
  box-shadow: inset 0 0 0 2px var(--crx-yellow);
}

.crx-slot.is-selected small { color: #d5d1c7; }

.crx-editor {
  position: sticky;
  top: 76px;
  border-color: var(--crx-ink);
}

.crx-editor > header {
  display: flex;
  min-height: 81px;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  border-bottom: 1px solid var(--crx-ink);
  background: var(--crx-yellow);
}

.crx-editor > header button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--crx-ink);
  border-radius: 6px;
  background: #fff;
  font-size: 18px;
}

.crx-editor-preview {
  display: flex;
  min-height: 70px;
  align-items: center;
  gap: 12px;
  margin: 18px;
  padding: 13px;
  border: 1px solid var(--crx-ink);
  border-radius: 8px;
  background: #f4f2ec;
}

.crx-editor-preview > span {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--crx-ink);
  border-radius: 6px;
  background: var(--crx-yellow);
  font-size: 9px;
  font-weight: 950;
}

.crx-editor-preview div { min-width: 0; }
.crx-editor-preview strong, .crx-editor-preview small { display: block; }
.crx-editor-preview strong { margin-bottom: 3px; font-size: 12px; }
.crx-editor-preview small { color: #6e6b64; font-size: 9px; }

.crx-editor-preview > i {
  width: 5px;
  height: 36px;
  margin-left: auto;
  border-radius: 5px;
  background: var(--crx-yellow);
}

.crx-field, .crx-colors { display: block; margin: 0 18px 18px; }

.crx-field > span, .crx-colors legend {
  display: block;
  margin-bottom: 7px;
  color: #56534d;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.crx-field input, .crx-colors label {
  width: 100%;
  height: 42px;
  border: 1px solid var(--crx-ink);
  border-radius: 7px;
  background: #f7f5ef;
}

.crx-field input {
  padding: 0 12px;
  color: var(--crx-ink);
  font: 700 10px inherit;
}

.crx-field small {
  display: block;
  margin-top: 5px;
  color: #89867e;
  font-size: 8px;
  text-align: right;
}

.crx-colors { padding: 0; border: 0; }

.crx-colors > div {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
  margin-bottom: 9px;
}

.crx-colors > div button {
  height: 34px;
  border: 1px solid var(--crx-ink);
  border-radius: 6px;
}

.crx-colors button.yellow, .crx-colors i.yellow { background: var(--crx-yellow); }
.crx-colors button.dark { background: var(--crx-ink); }
.crx-colors button.gray { background: #96938b; }
.crx-colors button.soft { background: #d8d5cd; }
.crx-colors button.white { background: #fff; }

.crx-colors button.is-active {
  outline: 2px solid var(--crx-ink);
  outline-offset: 2px;
}

.crx-colors label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
}

.crx-colors label i {
  width: 19px;
  height: 19px;
  border: 1px solid var(--crx-ink);
  border-radius: 4px;
}

.crx-colors label input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--crx-ink);
  font: 800 10px monospace;
  outline: 0;
}

.crx-editor-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 18px;
  border-top: 1px dashed #aaa69d;
}

.crx-editor-actions button { width: 100%; }

.crx-clear {
  min-height: 39px;
  border: 1px solid var(--crx-ink);
  border-radius: 7px;
  background: #fff;
  color: var(--crx-ink);
  font-size: 9px;
  font-weight: 900;
}

.crx-editor-note {
  margin: -5px 18px 18px;
  color: #77746d;
  font-size: 8px;
  line-height: 1.45;
  text-align: center;
}

.crx-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr);
  gap: 18px;
  margin-top: 18px;
}

.crx-today > header, .crx-load > header {
  display: flex;
  min-height: 79px;
  align-items: center;
  justify-content: space-between;
  padding: 17px 21px;
  border-bottom: 1px solid var(--crx-ink);
}

.crx-today > header > strong, .crx-load > header > strong { font-size: 22px; }

.crx-today-list > div {
  display: grid;
  grid-template-columns: 48px 12px minmax(0, 1fr) auto;
  min-height: 66px;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid #d0cdc4;
}

.crx-today-list > div:last-child { border-bottom: 0; }
.crx-today-list time { font-size: 10px; font-weight: 900; }

.crx-today-list > div > i {
  width: 9px;
  height: 9px;
  border: 1px solid var(--crx-ink);
  border-radius: 50%;
  background: #fff;
}

.crx-today-list > div.current { background: #fff7d8; }
.crx-today-list > div.current > i { background: var(--crx-yellow); box-shadow: 0 0 0 3px #fff0b9; }
.crx-today-list > div.done > i { background: var(--crx-ink); }
.crx-today-list span strong, .crx-today-list span small { display: block; }
.crx-today-list span strong { margin-bottom: 3px; font-size: 11px; }
.crx-today-list span small { color: #747168; font-size: 9px; }

.crx-today-list b {
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.crx-load { padding-bottom: 18px; }

.crx-load-bars {
  display: grid;
  height: 250px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  gap: 9px;
  padding: 22px 20px 0;
}

.crx-load-bars > div {
  display: grid;
  grid-template-rows: 16px minmax(100px, 1fr) 22px;
  gap: 6px;
  text-align: center;
}

.crx-load-bars span, .crx-load-bars small { font-size: 8px; font-weight: 800; }

.crx-load-bars > div > i {
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid var(--crx-ink);
  border-radius: 5px 5px 2px 2px;
  background: #ebe8e1;
}

.crx-load-bars b {
  width: 100%;
  border-top: 1px solid var(--crx-ink);
  background: #939087;
}

.crx-load-bars .is-today b { background: var(--crx-yellow); }
.crx-load-bars .is-today span { color: var(--crx-ink); font-weight: 950; }

@media (max-width: 1180px) {
  .crx-workspace { grid-template-columns: 1fr; }
  .crx-editor { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crx-editor > header, .crx-editor-actions, .crx-editor-note { grid-column: 1 / -1; }
  .crx-editor-preview { margin-bottom: 18px; }
  .crx-field { margin-top: 18px; }
  .crx-bottom { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .crx-header { align-items: stretch; }
  .crx-header .dark-action { width: 100%; }
  .crx-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crx-summary > div { min-height: 95px; border-bottom: 1px solid var(--crx-ink); }
  .crx-summary > div:nth-child(2) { border-right: 0; }
  .crx-summary > div:nth-child(3), .crx-summary > div:nth-child(4) { border-bottom: 0; }
  .crx-board-head { align-items: stretch; flex-direction: column; }
  .crx-board-actions { display: grid; grid-template-columns: 1fr auto; }
  .crx-board-actions label, .crx-board-actions input { width: 100%; }
  .crx-legend { align-items: flex-start; flex-wrap: wrap; gap: 9px 13px; padding-top: 13px; padding-bottom: 13px; }
  .crx-legend b { width: 100%; margin: 2px 0 0; }
  .crx-editor { display: block; }
  .crx-field { margin-top: 0; }
  .crx-bottom { grid-template-columns: minmax(0, 1fr); }
  .crx-today-list > div { grid-template-columns: 42px 10px minmax(0, 1fr); gap: 9px; padding: 0 14px; }
  .crx-today-list b { grid-column: 3; padding-bottom: 10px; }
  .crx-load-bars { height: 220px; gap: 5px; padding-right: 12px; padding-left: 12px; }
}

/* Arquivos — biblioteca conectada ao Google Drive */
.arx-screen {
  --arx-yellow: #f7cb45;
  --arx-ink: #1d1d1b;
  --arx-paper: #fbfaf6;
  padding-bottom: 48px;
}

.arx-header { align-items: flex-end; }

.arx-drive-status {
  display: grid;
  grid-template-columns: 48px minmax(180px, auto) 1px minmax(220px, 1fr) auto;
  min-height: 84px;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 13px 16px;
  border: 2px solid var(--arx-ink);
  border-radius: 13px;
  background: var(--arx-paper);
  box-shadow: 5px 5px 0 var(--arx-ink);
}

.arx-drive-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 2px solid var(--arx-ink);
  border-radius: 9px;
  background: var(--arx-yellow);
  box-shadow: 3px 3px 0 var(--arx-ink);
}

.arx-drive-mark span { font-size: 19px; font-weight: 950; }
.arx-drive-status > div:nth-child(2) strong, .arx-drive-status > div:nth-child(2) small { display: block; }
.arx-drive-status > div:nth-child(2) strong { margin: 3px 0 4px; font-size: 13px; }
.arx-drive-status > div:nth-child(2) small { color: #69665e; font-size: 9px; }
.arx-drive-status > i { width: 1px; height: 43px; background: #c7c3b9; }

.arx-storage > span {
  display: block;
  height: 7px;
  overflow: hidden;
  margin-bottom: 7px;
  border: 1px solid var(--arx-ink);
  border-radius: 8px;
  background: #e6e3db;
}

.arx-storage > span b { display: block; height: 100%; background: var(--arx-yellow); }
.arx-storage small { color: #69665e; font-size: 9px; }

.arx-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
  overflow: hidden;
  border: 2px solid var(--arx-ink);
  border-radius: 13px;
  background: var(--arx-paper);
  box-shadow: 6px 6px 0 var(--arx-ink);
}

.arx-summary > div {
  min-height: 100px;
  padding: 18px 20px 15px;
  border-right: 1px solid var(--arx-ink);
}

.arx-summary > div:last-child { border-right: 0; }
.arx-summary > div.is-accent { background: #fff7d8; }
.arx-summary span, .arx-summary small { display: block; }

.arx-summary span {
  margin-bottom: 10px;
  color: #5b594f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.arx-summary strong { display: block; margin-bottom: 5px; font-size: 26px; line-height: 1; }
.arx-summary small { color: #6e6b62; font-size: 9px; }

.arx-browser { padding: 0; overflow: hidden; }

.arx-browser-top {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--arx-ink);
}

.arx-breadcrumb {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}

.arx-breadcrumb button {
  padding: 0;
  border: 0;
  background: transparent;
  color: #66635b;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.arx-breadcrumb span { color: #aaa69d; }
.arx-breadcrumb strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.arx-browser-actions { display: flex; align-items: center; gap: 7px; }

.arx-search {
  display: flex;
  width: 220px;
  height: 38px;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid var(--arx-ink);
  border-radius: 7px;
  background: #f5f3ed;
}

.arx-search > span {
  width: 12px;
  height: 12px;
  border: 2px solid var(--arx-ink);
  border-radius: 50%;
}

.arx-search > span::after {
  display: block;
  width: 6px;
  height: 2px;
  margin: 9px 0 0 8px;
  transform: rotate(45deg);
  background: var(--arx-ink);
  content: "";
}

.arx-search input {
  min-width: 0;
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--arx-ink);
  font-size: 9px;
  outline: 0;
}

.arx-view {
  display: grid;
  width: 38px;
  height: 38px;
  grid-template-columns: repeat(2, 5px);
  place-content: center;
  gap: 3px;
  border: 1px solid var(--arx-ink);
  border-radius: 7px;
  background: #fff;
}

.arx-view i { width: 5px; height: 5px; background: var(--arx-ink); }
.arx-view.is-active { background: var(--arx-yellow); }
.arx-view:not(.is-active) { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.arx-view b { width: 15px; height: 2px; background: var(--arx-ink); }

.arx-dropzone {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 108px;
  align-items: center;
  gap: 15px;
  margin: 16px 18px;
  padding: 17px 19px;
  border: 2px dashed #7e7b72;
  border-radius: 11px;
  background: #f1efe8;
}

.arx-drop-icon {
  display: grid;
  position: relative;
  width: 52px;
  height: 46px;
  place-items: center;
}

.arx-drop-icon > span, .arx-folder-icon {
  display: block;
  position: relative;
  width: 44px;
  height: 32px;
  border: 2px solid var(--arx-ink);
  border-radius: 4px;
  background: var(--arx-yellow);
}

.arx-drop-icon > span::before, .arx-folder-icon::before {
  position: absolute;
  top: -8px;
  left: -2px;
  width: 20px;
  height: 8px;
  border: 2px solid var(--arx-ink);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: inherit;
  content: "";
}

.arx-drop-icon > i {
  position: absolute;
  font-size: 19px;
  font-style: normal;
  font-weight: 950;
}

.arx-dropzone > div:nth-child(2) strong, .arx-dropzone > div:nth-child(2) small { display: block; }
.arx-dropzone > div:nth-child(2) strong { margin-bottom: 6px; font-size: 13px; }
.arx-dropzone > div:nth-child(2) small { color: #66635d; font-size: 9px; }
.arx-drop-actions { display: flex; gap: 7px; }

.arx-browser-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  border-top: 1px solid var(--arx-ink);
}

.arx-library { min-width: 0; padding: 20px; }
.arx-section + .arx-section { margin-top: 25px; }

.arx-section > header {
  display: flex;
  min-height: 43px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 12px;
}

.arx-section > header h2 { margin-top: 3px; font-size: 17px; }
.arx-section > header .outline-action { min-height: 36px; }

.arx-folder-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.arx-folder {
  display: flex;
  position: relative;
  min-width: 0;
  min-height: 143px;
  flex-direction: column;
  align-items: flex-start;
  padding: 17px 14px 13px;
  border: 1px solid var(--arx-ink);
  border-radius: 9px;
  background: #f6f4ee;
  box-shadow: 3px 3px 0 var(--arx-ink);
}

.arx-folder.is-selected { background: #fff7d8; box-shadow: 4px 4px 0 var(--arx-yellow), 5px 5px 0 var(--arx-ink); }
.arx-folder-icon { width: 38px; height: 28px; margin: 10px 0 15px; background: #d1cec5; }
.arx-folder.is-selected .arx-folder-icon { background: var(--arx-yellow); }

.arx-more {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 900;
}

.arx-folder div { min-width: 0; width: 100%; }
.arx-folder div strong, .arx-folder div small, .arx-folder > b { display: block; }
.arx-folder div strong { overflow: hidden; margin-bottom: 4px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.arx-folder div small { color: #6b685f; font-size: 8px; }
.arx-folder > b { margin-top: auto; padding-top: 8px; color: #89867e; font-size: 7px; letter-spacing: .03em; text-transform: uppercase; }

.arx-files > header label {
  color: #77746c;
  font-size: 8px;
  font-weight: 800;
  text-transform: uppercase;
}

.arx-files > header select {
  height: 34px;
  margin-left: 7px;
  padding: 0 25px 0 9px;
  border: 1px solid var(--arx-ink);
  border-radius: 6px;
  background: #fff;
  color: var(--arx-ink);
  font-size: 8px;
  font-weight: 800;
}

.arx-file-head, .arx-file {
  display: grid;
  grid-template-columns: minmax(210px, 1.7fr) 70px 75px 90px 28px;
  align-items: center;
  gap: 10px;
}

.arx-file-head {
  min-width: 0;
  min-height: 32px;
  padding: 0 11px 0 56px;
  border-bottom: 1px solid var(--arx-ink);
  color: #77746c;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.arx-file {
  position: relative;
  min-height: 67px;
  padding: 8px 10px 8px 56px;
  border-bottom: 1px solid #d1cec5;
}

.arx-file.is-selected { background: #fff7d8; }

.arx-file-type {
  display: grid;
  width: 34px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--arx-ink);
  border-radius: 5px;
  background: #f1efe8;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: .04em;
}

.arx-file > .arx-file-type {
  position: absolute;
  left: 10px;
}

.arx-file-type.pdf { background: var(--arx-yellow); }
.arx-file-type.img { background: #d5d2ca; }
.arx-file-type.doc { background: #f8f7f2; }
.arx-file-type.zip { background: var(--arx-ink); color: #fff; }
.arx-file > div { min-width: 0; }
.arx-file > div strong, .arx-file > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arx-file > div strong { margin-bottom: 4px; font-size: 10px; }
.arx-file > div small { color: #77746c; font-size: 8px; }
.arx-file > b, .arx-file time { font-size: 8px; font-weight: 700; }

.arx-file > button {
  width: 26px;
  height: 27px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 16px;
  font-weight: 900;
}

.arx-details {
  min-width: 0;
  border-left: 1px solid var(--arx-ink);
  background: #efede6;
}

.arx-details > header {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 17px;
  border-bottom: 1px solid var(--arx-ink);
  background: var(--arx-yellow);
}

.arx-details h2 { margin-top: 3px; font-size: 18px; }

.arx-details > header button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--arx-ink);
  border-radius: 6px;
  background: #fff;
  font-size: 17px;
}

.arx-file-preview {
  display: flex;
  min-height: 104px;
  align-items: center;
  gap: 13px;
  padding: 18px;
  border-bottom: 1px solid #cbc7bd;
}

.arx-file-preview .arx-file-type { width: 46px; height: 54px; flex: 0 0 auto; font-size: 8px; }
.arx-file-preview div { min-width: 0; }
.arx-file-preview strong, .arx-file-preview small { display: block; }
.arx-file-preview strong { margin-bottom: 7px; font-size: 11px; line-height: 1.35; }
.arx-file-preview small { color: #716e66; font-size: 8px; }
.arx-details dl { margin: 0; padding: 8px 18px; }

.arx-details dl > div {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  min-height: 43px;
  align-items: center;
  border-bottom: 1px dashed #c1bdb4;
}

.arx-details dt { color: #77746c; font-size: 8px; font-weight: 800; }
.arx-details dd { overflow: hidden; margin: 0; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.arx-details dd i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border: 1px solid var(--arx-ink); border-radius: 50%; background: #62b87e; }
.arx-detail-actions { display: grid; gap: 7px; padding: 15px 18px; }
.arx-detail-actions button { width: 100%; }

.arx-details > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding: 12px 18px;
  border-top: 1px solid #cbc7bd;
  color: #77746c;
  font-size: 8px;
}

.arx-upload {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  min-height: 81px;
  align-items: center;
  gap: 15px;
  margin-top: 18px;
  padding: 14px 18px;
}

.arx-upload > div strong, .arx-upload > div small, .arx-upload > div i { display: block; }
.arx-upload > div strong { margin-bottom: 4px; font-size: 10px; }
.arx-upload > div small { margin-bottom: 9px; color: #747168; font-size: 8px; }

.arx-upload > div i {
  height: 7px;
  overflow: hidden;
  border: 1px solid var(--arx-ink);
  border-radius: 6px;
  background: #e5e2da;
}

.arx-upload > div i b { display: block; height: 100%; background: var(--arx-yellow); }
.arx-upload > b { font-size: 11px; }

.arx-upload > button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--arx-ink);
  border-radius: 6px;
  background: #fff;
  color: var(--arx-ink);
  font-size: 8px;
  font-weight: 900;
}

@media (max-width: 1180px) {
  .arx-browser-body { grid-template-columns: 1fr; }
  .arx-details { border-top: 1px solid var(--arx-ink); border-left: 0; }
  .arx-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arx-details > header, .arx-details > footer { grid-column: 1 / -1; }
  .arx-file-preview { border-right: 1px solid #cbc7bd; }
  .arx-detail-actions { align-content: center; }
}

@media (max-width: 880px) {
  .arx-drive-status { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .arx-drive-status > i, .arx-storage { display: none; }
  .arx-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arx-summary > div { border-bottom: 1px solid var(--arx-ink); }
  .arx-summary > div:nth-child(2) { border-right: 0; }
  .arx-summary > div:nth-child(3), .arx-summary > div:nth-child(4) { border-bottom: 0; }
  .arx-browser-top { align-items: stretch; flex-direction: column; }
  .arx-browser-actions, .arx-search { width: 100%; }
  .arx-dropzone { grid-template-columns: auto minmax(0, 1fr); }
  .arx-drop-actions { grid-column: 1 / -1; }
  .arx-folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .arx-header { align-items: stretch; }
  .arx-header .header-button-row { display: grid; grid-template-columns: 1fr; }
  .arx-header .header-button-row button { width: 100%; }
  .arx-drive-status { grid-template-columns: 42px minmax(0, 1fr); padding: 13px; }
  .arx-drive-mark { width: 39px; height: 39px; }
  .arx-drive-status > button { grid-column: 1 / -1; width: 100%; }
  .arx-summary > div { min-height: 94px; padding: 16px 14px; }
  .arx-summary strong { font-size: 22px; }
  .arx-browser-actions { display: grid; grid-template-columns: 1fr 38px 38px; }
  .arx-dropzone { grid-template-columns: 1fr; text-align: center; }
  .arx-drop-icon { margin: 0 auto; }
  .arx-drop-actions { display: grid; grid-column: auto; grid-template-columns: 1fr; width: 100%; }
  .arx-library { padding: 15px; }
  .arx-folder-grid { grid-template-columns: 1fr; }
  .arx-folder { min-height: 128px; }
  .arx-files > header { align-items: stretch; flex-direction: column; }
  .arx-files > header label { display: flex; align-items: center; justify-content: space-between; }
  .arx-file-head { display: none; }
  .arx-file {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 76px;
    padding-right: 7px;
  }
  .arx-file > b, .arx-file time { display: none; }
  .arx-details { display: block; }
  .arx-file-preview { border-right: 0; }
  .arx-upload { grid-template-columns: auto minmax(0, 1fr) auto; }
  .arx-upload > button { grid-column: 2 / -1; width: 100%; }
}

/* Configurações — aparência, metas, dados e apoio */
.cfgx-screen {
  --cfgx-yellow: #f7cb45;
  --cfgx-ink: #1d1d1b;
  --cfgx-paper: #fbfaf6;
  padding-bottom: 48px;
}

.cfgx-header { align-items: flex-end; }

.cfgx-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.cfgx-nav {
  position: sticky;
  top: 78px;
  padding: 0;
  overflow: hidden;
}

.cfgx-nav > header {
  min-height: 83px;
  padding: 20px;
  border-bottom: 1px solid var(--cfgx-ink);
  background: var(--cfgx-yellow);
}

.cfgx-nav > header strong { display: block; margin-top: 5px; font-size: 17px; }
.cfgx-nav nav { padding: 8px; }

.cfgx-nav nav a {
  display: grid;
  min-height: 68px;
  grid-template-columns: 30px minmax(0, 1fr) 15px;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid #d1cec5;
  color: var(--cfgx-ink);
  text-decoration: none;
}

.cfgx-nav nav a:last-child { border-bottom: 0; }

.cfgx-nav nav a > span {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--cfgx-ink);
  border-radius: 5px;
  background: #eeece5;
  font-size: 8px;
  font-weight: 950;
}

.cfgx-nav nav a strong, .cfgx-nav nav a small { display: block; }
.cfgx-nav nav a strong { margin-bottom: 4px; font-size: 10px; }
.cfgx-nav nav a small { color: #77746c; font-size: 8px; }
.cfgx-nav nav a > i { font-size: 13px; font-style: normal; }
.cfgx-nav nav a.is-active { border: 1px solid var(--cfgx-ink); border-radius: 7px; background: #fff7d8; box-shadow: 3px 3px 0 var(--cfgx-ink); }
.cfgx-nav nav a.is-active > span { background: var(--cfgx-yellow); }

.cfgx-nav > footer {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 15px 18px;
  border-top: 1px solid var(--cfgx-ink);
  background: #efede6;
}

.cfgx-nav > footer > i {
  width: 9px;
  height: 9px;
  border: 1px solid var(--cfgx-ink);
  border-radius: 50%;
  background: #65bd81;
}

.cfgx-nav > footer strong, .cfgx-nav > footer small { display: block; }
.cfgx-nav > footer strong { margin-bottom: 3px; font-size: 9px; }
.cfgx-nav > footer small { color: #77746c; font-size: 7px; }
.cfgx-content { display: grid; gap: 18px; }
.cfgx-section { padding: 0; overflow: hidden; scroll-margin-top: 80px; }

.cfgx-section-head {
  display: grid;
  min-height: 90px;
  grid-template-columns: 45px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--cfgx-ink);
}

.cfgx-section-head > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--cfgx-ink);
  border-radius: 7px;
  background: var(--cfgx-yellow);
  box-shadow: 3px 3px 0 var(--cfgx-ink);
  font-size: 10px;
  font-weight: 950;
}

.cfgx-section-head h2 { margin: 3px 0 4px; font-size: 20px; }
.cfgx-section-head small { color: #716e66; font-size: 9px; }

.cfgx-section-head > b {
  padding: 7px 9px;
  border: 1px solid var(--cfgx-ink);
  border-radius: 5px;
  background: #f0eee7;
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cfgx-palette-wrap { padding: 20px; border-bottom: 1px solid #c9c5bc; }

.cfgx-subheading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 13px;
}

.cfgx-subheading strong, .cfgx-subheading small { display: block; }
.cfgx-subheading strong { margin-bottom: 4px; font-size: 11px; }
.cfgx-subheading small { color: #77746c; font-size: 8px; }
.cfgx-subheading > span { font-size: 8px; font-weight: 900; text-transform: uppercase; }

.cfgx-palettes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.cfgx-palette {
  display: flex;
  min-width: 0;
  min-height: 142px;
  flex-direction: column;
  align-items: stretch;
  padding: 13px;
  border: 1px solid var(--cfgx-ink);
  border-radius: 9px;
  background: #f5f3ed;
  color: var(--cfgx-ink);
  text-align: left;
  box-shadow: 3px 3px 0 var(--cfgx-ink);
}

.cfgx-palette.is-active { background: #fff7d8; box-shadow: 4px 4px 0 var(--cfgx-yellow), 5px 5px 0 var(--cfgx-ink); }

.cfgx-swatches {
  display: grid;
  height: 43px;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  overflow: hidden;
  margin-bottom: 13px;
  border: 1px solid var(--cfgx-ink);
  border-radius: 5px;
}

.cfgx-swatches i:nth-child(1) { background: #1f2028; }
.cfgx-swatches i:nth-child(2) { background: #f7cb45; }
.cfgx-swatches i:nth-child(3) { background: #f3f0e8; }
.cfgx-swatches i:nth-child(4) { background: #fff; }
.cfgx-swatches.graphite i:nth-child(1) { background: #171719; }
.cfgx-swatches.graphite i:nth-child(2) { background: #4c4c50; }
.cfgx-swatches.graphite i:nth-child(3) { background: #bbb9b3; }
.cfgx-swatches.graphite i:nth-child(4) { background: #efeee9; }
.cfgx-swatches.classic i:nth-child(1) { background: #2a2925; }
.cfgx-swatches.classic i:nth-child(2) { background: #dedbd1; }
.cfgx-swatches.classic i:nth-child(3) { background: #f6f4ed; }
.cfgx-swatches.classic i:nth-child(4) { background: #fff; }

.cfgx-palette > span:nth-child(2) strong, .cfgx-palette > span:nth-child(2) small { display: block; }
.cfgx-palette > span:nth-child(2) strong { margin-bottom: 4px; font-size: 10px; }
.cfgx-palette > span:nth-child(2) small { color: #716e66; font-size: 8px; }
.cfgx-palette > b { margin-top: auto; padding-top: 10px; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }

.cfgx-name {
  display: grid;
  grid-template-columns: minmax(150px, .7fr) minmax(230px, 1fr) auto;
  align-items: end;
  gap: 17px;
  padding: 19px 20px;
  border-bottom: 1px solid #c9c5bc;
}

.cfgx-name > div:first-child strong, .cfgx-name > div:first-child small { display: block; }
.cfgx-name > div:first-child strong { margin-bottom: 5px; font-size: 11px; }
.cfgx-name > div:first-child small { color: #77746c; font-size: 8px; }
.cfgx-name label > span { display: block; margin: 0 0 6px 2px; font-size: 8px; font-weight: 900; text-transform: uppercase; }

.cfgx-name input {
  width: 100%;
  height: 40px;
  padding: 0 11px;
  border: 1px solid var(--cfgx-ink);
  border-radius: 7px;
  background: #f6f4ee;
  color: var(--cfgx-ink);
  font: 800 11px inherit;
}

.cfgx-name-actions { display: flex; gap: 7px; }

.cfgx-theme-preview {
  display: grid;
  position: relative;
  height: 230px;
  grid-template-columns: 128px minmax(0, 1fr);
  margin: 20px;
  overflow: hidden;
  border: 2px solid var(--cfgx-ink);
  border-radius: 10px;
  background: #ece9e1;
  box-shadow: 5px 5px 0 var(--cfgx-ink);
}

.cfgx-theme-preview > b {
  position: absolute;
  right: 12px;
  bottom: 11px;
  padding: 6px 8px;
  border: 1px solid var(--cfgx-ink);
  border-radius: 5px;
  background: #fff;
  font-size: 7px;
  text-transform: uppercase;
}

.cfgx-mini-sidebar { padding: 17px 13px; background: #20212a; border-right: 2px solid var(--cfgx-ink); }

.cfgx-mini-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  color: #fff;
  font-size: 9px;
}

.cfgx-mini-logo span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid #fff;
  border-radius: 50%;
  background: var(--cfgx-yellow);
  color: var(--cfgx-ink);
  font-weight: 950;
}

.cfgx-mini-sidebar > i {
  display: block;
  width: 100%;
  height: 25px;
  margin-bottom: 7px;
  border: 1px solid #555660;
  border-radius: 4px;
  background: #292a33;
}

.cfgx-mini-sidebar > i.active { border-color: var(--cfgx-ink); background: var(--cfgx-yellow); }
.cfgx-mini-page { min-width: 0; background-color: #f5f2e9; background-image: radial-gradient(#d5d1c7 1px, transparent 1px); background-size: 15px 15px; }
.cfgx-mini-page > header { display: flex; height: 35px; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--cfgx-ink); background: #f6f3eb; }
.cfgx-mini-page > header i { width: 7px; height: 7px; border: 1px solid var(--cfgx-ink); border-radius: 50%; background: #65bd81; }
.cfgx-mini-page > header span { width: 48px; height: 13px; border: 1px solid var(--cfgx-ink); border-radius: 3px; background: #fff; }
.cfgx-mini-page main { padding: 27px 24px; }
.cfgx-mini-page main > span { display: block; width: 66px; height: 5px; margin-bottom: 9px; background: #77746c; }
.cfgx-mini-page main > strong { display: block; width: 190px; max-width: 80%; height: 19px; margin-bottom: 20px; background: var(--cfgx-ink); }
.cfgx-mini-page main > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cfgx-mini-page main > div i { height: 76px; border: 1px solid var(--cfgx-ink); border-radius: 5px; background: #fff; box-shadow: 3px 3px 0 var(--cfgx-ink); }
.cfgx-mini-page main > div i:nth-child(2) { background: #fff7d8; }

.cfgx-goal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px; }

.cfgx-goal-grid > article {
  padding: 17px;
  border: 1px solid var(--cfgx-ink);
  border-radius: 9px;
  background: #f5f3ed;
  box-shadow: 4px 4px 0 var(--cfgx-ink);
}

.cfgx-goal-grid article > header { display: flex; align-items: center; gap: 11px; }

.cfgx-goal-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--cfgx-ink);
  border-radius: 7px;
  background: var(--cfgx-yellow);
  font-size: 12px;
  font-weight: 950;
}

.cfgx-goal-grid article > header strong, .cfgx-goal-grid article > header small { display: block; }
.cfgx-goal-grid article > header strong { margin-bottom: 4px; font-size: 11px; }
.cfgx-goal-grid article > header small { color: #77746c; font-size: 8px; }
.cfgx-stepper, .cfgx-time-input { display: flex; height: 66px; align-items: center; justify-content: center; gap: 10px; margin: 18px 0; border: 1px solid var(--cfgx-ink); border-radius: 8px; background: #fff; }

.cfgx-stepper button {
  width: 35px;
  height: 35px;
  border: 1px solid var(--cfgx-ink);
  border-radius: 6px;
  background: #eeece5;
  color: var(--cfgx-ink);
  font-size: 18px;
}

.cfgx-stepper > strong { min-width: 65px; font-size: 29px; text-align: center; }
.cfgx-time-input label { display: flex; align-items: baseline; gap: 4px; }
.cfgx-time-input input { width: 45px; border: 0; background: transparent; color: var(--cfgx-ink); font-size: 27px; font-weight: 950; text-align: right; outline: 0; }
.cfgx-time-input label span { color: #77746c; font-size: 9px; font-weight: 900; }
.cfgx-time-input > b { font-size: 22px; }

.cfgx-goal-grid article > footer {
  display: grid;
  grid-template-columns: auto minmax(70px, 1fr) auto;
  align-items: center;
  gap: 9px;
}

.cfgx-goal-grid article > footer span, .cfgx-goal-grid article > footer strong { font-size: 8px; }

.cfgx-goal-grid article > footer > i {
  height: 7px;
  overflow: hidden;
  border: 1px solid var(--cfgx-ink);
  border-radius: 7px;
  background: #dedbd3;
}

.cfgx-goal-grid article > footer > i b { display: block; height: 100%; background: var(--cfgx-yellow); }

.cfgx-goal-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  border-top: 1px solid var(--cfgx-ink);
  background: #fff7d8;
}

.cfgx-goal-preview > span { font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.cfgx-goal-preview > strong { font-size: 12px; }

.cfgx-data-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 20px; }

.cfgx-data-grid > article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 13px;
  padding: 17px;
  border: 1px solid var(--cfgx-ink);
  border-radius: 9px;
  background: #f5f3ed;
}

.cfgx-data-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--cfgx-ink);
  border-radius: 7px;
  background: var(--cfgx-yellow);
  font-size: 20px;
  font-weight: 950;
}

.cfgx-data-grid article > div strong { font-size: 12px; }
.cfgx-data-grid article > div p { min-height: 40px; margin: 7px 0; color: #5f5c55; font-size: 9px; line-height: 1.45; }
.cfgx-data-grid article > div small { color: #77746c; font-size: 8px; }
.cfgx-data-grid article > button { grid-column: 1 / -1; width: 100%; margin-top: 7px; }

.cfgx-data-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 20px 20px;
  padding: 13px;
  border: 1px solid var(--cfgx-ink);
  border-radius: 8px;
  background: #eeece5;
}

.cfgx-data-note > span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--cfgx-ink);
  border-radius: 50%;
  background: #fff;
  font-weight: 950;
}

.cfgx-data-note strong, .cfgx-data-note small { display: block; }
.cfgx-data-note strong { margin-bottom: 4px; font-size: 9px; }
.cfgx-data-note small { color: #69665e; font-size: 8px; line-height: 1.4; }

@media (max-width: 1050px) {
  .cfgx-layout { grid-template-columns: 1fr; }
  .cfgx-nav { position: static; }
  .cfgx-nav nav { display: grid; grid-template-columns: 1fr; gap: 7px; }
  .cfgx-nav nav a { grid-template-columns: 28px minmax(0, 1fr); border: 1px solid #d1cec5; border-radius: 7px; }
  .cfgx-nav nav a > i { display: none; }
  .cfgx-nav > footer { display: none; }
}

@media (max-width: 760px) {
  .cfgx-header { align-items: stretch; }
  .cfgx-header .dark-action { width: 100%; }
  .cfgx-nav nav { grid-template-columns: 1fr; }
  .cfgx-palettes { grid-template-columns: 1fr; }
  .cfgx-palette { min-height: 126px; }
  .cfgx-name { grid-template-columns: 1fr; align-items: stretch; }
  .cfgx-name-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cfgx-theme-preview { grid-template-columns: 88px minmax(0, 1fr); height: 200px; }
  .cfgx-mini-page main { padding: 24px 14px; }
  .cfgx-goal-grid, .cfgx-data-grid { grid-template-columns: 1fr; }
  .cfgx-goal-preview { grid-template-columns: 1fr; gap: 8px; }
  .cfgx-goal-preview button { width: 100%; }
}

@media (max-width: 480px) {
  .cfgx-section-head { grid-template-columns: 39px minmax(0, 1fr); padding: 15px; }
  .cfgx-section-head > span { width: 36px; height: 36px; }
  .cfgx-section-head > b { grid-column: 2; justify-self: start; }
  .cfgx-palette-wrap, .cfgx-goal-grid, .cfgx-data-grid { padding: 15px; }
  .cfgx-name { padding: 16px 15px; }
  .cfgx-theme-preview { grid-template-columns: 72px minmax(0, 1fr); margin: 15px; }
  .cfgx-mini-logo strong { display: none; }
  .cfgx-mini-page main > div { grid-template-columns: 1fr 1fr; }
  .cfgx-mini-page main > div i:last-child { display: none; }
  .cfgx-data-note { margin: 0 15px 15px; }
}

/* Feedback — novo relato e histórico de devolutivas */
.fbx-screen {
  --fbx-yellow: #f7cb45;
  --fbx-ink: #1d1d1b;
  --fbx-paper: #fbfaf6;
  padding-bottom: 48px;
}

.fbx-header { align-items: flex-end; }

.fbx-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
  overflow: hidden;
  border: 2px solid var(--fbx-ink);
  border-radius: 13px;
  background: var(--fbx-paper);
  box-shadow: 6px 6px 0 var(--fbx-ink);
}

.fbx-summary > div {
  min-height: 100px;
  padding: 18px 20px 15px;
  border-right: 1px solid var(--fbx-ink);
}

.fbx-summary > div:last-child { border-right: 0; }
.fbx-summary > div.is-accent { background: #fff7d8; }
.fbx-summary span, .fbx-summary small { display: block; }

.fbx-summary span {
  margin-bottom: 10px;
  color: #5b594f;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.fbx-summary strong { display: block; margin-bottom: 5px; font-size: 26px; line-height: 1; }
.fbx-summary small { color: #6e6b62; font-size: 9px; }

.fbx-compose-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  align-items: start;
  gap: 18px;
}

.fbx-form, .fbx-guide, .fbx-history { padding: 0; overflow: hidden; }

.fbx-card-head {
  display: grid;
  min-height: 91px;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--fbx-ink);
}

.fbx-card-head > span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--fbx-ink);
  border-radius: 7px;
  background: var(--fbx-yellow);
  box-shadow: 3px 3px 0 var(--fbx-ink);
  font-size: 10px;
  font-weight: 950;
}

.fbx-card-head h2, .fbx-guide h2, .fbx-history h2 {
  margin: 3px 0 4px;
  font-size: 20px;
}

.fbx-card-head small { color: #716e66; font-size: 9px; }

.fbx-card-head > b {
  padding: 7px 9px;
  border: 1px solid var(--fbx-ink);
  border-radius: 5px;
  background: #f0eee7;
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.fbx-form-body { padding: 20px; }

.fbx-types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.fbx-types legend,
.fbx-field > span,
.fbx-field-grid label > span,
.fbx-reply label > span {
  display: block;
  grid-column: 1 / -1;
  margin-bottom: 8px;
  color: #59564f;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.fbx-types button {
  display: flex;
  min-width: 0;
  min-height: 63px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--fbx-ink);
  border-radius: 8px;
  background: #f4f2ec;
  color: var(--fbx-ink);
  text-align: left;
}

.fbx-types button > span {
  display: grid;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--fbx-ink);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-weight: 950;
}

.fbx-types button strong, .fbx-types button small { display: block; }
.fbx-types button strong { margin-bottom: 3px; font-size: 10px; }
.fbx-types button small { color: #77746c; font-size: 7px; }
.fbx-types button.is-selected { background: #fff7d8; box-shadow: 3px 3px 0 var(--fbx-ink); }
.fbx-types button.is-selected > span { background: var(--fbx-yellow); }

.fbx-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fbx-field-grid label, .fbx-field { display: block; position: relative; margin-bottom: 15px; }
.fbx-field-grid label > span i { color: #8a877f; font-size: 7px; font-style: normal; font-weight: 700; letter-spacing: 0; text-transform: none; }

.fbx-field-grid input, .fbx-field input, .fbx-field textarea, .fbx-reply textarea {
  width: 100%;
  border: 1px solid var(--fbx-ink);
  border-radius: 7px;
  background: #f6f4ee;
  color: var(--fbx-ink);
  font: 700 10px inherit;
  outline: 0;
}

.fbx-field-grid input, .fbx-field input { height: 42px; padding: 0 12px; }
.fbx-field textarea { min-height: 155px; padding: 12px; line-height: 1.55; resize: vertical; }
.fbx-field-grid label > small, .fbx-field > small { display: block; margin-top: 5px; color: #88857d; font-size: 7px; text-align: right; }

.fbx-safety {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid var(--fbx-ink);
  border-radius: 7px;
  background: #efede6;
}

.fbx-safety > span {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--fbx-ink);
  border-radius: 50%;
  background: #fff;
  font-size: 11px;
  font-weight: 950;
}

.fbx-safety strong, .fbx-safety small { display: block; }
.fbx-safety strong { margin-bottom: 3px; font-size: 9px; }
.fbx-safety small { color: #6e6b63; font-size: 8px; }

.fbx-form-footer {
  display: flex;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px dashed #aaa69d;
  background: #f3f1ea;
}

.fbx-form-footer > span { color: #77746c; font-size: 8px; }
.fbx-form-footer > div { display: flex; gap: 7px; }
.fbx-aside { display: grid; gap: 18px; }
.fbx-guide > header { padding: 19px; border-bottom: 1px solid var(--fbx-ink); background: var(--fbx-yellow); }
.fbx-guide ol { margin: 0; padding: 8px 17px; list-style: none; }

.fbx-guide li {
  display: flex;
  min-height: 67px;
  align-items: center;
  gap: 11px;
  border-bottom: 1px dashed #c6c2b8;
}

.fbx-guide li:last-child { border-bottom: 0; }

.fbx-guide li > span {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--fbx-ink);
  border-radius: 5px;
  background: #efede6;
  font-size: 9px;
  font-weight: 950;
}

.fbx-guide li strong, .fbx-guide li small { display: block; }
.fbx-guide li strong { margin-bottom: 4px; font-size: 10px; }
.fbx-guide li small { color: #757269; font-size: 8px; line-height: 1.35; }

.fbx-guide > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 17px;
  border-top: 1px solid var(--fbx-ink);
  background: #efede6;
}

.fbx-guide > footer span { color: #747168; font-size: 8px; }
.fbx-guide > footer strong { font-size: 9px; }

.fbx-history { margin-top: 18px; }

.fbx-history-head {
  display: flex;
  min-height: 87px;
  align-items: center;
  justify-content: space-between;
  gap: 17px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--fbx-ink);
}

.fbx-history-filters { display: flex; gap: 6px; }
.fbx-history-filters button { min-height: 36px; padding: 0 10px; border: 1px solid var(--fbx-ink); border-radius: 6px; background: #fff; color: var(--fbx-ink); font-size: 8px; font-weight: 900; }
.fbx-history-filters button.is-active { background: var(--fbx-yellow); box-shadow: 2px 2px 0 var(--fbx-ink); }
.fbx-history-filters b { margin-left: 4px; }

.fbx-ticket { border-bottom: 1px solid var(--fbx-ink); }
.fbx-ticket:last-child { border-bottom: 0; }

.fbx-ticket > header {
  display: grid;
  min-height: 78px;
  grid-template-columns: 47px minmax(0, 1fr) auto 31px;
  align-items: center;
  gap: 13px;
  padding: 13px 20px;
}

.fbx-ticket.is-open > header { background: #fff7d8; }

.fbx-ticket-type {
  display: grid;
  width: 43px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--fbx-ink);
  border-radius: 5px;
  background: var(--fbx-yellow);
  font-size: 7px;
  font-weight: 950;
}

.fbx-ticket-type.suggestion { background: #dedbd3; }
.fbx-ticket > header > div { min-width: 0; }
.fbx-ticket > header > div strong, .fbx-ticket > header > div small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fbx-ticket > header > div strong { margin-bottom: 5px; font-size: 11px; }
.fbx-ticket > header > div small { color: #747168; font-size: 8px; }

.fbx-status {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--fbx-ink);
  border-radius: 5px;
  background: #fff;
  font-size: 7px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.fbx-status i { width: 7px; height: 7px; border: 1px solid var(--fbx-ink); border-radius: 50%; }
.fbx-status.replied i { background: var(--fbx-yellow); }
.fbx-status.analysis i { background: #98958d; }
.fbx-status.solved i { background: #67bc82; }

.fbx-ticket > header > button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--fbx-ink);
  border-radius: 5px;
  background: #fff;
  font-size: 12px;
}

.fbx-ticket-body { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(360px, 1.2fr); border-top: 1px solid var(--fbx-ink); }
.fbx-original { padding: 20px; border-right: 1px solid var(--fbx-ink); background: #f1efe8; }
.fbx-original > span, .fbx-thread-label > span { display: block; margin-bottom: 10px; color: #5f5c55; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.fbx-original p { margin: 0; font-size: 9px; line-height: 1.65; }
.fbx-thread { padding: 20px; }
.fbx-thread-label { display: flex; align-items: center; gap: 10px; }
.fbx-thread-label i { height: 1px; flex: 1; background: #ccc8be; }

.fbx-thread > article {
  max-width: 88%;
  margin-bottom: 11px;
  padding: 12px;
  border: 1px solid var(--fbx-ink);
  border-radius: 8px;
  background: #fff;
}

.fbx-thread > article.from-team { background: #fff7d8; }
.fbx-thread > article.from-user { margin-left: auto; background: #efede6; }

.fbx-thread article header {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.fbx-thread article header > span {
  display: grid;
  width: 23px;
  height: 23px;
  place-items: center;
  border: 1px solid var(--fbx-ink);
  border-radius: 50%;
  background: var(--fbx-yellow);
  font-size: 7px;
  font-weight: 950;
}

.fbx-thread article header strong { font-size: 8px; }
.fbx-thread article header time { color: #77746c; font-size: 7px; }
.fbx-thread article p { margin: 0; font-size: 9px; line-height: 1.55; }

.fbx-reply {
  grid-column: 1 / -1;
  padding: 16px 20px;
  border-top: 1px dashed #aaa69d;
  background: #f5f3ed;
}

.fbx-reply textarea { min-height: 72px; padding: 10px; resize: vertical; }
.fbx-reply footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.fbx-reply footer small { color: #77746c; font-size: 7px; }

@media (max-width: 1080px) {
  .fbx-compose-grid { grid-template-columns: 1fr; }
  .fbx-aside { grid-template-columns: 1fr; }
  .fbx-ticket-body { grid-template-columns: 1fr; }
  .fbx-original { border-right: 0; border-bottom: 1px solid var(--fbx-ink); }
}

@media (max-width: 800px) {
  .fbx-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fbx-summary > div { border-bottom: 1px solid var(--fbx-ink); }
  .fbx-summary > div:nth-child(2) { border-right: 0; }
  .fbx-summary > div:nth-child(3), .fbx-summary > div:nth-child(4) { border-bottom: 0; }
  .fbx-aside { grid-template-columns: 1fr; }
  .fbx-history-head { align-items: stretch; flex-direction: column; }
  .fbx-history-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fbx-ticket > header { grid-template-columns: 47px minmax(0, 1fr) 31px; }
  .fbx-status { grid-column: 2; justify-self: start; }
  .fbx-ticket > header > button { grid-column: 3; grid-row: 1 / span 2; }
}

@media (max-width: 620px) {
  .fbx-header { align-items: stretch; }
  .fbx-header .dark-action { width: 100%; }
  .fbx-summary > div { min-height: 94px; padding: 16px 14px; }
  .fbx-card-head { grid-template-columns: 39px minmax(0, 1fr); padding: 15px; }
  .fbx-card-head > span { width: 36px; height: 36px; }
  .fbx-card-head > b { grid-column: 2; justify-self: start; }
  .fbx-form-body { padding: 15px; }
  .fbx-types, .fbx-field-grid { grid-template-columns: 1fr; }
  .fbx-types legend { grid-column: auto; }
  .fbx-form-footer { align-items: stretch; flex-direction: column; }
  .fbx-form-footer > div { display: grid; grid-template-columns: 1fr 1fr; }
  .fbx-history-head { padding: 15px; }
  .fbx-history-filters { grid-template-columns: 1fr; }
  .fbx-ticket > header { padding: 13px; }
  .fbx-ticket > header > div strong { white-space: normal; line-height: 1.35; }
  .fbx-original, .fbx-thread, .fbx-reply { padding: 15px; }
  .fbx-thread > article { max-width: 96%; }
  .fbx-reply footer { align-items: stretch; flex-direction: column; }
  .fbx-reply footer button { width: 100%; }
}

/* Admin — métricas, comunicação e controles */
.admx-screen {
  --admx-yellow: #f7cb45;
  --admx-ink: #1d1d1b;
  --admx-paper: #fbfaf6;
  padding-bottom: 48px;
}

.admx-header { align-items: flex-end; }

.admx-access {
  display: grid;
  grid-template-columns: 48px minmax(220px, auto) 1px minmax(160px, 1fr) auto;
  min-height: 82px;
  align-items: center;
  gap: 15px;
  margin-bottom: 16px;
  padding: 13px 16px;
  border: 2px solid var(--admx-ink);
  border-radius: 13px;
  background: var(--admx-paper);
  box-shadow: 5px 5px 0 var(--admx-ink);
}

.admx-shield {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 2px solid var(--admx-ink);
  border-radius: 8px 8px 13px 13px;
  background: var(--admx-yellow);
  box-shadow: 3px 3px 0 var(--admx-ink);
}

.admx-shield span { font-size: 17px; font-weight: 950; }
.admx-access > div:nth-child(2) strong, .admx-access > div:nth-child(2) small { display: block; }
.admx-access > div:nth-child(2) strong { margin: 3px 0 4px; font-size: 12px; }
.admx-access > div:nth-child(2) small { color: #706d65; font-size: 8px; }
.admx-access > i { width: 1px; height: 42px; background: #c6c2b8; }
.admx-sync span, .admx-sync small { display: block; }
.admx-sync span { margin-bottom: 4px; font-size: 9px; font-weight: 900; }
.admx-sync span i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border: 1px solid var(--admx-ink); border-radius: 50%; background: #65bd81; }
.admx-sync small { color: #77746c; font-size: 8px; }

.admx-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 16px;
}

.admx-tabs button {
  display: flex;
  min-height: 49px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--admx-ink);
  border-radius: 7px;
  background: var(--admx-paper);
  color: var(--admx-ink);
  font-size: 9px;
  font-weight: 900;
  box-shadow: 2px 2px 0 var(--admx-ink);
}

.admx-tabs button > span { color: #77746c; font-size: 7px; }
.admx-tabs button b { display: grid; min-width: 18px; height: 18px; place-items: center; border: 1px solid var(--admx-ink); border-radius: 5px; background: #ece9e1; font-size: 7px; }
.admx-tabs button.is-active { background: var(--admx-yellow); box-shadow: 4px 4px 0 var(--admx-ink); }
.admx-tabs button.is-active > span { color: var(--admx-ink); }

.admx-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-bottom: 18px;
  overflow: hidden;
  border: 2px solid var(--admx-ink);
  border-radius: 13px;
  background: var(--admx-paper);
  box-shadow: 6px 6px 0 var(--admx-ink);
}

.admx-summary article { min-width: 0; min-height: 115px; padding: 17px 15px 13px; border-right: 1px solid var(--admx-ink); }
.admx-summary article:last-child { border-right: 0; }
.admx-summary article.is-accent { background: #fff7d8; }
.admx-summary span, .admx-summary small { display: block; }
.admx-summary span { min-height: 22px; margin-bottom: 6px; color: #5d5a52; font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.admx-summary strong { display: block; margin-bottom: 5px; font-size: 24px; line-height: 1; }
.admx-summary small { overflow: hidden; color: #77746c; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.admx-summary article > i { display: block; height: 6px; overflow: hidden; margin-top: 11px; border: 1px solid var(--admx-ink); border-radius: 6px; background: #e4e1d9; }
.admx-summary article > i b { display: block; height: 100%; background: #96938b; }
.admx-summary article.is-accent > i b { background: var(--admx-yellow); }

.admx-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
  gap: 18px;
  margin-bottom: 18px;
}

.admx-activity, .admx-system, .admx-notices, .admx-feedbacks, .admx-report, .admx-pdf, .admx-permissions { padding: 0; overflow: hidden; }
.admx-activity > header, .admx-system > header { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 19px; border-bottom: 1px solid var(--admx-ink); }
.admx-activity h2, .admx-system h2, .admx-section-head h2, .admx-side h2 { margin: 3px 0 4px; font-size: 18px; }
.admx-activity > header small { color: #77746c; font-size: 8px; }
.admx-activity select { height: 35px; padding: 0 28px 0 10px; border: 1px solid var(--admx-ink); border-radius: 6px; background: #fff; color: var(--admx-ink); font-size: 8px; font-weight: 900; }

.admx-chart { display: grid; height: 220px; grid-template-columns: 34px minmax(0, 1fr); padding: 22px 20px 0; }
.admx-chart > aside { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 15px; color: #88857d; font-size: 7px; }

.admx-chart-area {
  position: relative;
  border-bottom: 1px solid var(--admx-ink);
  background-image: linear-gradient(to bottom, transparent 24%, #d7d3ca 25%, transparent 26%, transparent 49%, #d7d3ca 50%, transparent 51%, transparent 74%, #d7d3ca 75%, transparent 76%);
}

.admx-chart-area > i { position: absolute; bottom: 0; width: 10px; transform: translateX(-50%); }
.admx-chart-area > i b { display: block; position: absolute; right: 0; bottom: 0; left: 0; height: 100%; border: 1px solid var(--admx-ink); border-bottom: 0; background: #aaa79f; }
.admx-chart-area > i em { position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; transform: translateX(-50%); border: 1px solid var(--admx-ink); border-radius: 50%; background: #fff; }
.admx-chart-area > i.today b { background: var(--admx-yellow); }
.admx-chart-area svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.admx-chart-area polyline { fill: none; stroke: var(--admx-ink); stroke-width: 3; vector-effect: non-scaling-stroke; }
.admx-chart-area polyline.secondary { stroke: #918e86; stroke-dasharray: 5 5; stroke-width: 2; }
.admx-chart-days { display: grid; grid-template-columns: repeat(7, 1fr); margin: 8px 20px 15px 54px; color: #77746c; font-size: 7px; text-align: center; }
.admx-activity > footer { display: flex; min-height: 47px; align-items: center; gap: 15px; padding: 0 19px; border-top: 1px solid #ccc8be; background: #f1efe8; }
.admx-activity > footer span { display: flex; align-items: center; gap: 6px; font-size: 8px; }
.admx-activity > footer span i { width: 9px; height: 9px; border: 1px solid var(--admx-ink); background: #97948c; }
.admx-activity > footer span i.active { background: var(--admx-yellow); }
.admx-activity > footer strong { margin-left: auto; font-size: 8px; text-transform: uppercase; }

.admx-system > header { background: var(--admx-yellow); }
.admx-system > header > span { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid var(--admx-ink); border-radius: 5px; background: #fff; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.admx-system > header > span i { width: 7px; height: 7px; border: 1px solid var(--admx-ink); border-radius: 50%; background: #65bd81; }
.admx-system-state { display: flex; align-items: center; gap: 12px; padding: 18px; }
.admx-power { display: grid; width: 43px; height: 43px; flex: 0 0 auto; place-items: center; border: 1px solid var(--admx-ink); border-radius: 50%; background: #efede6; }
.admx-power i { width: 14px; height: 18px; border: 3px solid var(--admx-ink); border-top-color: transparent; border-radius: 50%; }
.admx-system-state strong, .admx-system-state small { display: block; }
.admx-system-state strong { margin-bottom: 4px; font-size: 11px; }
.admx-system-state small { color: #747168; font-size: 8px; }
.admx-system-note { display: flex; gap: 9px; margin: 0 17px 15px; padding: 11px; border: 1px solid var(--admx-ink); border-radius: 7px; background: #efede6; }
.admx-system-note span { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; border: 1px solid var(--admx-ink); border-radius: 50%; background: #fff; font-weight: 950; }
.admx-system-note p { margin: 0; font-size: 8px; line-height: 1.45; }
.admx-system-actions { display: grid; grid-template-columns: 1fr; gap: 7px; padding: 0 17px 17px; }
.admx-system-actions button { width: 100%; }
.admx-system > footer { padding: 12px 17px; border-top: 1px solid var(--admx-ink); background: #f0eee7; }
.admx-system > footer span, .admx-system > footer strong { display: block; }
.admx-system > footer span { margin-bottom: 4px; color: #77746c; font-size: 7px; text-transform: uppercase; }
.admx-system > footer strong { overflow: hidden; font: 700 7px monospace; text-overflow: ellipsis; white-space: nowrap; }

.admx-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 18px; }
.admx-main-grid > main { display: grid; gap: 18px; }
.admx-section-head { display: flex; min-height: 85px; align-items: center; justify-content: space-between; gap: 15px; padding: 16px 19px; border-bottom: 1px solid var(--admx-ink); }
.admx-section-head small { color: #77746c; font-size: 8px; }
.admx-section-head > span { padding: 7px 9px; border: 1px solid var(--admx-ink); border-radius: 5px; background: #efede6; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.admx-section-head > span.is-accent { background: var(--admx-yellow); }

.admx-notice-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; padding: 18px; }
.admx-notice-form label > span, .admx-shortcut > span { display: block; margin-bottom: 6px; color: #59564f; font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.admx-notice-form label > span i { color: #8b887f; font-size: 7px; font-style: normal; font-weight: 700; text-transform: none; }
.admx-notice-form .full, .admx-notice-options, .admx-add-shortcut { grid-column: 1 / -1; }
.admx-notice-form input, .admx-notice-form textarea, .admx-shortcut select { width: 100%; border: 1px solid var(--admx-ink); border-radius: 7px; background: #f6f4ee; color: var(--admx-ink); font: 700 9px inherit; outline: 0; }
.admx-notice-form input, .admx-shortcut select { height: 39px; padding: 0 11px; }
.admx-notice-form textarea { min-height: 96px; padding: 11px; line-height: 1.5; resize: vertical; }
.admx-notice-form label > small { display: block; margin-top: 4px; color: #88857d; font-size: 7px; text-align: right; }
.admx-shortcut > div { display: grid; grid-template-columns: minmax(0, 1fr) 120px 35px; gap: 6px; }
.admx-shortcut button { border: 1px solid var(--admx-ink); border-radius: 6px; background: #fff; font-size: 14px; }
.admx-add-shortcut { min-height: 36px; border: 1px dashed var(--admx-ink); border-radius: 7px; background: #efede6; color: var(--admx-ink); font-size: 8px; font-weight: 900; }
.admx-notice-options { display: flex; gap: 17px; }
.admx-notice-options label { display: flex; align-items: center; gap: 7px; font-size: 8px; font-weight: 900; }
.admx-notice-options input { display: none; }
.admx-notice-options label > span { width: 17px; height: 17px; margin: 0; border: 1px solid var(--admx-ink); border-radius: 4px; background: #fff; }
.admx-notice-options input:checked + span { background: var(--admx-yellow); box-shadow: inset 0 0 0 4px #fff; }
.admx-notice-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 18px; border-top: 1px dashed #aaa69d; background: #f1efe8; }
.admx-notice-footer > span { color: #77746c; font-size: 8px; }

.admx-published { border-top: 1px solid var(--admx-ink); }
.admx-published > header { display: flex; min-height: 46px; align-items: center; justify-content: space-between; padding: 0 18px; background: #efede6; }
.admx-published > header strong { font-size: 9px; text-transform: uppercase; }
.admx-published > header button { border: 0; background: transparent; font-size: 8px; font-weight: 900; }
.admx-published > article { display: grid; min-height: 78px; grid-template-columns: 37px minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 11px; padding: 11px 18px; }
.admx-notice-icon { display: grid; width: 35px; height: 35px; place-items: center; border: 1px solid var(--admx-ink); border-radius: 6px; background: var(--admx-yellow); font-weight: 950; }
.admx-published article > div:nth-child(2) strong, .admx-published article > div:nth-child(2) small { display: block; }
.admx-published article > div:nth-child(2) strong { margin-bottom: 4px; font-size: 9px; }
.admx-published article > div:nth-child(2) small { color: #77746c; font-size: 7px; }
.admx-published article > b { display: flex; align-items: center; gap: 5px; padding: 6px 7px; border: 1px solid var(--admx-ink); border-radius: 5px; font-size: 7px; text-transform: uppercase; }
.admx-published article > b i { width: 6px; height: 6px; border: 1px solid var(--admx-ink); border-radius: 50%; background: #65bd81; }
.admx-notice-metric strong, .admx-notice-metric small { display: block; text-align: center; }
.admx-notice-metric strong { font-size: 10px; }
.admx-notice-metric small { color: #77746c; font-size: 6px; }
.admx-row-actions { display: flex; gap: 5px; }
.admx-row-actions button { min-height: 30px; padding: 0 8px; border: 1px solid var(--admx-ink); border-radius: 5px; background: #fff; font-size: 7px; font-weight: 900; }

.admx-feedback-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); }
.admx-feedback-layout > aside { padding: 8px; border-right: 1px solid var(--admx-ink); background: #efede6; }
.admx-feedback-layout > aside button { display: grid; width: 100%; min-height: 66px; grid-template-columns: 36px minmax(0, 1fr) 7px; align-items: center; gap: 8px; padding: 8px; border: 0; border-bottom: 1px solid #c9c5bc; background: transparent; color: var(--admx-ink); text-align: left; }
.admx-feedback-layout > aside button.is-selected { border: 1px solid var(--admx-ink); border-radius: 7px; background: #fff7d8; box-shadow: 3px 3px 0 var(--admx-ink); }
.admx-feedback-layout > aside button > span { display: grid; width: 34px; height: 29px; place-items: center; border: 1px solid var(--admx-ink); border-radius: 5px; background: #fff; font-size: 6px; font-weight: 950; }
.admx-feedback-layout > aside button strong, .admx-feedback-layout > aside button small { display: block; }
.admx-feedback-layout > aside button strong { margin-bottom: 4px; font-size: 8px; }
.admx-feedback-layout > aside button small { color: #77746c; font-size: 7px; }
.admx-feedback-layout > aside button > i { width: 7px; height: 7px; border: 1px solid var(--admx-ink); border-radius: 50%; background: var(--admx-yellow); }
.admx-feedback-detail { padding: 18px; }
.admx-feedback-detail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px dashed #c3bfb5; }
.admx-feedback-detail > header span, .admx-feedback-detail > header small { display: block; color: #77746c; font-size: 7px; }
.admx-feedback-detail > header h3 { margin: 7px 0; font-size: 13px; line-height: 1.35; }
.admx-feedback-detail > header > b { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid var(--admx-ink); border-radius: 5px; background: var(--admx-yellow); font-size: 7px; text-transform: uppercase; }
.admx-feedback-detail > header > b i { width: 6px; height: 6px; border: 1px solid var(--admx-ink); border-radius: 50%; background: #fff; }
.admx-feedback-detail > p { margin: 15px 0; padding: 12px; border: 1px solid var(--admx-ink); border-radius: 7px; background: #f1efe8; font-size: 8px; line-height: 1.6; }
.admx-status-actions { display: flex; align-items: center; gap: 6px; margin-bottom: 15px; }
.admx-status-actions > span, .admx-feedback-detail > label > span { margin-right: 5px; color: #59564f; font-size: 7px; font-weight: 900; text-transform: uppercase; }
.admx-status-actions button { min-height: 29px; padding: 0 8px; border: 1px solid var(--admx-ink); border-radius: 5px; background: #fff; font-size: 7px; font-weight: 900; }
.admx-status-actions button.is-active { background: var(--admx-yellow); }
.admx-feedback-detail > label > span { display: block; margin-bottom: 6px; }
.admx-feedback-detail textarea { width: 100%; min-height: 86px; padding: 10px; border: 1px solid var(--admx-ink); border-radius: 7px; background: #f6f4ee; color: var(--admx-ink); font: 700 8px inherit; resize: vertical; }
.admx-feedback-detail > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; }
.admx-feedback-detail > footer span { color: #77746c; font-size: 7px; }

.admx-side { display: grid; gap: 18px; }
.admx-side article > header { padding: 17px; border-bottom: 1px solid var(--admx-ink); }
.admx-side article > header small { color: #77746c; font-size: 8px; }
.admx-report-metrics { display: grid; grid-template-columns: repeat(2, 1fr); }
.admx-report-metrics > div { min-height: 72px; padding: 13px; border-right: 1px solid #c9c5bc; border-bottom: 1px solid #c9c5bc; }
.admx-report-metrics > div:nth-child(even) { border-right: 0; }
.admx-report-metrics span, .admx-report-metrics strong { display: block; }
.admx-report-metrics span { margin-bottom: 7px; color: #77746c; font-size: 7px; text-transform: uppercase; }
.admx-report-metrics strong { font-size: 15px; }
.admx-report-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; padding: 11px 15px; border-bottom: 1px dashed #c9c5bc; }
.admx-report-row span { grid-column: 1 / -1; color: #77746c; font-size: 7px; text-transform: uppercase; }
.admx-report-row strong { font-size: 9px; }
.admx-report-row small { font-size: 8px; font-weight: 900; }
.admx-report > button, .admx-pdf > button, .admx-permissions > button { width: calc(100% - 30px); margin: 15px; }
.admx-report > footer { padding: 11px 15px; border-top: 1px solid var(--admx-ink); background: #efede6; color: #77746c; font-size: 7px; text-align: center; }
.admx-pdf { display: grid; grid-template-columns: repeat(2, 1fr); }
.admx-pdf > header, .admx-pdf > button { grid-column: 1 / -1; }
.admx-pdf > div { padding: 14px 16px; border-right: 1px solid #c9c5bc; }
.admx-pdf > div:nth-of-type(2) { border-right: 0; }
.admx-pdf > div span, .admx-pdf > div small { display: block; }
.admx-pdf > div span { color: #77746c; font-size: 7px; text-transform: uppercase; }
.admx-pdf > div strong { display: block; margin: 7px 0 5px; font-size: 20px; }
.admx-pdf > div small { color: #77746c; font-size: 7px; }
.admx-permissions dl { margin: 0; padding: 5px 15px; }
.admx-permissions dl > div { display: grid; grid-template-columns: 1fr auto; min-height: 39px; align-items: center; border-bottom: 1px dashed #c9c5bc; }
.admx-permissions dt { color: #77746c; font-size: 7px; }
.admx-permissions dd { margin: 0; font-size: 8px; font-weight: 900; }
.admx-permissions dd i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border: 1px solid var(--admx-ink); border-radius: 50%; background: #65bd81; }

@media (max-width: 1180px) {
  .admx-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admx-summary article:nth-child(3) { border-right: 0; }
  .admx-summary article:nth-child(-n+3) { border-bottom: 1px solid var(--admx-ink); }
  .admx-main-grid { grid-template-columns: 1fr; }
  .admx-side { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 950px) {
  .admx-access { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .admx-access > i, .admx-sync { display: none; }
  .admx-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admx-overview { grid-template-columns: 1fr; }
  .admx-published > article { grid-template-columns: 37px minmax(0, 1fr) auto; }
  .admx-notice-metric, .admx-row-actions { grid-column: 2 / -1; }
  .admx-feedback-layout { grid-template-columns: 180px minmax(0, 1fr); }
  .admx-side { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .admx-header { align-items: stretch; }
  .admx-header .header-button-row { display: grid; grid-template-columns: 1fr; }
  .admx-header .header-button-row button { width: 100%; }
  .admx-access { grid-template-columns: 43px minmax(0, 1fr); }
  .admx-access > button { grid-column: 1 / -1; width: 100%; }
  .admx-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admx-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admx-summary article:nth-child(3) { border-right: 1px solid var(--admx-ink); }
  .admx-summary article:nth-child(even) { border-right: 0; }
  .admx-summary article:nth-child(-n+4) { border-bottom: 1px solid var(--admx-ink); }
  .admx-chart { height: 190px; padding-right: 12px; padding-left: 12px; }
  .admx-chart-days { margin-right: 12px; margin-left: 46px; font-size: 6px; }
  .admx-activity > footer { align-items: flex-start; flex-direction: column; gap: 7px; padding-top: 12px; padding-bottom: 12px; }
  .admx-activity > footer strong { margin-left: 0; }
  .admx-notice-form { grid-template-columns: 1fr; padding: 15px; }
  .admx-notice-form .full, .admx-notice-options, .admx-add-shortcut { grid-column: auto; }
  .admx-shortcut > div { grid-template-columns: 1fr 90px 35px; }
  .admx-notice-footer { align-items: stretch; flex-direction: column; }
  .admx-notice-footer button { width: 100%; }
  .admx-published > article { grid-template-columns: 37px minmax(0, 1fr); }
  .admx-published article > b, .admx-notice-metric, .admx-row-actions { grid-column: 2; justify-self: start; }
  .admx-feedback-layout { grid-template-columns: 1fr; }
  .admx-feedback-layout > aside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid var(--admx-ink); overflow-x: auto; }
  .admx-feedback-layout > aside button { min-width: 145px; }
  .admx-status-actions { align-items: stretch; flex-direction: column; }
  .admx-status-actions button { width: 100%; }
  .admx-feedback-detail > footer { align-items: stretch; flex-direction: column; }
  .admx-feedback-detail > footer button { width: 100%; }
}

@media (max-width: 430px) {
  .admx-tabs button { font-size: 8px; }
  .admx-summary article { min-height: 108px; padding: 14px 12px; }
  .admx-summary strong { font-size: 21px; }
  .admx-section-head { align-items: flex-start; flex-direction: column; }
  .admx-shortcut > div { grid-template-columns: 1fr 35px; }
  .admx-shortcut select { grid-column: 1; }
  .admx-shortcut button { grid-column: 2; grid-row: 1 / span 2; }
  .admx-notice-options { align-items: flex-start; flex-direction: column; }
}

/* Migração funcional — conexão de dados e autenticação */
.migration-data-chip {
  display: flex;
  min-height: 33px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--ink);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.migration-data-chip > i {
  width: 8px;
  height: 8px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: #aaa79f;
}

.migration-data-chip.is-connected { background: #eff7f0; }
.migration-data-chip.is-connected > i { background: #65bd81; }
.migration-data-chip.is-loading > i { background: var(--accent); animation: migrationPulse .8s steps(2, end) infinite; }
.migration-data-chip.is-error > i { background: #d96464; }

@keyframes migrationPulse {
  50% { opacity: .25; }
}

.migration-data-banner {
  display: flex;
  min-height: 71px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 19px;
  padding: 12px 14px;
  border: 1px solid var(--ink);
  border-radius: 9px;
  background: #efede6;
  box-shadow: 4px 4px 0 var(--ink);
}

.migration-data-banner > div {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.migration-data-icon {
  display: grid;
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 7px;
  background: var(--accent);
  font-size: 11px;
  font-weight: 950;
  box-shadow: 2px 2px 0 var(--ink);
}

.migration-data-banner p { margin: 0; }
.migration-data-banner p strong, .migration-data-banner p small { display: block; }
.migration-data-banner p strong { margin-bottom: 4px; font-size: 10px; }
.migration-data-banner p small { color: #66635c; font-size: 8px; line-height: 1.4; }
.migration-data-banner.is-connected { background: #eff7f0; }
.migration-data-banner.is-connected .migration-data-icon { background: #65bd81; }
.migration-data-banner.is-loading .migration-data-icon { animation: migrationPulse .8s steps(2, end) infinite; }
.migration-data-banner.is-error { background: #fff0ef; }
.migration-data-banner.is-error .migration-data-icon { background: #d96464; color: #fff; }

.migration-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
}

.migration-auth-modal[hidden] { display: none; }

.migration-auth-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: rgba(21, 21, 20, .72);
}

.migration-auth-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(430px, calc(100% - 28px));
  overflow: hidden;
  transform: translate(-50%, -50%);
  border: 2px solid var(--ink);
  border-radius: 13px;
  background: #fbfaf6;
  box-shadow: 8px 8px 0 var(--ink);
}

.migration-auth-dialog > header {
  display: flex;
  min-height: 83px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ink);
  background: var(--accent);
}

.migration-auth-dialog h2 {
  margin: 4px 0 0;
  font-size: 20px;
}

.migration-auth-dialog > header > button {
  width: 31px;
  height: 31px;
  padding: 0;
  border: 1px solid var(--ink);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 18px;
}

.migration-auth-signed-out {
  padding: 18px;
}

.migration-auth-signed-out > p {
  margin: 0 0 15px;
  color: #5e5b54;
  font-size: 9px;
  line-height: 1.55;
}

.migration-google-button {
  display: flex;
  width: 100%;
  min-height: 43px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--ink);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font-size: 9px;
  font-weight: 900;
  box-shadow: 3px 3px 0 var(--ink);
}

.migration-google-button > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--accent);
  font-weight: 950;
}

.migration-auth-divider {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0;
  color: #858279;
  font-size: 7px;
  text-transform: uppercase;
}

.migration-auth-divider::before,
.migration-auth-divider::after {
  height: 1px;
  flex: 1;
  background: #cbc7bd;
  content: "";
}

.migration-auth-signed-out form {
  display: grid;
  gap: 11px;
}

.migration-auth-signed-out label {
  color: #59564f;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.migration-auth-signed-out input {
  width: 100%;
  height: 42px;
  margin-top: 6px;
  padding: 0 11px;
  border: 1px solid var(--ink);
  border-radius: 7px;
  background: #f4f2ec;
  color: var(--ink);
  font: 700 10px inherit;
  outline: 0;
}

.migration-auth-signed-out form button { width: 100%; margin-top: 3px; }

.migration-auth-signed-in {
  display: grid;
  grid-template-columns: 49px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 20px 18px;
}

.migration-auth-signed-in[hidden] { display: none; }

.migration-auth-avatar {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--accent);
  font-size: 15px;
  font-weight: 950;
  box-shadow: 3px 3px 0 var(--ink);
}

.migration-auth-signed-in > div strong,
.migration-auth-signed-in > div small {
  display: block;
}

.migration-auth-signed-in > div strong { margin-bottom: 4px; font-size: 11px; }
.migration-auth-signed-in > div small { overflow: hidden; color: #77746c; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.migration-auth-signed-in > button { grid-column: 1 / -1; width: 100%; }

.migration-auth-message {
  min-height: 18px;
  margin: 0;
  padding: 0 18px 12px;
  color: #b03e3e;
  font-size: 8px;
  line-height: 1.4;
}

.migration-auth-dialog > footer {
  padding: 12px 18px;
  border-top: 1px solid var(--ink);
  background: #efede6;
}

.migration-auth-dialog > footer span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #66635c;
  font-size: 8px;
}

.migration-auth-dialog > footer i {
  width: 8px;
  height: 8px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: #65bd81;
}

@media (max-width: 680px) {
  .migration-data-chip {
    width: 34px;
    justify-content: center;
    padding: 0;
  }

  .migration-data-chip > span { display: none; }

  .migration-data-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .migration-data-banner > button { width: 100%; }
}

/* Avisos conectados. */
[data-screen="avisos"] .notice-summary-state.is-loading i {
  background: #f7cb45;
  animation: migration-data-pulse 1s ease-in-out infinite;
}

[data-screen="avisos"] .notice-summary-state.is-error i {
  background: #d94b45;
}

[data-screen="avisos"] .notice-summary-state.is-connected i {
  background: #53b978;
}

[data-screen="avisos"] .notice-card {
  transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

[data-screen="avisos"] .notice-card.is-read {
  opacity: .78;
}

[data-screen="avisos"] .notice-card.is-read .notice-symbol {
  background: var(--paper, #f2efe7);
}

[data-screen="avisos"] .notice-card [data-notice-open] {
  white-space: nowrap;
}

.notice-empty-state {
  grid-column: 1 / -1;
  min-height: 280px;
  display: grid;
  place-items: center;
  padding: 42px;
  text-align: center;
}

.notice-empty-state > div {
  max-width: 430px;
}

.notice-empty-state .notice-symbol {
  margin: 0 auto 18px;
}

.notice-empty-state h2 {
  margin: 0 0 8px;
}

.notice-empty-state p {
  margin: 0;
  color: var(--muted, #67645d);
}

#noticeMarkAllRead:disabled {
  opacity: .5;
  cursor: default;
  transform: none;
  box-shadow: none;
}

#noticeNavCount[hidden],
#noticeTopbarDot[hidden] {
  display: none;
}

/* Banco de questões conectado. */
[data-screen="banco"] .bank-summary-state.is-loading i {
  background: #f7cb45;
  animation: migration-data-pulse 1s ease-in-out infinite;
}

[data-screen="banco"] .bank-summary-state.is-connected i {
  background: #53b978;
}

[data-screen="banco"] .bank-summary-state.is-error i {
  background: #d94b45;
}

[data-screen="banco"] .question-card.is-loading {
  opacity: .72;
  pointer-events: none;
}

[data-screen="banco"] .question-index {
  width: 56px;
  flex-basis: 56px;
  padding: 0 4px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

[data-screen="banco"] .answers button {
  transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

[data-screen="banco"] .answers button.is-selected {
  background: #fff4c9;
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-1px, -1px);
}

[data-screen="banco"] .answers button.is-correct {
  background: #dcebdd;
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

[data-screen="banco"] .answers button.is-wrong {
  background: #f3d8d4;
  border-color: var(--ink);
}

[data-screen="banco"] .answers button:disabled {
  cursor: default;
  opacity: 1;
}

.bank-answer-feedback,
.bank-functional-feedback {
  min-height: 18px;
  margin: 12px 0 0;
  font-size: 9px;
  font-weight: 850;
}

.bank-answer-feedback:empty,
.bank-functional-feedback:empty {
  display: none;
}

.bank-answer-feedback.is-correct {
  color: #237544;
}

.bank-answer-feedback.is-wrong,
.bank-functional-feedback.is-error {
  color: #a63c36;
}

.bank-answer-feedback.is-note {
  color: #7a5b00;
}

.bank-no-alternatives {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px;
  border: 1px dashed #aaa69b;
  color: #706c64;
  font-size: 9px;
  text-align: center;
}

[data-screen="banco"] .question-statement img,
[data-screen="banco"] .answers img {
  display: block;
  max-width: min(100%, 720px);
  height: auto;
  margin: 12px auto;
}

[data-screen="banco"] .bank-results-heading .outline-action.is-active {
  background: var(--accent);
  box-shadow: 3px 3px 0 var(--ink);
}

[data-screen="banco"] .bank-list-panel.is-collapsed {
  display: none;
}

[data-screen="banco"] select:disabled,
[data-screen="banco"] button:disabled {
  opacity: .55;
}

[data-screen="banco"] .bank-recent-filters > span {
  color: #77736b;
  font-size: 8px;
}

@media (max-width: 680px) {
  [data-screen="banco"] .question-tools {
    align-items: stretch;
  }

  [data-screen="banco"] .question-tools button {
    flex: 1;
  }

  [data-screen="banco"] .bank-pagination {
    gap: 8px;
  }

  [data-screen="banco"] .bank-pagination button {
    min-width: 0;
  }
}

/* Desempenho conectado. */
[data-screen="desempenho"] .performance-entry-fields {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

[data-screen="desempenho"] .performance-entry-fields .dark-action {
  grid-column: span 2;
  min-height: 41px;
}

.performance-functional-feedback {
  min-height: 18px;
  margin: 0;
  font-size: 9px;
  font-weight: 850;
}

.performance-functional-feedback:empty {
  display: none;
}

.performance-functional-feedback.is-success {
  color: #237544;
}

.performance-functional-feedback.is-error {
  color: #a63c36;
}

.performance-empty-copy {
  margin: 0;
  padding: 24px 14px;
  color: #77736b;
  font-size: 9px;
  text-align: center;
}

[data-screen="desempenho"] .performance-bars span {
  flex: 0 1 34px;
  min-height: 4px;
}

/* Meus erros funcional. */
.errors-functional-feedback {
  min-height: 0;
  margin: -4px 0 14px;
  color: #5d584f;
  font-size: 10px;
  font-weight: 700;
}

.errors-functional-feedback:empty {
  display: none;
}

.errors-functional-feedback.is-success {
  color: #22633f;
}

.errors-functional-feedback.is-error {
  color: #9b3028;
}

.errors-empty-state {
  display: flex;
  min-height: 170px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border-style: dashed;
  text-align: center;
}

.errors-empty-state strong {
  font-size: 14px;
}

.errors-empty-state span,
.errors-empty-copy {
  color: #625f57;
  font-size: 10px;
}

.error-question-card .outline-action.is-added {
  border-color: #6c866f;
  background: #eaf1e7;
}

.errors-recurring > #errorsRecurringList {
  display: block;
  min-height: 0;
  border: 0;
}

.errors-recurring > #errorsRecurringList > div {
  display: flex;
  min-height: 49px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #c9c4ba;
}

.errors-recurring > #errorsRecurringList > div > span {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
  font-size: 9px;
  font-weight: 850;
}

.errors-recurring > #errorsRecurringList > div > span strong {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: #eeebe4;
  font-size: 8px;
}

.errors-recurring > #errorsRecurringList > div > b {
  display: grid;
  width: 27px;
  height: 27px;
  flex: 0 0 auto;
  place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: #fff8dc;
  font-size: 9px;
}

/* Raio X funcional. */
.xray-detail-table > #xrayTableRows {
  display: block;
  min-height: 0;
  border: 0;
}

.xray-detail-table > #xrayTableRows > div {
  display: grid;
  grid-template-columns: 62px minmax(220px, 1.8fr) minmax(120px, 1fr) 90px 90px 118px;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  border-bottom: 1px solid var(--xray-line);
  font-size: 10px;
}

.xray-empty-copy {
  margin: 18px 0;
  color: #625f57;
  font-size: 10px;
}

[data-screen="desempenho"] .performance-combo-chart .trend {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[data-screen="desempenho"] #performanceSubjectTableBody {
  min-width: 720px;
}

[data-screen="desempenho"] .performance-date-nav button:disabled {
  opacity: .4;
  cursor: default;
}

@media (max-width: 1100px) {
  [data-screen="desempenho"] .performance-entry-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  [data-screen="desempenho"] .performance-entry-fields {
    grid-template-columns: 1fr;
  }

  [data-screen="desempenho"] .performance-entry-fields .dark-action {
    grid-column: auto;
  }

  [data-screen="desempenho"] .performance-bars {
    gap: 8px;
  }

  [data-screen="desempenho"] .hit-error-total > div {
    min-width: 0;
  }

  [data-screen="erros"] .errors-workspace,
  [data-screen="erros"] .errors-results,
  [data-screen="erros"] .errors-analysis,
  [data-screen="erros"] .error-question-card,
  [data-screen="erros"] .errors-distribution,
  [data-screen="erros"] .errors-recurring {
    min-width: 0;
  }

  [data-screen="erros"] .errors-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-screen="erros"] .error-question-card footer > div {
    width: 100%;
  }

  [data-screen="erros"] .error-question-card footer > div > button {
    flex: 1 1 150px;
  }
}

/* Meus erros: controles funcionais recuperados do design anterior. */
[data-screen="erros"] .error-question-card.is-mastered {
  border-color: #24784c;
}

[data-screen="erros"] .error-question-card.is-mastered .error-question-index,
[data-screen="erros"] .error-question-card.is-mastered .error-type {
  background: #9fdfb9;
}

[data-screen="erros"] .error-management {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  padding: 14px;
  border: 2px solid var(--ink);
  border-radius: 7px;
  background: #f2efe7;
}

[data-screen="erros"] .error-management label {
  display: grid;
  min-width: 190px;
  gap: 7px;
}

[data-screen="erros"] .error-management label > span {
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

[data-screen="erros"] .error-management select {
  min-height: 38px;
  padding: 0 34px 0 11px;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: #fffdf8;
  color: var(--ink);
  font: 800 10px/1 Arial, sans-serif;
}

[data-screen="erros"] .error-management .is-mastered {
  border-color: #24784c;
  background: #dff3e6;
  color: #165d39;
}

@media (max-width: 680px) {
  [data-screen="erros"] .error-management {
    align-items: stretch;
    flex-direction: column;
  }

  [data-screen="erros"] .error-management label {
    min-width: 0;
  }
}

/* Listas: recursos funcionais preservados do site anterior. */
[data-screen="listas"] .list-create-bar {
  grid-template-columns: minmax(220px, 1.25fr) minmax(140px, .7fr) minmax(140px, .65fr) auto minmax(180px, 1fr);
}

[data-screen="listas"] .list-result-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 17px;
}

[data-screen="listas"] .list-result-summary > span {
  display: grid;
  gap: 6px;
  min-height: 64px;
  align-content: center;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: #fffdf8;
  font-size: 10px;
  font-weight: 800;
}

[data-screen="listas"] .list-result-summary strong {
  color: var(--muted);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

[data-screen="listas"] .list-result-summary select {
  min-height: 32px;
  padding: 0 28px 0 8px;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: #f2efe7;
  color: var(--ink);
  font: 800 10px Arial, sans-serif;
}

[data-screen="listas"] .list-selected-actions {
  grid-template-columns: minmax(220px, 1fr) auto auto;
}

[data-screen="listas"] .list-pdf-quota {
  margin: -6px 0 14px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

[data-screen="listas"] .list-selected-questions > div {
  grid-template-columns: 32px minmax(0, 1fr) 28px auto 30px;
}

[data-screen="listas"] .list-selected-questions .pending {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid #aaa59b;
  border-radius: 4px;
  color: var(--muted);
  background: #eeebe4;
}

[data-screen="listas"] .list-item-remove {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--ink);
  border-radius: 4px;
  background: #fffdf8;
  color: #8b2929;
  font-size: 17px;
  font-weight: 900;
}

[data-screen="listas"] .list-item-remove:hover {
  background: #f4d7d7;
}

[data-screen="listas"] .list-question-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}

[data-screen="listas"] .list-question-pagination span {
  font-size: 9px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  [data-screen="listas"] .list-create-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-screen="listas"] .list-create-bar .search {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  [data-screen="listas"] .list-result-summary,
  [data-screen="listas"] .list-selected-actions {
    grid-template-columns: 1fr;
  }

  [data-screen="listas"] .list-selected-questions > div {
    grid-template-columns: 32px minmax(0, 1fr) 28px 30px;
    padding: 10px 0;
  }

  [data-screen="listas"] .list-selected-questions > div > button:not(.list-item-remove) {
    grid-column: 2 / -1;
  }
}