:root{--bg:#f4f7f5;--surface:#fff;--primary:#18794e;--primary-dark:#0f5d3a;--text:#1e293b;--muted:#64748b;--border:#dbe4df;--danger:#b42318}*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}.topbar{height:68px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - 1180px)/2));position:sticky;top:0;z-index:10}.brand{font-weight:800;color:var(--primary);text-decoration:none}.topbar nav{display:flex;gap:16px;align-items:center}.topbar a{color:var(--text);text-decoration:none}.container{max-width:1180px;margin:auto;padding:30px 20px 60px}h1,h2,h3{line-height:1.2}.page-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.page-head p,.card p,.breadcrumbs,small{color:var(--muted)}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.compact{margin-top:10px}.panel,.card,.auth-card,.stat{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 8px 24px rgba(15,23,42,.07)}.panel{padding:24px;margin-bottom:26px}.auth-card{max-width:560px;margin:8vh auto;padding:32px}.narrow{max-width:560px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-bottom:30px}.card{padding:22px}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}.stat{padding:20px}.stat strong{display:block;font-size:2rem;color:var(--primary)}.stats{display:flex;gap:14px;color:var(--muted);margin:18px 0}.badge{display:inline-block;background:#e8f5ee;color:var(--primary-dark);border-radius:999px;padding:4px 10px;font-size:.8rem;font-weight:700}form{display:grid;gap:16px}.inline{display:inline}.form-row{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:end}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.full{grid-column:1/-1}label{display:flex;flex-direction:column;gap:7px;font-weight:650}input,select,textarea{width:100%;border:1px solid #cbd5e1;border-radius:10px;padding:11px;font:inherit;background:#fff}button,.button{display:inline-flex;justify-content:center;border:0;border-radius:10px;background:var(--primary);color:#fff;padding:11px 16px;font-weight:750;cursor:pointer;text-decoration:none}.secondary{background:#e7eee9;color:var(--primary-dark)}.danger{background:var(--danger)}.link-button,.link-danger{background:none;padding:0}.link-button{color:var(--primary)}.link-danger{color:var(--danger)}.alert{padding:14px;border-radius:10px;margin-bottom:18px}.alert-success{background:#ecfdf3;color:#067647}.alert-error{background:#fef3f2;color:var(--danger)}.empty{padding:30px;border:1px dashed #b9c9c0;border-radius:14px;color:var(--muted);text-align:center}.timeline{border-left:3px solid #cfe4d8;margin-left:10px;padding-left:24px}.timeline article{padding:4px 0 24px}.timeline time{display:block;color:var(--muted);font-size:.85rem}.check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}.check-card{display:flex;flex-direction:row;align-items:center;border:1px solid var(--border);border-radius:10px;padding:12px}.check-card input{width:auto}.check-card span{display:flex;flex-direction:column}.measurement-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px;margin-bottom:10px}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;background:#fff}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--border);vertical-align:top}.admin-row{display:grid;grid-template-columns:160px 100px 90px;align-items:center}.inline-check{display:flex;flex-direction:row}.inline-check input{width:auto}@media(max-width:700px){.page-head{align-items:flex-start;flex-direction:column}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.measurement-row{grid-template-columns:1fr}.topbar nav span{display:none}.admin-row{grid-template-columns:1fr}}@media print{.topbar,.actions,button{display:none!important}.container{max-width:none;padding:0}.panel{box-shadow:none;border:0}}
.suap-login-button{width:100%;margin-top:12px;font-size:1rem;padding:14px 18px}

.section-head{display:flex;justify-content:space-between;align-items:center}.media-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}.media-gallery figure{margin:0;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff}.media-gallery img,.media-gallery video{display:block;width:100%;height:190px;object-fit:cover;background:#111}.media-gallery figcaption{padding:10px;color:var(--muted);font-size:.88rem}.document-card{display:flex;min-height:190px;align-items:center;justify-content:center;padding:20px;text-decoration:none;color:var(--primary)}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.detail-grid>div{padding:14px;border:1px solid var(--border);border-radius:10px}.detail-grid span{display:block;margin-top:5px}.detail-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.map-frame{width:100%;height:360px;border:0;border-radius:12px}.comments{display:grid;gap:12px;margin-bottom:18px}.comment{padding:14px;border-left:4px solid var(--border);background:#f8faf9;border-radius:8px}.comment.teacher,.comment.admin{border-left-color:var(--primary);background:#edf8f2}.comment time{display:block;color:var(--muted);font-size:.8rem}.agenda-list,.notification-list{display:grid;gap:12px}.agenda-item,.notification{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px;border:1px solid var(--border);border-radius:12px}.agenda-item.done{opacity:.65}.notification.unread{border-left:5px solid var(--primary);background:#f2fbf6}.chart-controls{display:flex;gap:12px;margin-bottom:12px}.chart-canvas{width:100%;height:320px}.ok-text{color:#067647;font-weight:700}.muted{color:var(--muted)}hr{border:0;border-top:1px solid var(--border);margin:24px 0}

.protocol-step{border-left:5px solid var(--primary)}
.task-list{display:grid;gap:8px;margin:16px 0}
.task-row,.dashboard-task,.task-card{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;border:1px solid var(--border);border-radius:10px}
.task-row span,.task-card small,.dashboard-task small{display:block;color:var(--muted)}
.task-checklist{display:grid;gap:10px}
.task-card.completed{background:#effbf4;border-color:#a8ddbd}
.task-card.pending{background:#fff}
.protocol-student-step.today{border-left:6px solid #e5a100}
.protocol-student-step.overdue{border-left:6px solid var(--danger)}
.instruction-box{padding:15px;background:#eef7f1;border-radius:10px;margin-bottom:18px}
.progress{width:140px;height:10px;border-radius:999px;background:#e6ece8;overflow:hidden;display:inline-block;margin-right:8px}
.progress span{display:block;height:100%;background:var(--primary)}
.test-banner{position:fixed;left:0;right:0;bottom:0;z-index:100;background:#7c3aed;color:#fff;padding:10px 18px;display:flex;justify-content:center;align-items:center;gap:16px;font-weight:700}
.test-banner form{display:inline}.test-banner button{background:#fff;color:#5b21b6;padding:7px 12px}
.protocol-student-step .section-head{margin-bottom:14px}
@media(max-width:700px){.task-row,.dashboard-task,.task-card{align-items:flex-start;flex-direction:column}.progress{width:100px}}

.student-dashboard{display:grid;gap:22px}.student-welcome{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:28px;border-radius:20px;background:linear-gradient(135deg,#0f5d3a,#279668);color:#fff}.student-welcome h1{margin:.25rem 0}.student-welcome p{margin:0}.help-button{padding:12px 16px;border-radius:12px;background:#fff;color:#0f5d3a;text-decoration:none;font-weight:800}.student-progress-card{display:grid;grid-template-columns:1fr 2fr auto;align-items:center;gap:18px;padding:18px 22px;border:1px solid var(--border);border-radius:16px;background:#fff}.student-progress-card span{display:block;color:var(--muted)}.student-progress-track{height:14px;border-radius:999px;background:#e4ebe7;overflow:hidden}.student-progress-track span{height:100%;background:var(--primary)}.student-alert-card{display:flex;gap:16px;padding:18px;border-radius:14px}.student-alert-card.late{background:#fff3e8;border:1px solid #f6b873}.student-alert-icon{font-size:2rem}.next-action-card{display:grid;grid-template-columns:auto 1fr;gap:20px;padding:26px;border-radius:20px;background:#fff;border:2px solid #b9ddc8}.step-number{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff;font-weight:900}.task-status-label{display:inline-block;padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:800}.task-status-label.late{background:#fee4e2;color:#b42318}.task-status-label.today{background:#fff0c2;color:#8a5a00}.task-status-label.upcoming{background:#e8f5ee;color:#0f5d3a}.task-meta{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}.task-meta span{padding:7px 10px;border-radius:9px;background:#f1f5f3}.student-primary-action{display:inline-flex;justify-content:center;padding:13px 18px;border-radius:11px;background:var(--primary);color:#fff;text-decoration:none;font-weight:800;border:0}.student-section,.student-how-it-works{padding:24px;border-radius:18px;background:#fff;border:1px solid var(--border)}.simple-task-list{display:grid;gap:10px}.simple-task{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px;border:1px solid var(--border);border-radius:12px}.simple-task.late{border-left:5px solid #b42318}.simple-task.today{border-left:5px solid #e5a100}.simple-task-number{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e8f5ee;color:#0f5d3a;font-weight:900}.simple-task span{display:block;color:var(--muted)}.student-project-grid{display:grid;gap:12px}.student-project-card{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:16px;border:1px solid var(--border);border-radius:13px}.student-project-card>span{font-size:2rem}.student-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.student-steps div{display:flex;align-items:center;gap:10px}.student-steps b{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary);color:#fff}.student-tour-backdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(15,23,42,.7)}.student-tour-modal{width:min(520px,100%);padding:30px;border-radius:22px;background:#fff;text-align:center}.tour-slide{display:none}.tour-slide.active{display:block}.tour-emoji{display:block;font-size:4rem}.tour-dots{display:flex;justify-content:center;gap:8px;margin:24px 0}.tour-dots span{width:9px;height:9px;border-radius:50%;background:#cbd5e1}.tour-dots span.active{background:var(--primary)}.tour-actions{display:flex;justify-content:space-between;gap:12px}.help-hero{display:flex;align-items:center;gap:20px;padding:24px;border-radius:18px;background:#eaf7ef}.help-hero>span{font-size:4rem}.help-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.help-grid article{padding:20px;border-radius:14px;background:#fff;border:1px solid var(--border)}.help-grid b{display:flex;width:38px;height:38px;align-items:center;justify-content:center;border-radius:50%;background:var(--primary);color:#fff}.help-symbols{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.help-symbols>div{display:flex;gap:12px;padding:12px;border:1px solid var(--border);border-radius:10px}.student-task-header{max-width:720px;margin:0 auto 18px;padding:24px;border-radius:18px;background:#eaf7ef}.student-task-form{max-width:720px}.student-submit-check{padding:14px;border-radius:10px;background:#f7faf8}
@media(max-width:800px){.student-welcome{align-items:flex-start;flex-direction:column}.student-progress-card{grid-template-columns:1fr}.student-steps,.help-grid{grid-template-columns:1fr 1fr}.simple-task,.student-project-card{grid-template-columns:auto 1fr}.simple-task a,.student-project-card a{grid-column:2}.next-action-card{grid-template-columns:1fr}}
@media(max-width:520px){.student-steps,.help-grid,.help-symbols{grid-template-columns:1fr}.tour-actions{flex-direction:column-reverse}}

.modality-explainer{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:20px 0 28px}.modality-explainer article{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid var(--border);border-radius:14px;background:#fff}.modality-explainer article>span{font-size:2rem}.modality-explainer p{margin:.2rem 0;color:var(--muted)}.individual-badge{background:#eef2ff!important;color:#4338ca!important}.live-button,.live-link{background:#b42318!important;color:#fff!important}.live-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px}.live-pulse{display:inline-flex;color:#b42318;font-weight:900;animation:livePulse 1.4s infinite}.live-clock{font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums}.live-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}.live-summary{padding:20px;border:1px solid var(--border);border-radius:16px;background:#fff}.live-summary strong{display:block;font-size:2.2rem}.live-summary.success strong{color:#067647}.live-summary.warning strong{color:#b06b00}.live-summary.danger strong{color:#b42318}.live-table-wrap{overflow:auto;max-height:70vh}.live-matrix{min-width:900px}.live-matrix .sticky-student{position:sticky;left:0;background:#fff;z-index:2;min-width:220px}.live-matrix thead .sticky-student{z-index:4}.live-cell{min-width:130px;padding:9px;border-radius:10px;text-align:center}.live-cell span,.live-cell strong,.live-cell small{display:block}.live-cell.complete{background:#ecfdf3;color:#067647}.live-cell.partial{background:#fff7e6;color:#8a5a00}.live-cell.not_started{background:#f3f4f6;color:#64748b}.live-status-icon{font-size:1.4rem}.live-progress{width:100px;height:9px;border-radius:999px;background:#e5e7eb;overflow:hidden}.live-progress span{display:block;height:100%;background:var(--primary)}.live-legend div{display:flex;gap:18px;flex-wrap:wrap}.legend-complete{color:#067647}.legend-partial{color:#8a5a00}.legend-empty{color:#64748b}.teacher-project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}.teacher-project-card{display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:18px;border:1px solid var(--border);border-radius:14px}.teacher-project-card h3{margin:.5rem 0 .2rem}@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.35}}@media(max-width:800px){.modality-explainer,.live-summary-grid{grid-template-columns:1fr 1fr}.live-header{flex-direction:column}.live-clock{font-size:1.5rem}}@media(max-width:520px){.modality-explainer,.live-summary-grid{grid-template-columns:1fr}}


/* =========================================================
   AMBIENTE GAMIFICADO DO ALUNO — MOBILE FIRST
   ========================================================= */

.student-role{
    background:
        radial-gradient(circle at top right, rgba(143,205,142,.16), transparent 28rem),
        linear-gradient(180deg,#f5fbf4 0,#f8faf7 420px,#f4f7f4 100%);
}

.student-role .container{
    max-width:1120px;
}

.student-game-dashboard{
    display:grid;
    gap:18px;
    padding-bottom:92px;
}

.game-hero{
    position:relative;
    overflow:hidden;
    display:grid;
    gap:18px;
    padding:22px;
    border-radius:24px;
    background:
        radial-gradient(circle at 92% 12%,rgba(255,255,255,.3),transparent 15rem),
        linear-gradient(145deg,#176846,#2f8b5d 60%,#4d9e68);
    color:#fff;
    box-shadow:0 18px 50px rgba(26,92,60,.18);
}

.game-hero::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    right:-70px;
    bottom:-90px;
}

.game-hero-copy{
    position:relative;
    z-index:1;
}

.game-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-size:.76rem;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.86;
}

.game-hero h1{
    margin:8px 0 10px;
    max-width:620px;
    color:inherit;
    font-size:clamp(1.8rem,7vw,3.15rem);
    line-height:1.02;
}

.game-hero p{
    max-width:650px;
    margin:0;
    color:rgba(255,255,255,.88);
    line-height:1.55;
}

.game-hero-actions{
    display:grid;
    gap:10px;
    margin-top:20px;
}

.game-primary-button,
.game-secondary-button{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:52px;
    padding:12px 16px;
    border-radius:14px;
    font-weight:800;
    text-decoration:none;
}

.game-primary-button{
    background:#fff;
    color:#176846;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

.game-secondary-button{
    border:1px solid rgba(255,255,255,.42);
    background:rgba(255,255,255,.1);
    color:#fff;
}

.plant-stage-card{
    position:relative;
    z-index:1;
    display:grid;
    justify-items:center;
    align-content:center;
    min-height:210px;
    padding:18px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:20px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(8px);
    text-align:center;
}

.plant-stage-glow{
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;
    background:rgba(229,255,210,.22);
    filter:blur(12px);
}

.plant-stage-icon{
    position:relative;
    font-size:5rem;
    line-height:1;
    filter:drop-shadow(0 12px 14px rgba(0,0,0,.16));
    animation:studentPlantFloat 3.2s ease-in-out infinite;
}

@keyframes studentPlantFloat{
    0%,100%{transform:translateY(0) rotate(-1deg)}
    50%{transform:translateY(-7px) rotate(1deg)}
}

.plant-stage-card strong{
    margin-top:10px;
    font-size:1.1rem;
}

.plant-stage-card small{
    margin-top:3px;
    color:rgba(255,255,255,.82);
}

.plant-progress-track,
.level-track{
    width:100%;
    height:10px;
    overflow:hidden;
    margin-top:14px;
    border-radius:999px;
    background:rgba(255,255,255,.2);
}

.plant-progress-track span,
.level-track span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#d8ff9c,#fff4a8);
    transition:width .4s ease;
}

.plant-stage-card b{
    margin-top:7px;
    font-size:.78rem;
}

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

.game-stat{
    display:flex;
    gap:10px;
    align-items:center;
    min-width:0;
    padding:14px;
    border:1px solid #dfe9df;
    border-radius:17px;
    background:#fff;
    box-shadow:0 7px 18px rgba(28,65,48,.05);
}

.game-stat>span{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    flex:0 0 38px;
    border-radius:12px;
    background:#eff8ef;
    font-size:1.3rem;
}

.game-stat div{
    min-width:0;
}

.game-stat strong,
.game-stat small{
    display:block;
}

.game-stat strong{
    color:#173d2d;
    line-height:1.15;
}

.game-stat small{
    margin-top:3px;
    overflow:hidden;
    color:#708078;
    font-size:.72rem;
    text-overflow:ellipsis;
}

.level-card{
    display:grid;
    gap:8px;
    padding:17px;
    border:1px solid #eadfb9;
    border-radius:18px;
    background:linear-gradient(135deg,#fffef5,#fff8db);
}

.level-card>div:first-child{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:center;
}

.level-card .game-eyebrow{
    color:#8c6518;
}

.level-card>div:first-child strong{
    color:#765519;
}

.level-card .level-track{
    margin:0;
    background:#eee2ba;
}

.level-card .level-track span{
    background:linear-gradient(90deg,#f2b943,#efd56f);
}

.level-card small{
    color:#806f4d;
}

.mission-alert{
    display:grid;
    grid-template-columns:auto 1fr;
    gap:12px;
    align-items:center;
    padding:16px;
    border:1px solid #f0b9ad;
    border-radius:17px;
    background:#fff4ef;
}

.mission-alert-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:12px;
    background:#ffe2d7;
    font-size:1.3rem;
}

.mission-alert strong{
    color:#993a28;
}

.mission-alert p{
    margin:3px 0 0;
    color:#8a5d54;
    font-size:.86rem;
}

.mission-alert>a{
    grid-column:1/-1;
    display:flex;
    justify-content:center;
    padding:10px;
    border-radius:11px;
    background:#b54b36;
    color:#fff;
    font-weight:800;
    text-decoration:none;
}

.featured-mission{
    padding:20px;
    border:1px solid #cfe6d5;
    border-radius:22px;
    background:
        radial-gradient(circle at top right,rgba(94,177,111,.12),transparent 11rem),
        #fff;
    box-shadow:0 12px 34px rgba(29,84,55,.08);
}

.featured-mission.mission-late{
    border-color:#edb5a9;
    background:
        radial-gradient(circle at top right,rgba(206,89,57,.08),transparent 11rem),
        #fff;
}

.featured-mission-top{
    display:flex;
    justify-content:space-between;
    gap:12px;
}

.mission-type{
    display:inline-flex;
    padding:5px 8px;
    border-radius:999px;
    background:#e9f6eb;
    color:#35754b;
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.04em;
}

.featured-mission h2{
    margin:8px 0 4px;
    font-size:1.4rem;
}

.featured-mission-top p{
    margin:0;
    color:#718078;
}

.mission-xp{
    align-self:start;
    white-space:nowrap;
    padding:8px 10px;
    border-radius:11px;
    background:#fff5cf;
    color:#8d6818;
    font-size:.82rem;
    font-weight:900;
}

.mission-description{
    margin:16px 0;
    padding:12px 14px;
    border-left:4px solid #8ac293;
    border-radius:0 10px 10px 0;
    background:#f6faf6;
    color:#53665a;
    line-height:1.5;
}

.mission-meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:14px 0;
}

.mission-meta span{
    padding:7px 9px;
    border:1px solid #e0e9e2;
    border-radius:999px;
    background:#fafcf9;
    color:#5d6e63;
    font-size:.76rem;
    font-weight:700;
}

.mission-cta{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:52px;
    margin-top:14px;
    padding:12px 15px;
    border-radius:14px;
    background:#207b50;
    color:#fff;
    font-weight:900;
    text-decoration:none;
}

.student-game-section{
    padding:18px;
    border:1px solid #e0e8e2;
    border-radius:20px;
    background:#fff;
}

.game-section-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-end;
    margin-bottom:14px;
}

.game-section-head .game-eyebrow{
    color:#4a7c5d;
}

.game-section-head h2{
    margin:4px 0 2px;
    font-size:1.28rem;
}

.game-section-head p{
    margin:0;
    color:#718078;
    font-size:.85rem;
}

.game-section-head>a{
    white-space:nowrap;
    font-weight:800;
    text-decoration:none;
}

.mission-list{
    display:grid;
    gap:9px;
}

.mission-row{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto auto;
    gap:10px;
    align-items:center;
    min-height:72px;
    padding:11px;
    border:1px solid #e5ece6;
    border-radius:15px;
    background:#fbfdfb;
    color:inherit;
    text-decoration:none;
}

.mission-row-late{
    border-color:#f0c0b7;
    background:#fff8f5;
}

.mission-row-icon{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:13px;
    background:#eaf5ea;
    font-size:1.2rem;
}

.mission-row-copy{
    min-width:0;
}

.mission-row-copy strong,
.mission-row-copy span,
.mission-row-copy small{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
}

.mission-row-copy strong{
    white-space:nowrap;
}

.mission-row-copy span,
.mission-row-copy small{
    margin-top:2px;
    color:#748079;
    font-size:.76rem;
}

.mission-row-xp{
    white-space:nowrap;
    color:#9a741e;
    font-size:.72rem;
    font-weight:900;
}

.mission-row-arrow{
    color:#4c7a5d;
    font-size:1.5rem;
}

.all-missions-complete{
    display:grid;
    justify-items:center;
    padding:28px 16px;
    text-align:center;
}

.all-missions-complete>span{
    font-size:3.4rem;
}

.all-missions-complete h3{
    margin:8px 0 4px;
}

.all-missions-complete p{
    margin:0;
    color:#748079;
}

.garden-grid,
.achievement-grid{
    display:grid;
    gap:10px;
}

.garden-card{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:11px;
    align-items:center;
    padding:13px;
    border:1px solid #e0e9e0;
    border-radius:16px;
    background:linear-gradient(135deg,#fbfefb,#f3faf1);
    color:inherit;
    text-decoration:none;
}

.garden-plant{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:15px;
    background:#e3f3df;
    font-size:1.7rem;
}

.garden-card strong,
.garden-card span,
.garden-card small{
    display:block;
}

.garden-card span,
.garden-card small{
    margin-top:2px;
    color:#6d7c73;
    font-size:.78rem;
}

.garden-arrow{
    color:#407752!important;
    font-size:1.3rem!important;
}

.achievement-card{
    position:relative;
    display:flex;
    gap:11px;
    align-items:center;
    padding:13px;
    border:1px solid #e3e8e3;
    border-radius:16px;
    background:#fafbfa;
}

.achievement-card>span{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    flex:0 0 46px;
    border-radius:14px;
    background:#eef1ee;
    font-size:1.45rem;
    filter:grayscale(1);
    opacity:.55;
}

.achievement-card.unlocked{
    border-color:#ead8a6;
    background:linear-gradient(135deg,#fffdf3,#fff8dc);
}

.achievement-card.unlocked>span{
    background:#fff0ba;
    filter:none;
    opacity:1;
}

.achievement-card div{
    min-width:0;
}

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

.achievement-card small{
    margin-top:3px;
    color:#758078;
    font-size:.74rem;
}

.achievement-card>b{
    margin-left:auto;
    color:#8c7c5f;
    font-size:.62rem;
    letter-spacing:.05em;
}

.achievement-card.unlocked>b{
    color:#9b6d10;
}

.game-academic-note{
    display:flex;
    gap:12px;
    padding:15px;
    border:1px solid #d8e3eb;
    border-radius:17px;
    background:#f7fafc;
}

.game-academic-note>span{
    font-size:1.5rem;
}

.game-academic-note strong{
    color:#34596c;
}

.game-academic-note p{
    margin:3px 0 0;
    color:#647b87;
    font-size:.82rem;
    line-height:1.45;
}

/* Meu acompanhamento = mapa de missões */

.student-mission-map{
    display:grid;
    gap:16px;
    padding-bottom:92px;
}

.mission-map-header{
    padding:20px;
    border-radius:22px;
    background:linear-gradient(145deg,#214e38,#327b52);
    color:#fff;
}

.mission-map-header h1{
    margin:6px 0;
    color:#fff;
}

.mission-map-header p{
    margin:0;
    color:rgba(255,255,255,.82);
}

.mission-chapter{
    padding:17px;
    border:1px solid #e0e9e2;
    border-radius:19px;
    background:#fff;
}

.mission-chapter.overdue{
    border-color:#edb8ae;
}

.mission-chapter.today{
    border-color:#e8d38b;
}

.mission-chapter-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.mission-chapter-head h2{
    margin:4px 0;
    font-size:1.15rem;
}

.mission-chapter-head p{
    margin:0;
    color:#76827b;
    font-size:.8rem;
}

.chapter-badge{
    align-self:start;
    padding:6px 9px;
    border-radius:999px;
    background:#eff6ef;
    color:#487159;
    font-size:.7rem;
    font-weight:800;
}

.mobile-mission-card{
    display:grid;
    gap:10px;
    padding:14px;
    border:1px solid #e4ebe5;
    border-radius:15px;
    background:#fbfdfb;
}

.mobile-mission-card+.mobile-mission-card{
    margin-top:9px;
}

.mobile-mission-card.completed{
    border-color:#cce4d3;
    background:#f5fbf6;
}

.mobile-mission-card.pending{
    background:#fff;
}

.mobile-mission-card-top{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:flex-start;
}

.mobile-mission-card h3{
    margin:0;
    font-size:1rem;
}

.mobile-mission-card p{
    margin:3px 0 0;
    color:#748079;
    font-size:.8rem;
}

.mobile-mission-status{
    white-space:nowrap;
    padding:5px 8px;
    border-radius:999px;
    background:#f1f4f1;
    font-size:.7rem;
    font-weight:800;
}

.mobile-mission-card.completed .mobile-mission-status{
    background:#dff1e4;
    color:#2f7646;
}

.mobile-mission-bottom{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
}

.mobile-mission-score{
    color:#65736b;
    font-size:.76rem;
}

.mobile-mission-action{
    display:inline-flex;
    min-height:42px;
    align-items:center;
    justify-content:center;
    padding:9px 12px;
    border-radius:11px;
    background:#24794f;
    color:#fff;
    font-size:.78rem;
    font-weight:800;
    text-decoration:none;
}

/* Navegação inferior do aluno */

.student-bottom-nav{
    position:fixed;
    z-index:90;
    right:10px;
    bottom:10px;
    left:10px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    max-width:520px;
    margin:auto;
    padding:7px;
    border:1px solid rgba(209,224,212,.9);
    border-radius:19px;
    background:rgba(255,255,255,.94);
    box-shadow:0 12px 35px rgba(28,62,46,.18);
    backdrop-filter:blur(15px);
}

.student-bottom-nav a{
    position:relative;
    display:grid;
    place-items:center;
    gap:2px;
    min-height:51px;
    border-radius:13px;
    color:#54665c;
    text-decoration:none;
}

.student-bottom-nav a:active{
    background:#edf6ee;
}

.student-bottom-nav span{
    font-size:1.15rem;
}

.student-bottom-nav small{
    font-size:.65rem;
    font-weight:800;
}

.student-bottom-nav b{
    position:absolute;
    top:2px;
    right:18%;
    display:grid;
    place-items:center;
    min-width:17px;
    height:17px;
    padding:0 4px;
    border-radius:999px;
    background:#c94531;
    color:#fff;
    font-size:.58rem;
}

/* Formulário da missão no celular */
.student-role .capture-box{
    border-radius:17px;
}

.student-role .student-submit-check{
    border-radius:15px;
}

.student-role .student-primary-action{
    width:100%;
    min-height:52px;
    border-radius:14px;
    font-size:.96rem;
    font-weight:900;
}

.student-role input,
.student-role select,
.student-role textarea{
    min-height:46px;
    border-radius:12px;
}

.student-role textarea{
    min-height:112px;
}

/* Tablet/desktop */
@media(min-width:760px){
    .game-hero{
        grid-template-columns:minmax(0,1.5fr) minmax(260px,.7fr);
        align-items:center;
        padding:30px;
    }

    .game-hero-actions{
        grid-template-columns:max-content max-content;
    }

    .game-stats-grid{
        grid-template-columns:repeat(4,1fr);
    }

    .mission-alert{
        grid-template-columns:auto 1fr auto;
    }

    .mission-alert>a{
        grid-column:auto;
    }

    .garden-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .achievement-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(min-width:980px){
    .achievement-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

/* Celular */
@media(max-width:759px){
    .student-role .topbar{
        padding:10px 14px;
    }

    .student-role .topbar nav{
        display:none;
    }

    .student-role .brand{
        font-size:.95rem;
    }

    .student-role .container{
        width:auto;
        margin:0;
        padding:12px 12px 100px;
    }

    .game-hero{
        border-radius:20px;
    }

    .game-hero h1{
        font-size:2rem;
    }

    .plant-stage-card{
        min-height:190px;
    }

    .featured-mission,
    .student-game-section{
        padding:15px;
        border-radius:17px;
    }

    .game-section-head{
        align-items:flex-start;
    }

    .mission-row{
        grid-template-columns:auto minmax(0,1fr) auto;
    }

    .mission-row-xp{
        display:none;
    }

    .achievement-card{
        align-items:flex-start;
    }

    .achievement-card>b{
        position:absolute;
        right:10px;
        bottom:8px;
        font-size:.56rem;
    }

    .student-tour-modal{
        width:calc(100vw - 22px);
        max-height:calc(100vh - 30px);
        overflow:auto;
        border-radius:20px;
    }
}

.evidence-config-card{
    padding:16px;
    border:1px solid #dce8df;
    border-radius:16px;
    background:#f8fbf8;
}
.evidence-config-card h3,
.evidence-config-card h4{margin:8px 0 10px}
.evidence-config-card h3:not(:first-child),
.evidence-config-card h4:not(:first-child){margin-top:20px}

.student-bottom-nav.student-bottom-nav-five{
    grid-template-columns:repeat(5,1fr);
}
.student-bottom-nav.student-bottom-nav-five small{
    font-size:.58rem;
}


/* =========================================================
   VISÃO DE TESTE COMO ALUNO — RETORNO SEMPRE ACESSÍVEL
   ========================================================= */

.student-test-strip{
    position:fixed;
    z-index:180;
    top:68px;
    left:50%;
    display:flex;
    align-items:center;
    gap:8px;
    max-width:calc(100vw - 24px);
    padding:8px 12px;
    border:1px solid rgba(109,40,217,.18);
    border-radius:999px;
    background:rgba(245,243,255,.96);
    color:#5b21b6;
    box-shadow:0 8px 24px rgba(76,29,149,.12);
    backdrop-filter:blur(10px);
    transform:translateX(-50%);
    white-space:nowrap;
}

.student-test-strip>span{
    font-size:1rem;
}

.student-test-strip strong{
    font-size:.78rem;
}

.student-test-strip small{
    color:#77648c;
    font-size:.7rem;
}

.student-test-return-form{
    position:fixed;
    z-index:190;
    right:18px;
    bottom:18px;
    margin:0;
}

.student-test-return-button{
    display:flex;
    align-items:center;
    gap:8px;
    min-height:48px;
    padding:10px 15px;
    border:0;
    border-radius:999px;
    background:#6d28d9;
    color:#fff;
    font:inherit;
    font-size:.8rem;
    font-weight:800;
    box-shadow:0 12px 30px rgba(76,29,149,.28);
    cursor:pointer;
}

.student-test-return-button:hover,
.student-test-return-button:focus-visible{
    background:#5b21b6;
    transform:translateY(-1px);
}

.student-test-return-button>span{
    font-size:1.15rem;
    line-height:1;
}

@media(max-width:759px){
    .student-test-strip{
        top:58px;
        max-width:calc(100vw - 20px);
        padding:7px 10px;
    }

    .student-test-strip small{
        display:none;
    }

    .student-test-return-form{
        right:12px;
        bottom:92px;
    }

    .student-test-return-button{
        min-height:46px;
        padding:9px 13px;
        box-shadow:0 10px 28px rgba(76,29,149,.3);
    }

    .student-test-return-button strong{
        font-size:.74rem;
    }

    /*
     * Garante que o conteúdo não fique escondido atrás da faixa
     * e do botão ao usar a visão de aluno no celular.
     */
    .student-role .container{
        scroll-padding-top:110px;
    }
}

@media(max-width:390px){
    .student-test-strip strong{
        font-size:.72rem;
    }

    .student-test-return-button strong{
        max-width:132px;
        text-align:left;
        line-height:1.15;
    }
}


/* =========================================================
   DESIGN SYSTEM PADRÃO — HORTICULTURA + CADERNO DE CAMPO
   Mobile-first • Gamificado no aluno • Operacional no staff
   ========================================================= */

:root{
    --brand-950:#123d2b;
    --brand-900:#174b35;
    --brand-800:#1d6042;
    --brand-700:#26794f;
    --brand-600:#32905c;
    --brand-500:#4aa96c;
    --brand-400:#74bf8d;
    --brand-300:#a9d8b8;
    --brand-200:#d2ead9;
    --brand-100:#eaf6ee;
    --brand-50:#f5fbf7;

    --game-lime:#dff28a;
    --game-yellow:#f3d774;
    --game-orange:#f0a55c;
    --game-purple:#7b5ac8;
    --game-blue:#5a9dc8;

    --ink-950:#17231d;
    --ink-900:#203027;
    --ink-700:#52645a;
    --ink-600:#68786f;
    --ink-500:#819087;

    --surface:#ffffff;
    --surface-soft:#f8fbf9;
    --surface-warm:#fffdf7;
    --bg:#f2f7f3;
    --border:#dbe6de;
    --border-strong:#c7d8cc;
    --danger:#b83b2d;
    --warning:#a96c13;
    --success:#26794f;

    --radius-xs:10px;
    --radius-sm:13px;
    --radius-md:17px;
    --radius-lg:22px;
    --radius-xl:28px;
    --shadow-sm:0 5px 16px rgba(23,75,53,.06);
    --shadow-md:0 12px 32px rgba(23,75,53,.09);
    --shadow-lg:0 22px 55px rgba(23,75,53,.13);
}

html{
    scroll-behavior:smooth;
    background:var(--bg);
}

body{
    color:var(--ink-900);
    background:
        radial-gradient(circle at 100% 0,rgba(91,166,111,.10),transparent 25rem),
        radial-gradient(circle at 0 22rem,rgba(217,235,175,.11),transparent 28rem),
        var(--bg);
}

body::before{
    content:"";
    position:fixed;
    z-index:-1;
    inset:0;
    pointer-events:none;
    opacity:.22;
    background-image:
        radial-gradient(circle at 12px 12px,rgba(41,103,67,.08) 1px,transparent 1px);
    background-size:28px 28px;
}

/* ---------- Cabeçalho padrão ---------- */

.topbar{
    height:auto;
    min-height:70px;
    padding-top:9px;
    padding-bottom:9px;
    border-bottom:1px solid rgba(205,221,211,.88);
    background:rgba(255,255,255,.93);
    box-shadow:0 7px 24px rgba(28,65,48,.045);
    backdrop-filter:blur(14px);
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:44px;
    padding:8px 12px;
    border-radius:14px;
    color:var(--brand-800)!important;
    font-size:.98rem;
    letter-spacing:-.01em;
}

.brand:hover{
    background:var(--brand-50);
}

.topbar nav{
    gap:5px;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.topbar nav>a,
.topbar .link-button{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    padding:7px 10px;
    border-radius:11px;
    color:var(--ink-700);
    font-size:.84rem;
    font-weight:720;
    transition:background .16s ease,color .16s ease,transform .16s ease;
}

.topbar nav>a:hover,
.topbar .link-button:hover{
    background:var(--brand-100);
    color:var(--brand-800);
    transform:translateY(-1px);
}

.topbar nav>span{
    max-width:170px;
    overflow:hidden;
    padding:6px 4px;
    color:var(--ink-600);
    font-size:.78rem;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* ---------- Estrutura geral ---------- */

.container{
    max-width:1220px;
    padding-top:24px;
    padding-bottom:84px;
}

h1,h2,h3{
    color:var(--ink-950);
    letter-spacing:-.025em;
}

h1{
    font-size:clamp(1.75rem,4vw,2.55rem);
}

h2{
    font-size:clamp(1.25rem,2.5vw,1.65rem);
}

.page-head{
    margin-bottom:18px;
    padding:3px 2px;
}

.page-head h1{
    margin:.1rem 0 .35rem;
}

.page-head p{
    max-width:760px;
    margin:.15rem 0 0;
    line-height:1.55;
}

.panel,
.card,
.auth-card,
.stat,
.student-section,
.student-how-it-works{
    border-color:var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
}

.panel{
    padding:22px;
    margin-bottom:18px;
}

.card{
    padding:20px;
    transition:transform .17s ease,box-shadow .17s ease,border-color .17s ease;
}

.card:hover{
    border-color:var(--brand-300);
    box-shadow:var(--shadow-md);
    transform:translateY(-2px);
}

.section-head{
    gap:12px;
    margin-bottom:12px;
}

.section-head h2,
.section-head h3{
    margin:0;
}

.breadcrumbs{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    margin-bottom:14px;
    font-size:.78rem;
}

/* ---------- Botões ---------- */

button,
.button,
.student-primary-action{
    min-height:44px;
    align-items:center;
    gap:7px;
    padding:10px 15px;
    border-radius:12px;
    background:linear-gradient(180deg,var(--brand-700),var(--brand-800));
    box-shadow:0 5px 13px rgba(29,96,66,.13);
    font-weight:800;
    transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}

button:hover,
.button:hover,
.student-primary-action:hover{
    filter:brightness(1.035);
    box-shadow:0 8px 18px rgba(29,96,66,.17);
    transform:translateY(-1px);
}

button:active,
.button:active{
    transform:translateY(0);
}

.secondary{
    border:1px solid var(--brand-200);
    background:var(--brand-100);
    color:var(--brand-800);
    box-shadow:none;
}

.danger{
    background:linear-gradient(180deg,#c94b3b,#ad3528);
    color:#fff;
}

.link-button,
.link-danger{
    min-height:auto;
    box-shadow:none;
}

.actions{
    gap:8px;
}

/* ---------- Formulários ---------- */

label{
    color:var(--ink-900);
    font-size:.87rem;
    font-weight:750;
}

input,
select,
textarea{
    min-height:46px;
    border-color:var(--border-strong);
    border-radius:12px;
    background:#fff;
    color:var(--ink-900);
    box-shadow:inset 0 1px 1px rgba(23,42,32,.02);
    transition:border-color .16s ease,box-shadow .16s ease;
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:var(--brand-500);
    box-shadow:0 0 0 4px rgba(74,169,108,.13);
}

textarea{
    min-height:112px;
    resize:vertical;
}

input[type="checkbox"],
input[type="radio"]{
    min-height:auto;
    accent-color:var(--brand-700);
}

/* ---------- Badges, avisos e estados ---------- */

.badge{
    padding:5px 10px;
    background:var(--brand-100);
    color:var(--brand-800);
    border:1px solid var(--brand-200);
    font-size:.73rem;
    letter-spacing:.01em;
}

.alert{
    border:1px solid transparent;
    border-radius:14px;
    box-shadow:var(--shadow-sm);
}

.alert-success{
    border-color:#cbe7d3;
    background:#f0faf3;
}

.alert-error{
    border-color:#efd0ca;
    background:#fff5f3;
}

.empty{
    min-height:100px;
    display:grid;
    place-items:center;
    border-color:var(--border-strong);
    border-radius:16px;
    background:rgba(255,255,255,.52);
}

/* ---------- Tabelas staff ---------- */

.table-wrap{
    border:1px solid var(--border);
    border-radius:16px;
    background:#fff;
    box-shadow:var(--shadow-sm);
}

table{
    min-width:680px;
}

thead th{
    position:sticky;
    top:0;
    z-index:1;
    background:#f5f9f6;
    color:var(--ink-700);
    font-size:.74rem;
    letter-spacing:.035em;
    text-transform:uppercase;
}

th,td{
    padding:12px 13px;
}

tbody tr{
    transition:background .15s ease;
}

tbody tr:hover{
    background:#f9fcfa;
}

/* =========================================================
   ALUNO — identidade gamificada padrão
   ========================================================= */

.student-role{
    --student-surface:#ffffff;
    --student-soft:#f6fbf7;
}

.student-role .topbar{
    border-bottom-color:#d8e8dc;
}

.student-role .brand{
    color:var(--brand-900)!important;
}

.student-role .container{
    padding-top:16px;
}

.student-role .panel,
.student-role .student-game-section,
.student-role .featured-mission,
.student-role .mission-chapter,
.student-role .student-section,
.student-role .student-how-it-works{
    border:1px solid #dce9df;
    background:rgba(255,255,255,.96);
    box-shadow:0 10px 28px rgba(27,75,50,.075);
}

.game-hero{
    border:1px solid rgba(255,255,255,.12);
    background:
        radial-gradient(circle at 85% 20%,rgba(232,250,178,.24),transparent 14rem),
        radial-gradient(circle at 10% 110%,rgba(172,222,184,.18),transparent 16rem),
        linear-gradient(145deg,#174d35 0,#236e48 48%,#3f9460 100%);
    box-shadow:0 22px 55px rgba(23,77,53,.19);
}

.game-primary-button{
    color:var(--brand-900);
}

.game-primary-button:hover{
    background:#f7fff8;
}

.game-secondary-button:hover{
    background:rgba(255,255,255,.17);
}

.game-stat{
    border-color:#dce9df;
    border-radius:17px;
    background:linear-gradient(180deg,#fff,#fbfdfb);
}

.game-stat>span{
    background:linear-gradient(145deg,#eff8ef,#e0f2e4);
}

.level-card{
    border-color:#eadba8;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(133,102,34,.06);
}

.featured-mission{
    border-width:1px;
}

.mission-cta{
    background:linear-gradient(180deg,#2e8b59,#216d47);
    box-shadow:0 7px 18px rgba(39,121,79,.18);
}

.mission-row,
.mobile-mission-card,
.garden-card,
.achievement-card,
.challenge-card{
    border-radius:15px;
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}

.mission-row:hover,
.mobile-mission-card:hover,
.garden-card:hover,
.achievement-card.unlocked:hover,
.challenge-card:hover{
    border-color:#bcd9c4;
    box-shadow:0 8px 20px rgba(36,94,60,.075);
    transform:translateY(-1px);
}

.achievement-card.unlocked{
    border-color:#ead79d;
    background:
        radial-gradient(circle at top right,rgba(248,219,121,.18),transparent 8rem),
        linear-gradient(145deg,#fffdf4,#fff9e5);
}

.achievement-card.locked{
    background:#f7f9f7;
}

.game-academic-note{
    border-color:#d8e6de;
    background:linear-gradient(145deg,#f8fbf9,#f4f8f6);
}

.journey-rules-callout{
    background:
        radial-gradient(circle at right top,rgba(219,239,166,.18),transparent 9rem),
        #fff!important;
}

/* ---------- Navegação inferior do aluno ---------- */

.student-bottom-nav{
    right:8px;
    bottom:8px;
    left:8px;
    max-width:560px;
    padding:6px;
    border:1px solid rgba(200,221,207,.94);
    border-radius:21px;
    background:rgba(253,255,253,.96);
    box-shadow:0 15px 40px rgba(25,73,47,.21);
}

.student-bottom-nav a{
    min-height:55px;
    color:#64756b;
    transition:background .14s ease,color .14s ease,transform .14s ease;
}

.student-bottom-nav a:hover,
.student-bottom-nav a:focus-visible{
    background:var(--brand-100);
    color:var(--brand-800);
}

.student-bottom-nav a:active{
    transform:scale(.96);
}

.student-bottom-nav span{
    font-size:1.22rem;
}

.student-bottom-nav small{
    color:inherit;
    font-weight:850;
}

/* ---------- Formulário/evidências aluno ---------- */

.student-role .student-task-form,
.student-role .student-mission-form{
    border-radius:20px;
}

.student-role .capture-box,
.student-role .evidence-hub,
.student-role .evidence-kind-card{
    border-color:#d8e7dc;
    border-radius:17px;
    background:#fbfefb;
}

.student-role .evidence-kind-card{
    box-shadow:0 5px 14px rgba(34,83,52,.04);
}

.existing-evidence,
.evidence-preview-card{
    border-color:#dce7df!important;
    background:#fff!important;
}

.evidence-remove-button{
    min-height:34px;
    box-shadow:0 5px 14px rgba(113,30,25,.2);
}

.student-role .camera-preview,
.student-role video{
    border-radius:14px;
}

/* ---------- Regras da Jornada ---------- */

.rules-hero{
    border:1px solid rgba(255,255,255,.13);
    background:
        radial-gradient(circle at 90% 15%,rgba(231,245,178,.22),transparent 12rem),
        linear-gradient(145deg,#174d35,#28794f 55%,#50a06a);
    box-shadow:var(--shadow-lg);
}

.rule-card{
    border-color:#dfe8e2;
    box-shadow:0 4px 12px rgba(35,76,52,.035);
}

.rule-card:hover{
    border-color:#c6dccc;
}

.rule-icon{
    background:linear-gradient(145deg,#f5f8f5,#eaf3ec);
}

/* ---------- Perfil jogador ---------- */

.player-profile-hero{
    border:1px solid rgba(255,255,255,.13);
    background:
        radial-gradient(circle at 88% 18%,rgba(230,244,170,.21),transparent 11rem),
        linear-gradient(145deg,#174d35,#28794f 58%,#509c69);
    box-shadow:var(--shadow-lg);
}

.player-avatar-large{
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 10px 22px rgba(0,0,0,.10);
}

.avatar-option{
    border-color:#dce8df;
    background:linear-gradient(180deg,#fff,#f8fcf9);
    transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}

.avatar-option:hover{
    border-color:#a9cfb4;
    box-shadow:0 9px 20px rgba(33,92,57,.08);
    transform:translateY(-2px);
}

/* =========================================================
   PROFESSOR / ADMIN — mesma identidade, mais operacional
   ========================================================= */

.staff-role{
    background:
        radial-gradient(circle at top left,rgba(56,128,81,.06),transparent 25rem),
        #f3f6f4;
}

.staff-role .topbar{
    background:rgba(253,254,253,.96);
}

.staff-role .brand{
    padding-left:11px;
    border:1px solid #dbe7df;
    background:#f7fbf8;
}

.staff-role .page-head{
    padding:14px 16px;
    border:1px solid var(--border);
    border-radius:18px;
    background:rgba(255,255,255,.78);
    box-shadow:var(--shadow-sm);
}

.staff-role .panel{
    border-radius:18px;
    box-shadow:0 7px 22px rgba(23,52,37,.055);
}

.staff-role .stat{
    border-radius:16px;
    background:linear-gradient(180deg,#fff,#fafcfa);
}

.staff-role .stat strong{
    color:var(--brand-700);
}

.staff-role .teacher-project-card,
.staff-role .live-summary,
.staff-role .check-card,
.staff-role .detail-grid>div{
    border-color:#dfe7e2;
    border-radius:14px;
    background:#fff;
}

.staff-role .teacher-project-card{
    box-shadow:0 4px 13px rgba(30,68,44,.035);
}

.staff-role .admin-ranking-row{
    border-bottom-color:#e5ebe7;
}

.staff-role .admin-xp-card{
    border-color:#dce5df;
    box-shadow:0 5px 15px rgba(35,72,50,.035);
}

.staff-role .xp-adjust-form{
    padding:10px;
    border-radius:12px;
    background:#f8faf8;
}

/* ---------- Modal tutorial ---------- */

.student-tour-backdrop{
    background:rgba(13,35,24,.76);
    backdrop-filter:blur(5px);
}

.student-tour-modal{
    border:1px solid #dce7df;
    border-radius:25px;
    box-shadow:0 28px 80px rgba(7,30,19,.32);
}

.tour-emoji{
    filter:drop-shadow(0 8px 12px rgba(35,88,55,.12));
}

/* ---------- Scrollbar discreta ---------- */

*{
    scrollbar-width:thin;
    scrollbar-color:#a9c9b4 transparent;
}

*::-webkit-scrollbar{
    width:8px;
    height:8px;
}

*::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:#aecbb7;
}

*::-webkit-scrollbar-track{
    background:transparent;
}

/* =========================================================
   MOBILE FIRST — regras gerais
   ========================================================= */

@media(max-width:900px){
    .topbar{
        padding-left:14px;
        padding-right:14px;
    }

    .staff-role .topbar{
        align-items:flex-start;
        flex-direction:column;
    }

    .staff-role .topbar nav{
        width:100%;
        overflow-x:auto;
        flex-wrap:nowrap;
        justify-content:flex-start;
        padding-bottom:2px;
        scrollbar-width:none;
    }

    .staff-role .topbar nav::-webkit-scrollbar{
        display:none;
    }

    .staff-role .topbar nav>a,
    .staff-role .topbar .link-button{
        flex:0 0 auto;
    }

    .staff-role .topbar nav>span{
        display:none;
    }
}

@media(max-width:759px){
    body{
        background:
            radial-gradient(circle at 100% 0,rgba(91,166,111,.08),transparent 18rem),
            #f3f7f4;
    }

    .container{
        width:auto;
        max-width:none;
        margin:0;
        padding:12px 11px 102px;
    }

    .student-role .topbar{
        min-height:56px;
        padding:7px 12px;
    }

    .student-role .brand{
        min-height:40px;
        padding:6px 9px;
        font-size:.88rem;
    }

    .page-head{
        gap:10px;
        margin-bottom:14px;
    }

    .staff-role .page-head{
        padding:13px;
        border-radius:15px;
    }

    .page-head h1{
        font-size:1.65rem;
    }

    .panel,
    .card{
        padding:15px;
        border-radius:16px;
    }

    .cards,
    .teacher-project-grid,
    .garden-grid,
    .achievement-grid{
        gap:10px;
    }

    .form-grid,
    .detail-form-grid{
        grid-template-columns:1fr;
    }

    .full{
        grid-column:auto;
    }

    button,
    .button,
    .student-primary-action{
        min-height:48px;
        padding:11px 14px;
    }

    .actions{
        width:100%;
    }

    .actions>.button,
    .actions>button{
        flex:1 1 auto;
    }

    input,
    select,
    textarea{
        font-size:16px; /* evita zoom automático no iPhone */
    }

    .table-wrap{
        margin-right:-3px;
        margin-left:-3px;
        border-radius:13px;
        -webkit-overflow-scrolling:touch;
    }

    table{
        min-width:720px;
    }

    th,td{
        padding:10px;
        font-size:.81rem;
    }

    .student-game-dashboard,
    .student-mission-map,
    .player-profile-page,
    .journey-rules-page{
        gap:12px;
    }

    .game-hero,
    .player-profile-hero,
    .rules-hero,
    .mission-map-header{
        border-radius:19px;
    }

    .game-hero{
        padding:18px;
    }

    .game-hero h1{
        font-size:1.92rem;
    }

    .game-hero-actions{
        grid-template-columns:1fr;
    }

    .game-primary-button,
    .game-secondary-button{
        min-height:50px;
    }

    .game-stats-grid{
        gap:8px;
    }

    .game-stat{
        min-height:72px;
        padding:11px;
    }

    .featured-mission,
    .student-game-section,
    .mission-chapter{
        padding:14px;
    }

    .mission-meta{
        gap:5px;
    }

    .mission-meta span{
        padding:6px 8px;
    }

    .mobile-mission-action{
        min-height:44px;
    }

    .student-bottom-nav{
        bottom:max(7px,env(safe-area-inset-bottom));
        padding-bottom:max(6px,env(safe-area-inset-bottom));
    }

    .student-bottom-nav.student-bottom-nav-five{
        grid-template-columns:repeat(5,minmax(0,1fr));
    }

    .student-bottom-nav.student-bottom-nav-five small{
        font-size:.57rem;
    }

    .student-bottom-nav b{
        right:12%;
    }

    .student-test-return-form{
        bottom:calc(88px + env(safe-area-inset-bottom));
    }

    .player-profile-hero{
        padding:17px;
    }

    .player-avatar-large{
        width:66px;
        height:66px;
        flex-basis:66px;
        border-radius:19px;
        font-size:2.35rem;
    }

    .avatar-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:7px;
    }

    .avatar-option{
        min-height:105px;
        padding:9px 6px;
    }

    .avatar-option span{
        font-size:1.9rem;
    }

    .rule-card{
        padding:11px;
    }

    .rule-xp{
        font-size:.7rem;
    }

    .capture-box,
    .evidence-kind-card{
        padding:12px!important;
    }

    .captured-gallery,
    .existing-evidence-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    .captured-gallery img,
    .captured-gallery video{
        height:125px;
    }

    .student-tour-backdrop{
        padding:10px;
    }

    .student-tour-modal{
        width:100%;
        max-height:calc(100dvh - 20px);
        padding:20px 15px;
        overflow:auto;
    }
}

@media(max-width:390px){
    .container{
        padding-right:9px;
        padding-left:9px;
    }

    .game-stats-grid{
        grid-template-columns:1fr 1fr;
    }

    .game-stat>span{
        width:34px;
        height:34px;
        flex-basis:34px;
    }

    .student-bottom-nav small{
        letter-spacing:-.01em;
    }

    .captured-gallery,
    .existing-evidence-grid{
        grid-template-columns:1fr!important;
    }
}

/* ---------- Acessibilidade / toque ---------- */

@media(hover:none){
    button,
    .button,
    a{
        -webkit-tap-highlight-color:transparent;
    }

    .card:hover,
    .mission-row:hover,
    .garden-card:hover,
    .challenge-card:hover{
        transform:none;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        transition-duration:.001ms!important;
    }
}

@media print{
    body{
        background:#fff;
    }

    .panel,
    .card,
    .table-wrap{
        box-shadow:none!important;
    }
}


/* =========================================================
   COMPLEMENTOS DO SHELL VISUAL
   ========================================================= */

.brand-mark{
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    flex:0 0 34px;
    border-radius:11px;
    background:
        radial-gradient(circle at 35% 30%,rgba(255,255,255,.42),transparent 35%),
        linear-gradient(145deg,#dff2d7,#b9dfc3);
    box-shadow:inset 0 0 0 1px rgba(31,102,65,.08);
    font-size:1.15rem;
}

.brand-copy{
    display:grid;
    line-height:1.02;
}

.brand-copy strong{
    color:inherit;
    font-size:.92rem;
}

.brand-copy small{
    margin-top:3px;
    color:#75857b;
    font-size:.59rem;
    font-weight:750;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.topbar nav>a.nav-active{
    background:var(--brand-100);
    color:var(--brand-800);
    box-shadow:inset 0 0 0 1px var(--brand-200);
}

.student-bottom-nav a.nav-active{
    background:linear-gradient(180deg,#edf8f0,#e4f3e8);
    color:var(--brand-800);
}

.student-bottom-nav a.nav-active span{
    transform:translateY(-1px);
    filter:drop-shadow(0 3px 4px rgba(34,96,59,.12));
}

/* Notificações seguem o mesmo padrão visual */
.notification-list{
    gap:9px;
}

.notification{
    min-height:74px;
    border-color:#dfe8e2;
    border-radius:15px;
    background:#fff;
    box-shadow:0 5px 14px rgba(29,72,46,.035);
}

.notification p{
    margin:.28rem 0;
    color:var(--ink-700);
}

.notification.unread{
    border-left:5px solid var(--brand-600);
    background:
        radial-gradient(circle at right top,rgba(173,220,184,.12),transparent 9rem),
        #f8fdf9;
}

/* Cards de notas e disciplinas */
.cards>.card h3{
    margin:.65rem 0 .35rem;
}

.cards>.card .action-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:14px;
}

/* Controles de mídia e câmera maiores em touch */
.capture-box button,
.evidence-kind-card button{
    min-height:46px;
}

@media(max-width:759px){
    .brand-mark{
        width:32px;
        height:32px;
        flex-basis:32px;
    }

    .brand-copy small{
        font-size:.54rem;
    }

    .notification{
        align-items:flex-start;
        flex-direction:column;
        padding:12px;
    }

    .notification form,
    .notification form button{
        width:100%;
    }

    .cards>.card .action-row{
        display:grid;
        grid-template-columns:1fr;
    }

    .cards>.card .action-row .button{
        width:100%;
    }
}


/* =========================================================
   DESIGN GAMIFICADO APROVADO — REFERÊNCIA VISUAL PRINCIPAL
   ========================================================= */

.student-role{
    --game-deep:#073a1c;
    --game-deeper:#052b16;
    --game-green:#0d6a31;
    --game-green-2:#178044;
    --game-lime:#b7df48;
    --game-cream:#fffdf0;
    --game-paper:#fffef5;
    --game-gold:#f5c94e;
    --game-red:#d73328;
    --game-blue:#55b2e8;
    --game-yellow:#ffd76b;
    --game-shadow:0 14px 34px rgba(8,64,31,.16);
    background:
        linear-gradient(rgba(245,251,244,.92),rgba(245,251,244,.92)),
        radial-gradient(circle at 10% 20%,#c8e8bc 0 1px,transparent 2px);
}

.student-role .topbar{
    min-height:76px;
    border-bottom:0;
    background:
        radial-gradient(circle at 15% 25%,rgba(95,164,70,.18),transparent 12rem),
        linear-gradient(180deg,#06411f,#032f17);
    box-shadow:0 8px 26px rgba(3,42,20,.24);
}

.student-role .topbar .brand{
    color:#fff!important;
    background:transparent;
    border:0;
}

.student-role .topbar .brand-mark{
    background:rgba(255,255,255,.08);
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}

.student-role .topbar .brand-copy strong,
.student-role .topbar .brand-copy small{
    color:#fff;
}

.student-role .topbar .brand-copy small{
    opacity:.72;
}

.student-role .topbar nav>a,
.student-role .topbar .link-button,
.student-role .topbar nav>span{
    color:rgba(255,255,255,.82);
}

.student-role .topbar nav>a:hover,
.student-role .topbar nav>a.nav-active,
.student-role .topbar .link-button:hover{
    background:rgba(255,255,255,.10);
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}

/* HUD */

.student-game-hud{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(160px,.72fr) auto;
    gap:12px;
    align-items:center;
    margin-bottom:14px;
    padding:12px 14px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:20px;
    background:
        radial-gradient(circle at 75% 20%,rgba(140,211,84,.13),transparent 10rem),
        linear-gradient(145deg,#06391c,#0a4d26);
    color:#fff;
    box-shadow:0 14px 30px rgba(4,52,25,.17);
}

.hud-brand,
.hud-player{
    display:flex;
    align-items:center;
    gap:9px;
}

.hud-brand>span{
    font-size:2rem;
    filter:drop-shadow(0 5px 8px rgba(0,0,0,.15));
}

.hud-brand strong,
.hud-brand small,
.hud-player strong,
.hud-player small{
    display:block;
}

.hud-brand small,
.hud-player small,
.hud-level small{
    color:rgba(255,255,255,.72);
    font-size:.65rem;
}

.hud-level{
    display:grid;
    gap:5px;
    min-width:150px;
    padding:9px 12px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:15px;
    background:rgba(255,255,255,.05);
}

.hud-level>span{
    font-weight:900;
}

.hud-level-track{
    height:9px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.14);
}

.hud-level-track i{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#91d83d,#d5ec55);
    box-shadow:0 0 12px rgba(197,235,79,.45);
}

.hud-player{
    justify-self:end;
    padding:7px 10px;
    border-radius:15px;
    color:#fff;
    text-decoration:none;
    background:rgba(255,255,255,.06);
}

.hud-avatar{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:50%;
    background:linear-gradient(145deg,#c8efb6,#8fd78e);
    box-shadow:0 0 0 3px rgba(255,255,255,.12);
    font-size:1.8rem;
}

/* HERO */

.student-role .game-hero{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.11);
    border-radius:26px;
    background:
        radial-gradient(circle at 78% 12%,rgba(210,242,114,.20),transparent 13rem),
        radial-gradient(circle at 100% 100%,rgba(112,190,117,.22),transparent 16rem),
        linear-gradient(140deg,#0c5c31,#1d824d 62%,#54a96f);
    box-shadow:0 20px 48px rgba(12,88,46,.21);
}

.student-role .game-hero::before{
    content:"";
    position:absolute;
    right:-35px;
    bottom:-50px;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,255,255,.05);
}

.student-role .game-hero h1{
    font-weight:950;
    letter-spacing:-.035em;
}

.student-role .game-eyebrow{
    color:#79a689;
    font-weight:950;
    letter-spacing:.08em;
}

.game-hero .game-eyebrow{
    color:#d8f3c8;
}

.student-role .game-primary-button,
.student-role .mission-cta,
.student-role .mobile-mission-action{
    border:1px solid rgba(255,255,255,.18);
    background:linear-gradient(180deg,#0c7b39,#075d2c);
    color:#fff;
    box-shadow:0 9px 18px rgba(2,74,32,.23);
}

.student-role .game-secondary-button{
    border-color:rgba(255,255,255,.30);
}

/* stage card feels like a game window */
.student-role .plant-stage-card{
    border:1px solid rgba(255,255,255,.16);
    border-radius:22px;
    background:rgba(255,255,255,.11);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
    backdrop-filter:blur(8px);
}

.student-role .growth-stage-visual{
    border:2px solid rgba(255,255,255,.28);
    box-shadow:0 9px 22px rgba(0,0,0,.14);
}

/* stats */
.student-role .game-stat{
    border:1px solid #dce8dc;
    border-radius:17px;
    background:linear-gradient(180deg,#fffef8,#f9fbf5);
    box-shadow:0 6px 16px rgba(28,84,50,.065);
}

.student-role .game-stat>span{
    border-radius:13px;
    background:linear-gradient(145deg,#edf6dd,#dff0d8);
}

/* main game cards */
.student-role .student-game-section,
.student-role .featured-mission,
.student-role .mission-chapter,
.student-role .player-profile-page .panel{
    border:1px solid #dce6d7;
    border-radius:21px;
    background:
        linear-gradient(180deg,rgba(255,255,250,.98),rgba(252,253,246,.98));
    box-shadow:0 10px 24px rgba(29,74,43,.075);
}

.student-role .student-game-section{
    position:relative;
    overflow:hidden;
}

.student-role .student-game-section::after{
    content:"";
    position:absolute;
    z-index:0;
    right:-40px;
    bottom:-55px;
    width:130px;
    height:130px;
    border-radius:50%;
    background:rgba(126,188,102,.05);
    pointer-events:none;
}

.student-role .student-game-section>*{
    position:relative;
    z-index:1;
}

.student-role .level-card{
    border:1px solid #eedb95;
    border-radius:18px;
    background:linear-gradient(145deg,#fffdf1,#fff6cb);
}

.student-role .level-track{
    height:10px;
    background:#eee5bc;
}

.student-role .level-track span{
    background:linear-gradient(90deg,#90cf3e,#e7dc53);
}

/* Podium */
.student-role .podium-section{
    background:
        radial-gradient(circle at 85% 15%,rgba(246,207,76,.13),transparent 10rem),
        linear-gradient(180deg,#fffef7,#fff);
}

.student-role .podium-card{
    border-color:#dfe7dc;
    background:linear-gradient(180deg,#fff,#fafcf7);
    box-shadow:0 7px 16px rgba(27,72,42,.055);
}

.student-role .podium-place-1{
    border:2px solid #e6c950;
    background:linear-gradient(180deg,#fff8c9,#fff);
    transform:translateY(-8px);
}

.student-role .podium-avatar{
    background:linear-gradient(145deg,#dff2c7,#bdddac);
}

.student-role .podium-tab{
    border:1px solid #d9e4d7;
    background:#f5f8f2;
    color:#4e6654;
}

.student-role .podium-tab.active{
    border-color:#9fd0a6;
    background:linear-gradient(180deg,#e9f6e4,#dff1df);
    color:#12632f;
}

.student-role .podium-explanation{
    border:1px solid #dce7dc;
    background:#f3f7f2;
}

/* Missions */
.student-role .featured-mission{
    border:2px solid #cbe2c8;
    background:
        radial-gradient(circle at right top,rgba(201,236,116,.14),transparent 10rem),
        linear-gradient(145deg,#fffef4,#f6fbef);
}

.student-role .mission-type{
    color:#126433;
    font-weight:950;
}

.student-role .mission-xp,
.student-role .mission-row-xp{
    color:#8b6810;
    font-weight:950;
}

.student-role .mission-row,
.student-role .mobile-mission-card{
    border:1px solid #dce6d9;
    border-radius:16px;
    background:linear-gradient(180deg,#fff,#fafcf7);
}

.student-role .mission-row-icon{
    border-radius:14px;
    background:linear-gradient(145deg,#e9f4df,#dbeecf);
}

.student-role .mobile-mission-status{
    border-radius:999px;
    background:#edf6e9;
    color:#176d38;
}

.student-role .mission-row-late,
.student-role .mission-late,
.student-role .mobile-mission-card.overdue{
    border-color:#e9b5a8;
    background:linear-gradient(180deg,#fff8f5,#fff);
}

/* achievements */
.student-role .achievement-card{
    border:1px solid #dce5d8;
    border-radius:15px;
    background:linear-gradient(180deg,#fff,#fafcf8);
}

.student-role .achievement-card>span{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    border-radius:14px;
    background:linear-gradient(145deg,#eef5e8,#dfead8);
    font-size:1.45rem;
}

.student-role .achievement-card.unlocked{
    border-color:#e1c85e;
    background:
        radial-gradient(circle at top right,rgba(246,213,91,.20),transparent 7rem),
        linear-gradient(145deg,#fffced,#fff9d8);
}

.section-footer-action{
    display:flex;
    justify-content:center;
    margin-top:12px;
}

/* Bottom nav: reference-style dark green game bar */
.student-role .student-bottom-nav{
    right:0;
    bottom:0;
    left:0;
    max-width:none;
    margin:0;
    padding:7px max(8px,env(safe-area-inset-right))
        max(8px,env(safe-area-inset-bottom))
        max(8px,env(safe-area-inset-left));
    border:0;
    border-radius:0;
    background:
        radial-gradient(circle at 50% 0,rgba(67,142,73,.15),transparent 11rem),
        linear-gradient(180deg,#073a1c,#042b15);
    box-shadow:0 -10px 30px rgba(3,47,23,.20);
}

.student-role .student-bottom-nav a{
    min-height:61px;
    border-radius:12px;
    color:rgba(255,255,255,.78);
}

.student-role .student-bottom-nav a:hover,
.student-role .student-bottom-nav a:focus-visible,
.student-role .student-bottom-nav a.nav-active{
    background:rgba(255,255,255,.08);
    color:#fff;
}

.student-role .student-bottom-nav a.nav-active::after{
    content:"";
    position:absolute;
    bottom:4px;
    left:50%;
    width:24px;
    height:4px;
    border-radius:999px;
    background:#92d849;
    transform:translateX(-50%);
}

.student-role .student-bottom-nav a{
    position:relative;
}

.student-role .student-bottom-nav b{
    background:#e84237;
}

/* =========================================================
   REGRAS DA JORNADA — fiel ao mockup aprovado
   ========================================================= */

.journey-rules-game{
    max-width:820px;
    margin:0 auto;
    padding-bottom:110px;
}

.rules-game-hero{
    display:grid;
    gap:14px;
}

.rules-wood-sign{
    position:relative;
    display:grid;
    justify-items:center;
    gap:4px;
    overflow:visible;
    padding:26px 24px 22px;
    border:3px solid #9b5a1f;
    border-radius:22px 22px 28px 28px;
    background:
        linear-gradient(90deg,
            rgba(117,66,22,.16) 0 2px,
            transparent 2px 18%,
            rgba(117,66,22,.12) 18% 18.5%,
            transparent 18.5% 60%,
            rgba(117,66,22,.14) 60% 60.7%,
            transparent 60.7%),
        linear-gradient(180deg,#f7ca75 0,#e8aa55 47%,#d68e37 100%);
    color:#0d5a29;
    box-shadow:
        inset 0 4px 0 rgba(255,255,255,.28),
        inset 0 -5px 0 rgba(116,62,17,.20),
        0 12px 25px rgba(95,57,18,.20);
}

.rules-wood-sign::before,
.rules-wood-sign::after{
    content:"";
    position:absolute;
    right:5%;
    left:5%;
    height:3px;
    border-radius:999px;
    background:rgba(128,68,21,.16);
}

.rules-wood-sign::before{top:35%}
.rules-wood-sign::after{top:68%}

.rules-wood-sign strong{
    position:relative;
    z-index:2;
    font-size:clamp(1.9rem,7vw,3rem);
    font-weight:1000;
    letter-spacing:.015em;
    text-align:center;
    text-shadow:0 2px 0 rgba(255,255,255,.35);
}

.rules-wood-sign small{
    position:relative;
    z-index:2;
    color:#174c22;
    font-size:.86rem;
    font-weight:950;
    text-align:center;
}

.rules-leaf{
    position:absolute;
    z-index:3;
    font-size:2rem;
    filter:drop-shadow(0 5px 5px rgba(60,92,34,.16));
}

.rules-leaf-a{
    top:-15px;
    left:3%;
    transform:rotate(-18deg);
}

.rules-leaf-b{
    right:3%;
    bottom:-12px;
    transform:rotate(15deg);
}

.rules-game-intro{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    padding:16px 18px;
    border:1px solid #3c7f49;
    border-radius:18px;
    background:
        radial-gradient(circle at right,rgba(233,210,81,.13),transparent 8rem),
        linear-gradient(145deg,#1c6130,#285f31);
    color:#fff;
    box-shadow:0 10px 22px rgba(26,87,43,.16);
}

.rules-game-intro p{
    margin:0;
    line-height:1.5;
}

.rules-shield,
.rules-trophy{
    display:grid;
    place-items:center;
    width:58px;
    height:58px;
    border-radius:17px;
    background:rgba(255,255,255,.08);
    font-size:2.2rem;
}

.rules-game-card{
    overflow:hidden;
    margin-top:14px;
    border:1px solid #e0e4cb;
    border-radius:20px;
    background:rgba(255,255,240,.96);
    box-shadow:0 13px 29px rgba(46,78,39,.12);
}

.rules-game-card-head{
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
    padding:14px 17px;
    border-bottom:1px solid #e7e6cf;
    background:linear-gradient(180deg,#fffef4,#f9f6df);
}

.rules-game-card-head>div{
    display:flex;
    gap:9px;
    align-items:center;
}

.rules-game-card-head b{
    color:#d42e25;
}

.rules-check-icon{
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    border-radius:50%;
    background:#54a22d;
    color:#fff;
    font-weight:950;
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.20);
}

.rules-list-game{
    padding:6px 12px 12px;
}

.rule-game-row{
    border-bottom:1px solid #ece8d6;
}

.rule-game-row:last-child{
    border-bottom:0;
}

.rule-game-row summary{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto auto;
    gap:11px;
    align-items:center;
    min-height:70px;
    padding:9px 4px;
    list-style:none;
    cursor:pointer;
}

.rule-game-row summary::-webkit-details-marker{
    display:none;
}

.rule-game-icon{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border-radius:13px;
    color:#fff;
    font-size:1.35rem;
    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.22),
        0 4px 8px rgba(31,54,35,.12);
}

.rule-game-icon-green{background:linear-gradient(145deg,#76c72c,#3d9720)}
.rule-game-icon-yellow{background:linear-gradient(145deg,#ffc62e,#e89b16)}
.rule-game-icon-blue{background:linear-gradient(145deg,#3997d4,#14649e)}
.rule-game-icon-teal{background:linear-gradient(145deg,#34b4a3,#168678)}
.rule-game-icon-purple{background:linear-gradient(145deg,#a55cd0,#6d3096)}
.rule-game-icon-red{background:linear-gradient(145deg,#f15a4a,#c92f27)}
.rule-game-icon-orange{background:linear-gradient(145deg,#f59d29,#d66d0d)}
.rule-game-icon-dark{background:linear-gradient(145deg,#5c645a,#252b25)}

.rule-game-copy strong{
    display:block;
    color:#1e2d20;
    line-height:1.3;
}

.rule-game-copy small{
    color:#6b786c;
}

.rule-game-xp{
    white-space:nowrap;
    color:#d42e25;
    font-size:1rem;
    font-weight:1000;
}

.rule-game-chevron{
    display:grid;
    place-items:center;
    width:29px;
    height:29px;
    border:1px solid #e1dfc7;
    border-radius:50%;
    color:#9b9d75;
    background:#fffef2;
    font-size:1.1rem;
    transition:transform .18s ease;
}

details[open] .rule-game-chevron{
    transform:rotate(180deg);
}

.rule-game-detail{
    margin:-2px 40px 10px 57px;
    padding:9px 12px;
    border-radius:10px;
    background:#f5f4e6;
    color:#5d6c5f;
    font-size:.82rem;
    line-height:1.45;
}

.rule-game-positive{
    margin-top:4px;
    border-top:1px solid #dce5ca;
    border-bottom:0;
    background:#f4f9e8;
}

.rule-game-positive-inner{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:11px;
    align-items:center;
    min-height:72px;
    padding:9px 4px;
}

.rule-game-bonus{
    color:#19713a;
    font-weight:1000;
    text-align:right;
}

.rules-info-banner{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:13px;
    align-items:center;
    margin-top:14px;
    padding:15px 17px;
    border-radius:18px;
    box-shadow:0 9px 19px rgba(45,78,43,.09);
}

.rules-info-banner strong{
    display:block;
    margin-bottom:3px;
    font-size:1rem;
}

.rules-info-banner p{
    margin:0;
    line-height:1.4;
}

.rules-info-blue{
    border:1px solid #77bfe8;
    background:linear-gradient(145deg,#7fc9f1,#cbefff);
}

.rules-info-yellow{
    border:1px solid #e7c35e;
    background:linear-gradient(145deg,#ffe083,#fff0b3);
}

.rules-info-icon{
    font-size:2.25rem;
}

.rules-info-medal{
    font-size:2.4rem;
}

.rules-game-accept{
    margin-top:14px;
}

.rules-game-consent,
.rules-game-accepted{
    display:grid;
    grid-template-columns:auto auto minmax(0,1fr) auto;
    gap:11px;
    align-items:center;
    min-height:78px;
    padding:13px 16px;
    border:2px solid #0b6a31;
    border-radius:19px;
    background:linear-gradient(180deg,#14913e,#08702f);
    color:#fff;
    box-shadow:0 10px 22px rgba(8,103,46,.20);
}

.rules-game-accepted{
    grid-template-columns:auto minmax(0,1fr) auto;
}

.rules-game-consent input{
    width:22px;
    height:22px;
    accent-color:#d7ed6a;
}

.rules-game-consent strong,
.rules-game-consent small,
.rules-game-accepted strong,
.rules-game-accepted small{
    display:block;
}

.rules-game-consent small,
.rules-game-accepted small{
    margin-top:3px;
    color:rgba(255,255,255,.80);
}

.rules-accept-shield{
    font-size:2rem;
}

.rules-accept-arrow{
    font-size:2.2rem;
}

.rules-game-submit{
    width:100%;
    margin-top:8px;
    background:linear-gradient(180deg,#0b672f,#064f24);
}

/* Profile */
.student-role .player-profile-hero{
    border-radius:24px;
    background:
        radial-gradient(circle at 80% 20%,rgba(211,240,93,.18),transparent 11rem),
        linear-gradient(145deg,#063a1c,#0d672f 62%,#26904b);
}

.student-role .player-avatar-large{
    border:3px solid rgba(255,255,255,.24);
    background:linear-gradient(145deg,#c7efb4,#93d88b);
}

.student-role .avatar-option{
    border:1px solid #dbe5d5;
    background:linear-gradient(180deg,#fffef7,#f6f9ef);
}

.student-role .avatar-option:hover{
    border-color:#9dcc8f;
}

.student-role .challenge-card.complete{
    border-color:#a6d596;
    background:linear-gradient(145deg,#edf9e7,#fff);
}

.student-role .xp-history-row{
    border:1px solid #dfe6db;
    background:#fff;
}

.student-role .xp-history-row.positive>b{
    color:#16723a;
}

.student-role .xp-history-row.negative{
    border-color:#edb6aa;
    background:#fff6f3;
}

/* Mission map */
.student-role .mission-map-header{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    border-radius:24px;
    background:
        radial-gradient(circle at 90% 20%,rgba(206,239,94,.18),transparent 10rem),
        linear-gradient(145deg,#073b1d,#106b33 65%,#389b55);
    color:#fff;
    box-shadow:var(--game-shadow);
}

.student-role .mission-map-header h1,
.student-role .mission-map-header p{
    color:#fff;
}

.student-role .mission-map-header .game-eyebrow{
    color:#cef3bd;
}

.student-role .chapter-badge{
    border:1px solid #dce5d8;
    background:#edf6e8;
    color:#176b37;
}

/* Student mission form */
.student-role .student-mission-form{
    position:relative;
    overflow:hidden;
    border:1px solid #dce6d8;
    border-radius:22px;
    background:
        radial-gradient(circle at 100% 0,rgba(190,231,103,.10),transparent 12rem),
        linear-gradient(180deg,#fffef7,#fff);
}

.student-role .instruction-box{
    border:1px solid #dce7d8;
    border-radius:14px;
    background:#f5f9ef;
}

.student-role .evidence-hub{
    border:1px solid #cfe1cb;
    background:
        radial-gradient(circle at right top,rgba(195,228,100,.10),transparent 8rem),
        #f9fcf4;
}

.student-role .evidence-kind-card{
    border:1px solid #dce6d8;
    background:#fffef9;
}

.student-role .evidence-xp-tip{
    border-color:#e8c96e;
    background:linear-gradient(145deg,#fff5bf,#fffbe6);
}

/* Notifications */
.student-role .notification{
    border:1px solid #dce6d9;
    border-radius:16px;
    background:#fffef8;
}

.student-role .notification.unread{
    border-left:5px solid #1a7c3d;
    background:
        radial-gradient(circle at right,rgba(192,228,102,.10),transparent 8rem),
        #fbfff7;
}

/* =========================================================
   MOBILE MATCH — referência aprovada
   ========================================================= */

@media(max-width:759px){
    .student-role{
        background:
            radial-gradient(circle at 5% 24%,rgba(63,144,55,.08),transparent 12rem),
            linear-gradient(180deg,#edf7e8,#f7fbf5 24%,#f1f7ee);
    }

    .student-role .topbar{
        min-height:66px;
        padding:8px 12px;
    }

    .student-role .topbar nav{
        display:none;
    }

    .student-role .container{
        padding:12px 10px 92px;
    }

    .student-game-hud{
        grid-template-columns:minmax(0,1fr) auto;
        gap:8px;
        padding:9px 10px;
        border-radius:17px;
    }

    .hud-brand>span{
        font-size:1.65rem;
    }

    .hud-brand strong{
        font-size:.80rem;
    }

    .hud-brand small{
        font-size:.52rem;
    }

    .hud-level{
        grid-column:1/-1;
        grid-row:2;
        width:100%;
        min-width:0;
        padding:7px 10px;
    }

    .hud-player{
        grid-column:2;
        grid-row:1;
        padding:4px 6px;
    }

    .hud-avatar{
        width:42px;
        height:42px;
        font-size:1.55rem;
    }

    .hud-player div{
        display:none;
    }

    .student-role .game-hero{
        grid-template-columns:1fr;
        gap:14px;
        padding:17px;
        border-radius:21px;
    }

    .student-role .game-hero h1{
        font-size:1.72rem;
        line-height:1.08;
    }

    .student-role .game-hero-copy p{
        font-size:.82rem;
        line-height:1.52;
    }

    .student-role .plant-stage-card{
        width:100%;
        max-width:none;
        padding:11px;
        border-radius:18px;
    }

    .student-role .growth-stage-visual{
        max-width:none;
        height:170px;
        aspect-ratio:auto;
    }

    .student-role .game-stats-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .student-role .game-stat{
        min-height:72px;
    }

    .student-role .student-game-section,
    .student-role .featured-mission,
    .student-role .mission-chapter{
        padding:13px;
        border-radius:18px;
    }

    .student-role .xp-podium{
        grid-template-columns:1fr;
    }

    .student-role .podium-place-1{
        order:1;
        transform:none;
    }

    .student-role .podium-place-2{
        order:2;
    }

    .student-role .podium-place-3{
        order:3;
    }

    .student-role .achievement-grid{
        grid-template-columns:1fr;
    }

    .student-role .achievement-card{
        grid-template-columns:auto minmax(0,1fr) auto;
        padding:10px;
    }

    .student-role .mission-map-header{
        padding:17px;
        border-radius:20px;
    }

    .student-role .mission-chapter-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .student-role .chapter-badge{
        align-self:flex-start;
    }

    .student-role .mobile-mission-card{
        padding:12px;
    }

    .student-role .mobile-mission-card-top,
    .student-role .mobile-mission-bottom{
        gap:9px;
        align-items:flex-start;
        flex-direction:column;
    }

    .student-role .mobile-mission-action{
        width:100%;
        justify-content:center;
    }

    .journey-rules-game{
        padding-bottom:90px;
    }

    .rules-wood-sign{
        padding:21px 15px 18px;
        border-radius:18px 18px 22px 22px;
    }

    .rules-wood-sign strong{
        font-size:1.95rem;
        line-height:1;
    }

    .rules-wood-sign small{
        font-size:.68rem;
    }

    .rules-game-intro{
        grid-template-columns:auto minmax(0,1fr);
        padding:13px;
    }

    .rules-trophy{
        display:none;
    }

    .rules-shield{
        width:50px;
        height:50px;
        font-size:1.8rem;
    }

    .rules-game-intro p{
        font-size:.82rem;
    }

    .rules-game-card{
        border-radius:17px;
    }

    .rules-game-card-head{
        padding:12px;
        font-size:.78rem;
    }

    .rules-game-row summary{
        grid-template-columns:auto minmax(0,1fr) auto;
        gap:8px;
        min-height:64px;
        padding:8px 0;
    }

    .rule-game-icon{
        width:42px;
        height:42px;
        border-radius:12px;
        font-size:1.2rem;
    }

    .rule-game-copy strong{
        font-size:.79rem;
    }

    .rule-game-xp{
        font-size:.84rem;
    }

    .rule-game-chevron{
        display:none;
    }

    .rule-game-detail{
        margin:-1px 0 8px 50px;
        font-size:.76rem;
    }

    .rule-game-positive-inner{
        grid-template-columns:auto minmax(0,1fr) auto;
    }

    .rule-game-bonus{
        font-size:.78rem;
    }

    .rules-info-banner{
        grid-template-columns:auto minmax(0,1fr);
        padding:12px;
        border-radius:15px;
    }

    .rules-info-icon{
        font-size:1.8rem;
    }

    .rules-info-medal{
        display:none;
    }

    .rules-info-banner strong{
        font-size:.87rem;
    }

    .rules-info-banner p{
        font-size:.76rem;
    }

    .rules-game-consent,
    .rules-game-accepted{
        grid-template-columns:auto minmax(0,1fr) auto;
        padding:12px;
        border-radius:16px;
    }

    .rules-game-consent input{
        position:absolute;
        opacity:0;
        pointer-events:none;
    }

    .rules-accept-shield{
        font-size:1.7rem;
    }

    .rules-game-consent strong,
    .rules-game-accepted strong{
        font-size:.88rem;
    }

    .rules-game-consent small,
    .rules-game-accepted small{
        font-size:.72rem;
    }

    .student-role .player-profile-hero{
        border-radius:20px;
    }

    .student-role .avatar-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .student-role .evidence-kind-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .student-role .captured-gallery,
    .student-role .existing-evidence-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }

    .student-test-return-form{
        bottom:calc(82px + env(safe-area-inset-bottom))!important;
    }

    .student-test-strip{
        top:74px!important;
    }
}

@media(max-width:390px){
    .student-role .container{
        padding-right:8px;
        padding-left:8px;
    }

    .student-role .game-stats-grid{
        grid-template-columns:1fr 1fr;
    }

    .student-role .captured-gallery,
    .student-role .existing-evidence-grid{
        grid-template-columns:1fr!important;
    }

    .rule-game-copy strong{
        font-size:.74rem;
    }

    .rule-game-xp{
        font-size:.78rem;
    }
}


/* Desktop usa navegação superior; barra gamificada fica só no celular. */
@media(min-width:760px){
    .student-role .student-bottom-nav{
        display:none!important;
    }

    .student-role .container{
        padding-bottom:72px;
    }
}

/* No celular, o cabeçalho superior fica enxuto e a navegação é inferior. */
@media(max-width:759px){
    .student-role .student-bottom-nav{
        display:grid!important;
    }
}


/* =========================================================
   CACHEFIX / REGRAS — GARANTIAS DE LAYOUT MOBILE
   ========================================================= */

.student-role .journey-rules-page{
    position:relative;
    z-index:1;
}

.student-role .journey-rules-game{
    width:min(100%,820px);
    margin-inline:auto;
}

.student-role .rules-game-card,
.student-role .rules-info-banner,
.student-role .rules-game-accept{
    position:relative;
    z-index:1;
}

@media(max-width:759px){
    .student-role .journey-rules-game{
        width:100%;
        padding-bottom:calc(
            104px + env(safe-area-inset-bottom)
        );
    }

    .student-role .rules-game-accept{
        margin-bottom:18px;
    }

    .student-role .student-bottom-nav{
        z-index:200;
    }

    .student-role .container{
        padding-bottom:calc(
            92px + env(safe-area-inset-bottom)
        );
    }
}


/* =========================================================
   AUDITORIA DE CLIQUES MOBILE
   ========================================================= */

a,
button,
label,
input[type="button"],
input[type="submit"],
[data-card-control],
[data-evidence-controls]{
    touch-action:manipulation;
}

a[data-card-link]{
    -webkit-tap-highlight-color:rgba(39,121,79,.10);
}

[data-card-control],
[data-evidence-controls]{
    position:relative;
    z-index:5;
}

button[aria-busy="true"]{
    opacity:.68;
    cursor:wait;
    pointer-events:none;
}

@media(max-width:759px){
    .notification[data-interaction-scope] [data-card-control],
    .notification[data-interaction-scope] [data-card-control] button{
        width:100%;
    }

    [data-mobile-nav-control]{
        touch-action:manipulation;
    }
}


.student-bottom-nav.student-bottom-nav-six{
    grid-template-columns:repeat(6,1fr);
    max-width:560px;
}
.student-bottom-nav.student-bottom-nav-six small{
    font-size:.54rem;
}
@media(max-width:390px){
    .student-bottom-nav.student-bottom-nav-six{
        right:5px;
        left:5px;
        padding:5px;
    }
    .student-bottom-nav.student-bottom-nav-six a{
        min-height:49px;
    }
    .student-bottom-nav.student-bottom-nav-six small{
        font-size:.5rem;
    }
}


/* Planejamento de insumos */
.bed-species-main{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:10px;
align-items:end
}
.bed-species-supply-meta{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(120px,.55fr);
gap:10px;
margin-top:10px;
padding-top:10px;
border-top:1px dashed #d6e2d8
}
.bed-species-supply-meta label{
margin:0
}
.supply-planning-head{
display:grid;
gap:18px
}
.supply-actions{
display:flex;
flex-wrap:wrap;
gap:8px;
justify-content:flex-end
}
.supply-filters{
display:grid;
grid-template-columns:minmax(240px,1fr) minmax(180px,.35fr) auto;
gap:12px;
align-items:end
}
.supply-filters label{
margin:0
}
.supply-margin-input{
display:flex;
align-items:center;
gap:8px
}
.supply-margin-input input{
width:100%
}
.supply-table td small{
display:block;
margin-top:4px;
color:#64748b
}
.supply-final{
font-size:1.06em
}
.supply-incomplete{
background:#fff9e8
}
.supply-method-note{
border-left:4px solid #5a8f64
}
@media(max-width:760px){
.bed-species-main,
.bed-species-supply-meta,
.supply-filters{
grid-template-columns:1fr
}
.supply-actions{
justify-content:stretch
}
.supply-actions>*{
flex:1 1 180px
}
}
@media print{
.topbar,
.student-bottom-nav,
.breadcrumbs,
.no-print,
.student-test-strip,
.student-test-return-form{
display:none!important
}
body{
background:#fff!important
}
.container{
max-width:none!important;
padding:0!important
}
.panel,
.supply-print-section{
border:0!important;
box-shadow:none!important;
padding:10px 0!important;
break-inside:avoid
}
.supply-table{
font-size:10pt
}
.supply-table th,
.supply-table td{
padding:6px!important
}
.supply-method-note{
font-size:9pt
}
}


/* Conversão de insumos para compra/produção */
.supply-setting-row td{
background:#f7faf8;
padding-top:8px!important;
padding-bottom:14px!important
}
.supply-setting-form{
display:grid;
grid-template-columns:minmax(220px,1fr) minmax(170px,.55fr) minmax(170px,.55fr) auto;
gap:10px;
align-items:end
}
.supply-setting-form label{
margin:0
}
.supply-setting-title{
display:grid;
gap:3px
}
.supply-setting-title small{
color:#64748b
}
.supply-buy-result{
display:grid;
gap:2px
}
.supply-buy-result strong{
font-size:1.08em
}
.supply-buy-result span,
.supply-buy-result small{
color:#52606d
}
@media(max-width:900px){
.supply-setting-form{
grid-template-columns:1fr
}
}
@media print{
.supply-setting-row{
display:none!important
}
}


/* Complemento de croquis antigos para planejamento de insumos */
.legacy-supply-list{
display:grid;
gap:16px
}
.legacy-supply-card{
border:1px solid #dce5df;
border-radius:16px;
padding:18px;
background:#fbfdfb
}
.legacy-supply-head{
display:flex;
justify-content:space-between;
gap:16px;
align-items:flex-start
}
.legacy-supply-head h3{
margin:8px 0 4px
}
.legacy-supply-head p{
margin:0;
color:#64748b
}
.legacy-original-text{
margin:14px 0;
border:1px solid #e2e8f0;
border-radius:12px;
background:#fff
}
.legacy-original-text summary{
cursor:pointer;
font-weight:700;
padding:12px 14px
}
.legacy-original-content{
white-space:normal;
padding:0 14px 14px;
line-height:1.55;
color:#334155
}
.legacy-supplement-items{
display:grid;
gap:8px;
margin:12px 0
}
.legacy-supplement-item{
display:flex;
justify-content:space-between;
gap:12px;
align-items:center;
padding:10px 12px;
border-radius:10px;
background:#eef7f1
}
.legacy-supplement-item>div{
display:grid;
gap:3px
}
.legacy-supplement-item span{
color:#52606d;
font-size:.9rem
}
.legacy-supply-form{
display:grid;
grid-template-columns:minmax(150px,1fr) minmax(140px,.8fr) minmax(130px,.6fr) minmax(150px,.7fr) auto;
gap:10px;
align-items:end;
padding-top:14px;
border-top:1px solid #e2e8f0
}
.legacy-supply-form label{
margin:0
}
.legacy-supply-note{
margin:10px 0 0;
font-size:.86rem;
color:#64748b
}
@media(max-width:900px){
.legacy-supply-head,
.legacy-supplement-item{
display:grid
}
.legacy-supply-form{
grid-template-columns:1fr
}
}