* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: #ffffff;
  color: #003586;
  font: 17px 'Roboto Condensed', sans-serif
}

main {
  max-width: 720px;
  margin: 40px auto;
  padding: 24px
}

header {
  margin-bottom: 28px;
  text-align: center
}


h1 {
  font-size: clamp(32px, 6vw, 46px);
  margin: 10px 0
}

p {
  line-height: 1.6
}

.card {
  background: white;
  border-radius: 0;
  padding: 28px;
  box-shadow: 0 12px 40px #0035860c
}


h2 {
  font-size: 25px;
  line-height: 1.4
}

button {
  font: inherit;
  cursor: pointer;
  border-radius: 0;
  padding: 15px;
  border: 1px solid #003586;
  background: white;
  color: inherit
}

button:focus-visible {
  outline: 3px solid #1ba213;
  outline-offset: 3px
}

button:disabled {
  cursor: default
}

.primary {
  background: #005ccc;
  color: white;
  border: 0;
  margin-top: 20px;
  width: 100%;
  font-weight: 700
}

.primary:disabled {
  opacity: .45
}

footer {
  margin-top: 24px;
  text-align: center;
  font-size: 13px;
  color: #003586
}

@media(max-width:500px) {
  main {
    margin: 12px auto;
    padding: 16px
  }

  .card {
    padding: 22px
  }
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 10px
}

input {
  width: 100%;
  font: inherit;
  padding: 15px;
  border: 1px solid #003586;
  border-radius: 0;
  color: inherit
}

input:focus {
  outline: 3px solid #1ba213;
  outline-offset: 2px
}

h1 {
  color: #003586
}

.card {
  border: 1px solid #005ccc
}

.primary:hover {
  background: #003586
}


*,
*::before,
*::after {
  border-radius: 0 !important
}

footer {
  white-space: pre-wrap
}

.dashboard {
  padding: 20px
}

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

.tile {
  border: 1px solid #005ccc;
  min-height: 240px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center
}

.tile h2 {
  margin: 12px 0 0
}

.tile .primary {
  margin-top: 18px
}

@media(max-width:500px) {
  .dashboard {
    padding: 12px
  }

  .tile-grid {
    gap: 12px
  }

  .tile {
    min-height: 200px;
    padding: 12px
  }

  }


body.welcome-screen {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 55% 85%, #786b6c, transparent 60%), #727875;
  padding: 40px 24px;
  font-family: Arial, sans-serif;
  color: #777;
  isolation: isolate
}

.welcome-screen main {
  width: min(100%, 960px);
  max-width: 960px;
  padding: 0;
  margin: 0;
  box-shadow: 12px 18px 55px #0003
}

.welcome-screen header,
.welcome-screen footer {
  display: none
}

.welcome-screen .card {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: white
}

.reference-layout {
  display: grid;
  grid-template-columns: 53.2% 46.8%;
  min-height: 675px
}

.reference-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 48px;
  background: #fff
}

.reference-login h2 {
  font-size: 18px;
  font-weight: 400;
  color: #858585;
  margin: 0 0 50px;
  line-height: 1.5
}

.reference-login form {
  width: 100%;
  max-width: 285px
}

.reference-login label {
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: #a5a5a5;
  margin: 0 0 5px
}

.welcome-screen input {
  background: white;
  border: 0;
  border-bottom: 1px solid #eaeaea;
  padding: 0 0 10px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #555;
  width: 100%;
  outline-offset: 4px
}

.welcome-screen input:focus {
  outline: 1px solid #a7c8bb
}

.welcome-screen .primary {
  display: block;
  width: 155px;
  margin: 48px auto 0;
  padding: 9px 18px;
  min-height: 36px;
  border-radius: 30px !important;
  border: 0;
  background: #737573;
  color: white;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 400
}

.welcome-screen .primary:hover {
  background: #5e625f
}

.reference-note {
  margin-top: 70px;
  font-size: 11px;
  color: #aaa;
  text-align: center
}

@media(max-width:650px) {
  body.welcome-screen {
    padding: 24px 12px
  }

  .reference-layout {
    min-height: 480px
  }

  .reference-login {
    padding: 40px 20px
  }

  .reference-login h2 {
    font-size: 14px;
    margin-bottom: 35px
  }

  .welcome-screen .primary {
    width: 120px
  }

  .reference-note {
    margin-top: 45px
  }
}

@media(max-width:420px) {
  .reference-layout {
    grid-template-columns: 46% 54%;
    min-height: 420px
  }

  .reference-login {
    padding: 30px 14px
  }

  .reference-login h2 {
    font-size: 12px
  }

  .welcome-screen .primary {
    width: 100px
  }
}

/* LDC School welcome screen */
body.welcome-screen {
  background: linear-gradient(135deg, #003586, #005ccc);
  font-family: 'Roboto Condensed', sans-serif;
  color: #003586
}

.welcome-screen main {
  border: 1px solid #005ccc;
  box-shadow: 0 20px 65px #00358650
}

.reference-layout {
  grid-template-columns: 1fr 1fr;
  min-height: 580px
}

.school-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  text-align: center;
  background: #003586;
  color: white;
  border-bottom: 5px solid #1ba213
}

.school-logo {
  width: 200px;
  height: 130px;
  overflow: hidden;
  background: white;
  position: relative;
  margin-bottom: 32px
}

.school-logo img {
  position: absolute;
  width: 280px;
  height: 280px;
  max-width: none;
  left: -40px;
  top: -75px
}

.school-intro h2 {
  font-size: 42px;
  line-height: 1.1;
  margin: 0 0 20px;
  color: white
}

.school-intro p {
  max-width: 300px;
  font-size: 19px;
  line-height: 1.6;
  margin: 0 0 14px
}

.school-intro p+p {
  font-size: 16px
}

.reference-login {
  justify-content: center;
  padding: 50px 44px;
  background: white
}

.login-heading {
  text-align: center;
  margin-bottom: 30px
}

.login-heading :is(h1,h2) {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 30px;
  font-weight: 700;
  color: #003586;
  line-height: 1.2;
  margin: 0 0 16px
}

.login-heading p {
  font-size: 17px;
  margin: 0;
  color: #003586
}

.reference-login form {
  max-width: 330px
}

.welcome-screen input {
  height: 50px;
  padding: 14px 15px;
  border: 1px solid #005ccc;
  background: white;
  color: #003586;
  font: 17px 'Roboto Condensed', sans-serif
}

.welcome-screen input::placeholder {
  color: #00358699
}

.welcome-screen input:focus {
  outline: 3px solid #1ba213;
  outline-offset: 2px
}

.welcome-screen .primary {
  width: 100%;
  min-height: 49px;
  margin: 16px 0 0;
  background: #005ccc;
  color: white;
  border: 0;
  border-radius: 0 !important;
  font: 700 18px 'Roboto Condensed', sans-serif
}

.welcome-screen .primary:hover {
  background: #003586
}

.reference-note {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: #003586;
  margin: 32px 0 0;
  max-width: 330px
}

@media(max-width:650px) {
  .reference-layout {
    grid-template-columns: 1fr;
    min-height: 0
  }

  .school-intro {
    padding: 30px 24px
  }

  .school-logo {
    margin-bottom: 20px
  }

  .school-intro h2 {
    font-size: 34px
  }

  .school-intro p {
    font-size: 17px
  }

  .school-intro p+p {
    font-size: 15px
  }

  .reference-login {
    padding: 36px 24px
  }

  .login-heading :is(h1,h2) {
    font-size: 28px
  }

  .welcome-screen .primary {
    width: 100%
  }
}

/* Modern initial screen only. */
body.welcome-screen {
  background: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif
}

.welcome-screen main {
  border: 2px solid #005ccc;
  border-radius: 26px !important;
  overflow: hidden;
  box-shadow: 0 20px 60px #00358612
}

.welcome-screen .card,
.welcome-screen .reference-layout {
  border-radius: 24px !important
}

.welcome-screen .reference-layout {
  min-height: 620px;
  overflow: hidden
}

.welcome-screen .school-intro {
  border-bottom: 0;
  padding: 48px 36px
}

.welcome-screen .school-logo {
  background: transparent
}

