:root {
  font-family: Arial, sans-serif;
  color: #2f3a34;
  background: #f7f4ee;
  --bg: #f7f4ee;
  --surface: #fffdf9;
  --surface-2: #f0ece3;
  --ink: #2f3a34;
  --muted: #6e756f;
  --sage: #6f8575;
  --sage-soft: #dfe7df;
  --gold: #b89259;
  --gold-soft: #eee2cf;
  --rose: #b7837a;
  --rose-soft: #ecdcd8;
  --blue: #788c9a;
  --blue-soft: #dfe6ea;
  --line: #ded9cf;
  --shadow: 0 12px 34px rgba(55, 64, 58, .08);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
#app { min-height: 100vh; }
.brand-title, h1, h2, h3 { font-family: "Baloo 2", "Trebuchet MS", Arial, sans-serif; letter-spacing: .01em; }
.shell { max-width: 1180px; margin: 0 auto; padding: 28px 24px 48px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:28px; }
.brand { display:flex; align-items:center; gap:12px; }
.brand-mark { width:42px; height:42px; border-radius:14px; background:var(--surface); box-shadow:var(--shadow); position:relative; }
.brand-mark::before,.brand-mark::after{content:"";position:absolute;background:var(--sage);border-radius:4px;left:50%;top:50%;transform:translate(-50%,-50%)}
.brand-mark::before{width:7px;height:26px}.brand-mark::after{width:22px;height:7px}
.brand-title { font-size:1.35rem; font-weight:800; }
.brand-subtitle { font-size:.82rem; color:var(--muted); margin-top:1px; }
.demo-switch { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.pill { border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px; padding:9px 13px; }
.pill.active { background:var(--sage); color:white; border-color:var(--sage); }
.grid { display:grid; gap:18px; }
.grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:var(--shadow); }
.card h2,.card h3 { margin:0 0 8px; }
.metric { font-size:2rem; font-weight:800; font-family:"Baloo 2","Trebuchet MS",Arial,sans-serif; }
.muted { color:var(--muted); }
.small { font-size:.88rem; }
.section-title { display:flex; justify-content:space-between; align-items:end; gap:16px; margin:30px 0 14px; }
.section-title h2 { margin:0; }
.action-card { border-left:6px solid var(--sage); }
.action-card.introduction { border-left-color:var(--gold); }
.action-card.intervention { border-left-color:var(--rose); }
.action-card.verification { border-left-color:var(--blue); }
.names { display:flex; flex-wrap:wrap; gap:7px; margin:12px 0 16px; }
.name-chip { background:var(--surface-2); border-radius:999px; padding:6px 10px; font-size:.88rem; }
.primary { border:0; border-radius:14px; padding:12px 16px; background:var(--sage); color:white; font-weight:700; }
.secondary { border:1px solid var(--line); border-radius:14px; padding:11px 16px; background:var(--surface); color:var(--ink); font-weight:700; }
.danger-soft { background:var(--rose-soft); border-color:transparent; }
.table-wrap { overflow:auto; border-radius:18px; border:1px solid var(--line); background:var(--surface); }
table { width:100%; border-collapse:collapse; min-width:700px; }
th,td { padding:13px 14px; border-bottom:1px solid var(--line); text-align:left; font-size:.92rem; }
th { background:#f4f0e8; color:#586159; font-weight:700; }
.status { display:inline-block; padding:5px 9px; border-radius:999px; font-size:.78rem; font-weight:700; background:var(--sage-soft); }
.student-picker { max-width:860px; margin:60px auto; }
.student-list { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px; }
.student-btn { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:18px; display:flex; align-items:center; gap:12px; text-align:left; box-shadow:var(--shadow); }
.avatar { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:var(--sage-soft); color:#425248; font-weight:800; }
.child-stage { min-height:100vh; display:grid; place-items:center; padding:28px; background:linear-gradient(180deg,#f8f5ef,#f2eee6); }
.child-panel { width:min(760px,100%); background:var(--surface); border:1px solid var(--line); border-radius:30px; padding:34px; box-shadow:var(--shadow); text-align:center; }
.child-name { color:var(--muted); font-size:.95rem; margin-bottom:10px; }
.child-question { font-family:"Baloo 2","Trebuchet MS",Arial,sans-serif; font-weight:800; font-size:clamp(1.55rem,4vw,2.35rem); line-height:1.2; margin:22px auto; max-width:660px; }
.media-placeholder { height:250px; display:grid; place-items:center; border-radius:24px; background:#ebe7de; border:1px solid #dcd6ca; overflow:hidden; position:relative; }
.media-placeholder.art { background:linear-gradient(135deg,#d9c7a9,#7e8ea0 45%,#6d796b); }
.media-placeholder.animal { background:linear-gradient(135deg,#cad9c7,#e8d7b9); }
.media-placeholder.map { background:linear-gradient(135deg,#dce6e7,#d9dcc2); }
.media-placeholder.instrument { background:linear-gradient(135deg,#d7c8b9,#e7dfd6); }
.media-label { font-family:"Baloo 2","Trebuchet MS",Arial,sans-serif; font-size:clamp(1.45rem,5vw,3rem); font-weight:800; letter-spacing:.08em; color:rgba(47,58,52,.82); padding:20px; }
.reveal { margin-top:18px; min-width:210px; }
.answer-box { background:#f1eee7; border-radius:20px; padding:22px; margin:20px 0; }
.answer-text { font-family:"Baloo 2","Trebuchet MS",Arial,sans-serif; font-size:2rem; font-weight:800; }
.response-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.response-btn { border:1px solid var(--line); border-radius:18px; padding:16px 12px; background:var(--surface); font-weight:800; }
.response-btn.remembered { background:var(--sage-soft); }
.response-btn.partial { background:var(--gold-soft); }
.response-btn.forgotten { background:var(--rose-soft); }
.progress-line { height:7px; border-radius:999px; background:#ece7de; overflow:hidden; margin:0 0 22px; }
.progress-line > div { height:100%; background:var(--sage); }
.big-finish { font-family:"Baloo 2","Trebuchet MS",Arial,sans-serif; font-size:2.4rem; font-weight:800; }
.notice { padding:14px 16px; border-radius:14px; background:var(--blue-soft); margin:12px 0; }
.retention { display:flex; gap:10px; align-items:flex-end; height:150px; padding-top:20px; }
.bar { flex:1; display:flex; flex-direction:column; justify-content:flex-end; gap:7px; height:100%; text-align:center; font-size:.78rem; color:var(--muted); }
.bar-fill { border-radius:12px 12px 4px 4px; background:var(--sage); min-height:8px; }
.kicker { text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:800; color:var(--muted); }
.empty { padding:28px; text-align:center; color:var(--muted); }
@media (max-width: 850px) {
  .grid-4,.grid-3,.grid-2 { grid-template-columns:1fr; }
  .student-list { grid-template-columns:1fr 1fr; }
  .topbar { align-items:flex-start; flex-direction:column; }
  .demo-switch { justify-content:flex-start; }
  .response-grid { grid-template-columns:1fr; }
}
@media (max-width: 520px) {
  .shell { padding:18px 14px 32px; }
  .student-list { grid-template-columns:1fr; }
  .child-stage { padding:12px; }
  .child-panel { padding:24px 18px; border-radius:24px; }
  .media-placeholder { height:210px; }
}

/* v0.2 — biblioteca de conteúdo e imagens reais */
.home-hero { padding:34px; max-width:900px; margin:50px auto 0; }
.home-hero h1 { font-size:2.6rem; margin:8px 0 12px; }
.home-copy { font-size:1.08rem; line-height:1.7; max-width:760px; }
.home-actions { margin-top:24px; }
.page-heading { margin:6px 0 0; }
.page-intro { max-width:760px; line-height:1.6; margin-bottom:0; }
.page-head-row { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:22px; }
.section-gap { margin-top:18px; }
.flush-top { margin-top:0; }
.split-row { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); }
.finish-panel { padding:56px 34px; }
.finish-copy { font-size:1.1rem; }
.finish-number { font-size:4rem; }
.finish-panel .primary { margin-top:28px; min-width:180px; }
.media-figure { margin:0 auto; width:fit-content; max-width:100%; text-align:right; }
.media-frame { margin:0 auto; display:block; width:fit-content; max-width:100%; border-radius:24px; overflow:hidden; border:1px solid #dcd6ca; line-height:0; }
.media-frame img { display:block; width:auto; height:auto; max-width:100%; object-fit:contain; }
.media-figure figcaption { padding:6px 4px 0; text-align:right; line-height:1.25; }
.spoken-line { display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; }
.question-spoken-line { margin:22px auto; max-width:680px; }
.question-spoken-line .child-question { margin:0; }
.answer-spoken-line { margin-top:4px; }
.speak-button { flex:0 0 auto; width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink); cursor:pointer; }
.speak-button:hover { background:var(--sage-soft); }
.speak-button:focus-visible { outline:3px solid rgba(111,133,117,.28); outline-offset:2px; }
.speak-button svg { width:24px; height:24px; fill:currentColor; }
.answer-speak-button { width:50px; height:50px; }
.placeholder-note { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); font-size:.74rem; color:rgba(47,58,52,.58); background:rgba(255,255,255,.62); border-radius:999px; padding:5px 9px; white-space:nowrap; }
.content-grid { grid-template-columns:minmax(0,1.2fr) minmax(360px,.8fr); align-items:start; margin-top:18px; }
.card label { display:block; font-weight:700; font-size:.9rem; margin-top:14px; color:#4a554e; }
.card label input:not([type="file"]), .card label select, .card label textarea { width:100%; margin-top:6px; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:12px; padding:11px 12px; outline:none; }
.card label input:focus, .card label select:focus, .card label textarea:focus { border-color:var(--sage); box-shadow:0 0 0 3px rgba(111,133,117,.12); }
.form-grid { display:grid; gap:12px; }
.form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.form-grid.three { grid-template-columns:.6fr 1.2fr 1fr; }
.media-upload-box { display:flex; align-items:center; justify-content:space-between; gap:18px; border:1px dashed #cfc8bb; background:#faf8f3; border-radius:16px; padding:16px; margin-top:18px; }
.file-button { display:inline-flex !important; align-items:center; justify-content:center; margin:0 !important; white-space:nowrap; }
.new-media-preview { min-height:70px; margin-top:10px; border-radius:16px; background:var(--surface-2); display:grid; place-items:center; overflow:hidden; }
.new-media-preview img { max-width:100%; max-height:250px; display:block; }
.new-media-preview > div { padding:6px 10px; }
.form-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.existing-media-list { display:flex; flex-direction:column; gap:10px; max-height:720px; overflow:auto; padding-right:3px; }
.existing-media-row { display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:16px; background:#fcfaf6; }
.thumb { width:72px; height:58px; border-radius:12px; background:#e8e2d7; display:grid; place-items:center; overflow:hidden; font-weight:800; font-size:.8rem; color:#69736d; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.existing-media-copy { min-width:0; }
.tiny { font-size:.75rem; }
.table-thumb { width:74px; height:54px; object-fit:cover; border-radius:9px; border:1px solid var(--line); }
.actions-cell { display:flex; gap:6px; align-items:center; }
.compact { padding:7px 9px; border-radius:10px; font-size:.75rem; }
code { background:#ece7de; padding:2px 5px; border-radius:5px; }

@media (max-width: 980px) {
  .content-grid { grid-template-columns:1fr; }
  .page-head-row { flex-direction:column; }
}
@media (max-width: 700px) {
  .form-grid.two, .form-grid.three { grid-template-columns:1fr; }
  .media-upload-box { align-items:flex-start; flex-direction:column; }
  .existing-media-row { grid-template-columns:64px 1fr; }
  .existing-media-row .file-button { grid-column:1 / -1; width:100%; }
  .media-frame img { max-width:100%; height:auto; }
}

/* v0.3 — backend conectado */
.login-stage { min-height:100vh; display:grid; place-items:center; padding:24px; background:linear-gradient(180deg,#f8f5ef,#f2eee6); }
.login-card { width:min(460px,100%); background:var(--surface); border:1px solid var(--line); border-radius:26px; padding:30px; box-shadow:var(--shadow); }
.login-brand { margin-bottom:28px; }
.login-card h1 { margin:6px 0 6px; font-size:2.4rem; }
.login-card label { display:block; font-weight:700; color:#4a554e; margin-top:15px; }
.login-card input { width:100%; margin-top:6px; border:1px solid var(--line); border-radius:12px; padding:12px; background:white; }
.login-note { margin-top:18px; line-height:1.5; }
.full-button { width:100%; }
.login-card .full-button { margin-top:20px; }
.error-notice { background:var(--rose-soft); color:#70473f; }
.inline-select { display:flex; align-items:center; gap:8px; font-weight:700; }
.inline-select select { border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:10px 12px; color:var(--ink); }

/* v0.3.1 — onboarding administrativo */
.admin-grid { grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; }
.form-submit { margin-top:20px; }
.admin-hint { margin-top:12px; line-height:1.5; }
.backend-badge { display:inline-flex; align-items:center; white-space:nowrap; border:1px solid var(--line); background:var(--sage-soft); border-radius:999px; padding:8px 12px; font-size:.8rem; font-weight:700; }
@media (max-width: 980px) { .admin-grid { grid-template-columns:1fr; } }
/* v0.3.4 — edição de conteúdo */
.edit-notice { margin:12px 0 6px; background:#eef2ec; color:#46534a; }
.editing-row { border-color:var(--sage); box-shadow:0 0 0 2px rgba(111,133,117,.10); }

/* v0.3.6 — desenvolvimento individual e calendário futuro */
.progress-head-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.progress-overview { display:grid; grid-template-columns:minmax(0,1fr) 250px; gap:18px; align-items:stretch; }
.metric-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.progress-metric { min-width:0; border:1px solid var(--line); background:var(--surface); border-radius:20px; padding:16px; text-align:left; box-shadow:var(--shadow); color:var(--ink); display:flex; flex-direction:column; gap:6px; }
.progress-metric:hover,.progress-metric.active { border-color:var(--sage); }
.progress-metric.active { box-shadow:0 0 0 2px rgba(111,133,117,.14); }
.progress-metric-label { font-size:.78rem; color:var(--muted); font-weight:700; min-height:2.2em; }
.progress-metric strong { font-family:"Baloo 2","Trebuchet MS",Arial,sans-serif; font-size:2rem; line-height:1; }
.progress-metric-note { font-size:.72rem; color:var(--muted); min-height:2.2em; }
.metric-track { display:block; height:5px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin-top:auto; }
.metric-track i { display:block; height:100%; min-width:3px; border-radius:999px; background:var(--sage); }
.retention-ring-card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:18px; box-shadow:var(--shadow); display:flex; align-items:center; gap:16px; }
.retention-ring { --pct:0; width:94px; height:94px; flex:0 0 94px; border-radius:50%; background:conic-gradient(var(--sage) calc(var(--pct)*1%),var(--surface-2) 0); display:grid; place-items:center; }
.retention-ring::before { content:""; width:72px; height:72px; border-radius:50%; background:var(--surface); grid-area:1/1; }
.retention-ring > div { grid-area:1/1; z-index:1; display:flex; flex-direction:column; align-items:center; line-height:1; }
.retention-ring strong { font-family:"Baloo 2","Trebuchet MS",Arial,sans-serif; font-size:1.35rem; }
.retention-ring span { margin-top:4px; font-size:.68rem; color:var(--muted); }
.progress-middle { grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr); margin-top:18px; align-items:stretch; }
.area-progress-list { display:flex; flex-direction:column; gap:10px; }
.area-progress-row { border:1px solid transparent; background:transparent; border-radius:12px; padding:8px; display:grid; grid-template-columns:150px minmax(0,1fr); gap:12px; align-items:center; text-align:left; color:var(--ink); }
.area-progress-row:hover,.area-progress-row.active { background:#faf8f3; border-color:var(--line); }
.area-progress-name { font-weight:700; font-size:.9rem; }
.area-progress-name small { color:var(--muted); font-weight:400; }
.stack-track { display:flex; height:13px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.stack-track .seg { min-width:0; height:100%; }
.seg.stable,.progress-legend i.stable { background:var(--sage); }
.seg.consolidating,.progress-legend i.consolidating { background:var(--blue); }
.seg.learning,.progress-legend i.learning { background:var(--gold); }
.seg.attention,.progress-legend i.attention { background:var(--rose); }
.progress-legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:15px; font-size:.72rem; color:var(--muted); }
.progress-legend span { display:flex; align-items:center; gap:5px; }
.progress-legend i { width:9px; height:9px; border-radius:50%; display:inline-block; }
.day-detail h2 { margin-top:4px; text-transform:capitalize; }
.day-list { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.day-list button { border:1px solid var(--line); border-radius:12px; background:#faf8f3; padding:10px 12px; display:flex; justify-content:space-between; gap:12px; text-align:left; color:var(--ink); }
.day-list button strong { font-size:.75rem; color:var(--blue); white-space:nowrap; }
.human-list button strong { color:var(--gold); }
.calendar-card { background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:var(--shadow); margin-top:18px; }
.calendar-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:14px; }
.calendar-head h2 { margin:4px 0 0; }
.calendar-weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; }
.calendar-weekdays { margin-bottom:7px; color:var(--muted); font-size:.68rem; font-weight:800; text-align:center; letter-spacing:.08em; }
.calendar-day { min-height:78px; border:1px solid var(--line); border-radius:12px; background:#fcfaf6; padding:8px; color:var(--ink); display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; }
.calendar-day.past { opacity:.28; cursor:default; }
.calendar-day.today { border-color:var(--sage); }
.calendar-day.selected { box-shadow:0 0 0 2px rgba(111,133,117,.18); background:#f7faf7; }
.calendar-day.has-activity:not(.selected) { background:#faf7ef; }
.calendar-number { font-weight:800; margin-bottom:auto; }
.calendar-review,.calendar-human { font-size:.67rem; border-radius:999px; padding:3px 6px; white-space:nowrap; }
.calendar-review { background:var(--blue-soft); color:#536a77; }
.calendar-human { background:var(--gold-soft); color:#775f3a; }
.knowledge-list { display:flex; flex-direction:column; gap:8px; }
.knowledge-row { width:100%; border:1px solid var(--line); border-radius:16px; padding:13px 15px; background:var(--surface); color:var(--ink); display:grid; grid-template-columns:minmax(220px,1.5fr) 90px minmax(140px,.8fr) minmax(170px,1fr); gap:14px; align-items:center; text-align:left; }
.knowledge-row:hover,.knowledge-row.active { border-color:var(--sage); background:#fcfbf7; }
.knowledge-main { min-width:0; display:flex; flex-direction:column; gap:3px; }
.knowledge-main small,.knowledge-stage small,.knowledge-last small,.knowledge-due small { color:var(--muted); font-size:.7rem; display:block; }
.knowledge-stage,.knowledge-last,.knowledge-due { display:block; }
.knowledge-detail { margin-top:18px; scroll-margin-top:20px; }
.knowledge-detail-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:14px 0 18px; }
.knowledge-detail-grid > div { background:#faf8f3; border:1px solid var(--line); border-radius:14px; padding:12px; }
.knowledge-detail-grid span,.knowledge-detail-grid strong { display:block; }
.knowledge-timeline { display:flex; flex-direction:column; gap:0; margin-top:8px; }
.timeline-item { position:relative; display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; padding:0 0 16px; }
.timeline-item::before { content:""; position:absolute; left:6px; top:12px; bottom:-2px; width:1px; background:var(--line); }
.timeline-item:last-child::before { display:none; }
.timeline-dot { width:13px; height:13px; margin-top:3px; border-radius:50%; background:var(--blue); border:3px solid var(--surface); box-shadow:0 0 0 1px var(--line); z-index:1; }
.timeline-item.human .timeline-dot { background:var(--gold); }
.timeline-item.verify .timeline-dot { background:var(--sage); }
.timeline-item.intervention .timeline-dot { background:var(--rose); }
@media (max-width:1050px){ .progress-overview{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.retention-ring-card{justify-content:center}.progress-middle{grid-template-columns:1fr}.knowledge-row{grid-template-columns:minmax(180px,1.3fr) 70px 120px 160px} }
@media (max-width:760px){ .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.calendar-day{min-height:62px;padding:5px}.calendar-review,.calendar-human{font-size:.58rem;padding:2px 4px}.area-progress-row{grid-template-columns:110px minmax(0,1fr)}.knowledge-row{grid-template-columns:1fr 70px}.knowledge-last,.knowledge-due{grid-column:1 / -1}.knowledge-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.progress-page-head{align-items:stretch}.progress-head-actions{justify-content:flex-start} }
@media (max-width:520px){ .metric-grid{grid-template-columns:1fr 1fr}.progress-metric{padding:13px}.retention-ring-card{align-items:flex-start}.calendar-card{padding:14px}.calendar-weekdays,.calendar-grid{gap:3px}.calendar-day{border-radius:8px}.calendar-review,.calendar-human{white-space:normal}.knowledge-detail-grid{grid-template-columns:1fr} }

/* v0.3.8 — áudio somente sob comando e moldura ajustada à imagem */

/* v0.3.9 — designação pedagógica pela professora */
.teacher-primary-actions { display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 8px; }
.teacher-primary-actions .primary,.teacher-primary-actions .secondary { min-width:220px; }
.assignment-layout { display:grid; grid-template-columns:minmax(280px,.72fr) minmax(0,1.55fr); gap:18px; align-items:start; }
.assignment-settings { position:sticky; top:12px; }
.assignment-settings h2,.assignment-library h2 { margin:4px 0 14px; }
.assignment-target-switch { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0 14px; }
.assignment-target-switch label { display:flex; gap:8px; align-items:center; border:1px solid var(--line); border-radius:12px; padding:10px 12px; background:#faf8f3; font-weight:700; }
.assignment-students { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 14px; }
.student-check { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; padding:7px 10px; background:var(--surface); }
.assignment-settings > label { display:block; margin-top:12px; font-weight:700; color:#4a554e; }
.assignment-settings input[type="date"],.assignment-settings textarea { width:100%; margin-top:6px; border:1px solid var(--line); border-radius:12px; padding:11px 12px; background:white; color:var(--ink); }
.assignment-rule { margin:16px 0; border-left:4px solid var(--sage); background:var(--sage-soft); border-radius:10px; padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.assignment-rule span { color:var(--muted); font-size:.82rem; line-height:1.45; }
.assignment-library-head { display:flex; gap:16px; justify-content:space-between; align-items:flex-end; margin-bottom:14px; }
.assignment-filters { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.assignment-filters input,.assignment-filters select { border:1px solid var(--line); border-radius:11px; padding:9px 11px; background:white; color:var(--ink); min-width:170px; }
.assignment-objective-list { display:flex; flex-direction:column; gap:8px; max-height:740px; overflow:auto; padding-right:4px; }
.assignment-objective { display:grid; grid-template-columns:24px 74px minmax(0,1fr); gap:12px; align-items:center; border:1px solid var(--line); border-radius:16px; padding:10px 12px; background:var(--surface); cursor:pointer; }
.assignment-objective:hover { border-color:var(--sage); background:#fcfbf7; }
.assignment-objective:has(.assignment-objective-check:checked) { border-color:var(--sage); box-shadow:0 0 0 2px rgba(111,133,117,.12); }
.assignment-objective-check { width:18px; height:18px; }
.assignment-thumb { width:74px; height:58px; border:1px solid var(--line); border-radius:10px; overflow:hidden; display:grid; place-items:center; background:#f4f1eb; color:var(--muted); }
.assignment-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.assignment-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.assignment-copy strong { font-size:.96rem; }
.assignment-copy small { color:var(--muted); font-size:.72rem; }
.assignment-copy span { color:#57645c; font-size:.8rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.assignment-copy em { color:var(--blue); font-size:.69rem; font-style:normal; font-weight:700; }
.assignment-plan-list { display:flex; flex-direction:column; gap:8px; }
.assignment-plan-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; }
.assignment-plan-row > div:first-child { display:flex; flex-direction:column; gap:3px; min-width:190px; }
.assignment-plan-row > div:first-child small:last-child { color:var(--muted); }
.calendar-assignment { font-size:.67rem; border-radius:999px; padding:3px 6px; white-space:nowrap; background:var(--sage-soft); color:#536458; }
.assignment-day-list > div { border:1px solid var(--line); border-radius:12px; background:#faf8f3; padding:10px 12px; display:flex; justify-content:space-between; gap:12px; text-align:left; color:var(--ink); }
.assignment-day-list > div strong { font-size:.75rem; color:var(--sage); white-space:nowrap; }
@media (max-width:980px){ .assignment-layout{grid-template-columns:1fr}.assignment-settings{position:static}.assignment-objective-list{max-height:none}.assignment-library-head{align-items:stretch;flex-direction:column}.assignment-filters{justify-content:flex-start} }
@media (max-width:600px){ .assignment-target-switch{grid-template-columns:1fr}.assignment-objective{grid-template-columns:22px 58px minmax(0,1fr)}.assignment-thumb{width:58px;height:48px}.assignment-plan-row{align-items:flex-start;flex-direction:column}.teacher-primary-actions .primary,.teacher-primary-actions .secondary{width:100%;min-width:0} }

/* v0.3.13 — perfis e permissões */
.permissions-card { margin-top:24px; }
.permission-copy { max-width:820px; line-height:1.55; }
.permission-table-wrap { margin-top:16px; }
.permissions-table { min-width:760px; }
.permissions-table th:not(:first-child), .permission-cell { text-align:center; width:132px; }
.permissions-table input[type="checkbox"] { width:22px; height:22px; accent-color:var(--sage); cursor:pointer; }
.permissions-table input[type="checkbox"]:disabled { cursor:not-allowed; opacity:.65; }
.permission-category td { background:var(--surface-2); color:var(--muted); text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:800; }
.library-readonly { align-self:start; }
.readonly-grid { grid-template-columns:minmax(220px,.42fr) minmax(0,1.58fr); }
@media (max-width:980px) { .readonly-grid { grid-template-columns:1fr; } }

/* v0.3.15 — filtros da biblioteca */
.library-head { display:flex; gap:16px; justify-content:space-between; align-items:flex-end; margin-bottom:10px; }
.library-count { margin:0 0 12px; }
@media (max-width:980px){ .library-head{align-items:stretch;flex-direction:column}.library-filters{justify-content:flex-start} }

/* v0.3.15 — salvamento explícito de permissões */
.permission-save-action:disabled { opacity:.45; cursor:not-allowed; }
.permission-save-bar { position:sticky; bottom:12px; z-index:8; margin-top:16px; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:rgba(250,248,243,.96); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:space-between; gap:16px; box-shadow:0 8px 24px rgba(38,42,36,.08); }
.permission-save-bar.dirty { border-color:#8d9d8e; box-shadow:0 10px 28px rgba(38,42,36,.13); }
@media (max-width:700px){ .permission-save-bar{align-items:stretch;flex-direction:column}.permission-save-bar .primary{width:100%} }

/* v0.3.17 — Modo Aluno: nome + PIN no dispositivo da sala */
.student-pin-ready { background:var(--sage-soft); color:#415247; }
.student-portal-stage { min-height:100vh; background:linear-gradient(180deg,#f8f5ef 0%,#f1ede4 100%); padding:28px; }
.student-portal-shell { width:min(1020px,100%); margin:0 auto; min-height:calc(100vh - 56px); display:flex; flex-direction:column; }
.student-portal-brand { display:flex; align-items:center; gap:12px; align-self:flex-start; }
.student-welcome { text-align:center; margin:64px auto 30px; }
.student-welcome-title,.student-login-title { justify-content:center; gap:12px; }
.student-welcome h1,.student-login-card h1 { margin:0; font-size:clamp(2.3rem,6vw,4rem); }
.student-welcome p,.student-instruction { margin:8px 0 0; color:var(--muted); font-size:1.15rem; }
.student-choice-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; width:100%; max-width:900px; margin:0 auto; }
.student-choice { min-height:190px; border:1px solid var(--line); border-radius:28px; background:var(--surface); box-shadow:var(--shadow); color:var(--ink); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:22px; }
.student-choice:hover,.student-choice:focus-visible { border-color:var(--sage); box-shadow:0 0 0 3px rgba(111,133,117,.12),var(--shadow); outline:none; }
.student-choice-avatar,.student-avatar-large { display:grid; place-items:center; border-radius:50%; background:var(--sage-soft); color:#425248; font-family:"Baloo 2","Trebuchet MS",Arial,sans-serif; font-weight:800; }
.student-choice-avatar { width:82px; height:82px; font-size:2.2rem; }
.student-choice strong { font-family:"Baloo 2","Trebuchet MS",Arial,sans-serif; font-size:1.65rem; }
.student-choice small { color:var(--muted); font-size:.78rem; }
.teacher-area-link { margin-top:auto; align-self:center; border:0; background:transparent; color:#7d817d; font-size:.72rem; font-weight:800; letter-spacing:.08em; padding:22px 14px 4px; }
.teacher-area-link:hover { color:var(--ink); }
.student-login-card { width:min(560px,100%); margin:42px auto 20px; background:var(--surface); border:1px solid var(--line); border-radius:32px; box-shadow:var(--shadow); padding:28px 34px 34px; text-align:center; }
.student-back { display:block; border:0; background:transparent; color:var(--muted); font-weight:800; font-size:.76rem; letter-spacing:.05em; padding:0 0 18px; }
.student-avatar-large { width:104px; height:104px; margin:4px auto 14px; font-size:3rem; }
.student-pin-dots { display:flex; gap:14px; justify-content:center; margin:26px 0 12px; }
.student-pin-dots span { width:19px; height:19px; border:2px solid #aeb6af; border-radius:50%; background:transparent; transition:.15s ease; }
.student-pin-dots span.filled { background:var(--sage); border-color:var(--sage); transform:scale(1.08); }
.student-pin-error { min-height:24px; color:#8b554c; font-weight:700; font-size:.9rem; margin-bottom:8px; }
.student-pin-error.placeholder { color:transparent; }
.student-keypad { display:grid; grid-template-columns:repeat(3,88px); justify-content:center; gap:12px; margin-top:8px; }
.student-keypad button { height:70px; border:1px solid var(--line); border-radius:20px; background:#fbf9f4; color:var(--ink); font-family:"Baloo 2","Trebuchet MS",Arial,sans-serif; font-size:2rem; font-weight:800; }
.student-keypad button:hover,.student-keypad button:focus-visible { border-color:var(--sage); background:#f3f6f2; outline:none; }
.student-keypad .keypad-ghost { visibility:hidden; }
.student-no-pin { margin:28px auto 8px; max-width:420px; line-height:1.6; }

@media (max-width: 760px) {
  .student-portal-stage { padding:18px; }
  .student-portal-shell { min-height:calc(100vh - 36px); }
  .student-welcome { margin-top:42px; }
  .student-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
  .student-choice { min-height:160px; padding:16px; border-radius:24px; }
  .student-choice-avatar { width:68px; height:68px; font-size:1.9rem; }
  .student-choice strong { font-size:1.4rem; }
}
@media (max-width: 480px) {
  .student-choice-grid { grid-template-columns:1fr 1fr; }
  .student-login-card { padding:22px 18px 26px; border-radius:26px; }
  .student-keypad { grid-template-columns:repeat(3,78px); gap:10px; }
  .student-keypad button { height:64px; }
}


/* v0.3.19 — acesso individual em casa */
.student-access-stack { display:flex; flex-direction:column; align-items:flex-start; gap:7px; min-width:260px; }
.student-access-stack > div { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.danger-compact { color:#7f4d45; border-color:#d9bcb6; }
.danger-compact:hover,.danger-compact:focus-visible { border-color:#b87d73; background:#fbf4f2; outline:none; }
.home-device-note { margin:18px auto 0; max-width:390px; line-height:1.5; }
.home-footer-links { margin-top:auto; display:flex; justify-content:center; flex-wrap:wrap; gap:4px 16px; }
.home-footer-links .teacher-area-link { margin-top:0; }
@media (max-width:700px) {
  .student-access-stack { min-width:220px; }
  .student-access-stack .compact { width:auto; }
  .home-footer-links { flex-direction:column; align-items:center; gap:0; }
  .home-footer-links .teacher-area-link { padding-top:12px; }
}