@media (max-width: 1023px) {
html { font-size: 16px; }
body { line-height: 1.55; -webkit-tap-highlight-color: transparent; }
a, button, .nav-item, .mobile-tab-item, .notif-item,
.score-card, .warning-list-item, .rank-item, .cs-class-card,
.login-quick-item, .chip, .eval-item { -webkit-tap-highlight-color: transparent; }
.btn { min-height: 44px; padding: 11px 20px; font-size: 15px; }
.btn-sm { min-height: 40px; padding: 9px 14px; font-size: 13px; }
.btn-xs { min-height: 40px; padding: 8px 12px; font-size: 12.5px; }
.app-header-btn { width: 44px; height: 44px; font-size: 20px; }
.modal-close { width: 44px; height: 44px; font-size: 20px; }
.stepper button { width: 40px; height: 40px; }
.switch { width: 50px; height: 28px; }
.switch .slider::before { width: 22px; height: 22px; }
.switch input:checked + .slider::before { transform: translateX(22px); }
.form-input, .search-input, .search-select {
min-height: 44px;
font-size: 16px;
padding: 10px 14px;
}
textarea.form-input { min-height: 88px; font-size: 16px; }
.form-label { font-size: 14px; margin-bottom: 6px; }
.form-group { margin-bottom: 14px; }
.form-row { grid-template-columns: 1fr !important; gap: 0 !important; }
.page-title { font-size: 20px; margin-bottom: 10px; }
.card { padding: 16px; border-radius: 14px; margin-bottom: 14px; }
.kpi-card { padding: 14px; border-radius: 14px; }
.app-content { overflow-x: hidden; }
.page-section { max-width: 100%; }
}
@media (max-width: 767px) {
html { font-size: 15px; }
.app-content { padding: 12px 12px 100px !important; }
.card { padding: 14px; border-radius: 12px; margin-bottom: 12px; }
.notif-panel { padding: 12px; border-radius: 12px; }
.empty-state { padding: 40px 16px; }
.empty-icon { font-size: 48px; }
.empty-text { font-size: 14px; }
}
@media (max-width: 1023px) {
.side-nav {
width: 280px;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 4px 0 24px rgba(0,0,0,0.15);
}
.side-nav.mobile-open {
transform: translateX(0);
display: flex !important;
}
.side-nav-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.45);
z-index: 150;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
animation: fadeIn 0.2s ease;
}
.side-nav.mobile-open ~ .side-nav-overlay { display: block; }
.mobile-toggle {
display: flex;
position: fixed;
top: 12px;
left: 12px;
z-index: 300;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--bg-card, rgba(255,255,255,0.9));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 0.5px solid var(--border-color, rgba(60,60,67,0.08));
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
font-size: 22px;
align-items: center;
justify-content: center;
}
.app-header {
padding: 12px 14px 12px 64px !important;
min-height: 56px;
}
.app-header-title {
font-size: 17px !important;
gap: 6px !important;
}
.app-header-right { gap: 6px; }
.app-header-btn { width: 40px; height: 40px; border-radius: 10px; font-size: 18px; }
.app-main { margin-left: 0; }
.mobile-tab-bar {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 200;
background: var(--bg-card, rgba(255,255,255,0.92));
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
border-top: 0.5px solid var(--border-color, rgba(60,60,67,0.08));
padding: 6px 0 calc(env(safe-area-inset-bottom, 8px) + 6px);
justify-content: space-around;
}
.mobile-tab-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 6px 12px;
font-size: 11px;
min-width: 56px;
min-height: 48px;
color: var(--text-tertiary, #8E8E93);
cursor: pointer;
transition: color 0.2s;
}
.mobile-tab-item.active { color: var(--primary, #007AFF); font-weight: 700; }
.tab-icon {
font-size: 22px;
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
}
.mobile-tab-item.active .tab-icon {
background: var(--primary, #007AFF);
color: #fff;
box-shadow: 0 3px 8px rgba(0,122,255,0.3);
}
}
@media (max-width: 767px) {
.app-header { padding: 10px 12px 10px 60px !important; min-height: 52px; }
.app-header-title { font-size: 16px !important; }
.app-header-btn { width: 44px; height: 44px; font-size: 19px; }
.mobile-toggle { top: 8px; left: 8px; width: 44px; height: 44px; font-size: 20px; }
.mobile-tab-item { font-size: 11px; padding: 6px 8px; min-width: 52px; min-height: 48px; }
.tab-icon { font-size: 20px; width: 28px; height: 28px; }
.app-footer { margin-bottom: 74px; }
}
@media (max-width: 767px) {
.modal-overlay {
padding: 0 !important;
align-items: flex-end !important;
background: rgba(0,0,0,0.5);
}
.modal-box {
width: 100% !important;
max-width: 100% !important;
max-height: 88vh !important;
border-radius: 18px 18px 0 0 !important;
animation: slideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.modal-header {
padding: 16px 18px;
min-height: 52px;
}
.modal-title { font-size: 17px; }
.modal-close { width: 40px; height: 40px; font-size: 18px; }
.modal-body { padding: 16px 18px; }
.modal-footer {
padding: 12px 18px calc(env(safe-area-inset-bottom, 8px) + 12px);
gap: 8px;
flex-wrap: wrap;
}
.modal-footer .btn { flex: 1 1 45%; min-width: 0; min-height: 44px; white-space: normal; line-height: 1.25; }
#genericModal .modal-footer { position: sticky; bottom: 0; background: var(--bg-secondary, #fff); }
}
@media (min-width: 768px) and (max-width: 1023px) {
.modal-box { width: 85%; max-width: 480px; }
}
@media (max-width: 1023px) {
.table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 12px;
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
}
.data-table {
min-width: 100%;
font-size: 13px;
}
.data-table th {
padding: 10px 12px;
font-size: 12px;
white-space: nowrap;
position: sticky;
top: 0;
z-index: 2;
}
.data-table td {
padding: 10px 12px;
font-size: 13px;
white-space: nowrap;
}
}
@media (max-width: 767px) {
.data-table th, .data-table td {
padding: 9px 10px;
font-size: 12.5px;
}
.data-table .btn {
padding: 9px 12px;
font-size: 13px;
min-height: 40px;
border-radius: 8px;
}
.data-table .btn-sm { padding: 9px 10px; font-size: 12.5px; min-height: 40px; }
}
@media (max-width: 1023px) {
.search-bar {
gap: 8px;
margin-bottom: 14px;
}
.search-input { flex: 1; min-width: 0; }
.search-select { min-width: 100px; }
}
@media (max-width: 767px) {
.search-bar {
flex-direction: column;
align-items: stretch;
}
.search-bar .search-input,
.search-bar .search-select,
.search-bar .btn {
width: 100%;
}
.search-bar .btn { justify-content: center; }
}
@media (max-width: 1023px) {
.tab-bar {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
gap: 2px;
padding: 4px;
border-radius: 12px;
margin-bottom: 14px;
flex-wrap: nowrap !important;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
flex-shrink: 0;
padding: 9px 16px;
font-size: 13px;
border-radius: 9px;
min-height: 40px;
white-space: nowrap;
}
}
@media (max-width: 767px) {
.tab-btn { padding: 11px 14px; font-size: 13px; min-height: 44px; }
}
@media (max-width: 1023px) {
.dg-5 { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.dg-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
.dg-3s { grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; }
.dg-2 { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.dg-21 { grid-template-columns: 1.5fr 1fr !important; gap: 10px !important; }
.dg-21b { grid-template-columns: 1.2fr 1fr !important; gap: 10px !important; }
.dg-3mix { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.dg-3mix > *:last-child { grid-column: span 2; }
.dg-3mixB { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.dg-3mixB > *:nth-child(2) { grid-column: span 2; }
.dg-4mix { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
.dg-4mix > *:first-child { grid-column: span 2; }
.dg-3k { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.dg-3q { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
.dg-4q { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
.dg-todo { grid-template-columns: 1fr !important; gap: 8px !important; }
.conduct-stats-7 { grid-template-columns: repeat(4, 1fr) !important; }
.archive-kpi-5 { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 767px) {
.dg-5 { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
.dg-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
.dg-3s { grid-template-columns: 1fr !important; gap: 10px !important; }
.dg-2 { grid-template-columns: 1fr !important; gap: 10px !important; }
.dg-21 { grid-template-columns: 1fr !important; gap: 10px !important; }
.dg-21b { grid-template-columns: 1fr !important; gap: 10px !important; }
.dg-3mix { grid-template-columns: 1fr !important; gap: 10px !important; }
.dg-3mix > *:last-child { grid-column: auto; }
.dg-3mixB { grid-template-columns: 1fr !important; gap: 10px !important; }
.dg-3mixB > *:nth-child(2) { grid-column: auto; }
.dg-4mix { grid-template-columns: 1fr !important; gap: 10px !important; }
.dg-4mix > *:first-child { grid-column: auto; }
.dg-3k { grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; }
.dg-3q { grid-template-columns: 1fr !important; gap: 8px !important; }
.dg-4q { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
.conduct-stats-7 { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }
.archive-kpi-5 { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
.stats-row, .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
.kpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
.notify-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
.conduct-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
}
@media (max-width: 1023px) {
[style*="grid-template-columns:repeat(5,1fr)"],
[style*="grid-template-columns: repeat(5, 1fr)"] {
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
}
[style*="grid-template-columns:repeat(4,1fr)"],
[style*="grid-template-columns: repeat(4, 1fr)"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
[style*="grid-template-columns:repeat(7,1fr)"],
[style*="grid-template-columns: repeat(7, 1fr)"] {
grid-template-columns: repeat(4, 1fr) !important;
gap: 5px !important;
}
[style*="grid-template-columns:repeat(3,1fr)"],
[style*="grid-template-columns: repeat(3, 1fr)"] {
gap: 8px !important;
}
[style*="grid-template-columns:2fr 1fr"],
[style*="grid-template-columns: 2fr 1fr"],
[style*="grid-template-columns:1.2fr 1fr"],
[style*="grid-template-columns: 1.2fr 1fr"],
[style*="grid-template-columns:1.5fr 1fr"],
[style*="grid-template-columns: 1.5fr 1fr"] {
gap: 10px !important;
}
[style*="grid-template-columns:1.2fr 1.5fr 0.8fr"],
[style*="grid-template-columns:1fr 1.3fr 1fr"],
[style*="grid-template-columns:1fr 1fr 1fr"] {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
[style*="grid-template-columns:1.2fr 1fr 1fr 1fr"] {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
}
@media (max-width: 767px) {
[style*="grid-template-columns:repeat(5,1fr)"],
[style*="grid-template-columns: repeat(5, 1fr)"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
}
[style*="grid-template-columns:repeat(4,1fr)"],
[style*="grid-template-columns: repeat(4, 1fr)"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 6px !important;
}
[style*="grid-template-columns:repeat(7,1fr)"],
[style*="grid-template-columns: repeat(7, 1fr)"] {
grid-template-columns: repeat(4, 1fr) !important;
gap: 4px !important;
}
[style*="grid-template-columns:repeat(3,1fr)"],
[style*="grid-template-columns: repeat(3, 1fr)"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
[style*="grid-template-columns:2fr 1fr"],
[style*="grid-template-columns: 2fr 1fr"],
[style*="grid-template-columns:1.2fr 1fr"],
[style*="grid-template-columns: 1.2fr 1fr"],
[style*="grid-template-columns:1.5fr 1fr"],
[style*="grid-template-columns: 1.5fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
[style*="grid-template-columns:1.2fr 1.5fr 0.8fr"],
[style*="grid-template-columns:1fr 1.3fr 1fr"],
[style*="grid-template-columns:1fr 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
[style*="grid-template-columns:1.2fr 1fr 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
[style*="grid-template-columns:1fr 1fr"][style*="margin-bottom:14px"],
[style*="grid-template-columns: 1fr 1fr"][style*="margin-bottom:14px"] {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
[style*="grid-template-columns:1fr 1fr"],
[style*="grid-template-columns: 1fr 1fr"] {
grid-template-columns: 1fr !important;
gap: 10px !important;
}
}
@media (max-width: 767px) {
.login-card {
width: 92vw;
max-width: 380px;
border-radius: 20px;
margin: 12px;
}
.login-card-header { padding: 28px 24px 20px; }
.login-card-body, .login-card-quick { padding-left: 24px; padding-right: 24px; }
.login-logo-img, .login-logo-fallback { width: 68px; height: 68px; }
.login-logo-fallback span { font-size: 28px; }
.login-title { font-size: 20px; }
.login-subtitle { font-size: 13px; }
.login-field { padding: 0 14px; margin-bottom: 14px; border-radius: 12px; }
.login-field-icon { font-size: 17px; }
.login-input { padding: 16px 0; font-size: 16px; }
.login-btn { padding: 15px; font-size: 17px; border-radius: 12px; letter-spacing: 1px; }
.login-quick-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.login-quick-item { padding: 10px 6px; border-radius: 10px; }
.lqi-role { font-size: 12px; }
.lqi-user { font-size: 11px; }
.login-footer { font-size: 11px; padding: 12px 24px 18px; }
}
@media (max-width: 1023px) {
.greeting-bar {
padding: 16px 18px;
border-radius: 14px;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 8px;
}
.greet-msg { font-size: 16px; }
.greet-quote { font-size: 12px; }
.greet-info { font-size: 12px; text-align: left; }
}
@media (max-width: 767px) {
.greeting-bar {
padding: 14px 16px;
border-radius: 12px;
margin-bottom: 12px;
}
.greet-msg { font-size: 15px; line-height: 1.4; }
.greet-quote { font-size: 11.5px; margin-top: 4px; }
.greet-info { font-size: 11px; width: 100%; text-align: left; opacity: 0.85; }
}
@media (max-width: 1023px) {
.conduct-stats-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-bottom: 10px;
}
.conduct-stats-row > div {
padding: 8px 4px !important;
border-radius: 10px !important;
}
.conduct-stats-row > div > div:first-child {
font-size: 17px !important;
}
.conduct-stats-row > div > div:last-child {
font-size: 11px !important;
}
.conduct-rank-bar { grid-template-columns: 1fr 1fr; gap: 8px; }
.conduct-student-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--bg-card, rgba(255,255,255,0.8));
border: 0.5px solid var(--border-color, rgba(60,60,67,0.06));
border-radius: 12px;
margin-bottom: 8px;
}
}
@media (max-width: 767px) {
.conduct-stats-row {
grid-template-columns: repeat(4, 1fr);
gap: 4px;
}
.conduct-stats-row > div {
padding: 6px 2px !important;
border-radius: 8px !important;
}
.conduct-stats-row > div > div:first-child {
font-size: 15px !important;
}
.conduct-stats-row > div > div:last-child {
font-size: 10.5px !important;
}
.conduct-rank-bar { grid-template-columns: 1fr; gap: 6px; }
.conduct-rank-bar > div { padding: 8px 12px !important; font-size: 11px !important; }
}
@media (max-width: 1023px) {
.eval-type-row { flex-direction: column; gap: 10px !important; }
.eval-type-card { flex: 1 1 100% !important; }
.eval-day-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
.eval-category-card { padding: 14px; border-radius: 14px; }
}
@media (max-width: 767px) {
.eval-item { padding: 10px 12px; border-radius: 10px; }
.eval-item-name { font-size: 12px; min-width: 60px; }
.eval-item-score { font-size: 15px; min-width: 32px; }
.score-slider input[type="range"]::-webkit-slider-thumb { width: 24px; height: 24px; }
}
@media (max-width: 1023px) {
.notif-item {
padding: 12px;
border-radius: 10px;
margin-bottom: 6px;
}
.notif-title { font-size: 14px; }
.notif-snippet { font-size: 13px; margin-top: 2px; }
.notif-time { font-size: 11px; margin-top: 2px; }
}
@media (max-width: 767px) {
.notif-panel { padding: 12px; border-radius: 12px; }
.notif-item { padding: 10px; border-radius: 10px; }
.notif-title { font-size: 13.5px; }
.notif-snippet { font-size: 12.5px; }
}
@media (max-width: 1023px) {
.system-maintenance-tabs {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
flex-wrap: nowrap !important;
scrollbar-width: none;
}
.system-maintenance-tabs::-webkit-scrollbar { display: none; }
.system-maintenance-tabs .tab-btn { flex-shrink: 0; }
}
@media (max-width: 767px) {
.system-maintenance-form .form-row {
grid-template-columns: 1fr !important;
}
.system-maintenance .table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 1023px) {
.score-card {
padding: 12px;
border-radius: 12px;
margin-bottom: 8px;
}
.score-card .sc-score { width: 44px; height: 44px; font-size: 16px; }
.score-card .sc-name { font-size: 14px; }
.score-card .sc-detail { font-size: 11px; }
.warning-list-item { padding: 10px 12px; gap: 10px; }
.warning-score { width: 44px; height: 44px; font-size: 14px; }
.warning-name { font-size: 14px; }
.warning-class, .warning-reason { font-size: 12px; }
.rank-item { padding: 10px 12px; border-radius: 10px; }
.rank-num { width: 26px; height: 26px; font-size: 11px; }
.activity-bar { padding: 10px 0; gap: 10px; font-size: 13px; }
.activity-time { min-width: 70px; font-size: 12px; }
.log-item { padding: 10px 0; gap: 10px; font-size: 12.5px; }
.log-time { min-width: 100px; font-size: 12px; }
}
@media (max-width: 767px) {
.score-card .sc-score { width: 40px; height: 40px; font-size: 15px; }
.warning-score { width: 40px; height: 40px; font-size: 13px; }
.activity-time { min-width: 60px; font-size: 11px; }
.log-time { min-width: 80px; font-size: 11px; }
.log-action { min-width: 70px; font-size: 12px; }
}
@media (max-width: 767px) {
.pagination {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
padding: 10px 0;
}
.pagination button {
min-width: 36px;
min-height: 36px;
padding: 6px 10px;
font-size: 13px;
border-radius: 8px;
}
.pagination .page-info {
width: 100%;
text-align: center;
font-size: 12px;
color: var(--text-tertiary, #8E8E93);
margin-top: 6px;
}
}
@media (max-width: 767px) {
.app-toast {
top: auto !important;
bottom: calc(70px + env(safe-area-inset-bottom, 10px));
left: 12px !important;
right: 12px !important;
max-width: none !important;
text-align: center;
font-size: 14px;
padding: 12px 18px;
border-radius: 12px;
animation: toastSlideUp 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes toastSlideUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.app-toast.hiding {
animation: toastSlideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes toastSlideDown {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(20px); }
}
}
@media (max-width: 1023px) {
.cs-header { padding: 10px 14px; }
.cs-title { font-size: 18px; }
.cs-time { font-size: 13px; }
.cs-kpi-bar {
grid-template-columns: repeat(4, 1fr);
gap: 6px;
padding: 10px 14px;
}
.cs-kpi-item { padding: 8px 6px; }
.cs-kpi-icon { font-size: 18px; }
.cs-kpi-value { font-size: 20px; }
.cs-kpi-label { font-size: 11px; }
.cs-body {
grid-template-columns: 1fr;
gap: 10px;
padding: 10px 14px;
}
.cs-class-grid {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.cs-class-card { padding: 12px 8px; }
.cs-class-score { font-size: 26px; }
.cs-class-name { font-size: 12px; }
.cs-exit {
bottom: 16px;
right: 16px;
padding: 10px 16px;
font-size: 13px;
}
}
@media (max-width: 640px) {
.cs-kpi-bar { grid-template-columns: repeat(2, 1fr); }
.cs-class-grid { grid-template-columns: repeat(2, 1fr); }
.cs-kpi-value { font-size: 18px; }
.cs-class-score { font-size: 22px; }
.cs-title { font-size: 16px; }
}
@media (max-width: 1023px) {
.chart-container,
[class*="chart"] {
width: 100% !important;
max-width: 100% !important;
overflow: hidden;
}
canvas {
max-width: 100% !important;
height: auto !important;
}
}
@media (max-width: 767px) {
.photo-upload-area { gap: 8px; }
.photo-thumb, .photo-add {
width: 70px;
height: 70px;
border-radius: 10px;
}
}
@media (max-width: 767px) {
.avatar { width: 34px; height: 34px; font-size: 13px; }
.avatar-lg { width: 44px; height: 44px; font-size: 17px; }
.avatar-sm { width: 26px; height: 26px; font-size: 10px; }
}
@supports (padding: env(safe-area-inset-top)) {
@media (max-width: 1023px) {
.app-header {
padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
}
.mobile-toggle {
top: calc(12px + env(safe-area-inset-top, 0px));
}
}
}
@media (max-width: 1023px) and (orientation: landscape) {
.app-content { padding-bottom: 70px; }
.modal-box { max-height: 85vh; }
.login-card { max-width: 360px; }
.login-card-header { padding: 20px 24px 14px; }
.login-logo-img, .login-logo-fallback { width: 56px; height: 56px; }
}
@media print {
.mobile-toggle, .mobile-tab-bar, .side-nav-overlay { display: none !important; }
.app-main { margin-left: 0 !important; }
.app-content { padding: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (max-width: 1023px) {
[style*="grid-template-columns:repeat(6,1fr)"],
[style*="grid-template-columns: repeat(6, 1fr)"] {
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
}
}
@media (max-width: 767px) {
[style*="grid-template-columns:repeat(6,1fr)"],
[style*="grid-template-columns: repeat(6, 1fr)"] {
grid-template-columns: repeat(2, 1fr) !important;
gap: 8px !important;
}
[style*="grid-template-columns:3fr 2fr"],
[style*="grid-template-columns: 3fr 2fr"] {
grid-template-columns: 1fr !important;
gap: 6px !important;
}
.conduct-filter-bar {
flex-direction: column;
align-items: stretch;
}
.conduct-filter-bar > input,
.conduct-filter-bar > select,
.conduct-filter-bar > div,
.conduct-filter-bar > .btn {
width: 100% !important;
min-width: 0 !important;
}
.conduct-filter-bar > span {
width: auto !important;
align-self: flex-start;
}
}
@supports (height: 100dvh) {
.modal-box {
max-height: min(88vh, calc(100dvh - 24px)) !important;
}
}
@media (max-width: 767px) {
button[style*="height:32px"], button[style*="height:33px"], button[style*="height:34px"],
button[style*="height:35px"], button[style*="height:36px"], button[style*="height:37px"],
button[style*="height:38px"],
input[style*="height:32px"], input[style*="height:33px"], input[style*="height:34px"],
input[style*="height:35px"], input[style*="height:36px"], input[style*="height:37px"],
input[style*="height:38px"],
select[style*="height:32px"], select[style*="height:33px"], select[style*="height:34px"],
select[style*="height:35px"], select[style*="height:36px"], select[style*="height:37px"],
select[style*="height:38px"] {
min-height: 40px !important;
}
[style*="font-size:9px"], [style*="font-size: 9px"] {
font-size: 11px !important;
}
[style*="font-size:10px"], [style*="font-size: 10px"] {
font-size: 11px !important;
}
.cs-flow-cell, .cs-flow-cell span, .cs-flow-cell b, .cs-flow-cell i {
font-size: 11px !important;
}
.cs-kpi-sub, .cs-badge-uneval, .cs-src, .cs-log-time, .cs-dim, .nq-dot {
font-size: 11px !important;
}
}
@media (max-width: 767px) {
input[type="checkbox"] {
min-width: 24px;
min-height: 24px;
}
}
@media (max-width: 319px) {
.app-content {
overflow-x: auto;
}
.cs-left, .cs-right, .cs-event-stream {
width: auto;
min-width: 0;
flex-shrink: 1;
}
}
@media (max-width: 767px) {
.r189-cards {
overflow-x: visible;
border-radius: 0;
-webkit-mask-image: none !important;
mask-image: none !important;
}
.r189-cards .data-table {
min-width: 0;
width: 100%;
}
.r189-cards .data-table thead {
display: none;
}
.r189-cards .data-table,
.r189-cards .data-table tbody,
.r189-cards .data-table tr {
display: block;
}
.r189-cards .data-table tbody tr {
border: 0.5px solid var(--border-color, rgba(60, 60, 67, 0.14));
border-radius: 12px;
background: var(--bg-secondary, #fff);
padding: 8px 10px;
margin-bottom: 10px;
}
.r189-cards .data-table td {
display: block;
padding: 3px 0;
font-size: 13px;
white-space: normal !important;
max-width: none !important;
overflow: visible !important;
text-overflow: clip !important;
}
.r189-cards .data-table td::before {
font-size: 12px;
color: var(--text-tertiary, #8E8E93);
font-weight: 600;
margin-right: 6px;
}
.r189-cards .data-table td[colspan]::before {
content: none;
}
.r189-cards .data-table td[colspan] {
text-align: center;
}
.r189-cards .data-table td:last-child {
text-align: right;
}
.r189-cards .data-table .btn,
.r189-cards .data-table .btn-xs {
padding: 10px 14px !important;
min-height: 44px;
font-size: 13px !important;
}
.r189-cards .data-table td [onclick]:not(.btn) {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
min-width: 44px;
padding: 0 12px;
}
.cc-cards .data-table td:nth-child(1)::before { content: "时间"; }
.cc-cards .data-table td:nth-child(2)::before { content: "班级"; }
.cc-cards .data-table td:nth-child(3)::before { content: "节次"; }
.cc-cards .data-table td:nth-child(4)::before { content: "课程"; }
.cc-cards .data-table td:nth-child(5)::before { content: "授课教师"; }
.cc-cards .data-table td:nth-child(6)::before { content: "评级"; }
.cc-cards .data-table td:nth-child(7)::before { content: "课堂情况"; }
.cc-cards .data-table td:nth-child(8)::before { content: "学生问题"; }
.cc-cards .data-table td:nth-child(9)::before { content: "查课人"; }
.hv-cards .data-table td:nth-child(1)::before { content: "日期"; }
.hv-cards .data-table td:nth-child(2)::before { content: "学生"; }
.hv-cards .data-table td:nth-child(3)::before { content: "班级"; }
.hv-cards .data-table td:nth-child(4)::before { content: "类型"; }
.hv-cards .data-table td:nth-child(5)::before { content: "内容"; }
.hv-cards .data-table td:nth-child(6)::before { content: "家长"; }
.hv-cards .data-table td:nth-child(7)::before { content: "教师"; }
.hv-cards .data-table td:nth-child(8)::before { content: "照片"; }
.hv-cards .data-table td:nth-child(9)::before { content: "操作"; }
.modal-body select.form-input,
.modal-body select.search-select {
min-height: 44px;
}
.modal-body .rating-option {
min-height: 44px;
padding: 10px 4px !important;
}
.sa-kpi {
grid-template-columns: repeat(5, 1fr) !important;
gap: 5px !important;
}
.sa-kpi > div {
padding: 7px 2px !important;
}
.sa-kpi > div > div:first-child {
font-size: 18px !important;
}
.sa-kpi > div > div:last-child {
font-size: 11px !important;
}
.sa-actions {
display: flex;
flex-direction: row !important;
flex-wrap: wrap;
gap: 6px;
}
.sa-actions .search-select,
.sa-actions input.form-input {
flex: 1 1 45%;
width: auto !important;
min-width: 0;
}
.sa-actions .btn {
flex: 1 1 30%;
width: auto !important;
min-width: 0;
justify-content: center;
}
}
@media (max-width: 767px) {
.tab-bar {
flex-wrap: wrap !important;
overflow-x: visible;
}
.tab-bar.tab-bar-scroll {
flex-wrap: nowrap !important;
overflow-x: auto;
scrollbar-width: thin;
-ms-overflow-style: auto;
}
.tab-bar.tab-bar-scroll::-webkit-scrollbar { display: block; height: 4px; }
button[style*="min-width:36px"], button[style*="min-width: 36px"] {
min-width: 44px !important;
}
}
@media (min-width:1024px) and (hover:none) and (pointer:coarse) {
.side-nav { transform: translateX(-100%); width: 300px; }
.side-nav.mobile-open { transform: translateX(0); display: flex !important; }
.side-nav-overlay { display: none; }
.side-nav.mobile-open ~ .side-nav-overlay { display: block; }
.app-main { margin-left: 0; }
.app-content { padding: 20px 18px calc(96px + env(safe-area-inset-bottom, 0px)); }
.app-header { padding: 14px 18px 14px 68px; }
.mobile-toggle { display: flex !important; }
.mobile-tab-bar { display: flex !important; }
.hide-mobile { display: block; }
.modal-box { width: 88%; max-width: 760px; }
.btn, .btn-primary, .btn-outline, .form-input { min-height: 44px; }
.mobile-tab-item { padding: 8px 18px; }
.modal-body { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 1023px) {
.tab-icon { font-size: 26px !important; }
.tab-icon svg { width: 26px !important; height: 26px !important; }
.mobile-tab-item.active .tab-icon {
background: rgba(var(--primary-rgb, 37, 99, 235), .14) !important;
color: inherit !important;
box-shadow: none !important;
}
.mobile-tab-item { font-size: 12.5px; }
.nav-icon svg { width: 21px !important; height: 21px !important; }
}
@media (max-width: 767px) {
html { font-size: 16px; }
body { line-height: 1.6; }
.page-title { font-size: 22px !important; }
.form-label { font-size: 15px; }
.modal-title { font-size: 18px; }
.btn { font-size: 16px; min-height: 46px; }
.btn-sm { font-size: 14px; min-height: 42px; }
.btn-xs { font-size: 13.5px; min-height: 42px; }
.tab-btn { font-size: 14.5px !important; min-height: 46px !important; padding: 12px 16px !important; }
.form-input, .search-input, .search-select { font-size: 16px; }
.data-table th { font-size: 13.5px; }
.data-table td { font-size: 14px; }
.r189-cards .data-table td { font-size: 14px; }
.r189-cards .data-table td::before { font-size: 13px; }
.mobile-tab-item { font-size: 13px; min-height: 58px; }
.tab-icon { font-size: 28px !important; width: 38px !important; height: 38px !important; }
.tab-icon svg { width: 28px !important; height: 28px !important; }
.mobile-tab-item.active .tab-icon {
background: rgba(var(--primary-rgb, 37, 99, 235), .14) !important;
color: inherit !important;
box-shadow: none !important;
}
.app-content { padding-bottom: 118px !important; }
.app-footer { margin-bottom: 88px; }
.app-toast { bottom: calc(88px + env(safe-area-inset-bottom, 10px)); font-size: 15px; line-height: 1.45; }
.app-header { min-height: 58px; }
.app-header-title { font-size: 18px !important; }
.app-header-btn { width: 48px !important; height: 48px !important; font-size: 23px !important; }
.mobile-toggle { width: 48px !important; height: 48px !important; font-size: 24px !important; }
.modal-close { width: 46px; height: 46px; font-size: 22px; }
.nav-item { font-size: 16px; padding: 13px 18px; }
.nav-group { font-size: 13px; }
.nav-icon { font-size: 22px; width: 34px; height: 34px; }
.nav-icon svg { width: 22px !important; height: 22px !important; }
.nav-user { font-size: 14px; }
.nav-user strong { font-size: 15px; }
.nav-logout { font-size: 15px; padding: 12px; }
[style*="font-size:9px"],    [style*="font-size: 9px"]    { font-size: 12px !important; }
[style*="font-size:10px"],   [style*="font-size: 10px"]   { font-size: 12.5px !important; }
[style*="font-size:11px"],   [style*="font-size: 11px"]   { font-size: 13px !important; }
[style*="font-size:12px"],   [style*="font-size: 12px"]   { font-size: 13.5px !important; }
[style*="font-size:12.5px"], [style*="font-size: 12.5px"] { font-size: 14px !important; }
[style*="font-size:13px"],   [style*="font-size: 13px"]   { font-size: 14.5px !important; }
[style*="font-size:14px"],   [style*="font-size: 14px"]   { font-size: 15px !important; }
[style*="font-size:18px"],   [style*="font-size: 18px"]   { font-size: 20px !important; }
[style*="font-size:20px"],   [style*="font-size: 20px"]   { font-size: 22px !important; }
[style*="font-size:22px"],   [style*="font-size: 22px"]   { font-size: 26px !important; }
[style*="font-size:24px"],   [style*="font-size: 24px"]   { font-size: 30px !important; }
[style*="font-size:26px"],   [style*="font-size: 26px"]   { font-size: 30px !important; }
[style*="font-size:28px"],   [style*="font-size: 28px"]   { font-size: 34px !important; }
button[style*="min-width:52px"], button[style*="min-width: 52px"] {
min-width: 62px !important;
min-height: 46px !important;
font-size: 15px !important;
}
.conduct-stats-row > div > div:first-child { font-size: 18px !important; }
.conduct-stats-row > div > div:last-child  { font-size: 12.5px !important; }
.sa-kpi > div > div:first-child { font-size: 21px !important; }
.sa-kpi > div > div:last-child  { font-size: 12.5px !important; }
.empty-icon { font-size: 56px; }
.empty-text { font-size: 15px; }
.notif-title { font-size: 15px; }
.notif-snippet { font-size: 14px; }
.notif-time { font-size: 12.5px; }
.greet-msg { font-size: 17px; }
.greet-quote { font-size: 13px; }
.greet-info { font-size: 12.5px; }
.pagination button { min-width: 44px; min-height: 44px; font-size: 14px; }
.avatar { width: 38px; height: 38px; font-size: 15px; }
.avatar-lg { width: 50px; height: 50px; font-size: 19px; }
.avatar-sm { width: 30px; height: 30px; font-size: 12px; }
.score-card .sc-score { width: 46px; height: 46px; font-size: 17px; }
.warning-score { width: 46px; height: 46px; font-size: 15px; }
.cs-kpi-sub, .cs-badge-uneval, .cs-src, .cs-log-time, .cs-dim, .nq-dot { font-size: 12.5px !important; }
.cs-flow-cell, .cs-flow-cell span, .cs-flow-cell b, .cs-flow-cell i { font-size: 12.5px !important; }
}
@media (min-width: 1024px) and (hover: none) and (pointer: coarse) {
.tab-icon { font-size: 26px !important; }
.tab-icon svg { width: 26px !important; height: 26px !important; }
.mobile-tab-item { font-size: 12.5px; }
.mobile-tab-item.active .tab-icon {
background: rgba(var(--primary-rgb, 37, 99, 235), .14) !important;
color: inherit !important;
box-shadow: none !important;
}
.nav-icon svg { width: 21px !important; height: 21px !important; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) {
.mobile-tab-item { font-size: 13px; min-height: 52px; }
.tab-icon { font-size: 28px !important; width: 38px !important; height: 38px !important; }
.tab-icon svg { width: 28px !important; height: 28px !important; }
.mobile-tab-item.active .tab-icon { background: rgba(var(--primary-rgb, 37, 99, 235), .14) !important; color: inherit !important; box-shadow: none !important; }
.btn { font-size: 16px; min-height: 46px; }
.btn-sm { font-size: 14px; min-height: 42px; }
.btn-xs { font-size: 13.5px; min-height: 42px; }
.form-input, .search-input, .search-select { font-size: 16px; min-height: 44px; }
.form-label { font-size: 15px; }
.modal-title { font-size: 18px; }
.modal-close { width: 46px; height: 46px; font-size: 22px; }
.app-header-btn { width: 46px !important; height: 46px !important; font-size: 22px !important; }
.mobile-toggle { width: 46px !important; height: 46px !important; font-size: 22px !important; left: calc(8px + env(safe-area-inset-left, 0px)); }
.nav-item { font-size: 16px; padding: 13px 18px; }
.nav-icon svg { width: 22px !important; height: 22px !important; }
.data-table th { font-size: 13.5px; }
.data-table td { font-size: 14px; }
.pagination button { min-width: 44px; min-height: 44px; font-size: 14px; }
[style*="font-size:9px"], [style*="font-size: 9px"] { font-size: 12px !important; }
[style*="font-size:10px"], [style*="font-size: 10px"] { font-size: 12.5px !important; }
[style*="font-size:11px"], [style*="font-size: 11px"] { font-size: 13px !important; }
[style*="font-size:12px"], [style*="font-size: 12px"] { font-size: 13.5px !important; }
[style*="font-size:13px"], [style*="font-size: 13px"] { font-size: 14.5px !important; }
[style*="font-size:14px"], [style*="font-size: 14px"] { font-size: 15px !important; }
button[style*="height:32px"], button[style*="height:33px"], button[style*="height:34px"],
button[style*="height:35px"], button[style*="height:36px"], button[style*="height:37px"],
button[style*="height:38px"] { min-height: 44px !important; }
.app-header { padding-left: calc(64px + env(safe-area-inset-left, 0px)) !important; }
.app-content { padding-left: calc(16px + env(safe-area-inset-left, 0px)); padding-right: calc(16px + env(safe-area-inset-right, 0px)); }
.mobile-tab-bar { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
}
@media (max-width: 1023px) {
button, a, label, select, summary,
.btn, .tab-btn, .nav-item, .mobile-tab-item, .chip,
.app-header-btn, .mobile-toggle, .modal-close, .stepper button,
[onclick], [role="button"] {
touch-action: manipulation;
}
input, textarea { touch-action: manipulation; }
button, .btn, .tab-btn, .nav-item, .mobile-tab-item, .app-header-btn,
.mobile-toggle, .modal-close, .stepper button {
-webkit-user-select: none; -moz-user-select: none; user-select: none;
-webkit-touch-callout: none;
}
.side-nav, .modal-body { overscroll-behavior: contain; }
.table-wrap, .tab-bar, .cs-bottom { overscroll-behavior-x: contain; }
.side-nav-overlay { touch-action: none; }
.side-nav { will-change: transform; }
.ce-photo-add { min-width: 44px !important; min-height: 44px !important; }
}
@media (hover: none) {
.nav-item:active { background: rgba(255,255,255,.12); color: #fff; }
.nav-logout:active { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.tab-icon { transition: transform .12s ease; }
.mobile-tab-item:active .tab-icon { transform: scale(.86); }
.tab-btn:active { background: var(--bg-secondary,#fff); }
.app-header-btn:active, .mobile-toggle:active, .modal-close:active { background: rgba(0,0,0,.07); }
.notif-item:active, .rank-item:active, .log-item:active, .activity-bar:active { background: rgba(0,0,0,.05); }
.score-card:active, .warning-list-item:active, .eval-item:active { background: rgba(0,0,0,.04); }
.login-quick-item:active { border-color: var(--primary,#2563EB); background: var(--bg-tertiary,#f0f7ff); }
.chip:active { opacity: .75; }
.card[onclick]:active, .kpi-card[onclick]:active { transform: scale(.995); }
}
@media (max-width: 360px) {
.app-content { padding-left: 10px !important; padding-right: 10px !important; }
.card { padding: 12px; border-radius: 12px; }
.notif-panel { padding: 10px; }
.mobile-tab-item { min-width: 44px; padding: 6px 4px; }
.mobile-toggle { left: 6px; }
.app-header { padding-left: 56px !important; }
.sa-kpi, .conduct-stats-row { gap: 3px !important; }
.dg-4q, .dg-5, .dg-4 { gap: 5px !important; }
}
@media (min-width: 1024px) and (hover: none) and (pointer: coarse) {
button, a, label, select, summary,
.btn, .tab-btn, .nav-item, .mobile-tab-item, .chip,
.app-header-btn, .mobile-toggle, .modal-close, .stepper button,
[onclick], [role="button"] { touch-action: manipulation; }
button, .btn, .tab-btn, .nav-item, .mobile-tab-item, .app-header-btn,
.mobile-toggle, .modal-close {
-webkit-user-select: none; -moz-user-select: none; user-select: none;
-webkit-touch-callout: none;
}
.side-nav, .modal-body { overscroll-behavior: contain; }
.table-wrap, .tab-bar { overscroll-behavior-x: contain; }
.nav-item:active { background: rgba(255,255,255,.12); color: #fff; }
.tab-icon { transition: transform .12s ease; }
.mobile-tab-item:active .tab-icon { transform: scale(.86); }
.ce-photo-add { min-width: 44px !important; min-height: 44px !important; }
[style*="font-size:9px"],    [style*="font-size: 9px"]    { font-size: 12px !important; }
[style*="font-size:10px"],   [style*="font-size: 10px"]   { font-size: 12.5px !important; }
[style*="font-size:11px"],   [style*="font-size: 11px"]   { font-size: 13px !important; }
[style*="font-size:12px"],   [style*="font-size: 12px"]   { font-size: 13.5px !important; }
[style*="font-size:12.5px"], [style*="font-size: 12.5px"] { font-size: 14px !important; }
[style*="font-size:13px"],   [style*="font-size: 13px"]   { font-size: 14.5px !important; }
[style*="font-size:14px"],   [style*="font-size: 14px"]   { font-size: 15px !important; }
}