#courses-view{--course-pink:#da7894;--course-text:#60585d;--course-border:#e8dfe4;background:#fdfbfc;border:0;max-width:1120px;margin:0 auto;padding:28px 32px;color:var(--course-text)}
#courses-view h1,#courses-view h2{color:var(--course-pink)}#courses-view h1{font-size:28px;line-height:1.25;margin:0 0 3px}#courses-view h2{font-size:22px;margin:0}#courses-view button{background:#f2ebef;border-color:var(--course-border);color:#332e31;min-height:40px}#courses-view .course-primary{background:var(--course-pink);color:#241a20;border-color:transparent;padding:10px 18px;font-size:16px}#courses-view p{color:inherit}
.course-header{display:flex;justify-content:space-between;align-items:center;gap:16px}.course-header p{margin:0;font-size:16px}.course-add-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}.course-add-controls select{width:170px;font-size:14px;background:white}.course-add-controls label{margin:0}.course-add-controls label>span{display:block;font-size:12px}.course-add-controls #course-settings{font-size:13px}
#course-balance{padding:28px 0 0;font-size:16px}.course-warning{padding:14px 18px;background:#fff7f0;border:1px solid #ffddc3;color:#e78b08!important;border-radius:12px;margin:0 0 18px;line-height:1.5}.hippo-section,.ranger-section{padding:0;border:0;background:transparent;border-radius:0;margin-bottom:30px}.course-section-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.course-subtle{font-size:13px;padding:5px 10px}.course-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.course-card{border:2px solid var(--course-border);background:#f2ecef;border-radius:13px;padding:16px;min-height:148px}.course-card>span{font-size:16px}.course-card-value{display:flex;align-items:baseline;gap:8px;margin:4px 0 12px}.course-card strong{color:var(--course-pink);font-size:32px;line-height:1.3}.course-card p{font-size:14px;margin:3px 0}.course-card .course-expiry{border-bottom:6px solid #e0afbf;padding-bottom:9px;margin-top:10px}.course-muted{color:#82767d!important}.course-credit{background:#10b985;color:white;padding:5px 13px;border-radius:24px;font-weight:600;white-space:nowrap}.course-unpaid{color:#b6435c!important}.course-month-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:10px}.course-month-toolbar label{margin:0}.course-month-toolbar input{width:180px;background:white}
.course-fee-wrap{border:2px solid var(--course-border);border-radius:16px;background:white;overflow:hidden;box-shadow:0 3px 18px #60585d06}.course-fees{border-collapse:collapse;width:100%;font-size:15px}.course-fees caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.course-fees th{background:#f2ebef;font-weight:500}.course-fees th,.course-fees td{padding:12px 8px;text-align:center}.course-fees th:last-child{color:var(--course-pink)}.course-fees td:last-child{color:#e35067;font-weight:700}
.course-history{border:2px solid var(--course-border);border-radius:18px;padding:24px;background:#fff;box-shadow:0 4px 20px #60585d08}.course-history-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}.course-history-toolbar h2{font-size:18px!important;color:#29232a!important;margin-right:auto!important}.course-history-toolbar input[type=search]{width:200px;background:white;font-size:14px}.course-history-toolbar select{width:140px;background:white;font-size:14px}.course-history-toolbar label{margin:0;border:1px solid var(--course-border);border-radius:10px;background:#f2ebef;padding:7px 10px;font-size:14px;white-space:nowrap}.course-history-toolbar input[type=checkbox]{width:16px;height:16px;accent-color:var(--course-pink);vertical-align:middle;margin:0 5px 0 0}.course-result-count{font-size:12px;color:#8e838a!important;margin:4px 0 10px}.course-history-month{border:0;border-radius:0;padding:0;background:transparent;margin:20px 0 0}.course-history-heading{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--course-border)}.course-history-heading h3{font-size:17px;color:#29232a;margin:0 auto 0 0}.course-month-chip{background:#f2ebef;padding:2px 9px;font-size:13px;border-radius:20px}.course-month-chip.ranger{color:#d87491}.course-history-row{display:flex;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid var(--course-border)}.course-history-row:last-child{border-bottom:0}.course-avatar{display:flex;align-items:center;justify-content:center;background:#f4ebef;color:var(--course-pink);width:40px;height:40px;border-radius:50%;flex-shrink:0}.course-avatar.rangers{background:#e6f6ef;color:#10a878}.course-avatar.jiannan_hippo{background:#f0edf7;color:#9580b3}.course-history-info{flex:1;min-width:0;overflow-wrap:anywhere}.course-item-heading{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:#29232a}.course-unit{color:var(--course-pink);background:#f9edf2;padding:2px 7px;border-radius:12px;font-size:14px;white-space:nowrap}.course-unit.rangers{color:#0eac7c;background:#e5f8ef}.course-unit.jiannan_hippo{color:#8972aa;background:#f0eaf8}.course-history-info p{font-size:14px;margin:4px 0 0;line-height:1.5}.course-note{color:#877983!important}.course-history-row time{font-size:14px;white-space:nowrap}.course-record-actions{display:flex;gap:6px}.course-record-actions button{font-size:21px;width:36px;padding:3px}.course-record-actions .course-delete{color:#e7757e!important;background:#fff4f4!important;border-color:#f7d4d9!important}.course-empty{text-align:center;padding:28px}
@media(min-width:1200px){#courses-view{max-width:1180px}.course-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){#courses-view{padding:22px 16px}.course-header{align-items:start;flex-wrap:wrap}.course-add-controls{width:100%;justify-content:start}.course-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.course-card{padding:14px;min-height:144px}.course-fees thead{display:none}.course-fees tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.course-fees td{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--course-border);text-align:right}.course-fees td:before{content:attr(data-label);text-align:left;color:var(--course-text);font-size:13px}.course-fees td:last-child{grid-column:1/-1;background:#fbf2f5}.course-history{padding:16px}.course-history-toolbar h2{width:100%;margin-bottom:6px!important}.course-history-toolbar input[type=search]{width:100%}.course-history-toolbar select{flex:1;min-width:0}.course-history-heading{gap:6px}.course-history-heading h3{width:100%}.course-history-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:8px}.course-avatar{width:32px;height:32px;grid-row:1/3}.course-history-info{grid-column:2/-1}.course-history-row time{grid-column:2;font-size:13px}.course-record-actions{grid-column:3}.course-record-actions button{min-width:44px;min-height:44px}.course-history-toolbar input[type=search],.course-history-toolbar select,.course-add-controls select{font-size:16px;min-height:44px}.course-section-heading{flex-wrap:wrap}.course-card strong{font-size:30px}.course-card>span{font-size:14px}.course-card .course-expiry{font-size:12px}.course-credit{font-size:14px}.course-add-controls #add-course{flex:1}.course-add-controls #course-settings{display:none}}
@media(max-width:360px){#courses-view{padding:18px 10px}.course-history{padding:12px}.course-card{padding:11px}.course-history-toolbar label{font-size:12px}.course-add-controls select{width:146px}.course-primary{padding:10px!important}}
.course-page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.course-page-heading p{margin:0;font-size:16px}#courses-view #add-course{background:var(--course-pink);border-color:transparent;padding:10px 18px;font-size:16px}.course-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}#course-result-count{font-size:12px;margin:4px 0 10px}.course-payment-filter{display:flex;align-items:center;gap:3px}
@media(max-width:760px){.course-page-heading{align-items:start;flex-wrap:wrap}.course-filters{width:100%}.course-filters input[type=search]{flex-basis:100%}.course-page-heading h1{margin-bottom:6px!important}}