.management-layout { background: #f4f6f9; color: #263449; font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif; padding-bottom: 0; }
.management-layout > .container, .management-layout .navbar > .container { width: calc(100% - 64px); max-width: 1680px; }
.management-layout .navbar-inverse { background: #17283d; border-color: #17283d; }
.management-layout .navbar-inverse .navbar-nav > .active > a { background: #263e58; }
.management-layout .footer { position: static; margin-top: 32px; background: transparent; height: auto; border-top: 1px solid #e1e7ee; }
.management-layout .footer p { color: #718096; }
.management-page { padding: 10px 0 24px; }
.management-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.management-heading h3 { font-size: 26px; font-weight: 650; margin: 0 0 8px; letter-spacing: .4px; }
.management-heading p { color: #718096; margin: 0; font-size: 13px; }
.management-card { background: white; border: 1px solid #e0e6ef; border-radius: 12px; box-shadow: 0 3px 14px #1b355508; overflow: hidden; }
.management-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 22px; border-bottom: 1px solid #e8edf3; }
.management-toolbar form { display: flex; gap: 10px; align-items: center; margin: 0; flex-wrap: wrap; }
.management-toolbar label { margin: 0; color: #536176; font-weight: 500; font-size: 13px; }
.management-page .form-control, .management-page input[type=text] { border: 1px solid #d6dfeb; border-radius: 6px; height: 36px; padding: 7px 10px; color: #263449; background: white; box-shadow: none; font-size: 13px; }
.management-page input:focus, .management-page select:focus { outline: 2px solid #b4deda; outline-offset: 1px; border-color: #16857c; }
.management-page .member-search { width: 260px; }
.management-page .btn { border-radius: 6px; font-size: 13px; padding: 8px 15px; font-weight: 500; transition: background .15s; box-shadow: none; }
.management-page .btn-primary { background: #107d74; border-color: #107d74; color: white; }
.management-page .btn-primary:hover { background: #09655e; border-color: #09655e; }
.management-page .btn-default { border-color: #d6dfeb; background: white; color: #45576f; }
.management-page .btn-default:hover { background: #f0f5fa; }
.management-page .btn-sm { padding: 6px 10px; font-size: 12px; }
.management-page .table { margin: 0; font-size: 13px; }
.management-page .table > thead > tr > th { padding: 14px 12px; background: #f7f9fc; color: #617086; font-size: 12px; font-weight: 600; border-bottom: 1px solid #e1e7ee; white-space: nowrap; }
.management-page .table > tbody > tr > td { padding: 13px 12px; vertical-align: middle; border-top: 1px solid #edf0f5; }
.management-page .table-striped > tbody > tr:nth-child(odd) > td { background: #fff; }
.management-page .table > tbody > tr:hover > td { background: #f6fafb; }
.management-page .table-scroll { overflow-x: auto; }
.management-page .table form { margin: 0; display: flex; align-items: center; gap: 6px; }
.member-management .table { min-width: 1150px; }
.member-management .table img { width: 34px; height: 34px; object-fit: cover; border-radius: 50%; background: #edf3f8; }
.member-management .table input[name=alias] { width: 140px; }
.member-management .table input[name=num] { width: 58px; }
.member-management .table input[name=expires] { width: 106px; }
.member-management .table td:nth-child(6) { max-width: 160px; color: #718096; font-size: 12px; }
.member-management .table .btn-primary, .course-management .table .btn-primary { background: #e8f5f2; border-color: #d3e9e4; color: #14766c; }
.member-pagination { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 18px 22px; border-top: 1px solid #e8edf3; }
.member-pagination p { margin: 0; color: #718096; font-size: 13px; }
.member-pagination .pagination { margin: 0; display: flex; gap: 5px; }
.member-pagination .pagination > li > a, .member-pagination .pagination > li > span { border: 1px solid #e0e6ef; border-radius: 5px; color: #536176; font-size: 12px; padding: 6px 10px; }
.member-pagination .pagination > .active > span { background: #107d74; border-color: #107d74; color: white; }
.member-pagination .pagination > .disabled > span { color: #b1bac7; background: #f8fafc; }
.management-empty { padding: 40px; text-align: center; color: #718096; }
.course-management .nav-tabs { padding: 12px 22px 0; background: white; border-bottom: 1px solid #e8edf3; display: flex; overflow-x: auto; }
.course-management .nav-tabs > li { flex-shrink: 0; }
.course-management .nav-tabs > li > a { color: #718096; border: 0; padding: 12px 20px; }
.course-management .nav-tabs > li.active > a { color: #107d74; border: 0; border-bottom: 3px solid #107d74; font-weight: 600; }
.course-management .table { min-width: 1260px; }
.course-management .table td:last-child { min-width: 185px; white-space: nowrap; }
.course-management .table td:last-child form { display: inline-flex; margin-left: 4px; }
.course-management .table .btn-warning { color: #607086; background: #f2f5f9; border-color: #e0e6ef; }
.course-management .table .btn-danger { color: #c44848; background: #fff3f3; border-color: #f1dada; }
.course-management .label { display: inline-block; padding: 5px 9px; border-radius: 20px; font-weight: 500; }
.course-management .label-success { color: #14766c; background: #e6f4ef; }
.course-management .label-default { color: #7c8696; background: #eef1f5; }
@media(max-width: 767px) { .management-layout > .container, .management-layout .navbar > .container { width: 100%; } .management-heading { align-items: flex-start; } .management-heading h3 { font-size: 22px; } .management-toolbar { padding: 16px; } .management-page .member-search { width: 190px; } .member-pagination { padding: 16px; } }

.analysis-metrics { display:flex; gap:24px; padding:24px; }
.analysis-metrics > div { flex:1; padding:20px; border-radius:8px; background:#f5f9fa; }
.analysis-metrics span { display:block; color:#718096; font-size:13px; }
.analysis-metrics strong { display:block; font-size:32px; margin-top:8px; color:#107d74; }
.analysis-note { margin:0 24px 16px; color:#718096; font-size:13px; line-height:1.8; }
.analysis-charts { display:flex; gap:24px; padding:0 24px 20px; }
.analysis-charts section { flex:1; min-width:0; }
.analysis-charts svg { width:100%; }
.analysis-charts h4,.analysis-details h4 { font-size:16px; font-weight:600; }
.analysis-details { margin-top:24px; }
.analytics-page .table { min-width:700px; }
.course-management .table td:last-child { min-width:240px; }
@media(max-width:767px) { .analysis-metrics { gap:8px; padding:12px; } .analysis-metrics > div { padding:12px; } .analysis-charts { flex-direction:column; } }

/* Shared surfaces for the remaining admin screens. */
.management-layout .navbar .btn { border-radius:6px; font-size:13px; }
.management-layout .navbar .btn-primary { background:#31516f; border-color:#42617d; }
.management-layout .navbar .btn-success { background:#107d74; border-color:#107d74; }
.management-layout .navbar .form-control { border-radius:6px; box-shadow:none; }
.management-page .btn-danger { color:#bd4141; background:#fff3f3; border-color:#f1dada; }
.management-page .btn-warning { color:#536176; background:#f2f5f9; border-color:#e0e6ef; }
.management-page textarea, .management-page input[type=password], .management-page input[type=number], .management-page select { border:1px solid #d6dfeb; border-radius:6px; color:#263449; padding:8px 10px; font-size:13px; box-shadow:none; }
.management-page textarea, .management-page textarea.form-control { height:auto; min-height:110px; max-width:100%; resize:vertical; line-height:1.7; }
.management-page textarea:focus { outline:2px solid #b4deda; outline-offset:1px; }
.secondary-management .form-surface { padding:28px; overflow:visible; max-width:1100px; }
.secondary-management .form-horizontal { max-width:960px; }
.secondary-management .form-horizontal .form-group { margin-bottom:22px; }
.secondary-management .control-label { color:#536176; font-size:13px; font-weight:500; }
.secondary-management .table { min-width:680px; }
.secondary-management .table td { overflow-wrap:anywhere; }
.secondary-management .table td:last-child > form { display:inline-flex; margin-left:6px; }
.secondary-management .table td:last-child > a { vertical-align:middle; }
.secondary-management .table img { max-height:110px; object-fit:contain; border-radius:8px; }
.secondary-management .table textarea { width:500px; min-height:100px; }
.secondary-management .table .btn-primary { background:#e8f5f2; color:#14766c; border-color:#d3e9e4; }
.order-management .table { min-width:950px; }
.order-management .table td:nth-child(6), .order-management .table td:nth-child(7) { font-size:12px; color:#718096; }
.overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.overview-item { display:block; padding:28px; color:#263449; transition:box-shadow .15s,border-color .15s; }
.overview-item:hover,.overview-item:focus { text-decoration:none; border-color:#8cbfb7; box-shadow:0 5px 20px #1b355512; color:#107d74; }
.overview-item h4 { font-size:18px; font-weight:600; margin:0 0 12px; }
.overview-item p { color:#718096; font-size:13px; margin-bottom:24px; }
.overview-item span { color:#107d74; font-size:13px; }
.welcome-card { padding:32px; }
.welcome-card p { color:#718096; }
@media(max-width:900px) { .overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) { .secondary-management .form-surface { padding:20px; } .overview-grid { grid-template-columns:1fr; gap:14px; } .management-layout .navbar-form { margin-left:0; margin-right:0; } }

.member-filter-form .filter-field { display:flex; gap:10px; align-items:center; }
.course-filter { border:0; padding:20px 22px; margin:0; border-bottom:1px solid #e8edf3; }
.course-filter legend { float:left; width:100%; border:0; margin:0 0 14px; font-size:14px; font-weight:600; }
.course-filter legend small { color:#718096; font-size:12px; font-weight:400; margin-left:12px; }
.course-filter-actions { display:flex; gap:8px; align-items:center; clear:both; margin-bottom:14px; font-size:12px; }
.course-checkboxes { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; max-height:260px; overflow:auto; }
.course-checkboxes label { display:flex; gap:10px; align-items:flex-start; margin:0; padding:12px; border:1px solid #e0e6ef; border-radius:7px; font-size:13px; font-weight:500; cursor:pointer; }
.course-checkboxes label:has(input:checked) { background:#f0f8f6; border-color:#acd1c7; }
.course-checkboxes input { accent-color:#107d74; }
.course-checkboxes small { display:block; color:#718096; margin-top:4px; }
.filter-hint { margin:14px 0 0; color:#718096; font-size:12px; }
.log-profile { display:flex; justify-content:space-between; align-items:center; padding:24px; gap:20px; margin-bottom:24px; }
.log-profile h4 { font-size:20px; font-weight:600; margin-top:0; }
.log-profile p { color:#718096; margin-bottom:5px; font-size:13px; }
.log-identity { overflow-wrap:anywhere; }
.log-total { display:flex; flex-direction:column; flex-shrink:0; color:#718096; font-size:12px; text-align:center; }
.log-total strong { font-size:30px; color:#107d74; }
.log-history { padding:24px; }
.log-history > h4 { font-size:16px; font-weight:600; margin:0 0 24px; }
.activity-timeline { list-style:none; padding:0 0 0 20px; margin:0 0 0 6px; border-left:2px solid #e0eae8; }
.activity-timeline > li { position:relative; padding:0 0 22px; }
.activity-timeline > li:before { content:''; position:absolute; left:-26px; top:7px; height:10px; width:10px; background:#107d74; border:2px solid white; border-radius:50%; }
.activity-timeline article { padding:16px 18px; background:#f8fafc; border:1px solid #e8edf3; border-radius:8px; }
.activity-timeline header { display:flex; justify-content:space-between; gap:10px; align-items:center; flex-wrap:wrap; }
.activity-badge { background:#e8f5f2; color:#14766c; padding:4px 9px; border-radius:5px; font-size:13px; display:inline-block; }
.activity-id,.activity-timeline time { color:#718096; font-size:12px; margin-left:10px; }
.activity-timeline summary { cursor:pointer; color:#536176; font-size:13px; margin-top:14px; }
.activity-timeline summary span { color:#8a96a5; font-size:12px; margin-left:10px; }
.activity-timeline pre { margin:14px 0 0; padding:16px; background:white; border:1px solid #e0e6ef; border-radius:6px; max-height:340px; overflow:auto; font-size:12px; white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:767px) { .course-filter { padding:16px; } .course-checkboxes { grid-template-columns:1fr; } .log-history { padding:18px; } }
.member-filter-form .filter-field > label { white-space:nowrap; flex-shrink:0; }
.secondary-management #dow { min-width:82px; }
.avatar-edit-link { display:block; white-space:nowrap; margin-top:6px; font-size:12px; color:#107d74; }
/* Compact avatar editor; match the 34px member-list avatars. */
.avatar-management { max-width:760px; }
.avatar-management .form-surface { padding:24px; }
.avatar-previews { display:flex; gap:32px; padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #e8edf3; }
.avatar-preview-item { display:flex; align-items:center; gap:12px; }
.avatar-preview-item[hidden] { display:none; }
.avatar-previews img,.avatar-placeholder { width:34px; height:34px; border-radius:50%; object-fit:cover; background:#eef3f6; }
.avatar-placeholder { display:flex; align-items:center; justify-content:center; color:#718096; font-size:12px; }
.avatar-previews p { color:#718096; font-size:13px; margin:0; }
.avatar-source { display:flex; gap:6px; margin:0 0 18px; padding:4px; background:#f2f5f8; border-radius:8px; width:fit-content; }
.avatar-source label { margin:0; padding:7px 12px; border-radius:5px; color:#617086; font-size:13px; font-weight:500; cursor:pointer; }
.avatar-source label:has(input:checked) { background:white; color:#107d74; box-shadow:0 1px 4px #26344912; }
.avatar-source input { margin:0 6px 0 0; vertical-align:middle; accent-color:#107d74; }
.avatar-upload-row { position:relative; display:flex; align-items:center; gap:12px; }
.avatar-upload-row label { margin:0; cursor:pointer; }
.avatar-upload-row span,.avatar-help { color:#718096; font-size:12px; }
.avatar-help { margin:10px 0 0; }
.avatar-file-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.avatar-upload-row:focus-within label { outline:2px solid #b4deda; outline-offset:2px; }
.preset-avatar-list { margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,52px); gap:10px; border:0; }
.preset-avatar-list legend { font-size:13px; font-weight:600; color:#536176; padding:0 0 12px; margin-bottom:14px; border-color:#e8edf3; }
.preset-avatar-list legend small { color:#8a96a5; font-size:12px; font-weight:400; margin-left:10px; }
.preset-avatar-list label { position:relative; display:flex; align-items:center; justify-content:center; height:52px; margin:0; cursor:pointer; border:1px solid #e4eaf0; border-radius:8px; background:#f8fafc; }
.preset-avatar-list label:hover { border-color:#91bdb6; background:#f0f8f6; }
.preset-avatar-list label:has(input:checked) { border:2px solid #107d74; background:#e7f5f0; }
.preset-avatar-list label:has(input:focus-visible) { outline:2px solid #107d74; outline-offset:2px; }
.preset-avatar-list input { position:absolute; opacity:0; width:1px; height:1px; }
.preset-avatar-list img { display:block; width:34px; height:34px; border-radius:50%; }
.preset-avatar-list span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.avatar-actions { display:flex; gap:10px; margin-top:22px; padding-top:20px; border-top:1px solid #e8edf3; }
.avatar-management #avatar-client-error:empty { display:none; }
@media(max-width:767px) { .avatar-management .form-surface { padding:18px; } .avatar-previews { gap:20px; } }