@import url("../../walkaround/assets/styles.css");

.care-hero { background:linear-gradient(135deg,#111 0%,#282828 100%); color:#fff; border-left:6px solid var(--dyer-red); }
.care-hero h1,.care-hero h2,.care-hero h3 { color:#fff; }
.care-mark { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:24px 0; }
.care-step { background:#fff; border:1px solid var(--dyer-border); border-top:4px solid var(--dyer-red); border-radius:8px; padding:16px; }
.care-step strong { display:block; color:var(--dyer-navy); font-size:15px; }
.care-step span { color:var(--dyer-text-muted); font-size:12px; }
.gate-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.gate { background:#fff; border:1px solid var(--dyer-border); border-radius:8px; padding:16px; }
.gate .gate-state { font-size:11px; font-weight:800; text-transform:uppercase; color:var(--dyer-text-muted); }
.gate.done { border-color:var(--dyer-green); background:var(--dyer-green-soft); }
.gate.done .gate-state { color:var(--dyer-green); }
.gate h3 { margin:4px 0; font-size:16px; }
.week-nav { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0; }
.week-nav a { border:1px solid var(--dyer-border); background:#fff; color:var(--dyer-navy); padding:8px 11px; border-radius:6px; font-size:12px; font-weight:700; }
.week-nav a.active { background:var(--dyer-navy); color:#fff; }
.practice-box { background:#fff; border:1px solid var(--dyer-border); border-radius:10px; padding:22px; margin:20px 0; }
.practice-box h3 { margin-top:0; }
.rank-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.rank-grid > div { padding:15px; border-radius:8px; background:#fff; border:1px solid var(--dyer-border); }
.rank-grid strong { display:block; margin-bottom:4px; }
.rank-now { border-top:4px solid var(--dyer-red)!important; }
.rank-soon { border-top:4px solid var(--dyer-amber)!important; }
.rank-monitor { border-top:4px solid var(--dyer-green)!important; }
.cert-banner { padding:18px; border-radius:8px; background:#f5f5f5; border-left:5px solid var(--dyer-text-muted); }
.cert-banner.certified { background:var(--dyer-green-soft); border-color:var(--dyer-green); }
.score-grid { display:grid; grid-template-columns:minmax(200px,2fr) repeat(5,minmax(42px,1fr)); gap:1px; background:var(--dyer-border); border:1px solid var(--dyer-border); }
.score-grid > div,.score-grid > label { background:#fff; padding:10px; margin:0; }
.score-grid .score-head { background:var(--dyer-navy); color:#fff; font-size:11px; font-weight:800; text-align:center; }
.score-grid label { text-align:center; cursor:pointer; }
.field-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.field label { display:block; font-size:11px; font-weight:800; text-transform:uppercase; margin-bottom:5px; }
.field input,.field select,.field textarea { width:100%; padding:10px; border:1px solid var(--dyer-border); border-radius:6px; font:inherit; background:#fff; }
.field textarea { min-height:90px; resize:vertical; }
.quiz-opt { cursor:pointer; }
.quiz-feedback { display:none; }
.quiz-feedback.show { display:block; }
.quiz-result { display:none; }
.quiz-result.show { display:block; }
@media(max-width:700px){.care-mark,.rank-grid,.field-grid{grid-template-columns:1fr}.score-grid{grid-template-columns:minmax(130px,2fr) repeat(5,42px);overflow-x:auto}.score-grid>div,.score-grid>label{padding:8px 4px}}
@media print {.site-header,.progress-wrap,.training-identity-strip,.lesson-nav,.btn,#save-observation{display:none!important}.page{padding:10px}.card{box-shadow:none}}