/* Approved “Nét tranh mềm”: small painted avatars, restrained color, no animation. */
.ui-approved:is(.family-layout,.child-layout){--blue:#2674a8;--blue-pale:#eef5fb;--paper:#fff;--border:#dce6ed;--ink:#24485f;--muted:#5d7486;color:var(--ink);background:white;font-weight:500}
.ui-approved:is(.family-layout,.child-layout) :is(.sidebar,.app-header,.sidebar nav,.ui-list,.ui-list-row,.empty,.ui-tabs button[aria-pressed=true]){background:white}
.ui-approved:is(.family-layout,.child-layout) .family :is(.card,.ui-homework-feature){background:white;border:1px solid var(--border);border-radius:18px;padding:22px}
.ui-approved:is(.family-layout,.child-layout) .family :is(p,input,select,textarea){font-weight:500}
.ui-approved:is(.family-layout,.child-layout) .button.primary{background:var(--blue);border-color:var(--blue)}
.ui-approved:is(.family-layout,.child-layout) .button{border-radius:12px;font-weight:650}
.ui-approved:is(.family-layout,.child-layout) .nav-item{position:relative;min-height:52px;background:transparent;color:var(--muted);font-weight:500}
.ui-approved:is(.family-layout,.child-layout) .nav-item.active{background:transparent;color:var(--blue);font-weight:700}
.ui-approved:is(.family-layout,.child-layout) .nav-item.active:after{content:'';position:absolute;left:5px;top:15px;bottom:15px;width:3px;border-radius:3px;background:#f4c346}
.ui-approved:is(.family-layout,.child-layout) .nav-item .family-color-icon{width:26px;height:26px}
.ui-approved:is(.family-layout,.child-layout) .nav-item .family-student-icon{width:36px}
.student-avatar{display:block;flex-shrink:0;width:86px;height:86px;border-radius:50%;background-image:url('/avatars-soft.webp');background-size:200% 200%;background-position:0 0;background-repeat:no-repeat}
.student-avatar[data-student-avatar=bunny]{background-position:100% 0}.student-avatar[data-student-avatar=cat]{background-position:0 100%}.student-avatar[data-student-avatar=penguin]{background-position:100% 100%}
.student-avatar-button{border:0;background:none;padding:0;border-radius:50%;cursor:pointer;touch-action:manipulation;flex-shrink:0}
.soft-student-summary{display:flex;align-items:center;gap:18px;margin-bottom:20px}.soft-student-copy{min-width:0}.family .soft-student-copy h2{margin:0 0 5px;font-size:23px}.family .soft-student-copy p{margin:6px 0 0;font-size:15px}.soft-student-copy small{display:block;margin-top:4px;font-size:12px;overflow-wrap:anywhere}
.soft-status{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:12px;background:#fff1d2;color:#8e641e;font-size:13px;font-weight:600}.soft-status:before{content:'';width:6px;height:6px;border-radius:50%;background:#dfa528}.soft-status.active{background:#eef5e2;color:#426c39}.soft-status.active:before{background:#86ae54}
.soft-student-actions{display:flex;align-items:center;justify-content:flex-end;gap:16px}.soft-student-actions .button{flex:1;min-width:0}.soft-student-actions .text-button{white-space:nowrap;font-size:14px;min-height:44px;font-weight:650}
.student-avatar-picker{margin:0 0 6px;padding:0;min-width:0;border:0}.student-avatar-picker legend{font-size:16px;font-weight:650;padding:0}.student-avatar-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.student-avatar-option{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:7px;min-width:0;padding:8px 4px;border:2px solid transparent;border-radius:14px;cursor:pointer;font-size:13px;text-align:center;color:var(--muted)}
.family .student-avatar-option input{position:absolute;width:1px;height:1px;min-height:0;margin:0;padding:0;opacity:0}.student-avatar-option .student-avatar{width:min(100%,84px);height:auto;aspect-ratio:1}
.student-avatar-option:has(input:checked){border-color:#79add0;background:#f3f8fc;color:var(--blue)}.student-avatar-option:has(input:focus-visible){outline:3px solid #e8af26;outline-offset:2px}
.family-child-greeting{display:flex;align-items:center;gap:16px;margin-bottom:26px}.family-child-greeting .student-avatar{width:64px;height:64px}.family-child-greeting h1{font-size:25px;margin:0}.family-child-greeting p{font-size:14px;margin:5px 0 0}.family-child .page-head h2{font-size:23px;margin:0}
.soft-assignment-summary{display:flex;gap:14px;align-items:center;margin-bottom:18px}.soft-assignment-summary>.family-color-icon{width:42px;height:42px}.soft-assignment-summary>div{min-width:0}.family .soft-assignment-summary h2{font-size:19px;margin:7px 0}.soft-assignment-summary p{font-size:14px}.soft-assignment-card .text-button{width:100%;min-height:46px;background:var(--blue-pale);border:1px solid var(--border);border-radius:12px;color:var(--blue);font-weight:650}
.soft-assignment-card .badge{background:#eef5fb;color:#44739b;font-size:12px;font-weight:600}
.soft-assignment-card>.button{width:100%}.ui-approved:is(.family-layout,.child-layout) .soft-required>.button{background:var(--blue);border-color:var(--blue);color:white}
.ui-approved:is(.family-layout,.child-layout) .ui-tabs{background:#f0f4f7}.ui-approved:is(.family-layout,.child-layout) .ui-tabs button{font-weight:650}.ui-approved:is(.family-layout,.child-layout) .family .ui-toolbar{font-size:14px}
@media(max-width:760px){.ui-approved:is(.family-layout,.child-layout) .nav-item{min-height:62px}.ui-approved:is(.family-layout,.child-layout) .nav-item.active:after{left:50%;transform:translateX(-50%);top:auto;bottom:1px;width:32px;height:3px}.ui-approved:is(.family-layout,.child-layout) .family .card{padding:18px}.soft-student-summary{gap:14px}.student-avatar{width:82px;height:82px}.family .soft-student-copy h2{font-size:22px}.soft-student-actions{gap:12px}.soft-student-actions .button{padding:10px 12px;font-size:15px}.student-avatar-options{gap:5px}.student-avatar-option{font-size:12px;padding:6px 2px}.family-child-greeting h1{font-size:23px}.family-child-greeting .student-avatar{width:62px;height:62px}}
@media(max-width:350px){.soft-student-actions:has(.button){flex-direction:column;align-items:stretch;gap:4px}.soft-student-actions .text-button{text-align:center}.family .soft-student-copy h2{font-size:20px}.soft-student-summary{gap:10px}.student-avatar{width:72px;height:72px}}