.welcome-screen .school-logo img {
  filter: url(#white-logo)
}

.welcome-screen .school-intro h2 {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -1px
}

.welcome-screen .school-intro p {
  font-size: 17px;
  line-height: 1.7
}

.welcome-screen .school-intro p+p {
  font-size: 15px
}

.welcome-screen .reference-login {
  position: relative;
  padding: 72px 40px 105px
}

.welcome-screen .login-heading :is(h1,h2) {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 27px;
  line-height: 1.35;
  letter-spacing: -.7px;
  color: #003586
}

.welcome-screen .login-heading p {
  font-size: 15px
}

.welcome-screen input {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  border-radius: 12px !important;
  height: 54px;
  padding: 15px
}

.welcome-screen .primary {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  border-radius: 12px !important;
  min-height: 52px
}

.welcome-screen .reference-note {
  position: absolute;
  bottom: 26px;
  left: 32px;
  right: 32px;
  max-width: none;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  line-height: 1.7
}

@media(max-width:650px) {
  .welcome-screen .reference-layout {
    min-height: 0
  }

  .welcome-screen .school-intro {
    padding: 32px 24px
  }

  .welcome-screen .reference-login {
    min-height: 380px;
    padding: 38px 24px 95px
  }

  .welcome-screen .login-heading :is(h1,h2) {
    font-size: 25px
  }

  .welcome-screen .school-intro h2 {
    font-size: 32px
  }
}

.welcome-screen .school-logo {
  margin-bottom: 0;
  height: 105px
}

.welcome-screen .school-intro .school-word {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 43px;
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
  margin: 0 0 30px;
  color: white;
  transform: scaleX(1.06)
}

@media(max-width:650px) {
  .welcome-screen .school-logo {
    margin-bottom: 0
  }

  .welcome-screen .school-intro .school-word {
    font-size: 40px;
    margin-bottom: 24px
  }
}

.welcome-screen input:focus {
  outline: 2px solid #005ccc;
  outline-offset: 2px
}

.welcome-screen .school-intro {
  justify-content: flex-start;
  padding-top: 65px
}

.welcome-screen .school-intro .school-word {
  margin-bottom: 65px
}

.welcome-screen .school-intro p,
.welcome-screen .school-intro p+p {
  font-weight: 700
}

@media(max-width:650px) {
  .welcome-screen .school-intro {
    padding-top: 30px
  }

  .welcome-screen .school-intro .school-word {
    margin-bottom: 32px
  }
}

.welcome-screen .school-intro>p:first-of-type {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.5px;
  max-width: 340px;
  margin: 0 0 28px;
  color: #fff
}

.welcome-screen .school-intro>p+p {
  width: 100%;
  max-width: 340px;
  padding: 22px 20px;
  background: #005ccc;
  border: 1px solid #ffffff80;
  border-radius: 16px !important;
  color: white;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 600;
  margin: 0;
  box-shadow: 0 8px 20px #00000012
}

@media(max-width:650px) {
  .welcome-screen .school-intro>p:first-of-type {
    font-size: 24px;
    margin-bottom: 22px
  }

  .welcome-screen .school-intro>p+p {
    font-size: 16px;
    padding: 18px
  }
}

/* Home task tiles: translucent glass. */
body.home-screen {
  min-height: 100svh;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: radial-gradient(ellipse at 10% 20%, #005ccc24, transparent 55%), radial-gradient(ellipse at 90% 65%, #1ba21318, transparent 50%), #f6f9ff
}

.home-screen main {
  max-width: 1000px;
  padding: 24px 18px;
  margin: 24px auto
}

.home-screen header {
  margin-bottom: 24px;
  text-align: left
}

.home-screen header h1 {
  overflow-wrap: anywhere;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
  letter-spacing: -.5px
}

.home-screen .dashboard {
  padding: 24px;
  border: 1px solid #005ccc25;
  border-radius: 26px !important;
  background: #ffffff40;
  box-shadow: 0 16px 45px #0035860a
}

.home-screen .tile-grid {
  gap: 24px
}

.home-screen .tile {
  position: relative;
  overflow: hidden;
  min-height: 245px;
  border-radius: 22px !important;
  border: 1px solid #ffffffdd;
  background: linear-gradient(135deg, #ffffffb3, #ffffff45);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff70, 0 12px 30px #00358610;
  padding: 28px
}

.home-screen .tile::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, #ffffff70, transparent 48%, #ffffff25);
  border-radius: inherit !important
}

.home-screen .tile h2,
.home-screen .tile button {
  position: relative
}

.home-screen .tile h2 {
  font-size: 28px;
  margin: 0;
  font-weight: 700
}

.home-screen .tile .primary {
  max-width: 220px;
  border-radius: 12px !important;
  font-family: inherit;
  margin-top: 22px
}

@media(max-width:500px) {
  .home-screen main {
    padding: 16px 12px;
    margin: 12px auto
  }

  .home-screen header h1 {
    font-size: 21px
  }

  .home-screen .dashboard {
    padding: 14px;
    border-radius: 22px !important
  }

  .home-screen .tile-grid {
    gap: 14px
  }

  .home-screen .tile {
    min-height: 180px;
    padding: 18px 12px;
    border-radius: 18px !important
  }

  .home-screen .tile h2 {
    font-size: 24px
  }

  .home-screen .tile .primary {
    padding: 12px;
    font-size: 14px
  }
}

.home-screen header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px
}

.home-screen header h1 {
  font-size: 21px;
  flex: 1
}

#home-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0
}

#home-actions button {
  font-family: inherit;
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid #005ccc30;
  border-radius: 10px !important;
  background: #ffffff80;
  color: #003586
}

#home-actions button:hover {
  background: #005ccc;
  color: white
}

@media(max-width:650px) {
  .home-screen header {
    align-items: flex-start;
    flex-wrap: wrap
  }

  .home-screen header h1 {
    font-size: 19px;
    min-width: 200px
  }

  #home-actions {
    margin-left: auto
  }
}

.login-spinner {
  display: block;
  width: 22px;
  height: 22px;
  border: 3px solid #00358630;
  border-top-color: #003586;
  border-radius: 50% !important;
  animation: login-spin .7s linear infinite
}

@keyframes login-spin {
  to {
    transform: rotate(360deg)
  }
}

body.contact-screen {
  min-height: 100svh;
  display: grid;
  place-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: radial-gradient(ellipse at 15% 20%, #005ccc25, transparent 55%), radial-gradient(ellipse at 85% 80%, #1ba21320, transparent 55%), #f6f9ff;
  padding: 0
}

.contact-screen main {
  width: 90vw;
  max-width: none;
  margin: 5svh auto;
  padding: 0
}

.contact-screen header,
.contact-screen footer {
  display: none
}

.contact-screen #platform-content {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none
}

.contact-panel {
  min-height: 90svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 32px;
  border: 1px solid #ffffffdd;
  border-radius: 28px !important;
  background: linear-gradient(135deg, #ffffffb3, #ffffff55);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: inset 0 1px 0 white, 0 20px 60px #00358612
}

.contact-panel h2 {
  font-size: clamp(30px, 5vw, 48px);
  letter-spacing: -1px;
  margin: 0;
  color: #003586
}

.whatsapp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 17px 30px;
  background: #128c4b;
  color: white;
  text-decoration: none;
  font-size: 19px;
  font-weight: 700;
  border-radius: 14px !important;
  box-shadow: 0 8px 20px #128c4b25
}

.whatsapp-button:hover {
  background: #0d733e
}

.whatsapp-button svg {
  width: 28px;
  height: 28px
}

.whatsapp-button:focus-visible {
  outline: 3px solid #003586;
  outline-offset: 4px
}

.contact-back {
  border: 0;
  background: transparent;
  color: #003586;
  font-family: inherit;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 10px !important
}

.contact-back:hover {
  background: #005ccc12
}

body:not(.welcome-screen) main>footer {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  line-height: 1.7;
  text-align: center;
  color: #003586;
  margin-top: 26px;
  white-space: normal
}

.contact-screen main {
  margin: 3svh auto
}

.contact-panel {
  min-height: 84svh
}

.contact-heading {
  text-align: center
}

.contact-heading p {
  font-size: clamp(16px, 2vw, 20px);
  margin: 12px 0 0;
  line-height: 1.6
}

.email-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 100%;
  padding: 17px 24px;
  background: #005ccc;
  color: white;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  border-radius: 14px !important
}

.email-box svg {
  width: 28px;
  height: 22px;
  flex-shrink: 0
}

.email-box span {
  overflow-wrap: anywhere;
  user-select: text
}

@media(max-width:500px) {
  .email-box {
    font-size: 13px;
    padding: 16px 12px;
    gap: 9px
  }

  .contact-panel {
    padding: 24px 16px
  }
}

/* Telas estáticas: o atributo hidden sempre prevalece sobre estilos flex/grid. */
[hidden] {
  display: none !important;
}

.screen:not([hidden]) {
  display: contents;
}

