* {
  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 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 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 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 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; }
}