.kids{display:flex;gap:8px;overflow-x:auto;margin:4px 0 14px;padding-bottom:2px}
.kids button{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 16px;min-height:40px;white-space:nowrap;font-weight:600}
.kids button[aria-selected="true"]{background:var(--brand);border-color:var(--brand);color:#fff}

.sec{margin-top:18px}
.sec > h2{font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:0 2px 8px}
.kidhead .nm{font-size:20px;font-weight:700}
.kidhead .sub{color:var(--muted);font-size:14px}
.cls{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.cls:first-of-type{border-top:0}
.cls .t{font-weight:600}
.cls .m{font-size:14px;color:var(--muted)}

.lesson{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:8px}
.lesson .d{min-width:64px;text-align:center;line-height:1.15}
.lesson .d .dd{font-size:20px;font-weight:700}
.lesson .d .ww{font-size:12px;color:var(--muted);text-transform:uppercase}
.lesson .c{flex:1}
.lesson .c .n{font-weight:600}
.lesson .c .m{font-size:13px;color:var(--muted)}

.att{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:8px}
.att .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.att .when{font-weight:600}
.att .what{font-size:13px;color:var(--muted)}
.att .note{margin-top:8px;font-size:14px;background:var(--bg);border-radius:8px;padding:8px 10px}
.att .note b{font-weight:600;color:var(--muted);font-size:12px;display:block;text-transform:uppercase;letter-spacing:.03em}
.chip{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.c-present,.c-makeup,.c-Approved{background:var(--ok-bg);color:var(--ok)}
.c-absent,.c-Rejected{background:var(--bad-bg);color:var(--bad)}
.c-leave,.c-Pending{background:var(--warn-bg);color:var(--warn)}
.c-Cancelled{background:var(--bg);color:var(--muted)}
.more{width:100%;margin-top:4px}
.paybtn{display:block;text-align:center;margin:24px 0 8px;padding:14px;border-radius:12px;background:var(--card);border:1px solid var(--brand);color:var(--brand);font-weight:700;text-decoration:none}
.hint.small{font-size:13px;margin:0}
.rep{margin-top:10px;background:var(--bg);border-radius:10px;padding:10px 12px;font-size:15px}
.rep p{margin:6px 0}
.rep .mine{border-left:3px solid var(--brand);padding-left:10px}
.rephead{display:flex;justify-content:space-between;align-items:center;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.langsw{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.langsw button{min-height:28px;padding:2px 10px;border:0;border-radius:0;background:var(--card);font-size:12px}
.langsw button[aria-pressed="true"]{background:var(--brand);color:#fff}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px}
.pgrid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block}
.lesson.cancelled .n{text-decoration:line-through;color:var(--muted)}
.att .what.mk{color:var(--ok);font-weight:600}
.row.between{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.hrs{text-align:right;font-size:13px;color:var(--muted);line-height:1.2}
.hrs b{display:block;font-size:24px;color:var(--ink)}
.hrs span{display:block}
.hrs.low b{color:var(--warn)}
/* ---------- buy hours ---------- */
.primary.wide{width:100%;margin-bottom:8px}
.pkgs{display:flex;flex-direction:column;gap:8px}
.pkg{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.pkg.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--info-bg)}
.pkg .h{min-width:64px;text-align:center;font-size:26px;font-weight:700;line-height:1}
.pkg .h small{display:block;font-size:11px;color:var(--ok);font-weight:700;margin-top:2px}
.pkg .h em{display:block;font-size:11px;font-style:normal;color:var(--muted);font-weight:400}
.pkg .n{flex:1;font-weight:600}
.pkg .n span{display:block;font-size:13px;color:var(--muted);font-weight:400}
.pkg .p{font-weight:700;font-size:17px}
.paybox{text-align:center}
.paybox .amt{font-size:30px;font-weight:700;margin-bottom:6px}
.paybox .qr{width:220px;max-width:70vw;height:auto;background:#fff;border-radius:10px;border:1px solid var(--line)}
.filebig{display:flex;align-items:center;justify-content:center;min-height:56px;border:2px dashed var(--line);border-radius:12px;cursor:pointer;font-weight:600;color:var(--brand)}
.prev{max-height:240px;object-fit:contain;border-radius:10px;border:1px solid var(--line)}
.done{text-align:center}
.pvids{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.pvids video{width:100%;max-height:260px;border-radius:8px;background:#000}
.wslink{display:inline-block;margin-top:8px;font-weight:600;color:var(--brand);text-decoration:none}