.search-row { display: grid; grid-template-columns: minmax(0, 1fr) 88rpx; gap: 16rpx; margin-top: 34rpx; } .search-box { display: flex; flex: 1; align-items: center; min-width: 0; height: 88rpx; padding: 0 24rpx; border: 1rpx solid transparent; border-radius: 16rpx; background: #f1f3f6; } .search-icon { flex: none; margin-right: 14rpx; } .search-input { flex: 1; min-width: 0; color: #1c1c1e; font-size: 28rpx; } .search-placeholder { color: #8e8e93; } .filter-button { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 88rpx; min-width: 88rpx; max-width: 88rpx; height: 88rpx; margin: 0; padding: 0; border: 1rpx solid transparent; border-radius: 16rpx; background: #f1f3f6; color: #6e6e73; line-height: 1; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); } .filter-button-active { border-color: #b8d9ff; background: #eaf3ff; color: #007aff; } .filter-button:active { transform: scale(0.96); } .filter-icon { display: flex; flex-direction: column; justify-content: space-between; width: 34rpx; height: 30rpx; } .filter-icon-line { position: relative; width: 34rpx; height: 3rpx; border-radius: 2rpx; background: currentColor; } .filter-icon-line::after { position: absolute; top: -4rpx; width: 10rpx; height: 10rpx; border: 3rpx solid currentColor; border-radius: 50%; background: #f1f3f6; content: ''; } .filter-button-active .filter-icon-line::after { background: #eaf3ff; } .filter-icon-line-first::after, .filter-icon-line-third::after { left: 5rpx; } .filter-icon-line-second::after { right: 5rpx; } .filter-count { position: absolute; top: 8rpx; right: 8rpx; display: flex; align-items: center; justify-content: center; min-width: 28rpx; height: 28rpx; padding: 0 5rpx; box-sizing: border-box; border: 3rpx solid #f1f3f6; border-radius: 14rpx; background: #007aff; color: #ffffff; font-size: 18rpx; font-weight: 700; line-height: 1; } .filter-button-active .filter-count { border-color: #eaf3ff; } .filter-panel { margin-top: 16rpx; padding: 24rpx; } .filter-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx; } .filter-title { color: #1c1c1e; font-size: 30rpx; font-weight: 700; } .filter-clear { color: #007aff; font-size: 26rpx; } .filter-label { display: block; margin: 16rpx 0 12rpx; color: #6e6e73; font-size: 24rpx; } .filter-options { display: flex; flex-wrap: wrap; gap: 12rpx; } .filter-chip { padding: 10rpx 18rpx; border: 1rpx solid #e5e5ea; border-radius: 10rpx; background: #f1f3f6; color: #3a3a3c; font-size: 24rpx; line-height: 1.2; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); } .filter-chip-active { border-color: #b8d9ff; background: #eaf3ff; color: #007aff; } .filter-chip:active { transform: scale(0.97); } .archive-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 264rpx; align-items: center; gap: 20rpx; margin-top: 22rpx; padding: 18rpx 0 4rpx; } .toolbar-copy { flex: 1; min-width: 0; } .toolbar-title { display: block; color: #1c1c1e; font-size: 29rpx; font-weight: 800; } .toolbar-updated { display: block; margin-top: 5rpx; color: #6e6e73; font-size: 22rpx; line-height: 1.4; } .toolbar-actions { display: grid; grid-template-columns: 62rpx 190rpx; align-items: center; width: 264rpx; min-width: 264rpx; max-width: 264rpx; gap: 12rpx; } .refresh-button { flex: none; display: flex; align-items: center; justify-content: center; width: 62rpx; min-width: 62rpx; max-width: 62rpx; height: 62rpx; margin: 0; padding: 0; border: 0; border-radius: 12rpx; background: #f1f3f6; color: #007aff; font-size: 36rpx; line-height: 1; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); } .refresh-button:active { transform: scale(0.94); background: #e5e5ea; } .new-student-button { display: flex; flex: none; align-items: center; justify-content: center; width: 190rpx; min-width: 190rpx; max-width: 190rpx; height: 62rpx; margin: 0; padding: 0 18rpx; border: 0; border-radius: 12rpx; background: #007aff; color: #ffffff; font-size: 26rpx; font-weight: 700; line-height: 1; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); } .new-student-button:active { transform: scale(0.97); background: #006ee6; } .new-student-icon { margin-right: 6rpx; font-size: 30rpx; } .empty-state { display: flex; flex-direction: column; align-items: center; margin-top: 28rpx; padding: 70rpx 36rpx; border: 2rpx dashed #c7ddeb; border-radius: 16rpx; text-align: center; } .compact-empty { padding: 54rpx 36rpx; } .empty-icon { color: #007aff; font-size: 54rpx; line-height: 1; } .empty-title { margin-top: 18rpx; color: #1c1c1e; font-size: 36rpx; font-weight: 800; } .empty-description { margin-top: 14rpx; color: #6e6e73; font-size: 28rpx; } .create-empty-button { width: 360rpx; margin-top: 34rpx; } .clear-search-button { width: 300rpx; margin-top: 30rpx; } .profile-list { display: flex; flex-direction: column; gap: 18rpx; margin-top: 22rpx; } .profile-card { overflow: hidden; padding: 0; } .profile-summary { padding: 24rpx; transition: opacity 140ms cubic-bezier(0.23, 1, 0.32, 1); } .profile-summary:active { opacity: 0.72; } .profile-card-top, .profile-time-row { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; } .profile-card-actions { display: flex; flex: none; align-items: center; gap: 4rpx; } .profile-name { display: block; color: #1c1c1e; font-size: 34rpx; font-weight: 800; } .profile-guardian { display: block; margin-top: 8rpx; color: #6e6e73; font-size: 24rpx; } .profile-menu-button { display: flex; align-items: center; justify-content: center; width: 56rpx; min-width: 56rpx; max-width: 56rpx; height: 56rpx; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #6e6e73; font-size: 25rpx; line-height: 1; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); } .profile-menu-button:active { transform: scale(0.94); background: #f1f3f6; } .profile-chevron { width: 24rpx; color: #8e8e93; font-size: 40rpx; line-height: 1; text-align: center; transform: rotate(0deg); transition: transform 180ms cubic-bezier(0.23, 1, 0.32, 1); } .profile-chevron-expanded { transform: rotate(90deg); } .profile-tags { display: flex; flex-wrap: wrap; gap: 10rpx; margin-top: 22rpx; } .profile-tag { padding: 8rpx 12rpx; border-radius: 8rpx; background: #f1f3f6; color: #3a3a3c; font-size: 22rpx; line-height: 1.2; } .profile-time-row { margin-top: 20rpx; padding-top: 18rpx; border-top: 1rpx solid #e5e5ea; } .profile-time-label { color: #6e6e73; font-size: 24rpx; } .profile-time-value { color: #1c1c1e; font-size: 26rpx; font-weight: 700; } .profile-feedback-panel { padding: 20rpx 24rpx 24rpx; border-top: 1rpx solid #e5e5ea; background: #fbfcfe; } .profile-feedback-heading { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; } .profile-feedback-title { color: #1c1c1e; font-size: 25rpx; font-weight: 700; } .profile-feedback-count, .profile-feedback-status { color: #6e6e73; font-size: 22rpx; } .profile-feedback-status { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; min-height: 64rpx; padding-top: 14rpx; } .profile-feedback-error { color: #d13f3a; } .profile-feedback-retry { flex: none; padding: 10rpx 0 10rpx 18rpx; color: #007aff; font-weight: 700; } .recent-feedback-list { margin-top: 10rpx; } .recent-feedback-item { padding: 14rpx 0; } .recent-feedback-item + .recent-feedback-item { border-top: 1rpx solid #e5e5ea; } .recent-feedback-date, .recent-feedback-content { display: block; } .recent-feedback-date { color: #6e6e73; font-size: 21rpx; } .recent-feedback-content { display: -webkit-box; margin-top: 6rpx; overflow: hidden; color: #3a3a3c; font-size: 24rpx; line-height: 1.55; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .sheet-mask { position: fixed; z-index: 200; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: flex-end; padding: 16rpx; background: rgba(244, 247, 251, 0.82); -webkit-backdrop-filter: blur(10rpx) saturate(110%); backdrop-filter: blur(10rpx) saturate(110%); } .create-sheet { width: 100%; height: auto; max-height: 88vh; overflow: hidden; display: flex; flex-direction: column; border: 1rpx solid rgba(255, 255, 255, 0.72); border-radius: 16rpx; background: #ffffff; box-shadow: 0 24rpx 56rpx rgba(28, 28, 30, 0.24); } .sheet-top { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 16rpx; padding: 24rpx 24rpx 18rpx; border-bottom: 1rpx solid #e5e5ea; background: #ffffff; } .sheet-top > view { flex: 1; min-width: 0; } .sheet-title-row { display: flex; align-items: center; gap: 10rpx; } .sheet-title { color: #1c1c1e; font-size: 34rpx; font-weight: 800; } .sheet-subtitle { display: block; margin-top: 12rpx; color: #6e6e73; font-size: 24rpx; } .sheet-actions { display: flex; flex: none; align-items: center; gap: 12rpx; } .defaults-link { flex: none; padding: 10rpx 0; color: #007aff; font-size: 24rpx; font-weight: 700; line-height: 1.2; white-space: nowrap; } .sheet-close { display: flex; flex: none; align-items: center; justify-content: center; width: 56rpx; min-width: 56rpx; max-width: 56rpx; height: 56rpx; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #f1f3f6; color: #6e6e73; font-size: 38rpx; font-weight: 400; line-height: 1; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); } .sheet-close:active { transform: scale(0.94); background: #e5e5ea; } .sheet-scroll { flex: none; height: auto; min-height: 0; max-height: calc(88vh - 236rpx); width: 100%; padding: 0; box-sizing: border-box; } .sheet-form { width: 100%; padding: 16rpx 24rpx 16rpx; box-sizing: border-box; } .form-grid { display: flex; flex-wrap: wrap; gap: 12rpx; margin-top: 12rpx; } .form-grid .form-field { flex: 1 1 0; width: auto; min-width: 0; } picker.form-field { box-sizing: border-box; } .form-field { min-height: 108rpx; padding: 16rpx; border: 1rpx solid #e5e5ea; border-radius: 14rpx; background: #f1f3f6; } .full-field { min-height: 112rpx; } .form-label { display: block; color: #6e6e73; font-size: 24rpx; font-weight: 700; } .form-value { display: block; margin-top: 14rpx; color: #1c1c1e; font-size: 28rpx; font-weight: 700; } .form-input { width: 100%; height: 48rpx; margin-top: 10rpx; color: #1c1c1e; font-size: 28rpx; font-weight: 600; } .guardian-field { margin-top: 12rpx; } .bottom-grid { margin-bottom: 16rpx; } .sheet-footer { flex: none; display: flex; gap: 16rpx; padding: 18rpx 24rpx calc(18rpx + env(safe-area-inset-bottom)); border-top: 1rpx solid #e5e5ea; background: #ffffff; } .sheet-cancel, .sheet-save { flex: 1; } @media (prefers-reduced-motion: reduce) { .filter-button, .filter-chip, .refresh-button, .new-student-button, .profile-summary, .profile-menu-button, .profile-chevron, .sheet-close { transition: none; } .filter-button:active, .filter-chip:active, .refresh-button:active, .new-student-button:active, .profile-menu-button:active, .sheet-close:active { transform: none; } .profile-summary:active { opacity: 1; } } @media (prefers-reduced-transparency: reduce) { .sheet-mask { background: rgba(244, 247, 251, 0.96); -webkit-backdrop-filter: none; backdrop-filter: none; } }