/* Resumos usa a mesma tipografia, paleta e superfícies arredondadas da Home. */
body.summary-screen,
body.summary-reading-screen {
  min-height: 100svh;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: radial-gradient(ellipse at 10% 20%, #005ccc18, transparent 55%), radial-gradient(ellipse at 90% 65%, #1ba21310, transparent 50%), #f6f9ff;
}

.summary-screen main {
  max-width: 1000px;
  margin: 24px auto;
  padding: 24px 18px;
}

.summary-screen #platform-content,
.summary-reading-screen #platform-content {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.summary-toolbar,
.summary-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.summary-brand { font-weight: 700; font-size: 16px; }

.summary-toolbar button,
.summary-reading-toolbar button {
  border: 1px solid #005ccc30;
  background: #ffffff90;
  border-radius: 12px !important;
  font-size: 14px;
  padding: 12px 18px;
}

.summary-workspace {
  max-width: 800px;
  margin: 80px auto 60px;
}

.summary-workspace h1 {
  font-size: clamp(25px, 4vw, 34px);
  text-align: center;
  letter-spacing: -.8px;
  margin: 0 0 12px;
}

.summary-intro { text-align: center; font-size: 14px; margin-bottom: 32px; }

.summary-composer {
  padding: 28px;
  border: 1px solid #ffffffdd;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ffffffd9, #ffffff80);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 #fff, 0 12px 30px #00358610;
}

#summary-form label { font-size: 14px; }

#summary-text {
  width: 100%;
  padding: 16px;
  font: inherit;
  font-size: 15px;
  line-height: 1.7;
  color: #003586;
  border: 1px solid #005ccc25;
  border-radius: 14px !important;
  background: #ffffffb3;
  min-height: 140px;
  resize: vertical;
  margin-bottom: 20px;
}

#summary-text:focus { outline: none; }

#summary-form .summary-upload {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
  font-weight: 500;
}

/* O seletor de arquivos continua acessível pelo teclado. */
#summary-images {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
}

.summary-actions:has(#summary-images:focus-visible) .summary-upload {
  outline: 2px solid #1ba213;
  outline-offset: 4px;
}

#summary-submit {
  width: auto;
  padding: 14px 22px;
  margin: 0;
  border-radius: 12px !important;
  font-size: 14px;
}

#summary-file-count,
.summary-help,
#summary-status { font-size: 12px; line-height: 1.6; }
#summary-file-count { margin: 16px 0 0; }
.summary-help,
#summary-status { text-align: center; }

/* Leitura: formulário e rodapé ficam ocultos, deixando apenas resumo e voltar. */
.summary-reading-screen main {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 24px;
}
.summary-reading-screen main>footer { display: none !important; }
.summary-reading-toolbar { margin-bottom: 24px; }
.summary-reading {
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid #005ccc18;
  border-radius: 24px !important;
  background: #ffffffeb;
  box-shadow: 0 12px 40px #00358608;
}
#summary-content {
  white-space: pre-wrap;
  line-height: 1.9;
  font-size: 16px;
  overflow-wrap: anywhere;
}
#summary-warning { font-size: 12px; margin-top: 24px; }
#summary-loading { text-align: center; margin: 32px 0; }

@media(max-width:500px) {
  .summary-screen main { padding: 16px 12px; margin: 12px auto; }
  .summary-brand { font-size: 13px; }
  .summary-toolbar button { font-size: 12px; padding: 10px 12px; }
  .summary-workspace { margin: 48px auto 32px; }
  .summary-composer { padding: 20px 16px; }
  .summary-actions { gap: 10px; flex-wrap: wrap; }
  #summary-submit { padding: 12px 16px; }
  .summary-reading-screen main { padding: 20px 12px; }
  #summary-content { font-size: 15px; line-height: 1.8; }
}

/* Ações de Resumos: feedback visual consistente com os botões da Home. */
#summary-back,
#summary-form .summary-upload {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

#summary-back:hover {
  background: #005ccc;
  border-color: #005ccc;
  color: white;
}

#summary-form .summary-upload {
  padding: 10px 12px;
  border-radius: 12px !important;
}

#summary-form .summary-upload:hover {
  background: #005ccc12;
  color: #005ccc;
}

.summary-thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 14px;
  margin-top: 20px;
}

.summary-thumbnail {
  min-width: 0;
  position: relative;
  margin: 0;
}

.summary-thumbnail img {
  display: block;
  width: 100%;
  height: 100px;
  object-fit: contain;
  background: #ffffffb3;
  border: 1px solid #005ccc25;
  border-radius: 12px !important;
}

.summary-image-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50% !important;
  background: #003586;
  color: white;
}

