.consultation-page { min-height: 100vh; background: #f0f4f8; } .tabs { display: flex; background: #fff; padding: 0 16px; border-bottom: 1px solid #e2e8f0; } .tab { flex: 1; text-align: center; padding: 24px 0; font-size: 28px; color: #64748b; position: relative; &--active { color: #0891b2; font-weight: 600; &::after { content: ''; position: absolute; bottom: 0; left: 30%; right: 30%; height: 4px; background: #0891b2; border-radius: 2px; } } } .session-list { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; } .session-card { background: #fff; border-radius: 16px; padding: 28px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); position: relative; &:active { background: #f8fafc; } &__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } &__subject { font-size: 28px; font-weight: 600; color: #0f172a; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 16px; } &__status { padding: 4px 14px; border-radius: 12px; flex-shrink: 0; } &__status-text { font-size: 22px; font-weight: 500; } &__info { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; } &__type { font-size: 24px; color: #0891b2; background: #e0f2fe; padding: 2px 12px; border-radius: 8px; } &__time { font-size: 24px; color: #94a3b8; } &__preview { font-size: 26px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } &__badge { position: absolute; top: 20px; right: 20px; min-width: 36px; height: 36px; background: #ef4444; border-radius: 18px; display: flex; align-items: center; justify-content: center; padding: 0 8px; } &__badge-text { font-size: 22px; color: #fff; font-weight: 600; } } .pagination { display: flex; justify-content: center; align-items: center; gap: 24px; padding: 24px; &__btn { font-size: 26px; color: #0891b2; padding: 12px 24px; &.disabled { color: #cbd5e1; } } &__info { font-size: 24px; color: #64748b; } }