.summary-image-remove:hover { background: #005ccc; }
.summary-image-remove svg { display: block; width: 12px; height: 12px; }
.summary-thumbnail figcaption {
  margin-top: 6px;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quiz, Caderno e Questões compartilham a identidade visual das telas de estudo. */
body.study-screen {
  min-height: 100svh;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: radial-gradient(ellipse at 10% 20%, #005ccc18, transparent 55%), radial-gradient(ellipse at 90% 65%, #1ba21310, transparent 50%), #f6f9ff;
}

.study-screen main {
  max-width: 900px;
  margin: 24px auto;
  padding: 24px 18px;
}

.study-screen header { margin-bottom: 28px; }
.study-screen header h1 {
  font-size: clamp(26px, 4vw, 36px);
  line-height: 1.4;
  letter-spacing: -.8px;
}
.study-screen header p { font-size: 14px; }

.study-screen .card {
  padding: 32px;
  border: 1px solid #ffffffdd;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ffffffd9, #ffffff80);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: inset 0 1px 0 #fff, 0 12px 30px #00358610;
}

.study-screen h2 { font-size: 24px; }
.study-screen button {
  border-radius: 12px !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.study-empty { text-align: center; padding: 32px 12px; }
.study-empty-icon {
  width: 64px;
  height: 64px;
  padding: 10px;
  color: #005ccc;
  background: #005ccc0d;
  border-radius: 18px !important;
}
.study-empty h2 { margin: 20px 0 12px; }
.study-empty p { margin: 0 auto 24px; max-width: 430px; font-size: 14px; }
.study-empty .primary { max-width: 240px; margin: 0; }

@media(max-width:500px) {
  .study-screen main { margin: 12px auto; padding: 16px 12px; }
  .study-screen .card { padding: 24px 18px; }
  .study-screen h2 { font-size: 21px; }
  .study-empty { padding: 24px 0; }
}

/* Aviso modal segue a identidade LDC e mantém a página atrás dele inativa. */
#image-unavailable-dialog,
#attachment-limit-dialog {
  width: min(420px, calc(100% - 32px));
  padding: 28px;
  border: 1px solid #005ccc25;
  border-radius: 24px !important;
  background: #f6f9ff;
  color: #003586;
  font-family: 'Plus Jakarta Sans', sans-serif;
  box-shadow: 0 24px 64px #00358630;
}
:is(#image-unavailable-dialog, #attachment-limit-dialog)::backdrop { background: #00358655; backdrop-filter: blur(4px); }
:is(#image-unavailable-dialog, #attachment-limit-dialog) h2 { margin: 0 0 12px; font-size: 23px; }
:is(#image-unavailable-dialog, #attachment-limit-dialog) p { margin: 0; font-size: 15px; }
:is(#image-unavailable-dialog, #attachment-limit-dialog) button { border-radius: 12px !important; }

/* Novo pedido abaixo da resposta, mantendo o contexto recente em memória. */
.summary-followup {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #005ccc20;
  border-radius: 24px !important;
  background: #ffffffb3;
}
.summary-followup label { font-size: 14px; }
#summary-followup-text {
  display: block;
  width: 100%;
  min-height: 80px;
  padding: 14px;
  border: 1px solid #005ccc25;
  border-radius: 12px !important;
  background: white;
  color: #003586;
  font: inherit;
  font-size: 15px;
  line-height: 1.6;
  resize: vertical;
}
#summary-followup-text:focus { outline: none; }
#summary-followup-send {
  display: block;
  width: auto;
  margin: 16px 0 0 auto;
  padding: 12px 24px;
  border-radius: 12px !important;
}
#summary-followup-status { font-size: 13px; margin-bottom: 0; }
@media(max-width:500px) { .summary-followup { padding: 20px 16px; } }

/* Catálogo de quizzes: página fixa, rolagem somente no painel interno. */
body.quiz-catalog-screen {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: radial-gradient(ellipse at 10% 20%, #005ccc18, transparent 55%), radial-gradient(ellipse at 90% 65%, #1ba21310, transparent 50%), #f6f9ff;
}
.quiz-catalog-screen main {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 24px 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
}
.quiz-catalog-screen #platform-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.quiz-catalog-toolbar {
  flex-shrink: 0;
  width: 84%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.quiz-catalog-toolbar h1 { margin: 0; font-size: clamp(24px, 4vw, 36px); }
.quiz-catalog-toolbar button {
  padding: 12px 18px;
  border: 1px solid #005ccc30;
  border-radius: 12px !important;
  background: #ffffff80;
  font-size: 14px;
}
.quiz-catalog-toolbar button:hover { background: #005ccc; color: white; }
.quiz-catalog-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 4px 0 16px;
}
.quiz-catalog-scroll:focus-visible { outline: 2px solid #1ba213; outline-offset: -2px; }
.quiz-catalog-columns {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 4%;
  min-height: 100%;
}
/* Colunas de 40% e cartões de 95% da largura interna de cada coluna. */
.quiz-catalog-column {
  flex: 0 0 40%;
  min-width: 0;
  padding: 24px 0;
  border: 1px solid #ffffffdd;
  border-radius: 24px !important;
  background: linear-gradient(135deg, #ffffffd9, #ffffff80);
  box-shadow: inset 0 1px 0 #fff, 0 12px 30px #00358608;
}
.quiz-catalog-column>h2 { margin: 0 5% 24px; font-size: clamp(20px, 2.2vw, 28px); }
.quiz-catalog-card {
  width: 95%;
  margin: 0 auto 16px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid #005ccc25;
  border-radius: 16px !important;
  background: #ffffffb3;
}
.quiz-catalog-card>div { min-width: 0; overflow-wrap: anywhere; }
.quiz-catalog-card h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.4; }
.quiz-catalog-card p { margin: 0; font-size: 12px; }
.quiz-catalog-card .primary {
  flex-shrink: 0;
  width: auto;
  margin: 0;
  padding: 12px 18px;
  font-size: 14px;
  border-radius: 12px !important;
}
.quiz-catalog-note { margin: 0 5%; font-size: 12px; }
.quiz-catalog-screen main>footer { flex-shrink: 0; margin: 0; padding: 0 16px; }
/* Em telas pequenas, as duas colunas ficam empilhadas dentro do painel rolável. */
@media(max-width:650px) {
  .quiz-catalog-screen main { padding-top: 16px; gap: 12px; }
  .quiz-catalog-toolbar { width: 92%; margin-bottom: 16px; gap: 12px; }
  .quiz-catalog-toolbar button { padding: 10px 12px; font-size: 12px; }
  .quiz-catalog-columns { flex-direction: column; align-items: center; justify-content: flex-start; gap: 20px; }
  .quiz-catalog-column { flex: none; width: 92%; padding: 20px 0; }
  .quiz-catalog-card { padding: 14px 12px; gap: 10px; }
  .quiz-catalog-card h3 { font-size: 15px; }
  .quiz-catalog-card .primary { padding: 10px 12px; font-size: 12px; }
}

/* Símbolo de IA acompanha o texto do botão sem alterar seu tamanho. */
#search-summaries {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ai-button-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: white;
}

/* Caderno: grade uniforme e superfícies Liquid Glass como na Home. */
body.notebook-screen {
  min-height: 100svh;
  color: #003586;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: radial-gradient(ellipse at 10% 20%, #005ccc22, transparent 55%), radial-gradient(ellipse at 90% 65%, #1ba21312, transparent 50%), #f6f9ff;
}
.notebook-screen main { max-width: 1280px; margin: 24px auto; padding: 24px; }
.notebook-screen header { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.notebook-screen header>h1, .notebook-screen header>p { display: none; }
.notebook-screen #platform-content { padding: 24px; border: 1px solid #005ccc25; border-radius: 28px !important; background: #ffffff40; box-shadow: 0 16px 45px #00358608; }
.nb-shell { padding: 32px; border-radius: 24px !important; background: linear-gradient(135deg, #ffffffd9, #ffffff80); box-shadow: inset 0 1px 0 white; backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); }
.notebook-screen button, .nb-dialog button { border-radius: 12px !important; transition: background-color .15s ease, color .15s ease; }
.nb-secondary { padding: 12px 18px; border: 1px solid #005ccc30; background: #ffffff70; font-size: 14px; }
.nb-secondary:hover { background: #005ccc12; }
.nb-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 24px 0 32px; }
.nb-heading h1 { font-size: clamp(28px, 4vw, 42px); margin: 0 0 8px; letter-spacing: -1px; overflow-wrap: anywhere; }
.nb-heading p { margin: 0; font-size: 15px; color: #526ba4; }
.notebook-screen .nb-new { width: auto; flex-shrink: 0; margin: 0; padding: 14px 24px; font-size: 16px; }
.nb-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 16px; }
.nb-empty h2 { font-size: clamp(24px, 3vw, 32px); margin: 32px 0 12px; }
.nb-empty p { max-width: 470px; font-size: 16px; margin: 0 0 28px; color: #526ba4; }
.nb-empty .nb-new { min-width: 250px; }
.nb-empty .nb-secondary { margin-top: 16px; }
/* Capa de caderno feita em CSS, sem downloads ou imagens de exemplo. */
.nb-illustration { position: relative; width: 130px; height: 160px; border: 2px solid #d6e4ff; border-radius: 18px !important; background: linear-gradient(135deg, #fff, #dce9ff); box-shadow: 5px 6px 0 #b4ceff, 12px 18px 24px #00358620, inset 2px 2px 0 white; transform: rotate(14deg); margin: 24px; }
.nb-illustration span { position: absolute; left: -12px; width: 24px; height: 9px; border-radius: 8px !important; background: linear-gradient(#a3c6ff, #005ccc70); box-shadow: 0 2px 3px #00358620; }
.nb-illustration span:nth-child(1) { top: 15px; }.nb-illustration span:nth-child(2) { top: 40px; }.nb-illustration span:nth-child(3) { top: 65px; }.nb-illustration span:nth-child(4) { top: 90px; }.nb-illustration span:nth-child(5) { top: 115px; }.nb-illustration span:nth-child(6) { top: 140px; }
.nb-illustration i { position: absolute; width: 58px; height: 6px; top: 40px; left: 42px; border-radius: 6px !important; background: #a9c8ff; box-shadow: 0 14px 0 #a9c8ff; }
.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 22px; }
.nb-card { --nb-accent: #005ccc; --nb-tint: #d6e5ff; min-width: 0; min-height: 220px; padding: 28px; border: 1px solid #005ccc18; border-radius: 22px !important; background: #ffffff70; box-shadow: 0 8px 24px #00358604; cursor: pointer; }
.nb-card[data-color="orange"] { --nb-accent: #c94d27; --nb-tint: #ffe5d8; }.nb-card[data-color="green"] { --nb-accent: #128c4b; --nb-tint: #daf4e4; }.nb-card[data-color="purple"] { --nb-accent: #7746cc; --nb-tint: #e9dfff; }
.nb-card:hover { border-color: #005ccc40; }
.nb-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.nb-card-icon { display: grid; place-items: center; width: 64px; height: 64px; color: var(--nb-accent); background: var(--nb-tint); border-radius: 16px !important; }
.nb-card-icon svg { width: 38px; height: 38px; }
.nb-card-tools { display: flex; align-items: center; gap: 8px; }
.nb-favorite { border: 0; padding: 6px; background: transparent; color: #526ba4; }
.nb-favorite svg { display: block; width: 25px; height: 25px; }
.nb-favorite[aria-pressed="true"] svg { fill: #005ccc; stroke: #005ccc; }
.nb-favorite:hover { background: #005ccc10; }
.nb-menu { position: relative; margin: 0; }
.nb-menu summary { list-style: none; font-size: 20px; letter-spacing: 2px; padding: 4px 8px; border-radius: 8px !important; }
.nb-menu summary::-webkit-details-marker { display: none; }
.nb-menu summary:hover { background: #005ccc10; }
.nb-menu>div { position: absolute; right: 0; top: 36px; z-index: 2; width: 170px; padding: 6px; background: white; border: 1px solid #005ccc25; border-radius: 12px !important; box-shadow: 0 8px 24px #00358618; }
.nb-menu button { display: block; width: 100%; padding: 10px; border: 0; background: transparent; text-align: left; font-size: 13px; }
.nb-menu button:hover { background: #005ccc0d; }
.nb-card h2 { margin: 16px 0 18px; font-size: 24px; line-height: 1.4; }
.nb-open { width: 100%; border: 0; padding: 0; background: transparent; color: #003586; text-align: left; font-weight: 700; overflow-wrap: anywhere; }
.nb-card-count { display: flex; align-items: center; gap: 10px; margin: 0; color: #526ba4; font-size: 14px; }
.nb-card-count svg { width: 22px; height: 22px; flex-shrink: 0; }
.nb-help-list { display: block; margin: 24px auto 0; }
.nb-status { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.nb-status:empty { margin: 0; }
.nb-symbols { position: absolute; overflow: hidden; }
.nb-dialog { width: min(460px, calc(100% - 32px)); padding: 28px; border: 1px solid #005ccc25; border-radius: 24px !important; color: #003586; background: #f6f9ff; font-family: 'Plus Jakarta Sans', sans-serif; box-shadow: 0 24px 64px #00358630; }
.nb-dialog::backdrop { background: #00358655; backdrop-filter: blur(4px); }
.nb-dialog h2 { margin: 0 0 20px; font-size: 24px; }
.nb-dialog label { font-size: 13px; margin-top: 16px; }
.nb-dialog input, .nb-dialog select { width: 100%; padding: 12px; border: 1px solid #005ccc30; border-radius: 12px !important; color: inherit; background: white; font: inherit; font-size: 14px; }
.nb-dialog input:focus { outline: none; }
.nb-dialog-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.nb-dialog-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.nb-dialog-actions .primary { width: auto; margin: 0; font-size: 14px; }
.nb-dialog li { margin-bottom: 12px; line-height: 1.7; font-size: 14px; }
.nb-dialog p { font-size: 14px; }
.nb-danger { color: #a33131; }
.nb-dialog .nb-delete-confirm { background: #a33131; }
.nb-dialog .nb-delete-confirm:hover { background: #812525; }
.nb-editor-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; }
.nb-pages { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.nb-page-link { padding: 12px; border: 1px solid #005ccc20; background: #ffffff80; text-align: left; font-size: 13px; overflow-wrap: anywhere; }
.nb-page-link[aria-current] { background: #005ccc; color: white; border-color: #005ccc; }
.nb-page-empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; }
.nb-page-empty .primary { max-width: 280px; }
.nb-page-form label { font-size: 13px; }
.nb-page-form input, .nb-page-form textarea { display: block; width: 100%; padding: 14px; border: 1px solid #005ccc25; border-radius: 12px !important; color: #003586; background: #ffffffb3; font: inherit; font-size: 15px; line-height: 1.7; margin-bottom: 20px; }
.nb-page-form textarea { resize: vertical; min-height: 300px; }
.nb-page-form input:focus, .nb-page-form textarea:focus { outline: none; }
.nb-page-actions { display: flex; gap: 12px; justify-content: space-between; align-items: center; }
.nb-page-actions .primary { width: auto; margin: 0; font-size: 14px; }
@media(max-width:650px) {
 .notebook-screen main { padding: 16px 12px; margin: 12px auto; }
 .notebook-screen #platform-content { padding: 12px; }
 .nb-shell { padding: 24px 16px; }
 .nb-heading { flex-wrap: wrap; margin: 24px 0; }
 .nb-heading p { font-size: 13px; }
 .notebook-screen .nb-new { padding: 12px 20px; font-size: 14px; }
 .nb-empty { padding: 24px 0; }.nb-empty p { font-size: 14px; }.nb-empty .nb-new { min-width: 0; width: 100%; max-width: 280px; }
 .nb-card { padding: 22px; }.nb-card h2 { font-size: 22px; }
 .nb-editor-layout { grid-template-columns: minmax(0, 1fr); }
 .nb-pages { flex-direction: row; flex-wrap: wrap; }.nb-page-link { max-width: 100%; }
 .nb-dialog { padding: 24px 18px; }.nb-dialog-actions { flex-wrap: wrap; }
 .nb-page-actions { flex-wrap: wrap; }
}

/* Editor limpo: escrita central, 40 linhas numeradas e ações no rodapé da página. */
.notebook-screen .nb-editor-layout { display: block; }
.notebook-screen .nb-pages { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.notebook-screen .nb-page-form { max-width: 900px; margin: 0 auto; }
.nb-writing-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.nb-writing-heading label { margin: 0; }
#nb-line-count { color: #526ba4; font-size: 12px; flex-shrink: 0; }
.nb-lined-paper { display: grid; grid-template-columns: 44px minmax(0, 1fr); border: 1px solid #005ccc20; border-radius: 14px !important; overflow: hidden; background: #fff; }
.nb-line-numbers { padding: 16px 8px; text-align: right; background: #005ccc05; border-right: 1px solid #005ccc15; color: #526ba4; font-size: 12px; }
.nb-line-numbers span { display: block; height: 32px; line-height: 32px; }
.nb-page-form #nb-page-content { height: 1312px; min-height: 0; padding: 16px 12px; margin: 0; border: 0; border-radius: 0 !important; resize: none; line-height: 32px; font-size: 15px; background: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, #005ccc12 31px, #005ccc12 32px); background-origin: content-box; overflow-x: auto; }
.notebook-screen .nb-page-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 12px; margin-top: 20px; }
.nb-page-actions #nb-page-delete { justify-self: start; }
.nb-page-actions #nb-page-new { justify-self: center; }
.nb-page-actions .primary { justify-self: end; }
@media(max-width:500px) {
 .nb-lined-paper { grid-template-columns: 32px minmax(0, 1fr); }
 .nb-line-numbers { padding-left: 4px; padding-right: 5px; }
 .nb-page-form #nb-page-content { padding-left: 8px; padding-right: 8px; font-size: 14px; }
 .notebook-screen .nb-page-actions { gap: 6px; }
 .nb-page-actions button { padding: 10px 6px; font-size: 11px; width: 100%; }
 .nb-page-actions .primary { font-size: 11px; }
}

/* A área de medição é invisível e nunca recebe foco ou ocupa a grade. */
#nb-writing-measure {
  position: fixed;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  border: 0;
}
.nb-page-form #nb-page-content {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow-x: hidden;
}

/* Conta: campos e mensagens seguem a tipografia e a paleta da plataforma. */
.welcome-screen .reference-login { padding-top: 40px; }
.welcome-screen #welcome-form { max-width: 340px; }
.welcome-screen #welcome-form label { display: block; margin: 14px 0 6px; font: inherit; font-size: 12px; color: #003586; }
.welcome-screen #welcome-form input { border: 1px solid #005ccc25; color: #003586; }
.welcome-screen #welcome-form input:focus { outline: none; }
.welcome-screen #welcome-form .primary { width: 100%; margin-top: 20px; background: #005ccc; }
.welcome-screen #welcome-form .primary:hover { background: #003586; }
.auth-toggle { border: 0; background: transparent; color: #005ccc; padding: 14px 4px; font: inherit; font-size: 13px; }
.auth-toggle:hover { text-decoration: underline; }
#auth-status { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; margin: 12px 0 0; }
#auth-status:empty { margin: 0; }

/* Exclusão de conta e recuperação usam os mesmos diálogos e superfícies LDC. */
.account-danger { background: #b42332; color: white; border: 1px solid #b42332; padding: 12px 18px; border-radius: 12px !important; font: inherit; font-size: 14px; }
.account-danger:hover { background: #8f1c29; border-color: #8f1c29; }
.account-danger:disabled { opacity: .6; cursor: wait; }
#forgot-password { padding-bottom: 0; }
.password-reset-panel { max-width: 430px; margin: 0 auto; padding: 12px; }
.password-reset-panel h1 { font-size: clamp(26px, 4vw, 34px); }
.password-reset-panel input { display: block; width: 100%; padding: 14px; border: 1px solid #005ccc25; border-radius: 12px !important; color: #003586; font: inherit; font-size: 15px; background: white; margin-bottom: 18px; }
.password-reset-panel input:focus { outline: none; }
.password-reset-panel label { font-size: 13px; }
#reset-password-status, #forgot-password-status, #delete-account-status { font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
#delete-account-dialog .account-danger { white-space: normal; }
#home-actions #delete-account { background: #b42332; border-color: #b42332; color: white; }
#home-actions #delete-account:hover { background: #8f1c29; border-color: #8f1c29; }
@media(max-width:500px) {
  #home-actions { gap: 8px; }
  #home-actions button { font-size: 12px; padding: 10px; }
}

/* Home: categorias e feed de acordo com a referência. */
.home-screen main { max-width: 1328px; margin: 42px auto 24px; padding: 0 18px; }
.home-screen header { margin: 0 8px 48px; gap: 24px; }
.home-screen header h1 { font-size: 28px; font-weight: 700; color: #0825ad; }
.home-screen #home-actions button { padding: 14px 18px; font-size: 16px; }
.home-screen .dashboard { padding: 0; border: 0; background: transparent; box-shadow: none; }
#screen-home { display: grid; grid-template-columns: minmax(0, 1.44fr) minmax(0, 1fr); gap: 28px; align-items: center; }
#screen-home[hidden] { display: none; }
.home-screen .tile-grid { gap: 18px; }
.home-screen .tile { min-height: 320px; padding: 34px 28px; border-radius: 24px !important; background: linear-gradient(135deg, #fffffff2, #ffffffad); box-shadow: 0 12px 30px #00358606; }
.home-screen .home-feature-icon { position: relative; display: grid; place-items: center; width: 116px; height: 116px; border-radius: 50%; background: transparent; color: #0061ff; margin-bottom: 14px; }
.home-feature-icon svg { width: 76px; height: 76px; }
.home-screen .tile h2 { font-size: 28px; color: #0825ad; }
.home-screen .tile .primary { max-width: 270px; margin-top: 22px; padding: 18px 12px; font-size: 18px; background: #005cea; }
.home-feed { height: 698px; padding: 18px 16px 18px 22px; border: 1px solid #005ccc18; border-radius: 24px; background: #ffffff40; display: flex; flex-direction: column; min-width: 0; }
.home-feed h2 { margin: 0 0 14px; font-size: 28px; color: #0825ad; letter-spacing: -1px; }
.home-feed-scroll { overflow-y: auto; min-height: 0; padding: 3px 16px 3px 0; scrollbar-width: thin; scrollbar-color: #0670ff #cbdcff; }
.home-feed-scroll::-webkit-scrollbar { width: 8px; }
.home-feed-scroll::-webkit-scrollbar-track { background: #cbdcff; border-radius: 10px; }
.home-feed-scroll::-webkit-scrollbar-thumb { background: #0670ff; border-radius: 10px; }
.feed-notification { height: 198px; margin: 0 3px 14px; border: 2px solid transparent; border-radius: 23px; background: #ffffffdf; transition: transform 180ms ease, border-color 180ms ease; }
.feed-notification:last-child { margin-bottom: 0; }
.feed-notification:hover { transform: scale(1.012); border-color: #0065ff; }
.home-screen main > footer { margin-top: 42px; }
@media(max-width: 1000px) {
 .home-screen header { flex-wrap: wrap; margin-bottom: 28px; }
 .home-screen header h1 { font-size: 24px; }
 #screen-home { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; }
 .home-screen .tile { min-height: 285px; padding: 24px 16px; }
 .home-screen .tile .primary { font-size: 15px; }
 .home-feed { height: 600px; }
}
@media(max-width: 720px) {
 .home-screen main { margin-top: 24px; padding: 0 16px; }
 #screen-home { grid-template-columns: 1fr; }
 #screen-home .home-feed { grid-row: 1; }
 #screen-home .tile-grid { grid-row: 2; }
 .home-screen header { margin-inline: 0; }
 .home-screen .tile { min-height: 260px; padding: 24px 12px; }
 .home-screen .home-feature-icon { width: 90px; height: 90px; }
 .home-feature-icon svg { width: 62px; height: 62px; }
 .home-screen .tile h2 { font-size: 23px; }
 .home-feed { height: 460px; }
}
@media(prefers-reduced-motion: reduce) { .feed-notification { transition: none; } }

/* Notificações abrem um modal vazio para o conteúdo futuro. */
.feed-notification { cursor: pointer; }
.feed-notification:focus-visible { outline: 2px solid #0065ff; outline-offset: 1px; }
#feed-dialog { width: 60vw; height: 50vh; max-width: none; max-height: none; box-sizing: border-box; padding: 20px; border: 1px solid #005ccc30; border-radius: 24px !important; background: #fff; color: #003586; box-shadow: 0 24px 64px #00358630; font-family: 'Plus Jakarta Sans', sans-serif; }
#feed-dialog::backdrop { background: #00358655; }
#feed-dialog-close { display: flex; align-items: center; gap: 12px; margin-left: auto; padding: 10px 16px; border: 1px solid #005ccc30; border-radius: 10px !important; background: white; color: #005ccc; }
body:has(#feed-dialog[open]) { overflow: hidden; }

/* Rodapé fixo da Home; espaço inferior evita cobrir o conteúdo. */
.home-screen main { display: flex; flex-direction: column; min-height: calc(100svh - 42px); margin-bottom: 0; padding-bottom: 5svh; }
.home-screen .dashboard { margin-bottom: 32px; }
body.home-screen main > footer {
 position: fixed;
 inset: auto 0 0;
 z-index: 100;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-shrink: 0;
 width: 100vw;
 height: 5vh;
 height: 5svh;
 margin: 0;
 padding: 0 12px;
 background: #fff;
 color: #000;
 text-align: center;
 font-size: 12px;
 line-height: 1.3;
 white-space: normal;
}
@media(max-width: 720px) {
 .home-screen main { min-height: calc(100svh - 24px); }
 body.home-screen main > footer { font-size: 10px; }
}

/* Estrutura compartilhada: as novas superfícies são exibidas somente no celular. */
.study-tools { min-width: 0; }
.study-tools-heading { display: none; }
#home-actions .account-action-icon { display: none; }

@media (max-width: 720px) {
  body.home-screen { background: #f6faff; }
  .home-screen main {
    width: 100%; max-width: 680px; min-height: 100svh;
    margin: 12px auto 0; padding: 0 12px;
  }
  .home-screen header {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 16px; margin: 0 0 12px; padding: 20px 16px 16px;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #eaf4ff, #e0edff);
  }
  .home-screen header h1 {
    min-width: 0; margin: 0; font-size: clamp(24px, 6.5vw, 32px);
    line-height: 1.18; letter-spacing: -.9px; overflow-wrap: anywhere;
  }
  .home-screen .home-greeting, .home-screen .home-question { display: block; }
  .home-screen .home-question { margin-top: 3px; font-size: .82em; letter-spacing: -.6px; }
  .home-screen #home-actions {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1.3fr);
    width: 100%; min-width: 0; margin: 0; gap: 8px; flex-shrink: 1;
  }
  .home-screen #home-actions button {
    display: flex; align-items: center; justify-content: center;
    min-width: 0; min-height: 44px; margin: 0; padding: 11px 6px;
    gap: 6px; border: 0; border-radius: 10px !important;
    background: #cfe2ff; color: #0038cb; font-weight: 700;
    font-size: clamp(10px, 3vw, 14px); line-height: 1.2; white-space: nowrap;
  }
  .home-screen #home-actions button:hover { background: #bfd8ff; }
  .home-screen #home-actions .account-action-icon { display: block; width: 17px; height: 17px; flex-shrink: 0; }
  .home-screen #home-actions #delete-account { background: #f21b3c; color: #fff; }
  .home-screen #home-actions #delete-account:hover { background: #d90e2d; }
  .home-screen .dashboard { margin: 0; }
  #screen-home { grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 12px; }
  #screen-home .home-feed, #screen-home .study-tools {
    min-width: 0; padding: 16px 14px; border: 0;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #e6f1ff, #deecff);
    box-shadow: none;
  }
  #screen-home .home-feed { grid-row: 1; height: auto; gap: 12px; }
  .home-screen .home-feed h2 { margin: 0; font-size: 25px; line-height: 1.2; letter-spacing: -.7px; }
  .home-screen .home-feed-scroll {
    height: clamp(164px, 43vw, 218px); flex: none; padding: 0 3px 0 0;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable;
  }
  .home-screen .feed-notification {
    height: clamp(72px, 20vw, 104px); margin: 0 0 10px;
    border-radius: 12px !important; background: #ffffffd9;
  }
  .home-screen .feed-notification:last-child { margin-bottom: 0; }
  .home-screen .feed-notification:hover { transform: none; border-color: #0065ff; }
  #screen-home .study-tools { grid-row: 2; padding: 16px 10px 12px; }
  .home-screen .study-tools-heading { display: block; padding: 0 6px; margin-bottom: 14px; }
  .home-screen .study-tools-heading h2 { margin: 0 0 5px; font-size: 24px; line-height: 1.25; color: #0825ad; letter-spacing: -.8px; }
  .home-screen .study-tools-heading p { margin: 0; color: #6885b3; font-size: 12px; line-height: 1.5; }
  .home-screen .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-screen .tile {
    min-width: 0; min-height: 170px; padding: 12px 9px 10px;
    border: 0; border-radius: 14px !important; background: #ffffffed;
    box-shadow: 0 5px 18px #00358604;
  }
  .home-screen .home-feature-icon { width: 54px; height: 54px; margin-bottom: 0; }
  .home-screen .home-feature-icon svg { width: 48px; height: 48px; }
  .home-screen .tile h2 { margin: 7px 0 0; font-size: 19px; line-height: 1.3; }
  .home-screen .tile .primary {
    display: flex; align-items: center; justify-content: center;
    width: 100%; max-width: none; min-height: 44px; margin: 11px 0 0; padding: 11px 6px;
    border-radius: 10px !important; background: #0061ff;
    font-size: clamp(10px, 3vw, 14px); line-height: 1.2;
  }
  .home-screen .tile .primary:hover { background: #0050d6; }
  .home-screen .ai-button-icon { width: 19px; height: 19px; margin-left: 5px; flex-shrink: 0; }
  body.home-screen main > footer {
    position: static; inset: auto; width: 100%; height: auto; min-height: 0;
    margin: 20px 0 16px; padding: 0 6px; background: transparent;
    font-size: 10px; line-height: 1.6; color: #27314d;
  }
  #feed-dialog { width: calc(100% - 32px); max-width: 560px; height: 50svh; padding: 14px; }
}

@media (max-width: 360px) {
  .home-screen header { padding: 18px 12px 14px; }
  .home-screen #home-actions { gap: 6px; }
  .home-screen #home-actions button { gap: 4px; padding-inline: 5px; }
  .home-screen #home-actions .account-action-icon { width: 15px; height: 15px; }
  .home-screen .study-tools-heading h2 { font-size: 22px; }
  .home-screen .tile { padding-inline: 7px; }
  .home-screen .tile h2 { font-size: 17px; }
}

/* Home ajustada à janela, com rolagem apenas quando o conteúdo exigir. */
@media (min-width: 721px) {
  .home-screen main {
    width: 100%;
    height: 100dvh;
    min-height: 620px;
    margin: 0 auto;
    padding: clamp(12px, 3dvh, 32px) 18px 0;
    gap: clamp(12px, 2dvh, 24px);
  }
  .home-screen header { flex-shrink: 0; margin: 0 8px; }
  .home-screen .dashboard { flex: 1; min-height: 0; margin: 0; }
  .home-screen #screen-home { height: 100%; min-height: 0; align-items: stretch; }
  .home-screen .study-tools { min-height: 0; }
  .home-screen .tile-grid { height: 100%; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: clamp(10px, 2dvh, 18px); }
  .home-screen .tile { min-height: 0; padding: clamp(12px, 2dvh, 28px) 16px; }
  .home-screen .home-feature-icon { width: clamp(48px, 10dvh, 100px); height: clamp(48px, 10dvh, 100px); margin-bottom: 4px; flex-shrink: 0; }
  .home-screen .home-feature-icon svg { width: 70%; height: 70%; }
  .home-screen .tile h2 { margin: 4px 0; font-size: clamp(20px, 3dvh, 28px); }
  .home-screen .tile .primary { margin-top: clamp(8px, 1.5dvh, 20px); padding: 12px; font-size: 15px; }
  .home-screen .home-feed { height: 100%; min-height: 0; }
  .home-screen .home-feed-scroll { flex: 1; }
  body.home-screen main > footer {
    position: static; inset: auto; width: 100%; height: auto;
    min-height: 32px; margin: 0; padding: 8px 12px;
  }
}
@media (max-width: 720px) {
  .home-screen main { min-height: calc(100dvh - 12px); }
}

/* Entrada de acordo com a referência, preservando login, cadastro e recuperação. */
body.welcome-screen { padding: clamp(12px, 3vw, 32px); }
.welcome-screen main { width: min(100%, 1420px); max-width: 1420px; margin: 0 auto; border-radius: 36px !important; }
.welcome-screen .reference-layout { min-height: min(860px, calc(100dvh - 64px)); }
.welcome-screen .school-intro { position: relative; padding: 64px 36px 110px; background: linear-gradient(135deg, #064697, #00327e); }
.welcome-screen .school-intro p { max-width: 510px; font-size: clamp(22px, 2.5vw, 38px); font-weight: 700; line-height: 1.45; margin-top: 44px; }
.welcome-screen .school-intro p+p { padding: 26px; margin-top: 24px; border: 1px solid #80b4ff; border-radius: 22px; background: #005ce0; font-size: clamp(17px, 1.8vw, 25px); }
#admin-open { position: absolute; left: 24px; bottom: 26px; min-width: 130px; padding: 14px 24px; border: 0; border-radius: 16px !important; color: white; background: #207dff; font-weight: 600; }
.welcome-screen .reference-login { padding: clamp(32px,5vw,68px) clamp(24px,5vw,68px) 90px; }
.welcome-screen .login-heading :is(h1,h2) { font-size: clamp(24px,2.5vw,38px); }
.welcome-screen .login-heading p { font-size: clamp(15px,1.5vw,21px); }
.welcome-screen .reference-login form { max-width: 100%; }
#admin-password-dialog { width: min(460px,calc(100% - 32px)); border: 1px solid #bfd5ff; border-radius: 22px !important; padding: 28px; color: #003586; font-family: 'Plus Jakarta Sans',sans-serif; }
#admin-password-dialog::backdrop { background: #00245a80; }
#admin-password-dialog h2 { margin: 0; font-size: 24px; }
#admin-password-dialog p { font-size: 14px; }
#admin-password-dialog input { width: 100%; border: 1px solid #bfd5ff; border-radius: 12px; padding: 12px; }
.admin-dialog-actions { display: flex; gap: 12px; margin-top: 20px; }
.admin-dialog-actions button { border-radius: 12px !important; margin: 0; font-size: 14px; }
.published-notification { padding: 16px; overflow-wrap: anywhere; }
.published-notification h3 { margin: 0 0 8px; font-size: 17px; }
.published-notification p { margin: 0; font-size: 13px; line-height: 1.5; }
.published-feed-text { overflow-wrap: anywhere; white-space: pre-wrap; }
#feed-dialog { overflow-y: auto; }
.published-quiz-dialog { width: min(700px,calc(100% - 24px)); max-height: 90dvh; overflow-y: auto; border: 1px solid #bfd5ff; border-radius: 20px; padding: 24px; color: #003586; font-family: 'Plus Jakarta Sans',sans-serif; }
.published-quiz-dialog::backdrop { background: #00245a80; }
.published-quiz-dialog > button { display:block; margin-left:auto; border-radius:10px; }
.published-quiz-dialog fieldset { min-width:0; margin: 20px 0; border: 1px solid #bfd5ff; border-radius:12px; padding:16px; overflow-wrap:anywhere; }
.published-quiz-dialog label { display: flex; align-items: center; gap: 12px; margin: 12px 0; font-weight:400; }
.published-quiz-dialog input { width: auto; margin:0; flex-shrink:0; }
@media(max-width:720px) {
 .welcome-screen .reference-layout { min-height:0; grid-template-columns:1fr; }
 .welcome-screen .school-intro {padding:32px 24px 88px;}
 .welcome-screen .school-intro p {margin-top:20px;font-size:24px;}
 .welcome-screen .school-intro p+p {font-size:16px;padding:18px;}
 .welcome-screen .reference-login {padding:32px 24px 88px;}
 .published-notification p {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
}
.welcome-screen .reference-login form { width:100%; }
.welcome-screen .school-intro p { width:100%; }
#admin-password-dialog input, .published-quiz-dialog, .published-quiz-dialog fieldset, .published-quiz-dialog > button { border-radius:12px !important; }

/* Cabeçalho da Home conforme a referência. */
.home-screen header {
  background: #ffffffd9;
  border-radius: 0 0 20px 20px !important;
  box-shadow: none;
}
.home-screen header h1 { color: #0825ad; font-weight: 700; }
.home-screen #home-actions button {
  min-height: 42px;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #005ccc25;
  border-radius: 9px !important;
  background: #ffffff80;
  color: #3157ba;
}
.home-screen #home-actions button:hover { background: #eaf2ff; }
.home-screen #home-actions #delete-account { background: #bd1d32; border-color: #bd1d32; color: #fff; }
.home-screen #home-actions #delete-account:hover { background: #981729; border-color: #981729; }
@media (min-width: 721px) {
  .home-screen main { padding-top: 0; gap: clamp(20px, 5dvh, 48px); }
  .home-screen header {
    min-height: 74px;
    margin: 0 -18px;
    padding: 14px 36px;
    gap: 24px;
    flex-wrap: nowrap;
    align-items: center;
  }
  .home-screen header h1 { min-width: 0; margin: 0; font-size: clamp(18px, 1.7vw, 24px); line-height: 1.4; }
  .home-screen #home-actions { display: flex; gap: 8px; margin: 0; }
}
@media (max-width: 720px) {
  .home-screen main { margin-top: 0; min-height: 100dvh; }
  .home-screen header { padding: 18px 16px; }
  .home-screen #home-actions button { font-size: clamp(10px, 3vw, 14px); padding: 10px 6px; }
}
/* Notificações do feed: resumo, categoria, data, destaque e leitura por aluno. */
.home-screen .published-notification {height:auto;min-height:160px;padding:18px 20px;border:1px solid #dce8ff;border-radius:18px !important;background:#fff;}
.home-screen .published-notification.is-unread {border-left:4px solid #0061ff;background:#fafdff;}
.feed-notification-meta {display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:11px;color:#5b7098;margin-bottom:12px;}
.feed-category {font-size:10px;letter-spacing:.3px;font-weight:700;color:#064cc8;text-transform:uppercase;}
.feed-unread-count {display:inline-block;vertical-align:middle;font-size:11px;letter-spacing:0;margin-left:8px;padding:5px 8px;border-radius:20px !important;background:#dceaff;color:#005ccc;}
.feed-load-status,.feed-empty,.feed-read-status {font-size:12px;line-height:1.6;color:#526787;}
.feed-load-status:empty {display:none;}
.feed-detail-meta {font-size:13px;color:#5b7098;}
.published-feed-text {white-space:normal;}
.published-feed-text h2 {font-size:26px;line-height:1.3;margin:12px 0 20px;}
.feed-message {white-space:pre-wrap;line-height:1.8;font-size:16px;}
@media(max-width:720px){.home-screen .published-notification {min-height:120px;padding:14px;} .feed-notification-meta{margin-bottom:8px;}}
/* Cadastro: popup de WhatsApp com a identidade visual da LDC. */
#signup-whatsapp-dialog {width:min(490px,calc(100% - 28px));max-height:90dvh;overflow-y:auto;padding:30px;border:1px solid #bfd5ff;border-radius:24px !important;color:#003586;background:#fff;box-shadow:0 24px 64px #00358630;font-family:'Plus Jakarta Sans',sans-serif;}
#signup-whatsapp-dialog::backdrop {background:#00245a80;}
.signup-whatsapp-mark {font-size:12px;font-weight:700;color:#0061ff;margin-bottom:14px;}
#signup-whatsapp-dialog h2 {font-size:28px;line-height:1.25;letter-spacing:-.8px;margin:0 0 12px;}
#signup-whatsapp-dialog p {font-size:14px;line-height:1.6;}
#signup-whatsapp-dialog label {font-size:14px;margin:20px 0 8px;}
#signup-whatsapp-dialog input {width:100%;height:52px;padding:14px;border:1px solid #bfd5ff;border-radius:12px !important;color:#003586;font:inherit;}
#signup-whatsapp-help,#signup-whatsapp-dialog .signup-whatsapp-privacy {font-size:11px;color:#667b9c;}
.signup-whatsapp-preference {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0;font-size:14px;line-height:1.5;}
.signup-whatsapp-choice {display:flex;align-items:center;gap:10px;flex-shrink:0;}
#signup-whatsapp-updates {position:relative;width:66px;height:36px;min-height:36px;padding:3px;border:1px solid #bdcbdc;border-radius:999px !important;background:#d7dfe8;transition:background .18s;}
#signup-whatsapp-updates span {display:block;width:28px;height:28px;border-radius:50% !important;background:white;box-shadow:0 2px 5px #00358620;transition:transform .18s;}
#signup-whatsapp-updates[aria-checked=true] {background:#45d715;border-color:#45d715;}
#signup-whatsapp-updates[aria-checked=true] span {transform:translateX(28px);}
#signup-whatsapp-choice-text {font-size:13px;min-width:25px;font-weight:600;}
.signup-whatsapp-actions {display:flex;gap:12px;margin-top:20px;}
.signup-whatsapp-actions button {min-height:46px;border-radius:12px !important;font:inherit;font-size:14px;margin:0;padding:12px 16px;}
.signup-whatsapp-actions .primary {flex:1;}
@media(max-width:420px){#signup-whatsapp-dialog {padding:24px 20px;}.signup-whatsapp-preference{gap:12px;}}
@media(prefers-reduced-motion:reduce){#signup-whatsapp-updates,#signup-whatsapp-updates span{transition:none;}}
.signup-whatsapp-actions .primary {margin:0;min-height:46px;width:auto;}
.signup-whatsapp-actions {align-items:stretch;}
/* Quiz LDC: uma pergunta por vez, progresso e resultado final. */
.published-quiz-dialog {width:min(720px,calc(100% - 24px));max-height:92dvh;padding:26px 30px 30px;border:1px solid #c6daff;border-radius:24px !important;background:linear-gradient(155deg,#fff,#f7faff);box-shadow:0 24px 70px #00358630;}
.published-quiz-dialog > button {padding:10px 16px;border:1px solid #d5e3ff;border-radius:10px !important;background:#fff;color:#3157ba;font-size:13px;}
.quiz-player-heading {padding-top:8px;}
.quiz-player-eyebrow {font-size:12px;font-weight:600;color:#5976a5;line-height:1.6;margin:0 0 6px;}
.published-quiz-dialog .quiz-player-title {font-size:28px;letter-spacing:-.8px;line-height:1.3;margin:0 0 24px;color:#0825ad;overflow-wrap:anywhere;}
.quiz-player-progress {margin-bottom:26px;}
.quiz-player-progress-labels {display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:10px;font-size:12px;color:#5a739e;}
.quiz-player-progress-labels > :first-child {font-weight:700;color:#003586;}
.quiz-player-progress progress {display:block;width:100%;height:8px;border:0;border-radius:20px !important;overflow:hidden;appearance:none;background:#dfeaff;accent-color:#0061ff;}
.quiz-player-progress progress::-webkit-progress-bar {background:#dfeaff;border-radius:20px;}
.quiz-player-progress progress::-webkit-progress-value {background:#0061ff;border-radius:20px;}
.quiz-player-progress progress::-moz-progress-bar {background:#0061ff;border-radius:20px;}
.published-quiz-dialog .quiz-player-question {margin:0;padding:0;border:0;}
.quiz-player-prompt {width:100%;padding:0;font-size:22px;font-weight:700;line-height:1.5;color:#003586;overflow-wrap:anywhere;}
.quiz-player-options {display:grid;gap:10px;margin-top:22px;}
.published-quiz-dialog .quiz-player-option {position:relative;display:flex;gap:12px;align-items:center;margin:0;min-height:60px;padding:12px 16px;border:1px solid #d3e2fc;border-radius:14px !important;background:#fff;cursor:pointer;}
.published-quiz-dialog .quiz-player-option:hover {background:#f0f6ff;border-color:#8bb7ff;}
.published-quiz-dialog .quiz-player-option.is-selected {border-color:#0061ff;background:#edf4ff;box-shadow:0 0 0 1px #0061ff;}
.published-quiz-dialog .quiz-player-option input {position:absolute;opacity:0;width:1px;height:1px;}
.quiz-player-option:focus-within {outline:3px solid #97bdff;outline-offset:3px;}
.quiz-player-letter {display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;border:1px solid #d3e2fc;border-radius:9px !important;color:#5278b5;font-size:13px;font-weight:700;background:#f7faff;}
.is-selected .quiz-player-letter {color:#fff;background:#0061ff;border-color:#0061ff;}
.quiz-player-option-text {min-width:0;overflow-wrap:anywhere;font-size:15px;line-height:1.6;}
.quiz-player-actions {display:flex;gap:12px;margin-top:26px;}
.quiz-player-actions button {min-height:48px;padding:12px 18px;border-radius:12px !important;font-size:14px;font-weight:600;}
.quiz-player-actions .primary {flex:1;width:auto;margin:0;background:#0061ff;}
.quiz-player-secondary {background:white;border:1px solid #c9dcff;color:#3157ba;}
.quiz-player-actions button:disabled {opacity:.45;cursor:default;}
.quiz-player-result {padding:28px 18px;text-align:center;border:1px solid #dce8ff;border-radius:20px !important;background:#fff;}
.quiz-player-percentage {font-size:64px;font-weight:800;line-height:1.1;letter-spacing:-3px;color:#0061ff;margin:12px 0 20px;}
.quiz-player-result h3 {font-size:20px;line-height:1.5;margin:0;color:#0825ad;}
.quiz-player-result-note {font-size:13px;line-height:1.7;color:#647ca0;margin:12px 0 0;}
@media(max-width:500px){.published-quiz-dialog {padding:18px 18px 22px;}.published-quiz-dialog .quiz-player-title {font-size:24px;margin-bottom:20px;}.quiz-player-prompt {font-size:19px;}.published-quiz-dialog .quiz-player-option {padding:10px 12px;}.quiz-player-actions {gap:8px;}.quiz-player-actions button {padding:12px;font-size:12px;}.quiz-player-percentage {font-size:54px;}}

/* Confirmação de cada resposta, com os mesmos botões e tipografia do quiz. */
.quiz-player-feedback {display:flex;flex-direction:column;align-items:center;text-align:center;min-height:min(540px,65dvh);padding:30px 0 0;}
.quiz-player-feedback-icon {display:grid;place-items:center;flex-shrink:0;width:clamp(120px,24vw,180px);height:clamp(120px,24vw,180px);border-radius:50% !important;font-size:clamp(76px,16vw,116px);font-weight:800;line-height:1;}
.quiz-player-feedback-icon.is-correct {color:#16a329;background:#e6f8e9;}
.quiz-player-feedback-icon.is-incorrect {color:#e32c36;background:#ffe9eb;}
.published-quiz-dialog .quiz-player-feedback h2 {margin:22px 0 32px;font-size:clamp(26px,5vw,36px);line-height:1.3;letter-spacing:-.8px;color:#0825ad;}
.quiz-player-feedback .quiz-player-actions {width:min(100%,360px);margin-top:auto;padding-top:24px;}
@media(max-width:500px){.quiz-player-feedback{min-height:min(460px,62dvh);padding-top:24px;}}
/* O foco fica dentro do cartão para não ser cortado pela rolagem do feed. */
.feed-notification:focus-visible {outline-offset:-3px;}
@media(max-width:720px) {
  html, body {max-width:100%;overflow-x:clip;}
  body {width:100%;}
  main, #platform-content, .screen {min-width:0;max-width:100%;}
  .screen > *, .feed-notification-meta > * {min-width:0;}
  .feed-notification-meta {flex-wrap:wrap;}
  .home-screen .home-feed-scroll {overflow-x:hidden;}
  .home-screen .feed-notification {max-width:100%;}
  .home-screen .feed-notification:hover {transform:none;}
  .published-notification h3, .feed-notification-meta {overflow-wrap:anywhere;}
}
/* Painel disponível visualmente apenas acima do layout de celular. */
@media(max-width:720px) { #admin-open {display:none;} }

/* Acesso por teclado e redução de movimento em todas as telas. */
.skip-link{position:fixed;left:12px;top:8px;z-index:9999;padding:12px 18px;background:#fff;color:#003586;transform:translateY(-160%);border:2px solid #005bea;border-radius:8px!important;}
.skip-link:focus{transform:translateY(0);}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:3px solid #0061ff;outline-offset:3px;}
.public-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin:18px 0 8px;font-size:12px;line-height:1.6;}
.public-links a{color:#003586;text-underline-offset:3px;}
.public-intro{font-size:14px!important;line-height:1.6!important;}
.no-script{padding:16px;background:#fff;color:#003586;}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}}

/* Contraste AA nos botões administrativos. */
#admin-open{background:#0053ca;}